/* ========================================================================== Aldecort · Calendarización de obras (pantalla /obras) Prefijo obras- para las piezas de la pantalla y obra- para los estados de alerta (TextosObras: obra-vencida, obra-aviso, obra-curso, obra-completa y obra-sinhitos). Los colores salen de los tokens --obra-* de tokens.css. Se carga detrás de css/crm.css: reutiliza .crm-page, .crm-panel, .crm-barra y .crm-aviso. 1. Estados de alerta (chips de la tarjeta, la leyenda y el Gantt) 2. Filtros y leyenda 3. Estados de la pantalla: vacío 4. Kanban: columnas y tarjetas 5. Arrastrar y soltar (crm-dnd.js, VistaKanban y TarjetaObra) 6. Gantt (VistaGantt y crm-obras.js) ========================================================================== */ /* ── 1. Estados de alerta ───────────────────────────────────────────────── */ /* Cada clase fija dos colores: --obra-color (bordes, rombos, iconos: no es texto) y --obra-relleno (fondo bajo texto blanco, AA). En curso es el único que los separa: #0085BD de marca solo para lo que no es texto, #0079AD de relleno. */ .obra-vencida { --obra-color: var(--obra-vencida); --obra-relleno: var(--obra-vencida); } .obra-aviso { --obra-color: var(--obra-aviso); --obra-relleno: var(--obra-aviso); } .obra-curso { --obra-color: var(--obra-curso); --obra-relleno: var(--obra-curso-relleno); } .obra-completa { --obra-color: var(--obra-completa); --obra-relleno: var(--obra-completa); } .obra-sinhitos { --obra-color: var(--obra-sinhitos); --obra-relleno: var(--obra-sinhitos); } /* Chip de estado: icono + texto en blanco sobre el relleno (siempre con texto: el color nunca va solo). Borde transparente: en modo de alto contraste el navegador lo pinta y el chip se sigue distinguiendo. */ .obras-chip { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; padding: 0.125rem 0.5rem; border: 1px solid transparent; border-radius: 9999px; background: var(--obra-relleno, var(--obra-sinhitos)); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .obras-chip > i { font-size: 0.75rem; } /* ── 2. Filtros y leyenda ───────────────────────────────────────────────── */ /* Los tres filtros en una fila que baja de línea si no caben; la búsqueda, más ancha. «Quitar filtros», al final. */ .obras-filtros { margin-bottom: 1rem; } .obras-filtros-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; } .obras-filtro { flex: 1 1 11rem; min-width: 0; } .obras-filtro--texto { flex: 2 1 16rem; } .obras-filtro .form-label { margin-bottom: 0.25rem; } /* tokens.css deja .form-select con 0.75rem a la derecha: se recupera el hueco de la flecha (como .crm-campo). */ .obras-filtro .form-select { padding-right: 2.25rem; } .obras-filtros-quitar { flex: 0 0 auto; } .obras-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; } /* El título de la leyenda va en línea con los chips: sin el margen inferior de .crm-panel-titulo. */ .obras-leyenda .obras-leyenda-titulo { margin: 0; } .obras-leyenda-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .obras-leyenda-hoy { margin: 0 0 0 auto; font-size: 0.8125rem; color: var(--color-muted-foreground); } /* ── 3. Estados de la pantalla: vacío ───────────────────────────────────── */ /* Sin obras o sin ninguna que cumpla los filtros: una tarjeta centrada con su icono, el texto y la acción. */ .obras-vacio { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2.5rem 1rem; text-align: center; background: var(--color-card); border: 1px dashed var(--color-input); border-radius: var(--radius-lg); } .obras-vacio-icono { font-size: 1.75rem; color: var(--crm-brand-500, #0085BD); } .obras-vacio-titulo { margin: 0; font-weight: 600; } .obras-vacio .btn-outline-secondary > i { color: var(--color-primary); } /* ── 4. Kanban: columnas y tarjetas ─────────────────────────────────────── */ /* Dos columnas; por debajo de 768 px, apiladas. */ .obras-kanban { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } @media (max-width: 767.98px) { .obras-kanban { grid-template-columns: minmax(0, 1fr); } } .obras-columna { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; min-height: 8rem; padding: 0.75rem; background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .obras-columna-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } /* h2 de la columna, como título de tarjeta: 0,1,0 pisa el h2 de tokens.css. */ .obras-columna-titulo { margin: 0; font-size: 0.875rem; font-weight: 600; } .obras-contador { min-width: 1.75rem; padding: 0.0625rem 0.5rem; border-radius: 9999px; text-align: center; background: var(--color-card); border: 1px solid var(--color-border); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* En tinta navy: el gris de metadatos no llega a AA sobre el gris piedra de la columna. */ .obras-columna-vacia { margin: 0; padding: 1rem 0.5rem; text-align: center; font-size: 0.8125rem; color: var(--color-foreground); } .obras-columna-lista { display: flex; flex-direction: column; gap: 0.5rem; } /* Tarjeta: blanca, con una franja izquierda del color de su estado (además del chip con texto). El control principal ocupa todo menos el hueco del menú «⋯», arriba a la derecha. */ .obras-tarjeta { position: relative; display: flex; align-items: flex-start; gap: 0.25rem; min-width: 0; background: var(--color-card); border: 1px solid var(--color-border); border-left: 4px solid var(--obra-color, var(--obra-sinhitos)); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .obras-tarjeta[draggable="true"] { cursor: grab; } .obras-tarjeta-principal { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: 1 1 auto; min-width: 0; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); cursor: pointer; font-size: 0.8125rem; line-height: 1.35; } /* Hover con sombra y no con fondo: el gris de los datos (4,8:1 sobre blanco) no llega a AA sobre el azul 50. */ .obras-tarjeta:hover { box-shadow: var(--shadow-float); } .obras-tarjeta-principal:focus-visible { outline: none; box-shadow: var(--focus-ring); } .obras-tarjeta-nombre { max-width: 100%; font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; } .obras-tarjeta-linea { display: flex; align-items: center; gap: 0.375rem; max-width: 100%; min-width: 0; color: var(--color-muted-foreground); } .obras-tarjeta-linea > i { flex: 0 0 auto; font-size: 0.75rem; } .obras-tarjeta-texto { min-width: 0; overflow-wrap: anywhere; } .obras-tarjeta-vence { color: var(--color-foreground); font-weight: 500; } /* Progreso «2/4 hitos» con su barra (azul de marca: no es texto). */ .obras-tarjeta-progreso { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .obras-progreso-texto { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .obras-progreso { flex: 1 1 auto; height: 0.375rem; overflow: hidden; border-radius: 9999px; background: var(--color-muted); } .obras-progreso-barra { display: block; height: 100%; background: var(--crm-brand-500, #0085BD); } /* Menú «⋯» (SfDropDownButton sin flecha): botón cuadrado discreto. */ .obras-tarjeta .obras-tarjeta-menu.e-btn { flex: 0 0 auto; width: 2rem; height: 2rem; min-width: 0; margin: 0.375rem 0.375rem 0 0; padding: 0; background: transparent; border-color: transparent; box-shadow: none; color: var(--color-muted-foreground); } .obras-tarjeta .obras-tarjeta-menu.e-btn:hover { background: var(--color-muted); color: var(--color-foreground); } .obras-tarjeta .obras-tarjeta-menu.e-btn:focus-visible { box-shadow: var(--focus-ring); } /* ── 5. Arrastrar y soltar ──────────────────────────────────────────────── */ /* Mientras se arrastra una tarjeta, crm-dnd.js pone crm-arrastrando en .obras-kanban y data-crm-arrastrada en la tarjeta (un instante después del dragstart; los quita en dragend, drop y pagehide), como en el calendario de oportunidades: - Nada de lo que hay dentro de una columna recibe el puntero: dragenter y dragleave salen solo de las columnas. - La columna bajo el cursor (obras-columna--sobre: EstadoArrastreKanban.ColumnaSobre) lleva un borde discontinuo de 2 px en el azul 600 y el fondo azul 50: no solo color (WCAG 1.4.1). - La tarjeta que se arrastra, al 70 %. */ .crm-arrastrando .obras-columna * { pointer-events: none; } .crm-arrastrando .obras-columna.obras-columna--sobre { outline: 2px dashed var(--crm-brand-600, #0079AD); outline-offset: -3px; background: var(--crm-brand-50, #F0FAFF); } .crm-arrastrando .obras-tarjeta[data-crm-arrastrada] { opacity: 0.7; } @media (forced-colors: active) { .obras-tarjeta { border-left-width: 4px; } .obras-progreso { border: 1px solid CanvasText; } .obras-progreso-barra { background: Highlight; } } /* ── 6. Gantt ───────────────────────────────────────────────────────────── */ /* VistaGantt pone dos medidas en línea: --obras-gantt-dia (el ancho de un día según el zoom) y --obras-gantt-ancho (el de toda la línea de tiempo). La columna de nombres (--obras-gantt-col) va fija a la izquierda dentro del mismo contenedor con desplazamiento horizontal; crm-obras.js la mide para centrar hoy en lo que queda a su derecha. */ .obras-gantt { --obras-gantt-col: 14rem; --obras-gantt-alto: 2.75rem; } @media (max-width: 575.98px) { .obras-gantt { --obras-gantt-col: 8.5rem; } } .obras-gantt-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; } .obras-gantt-herramientas .btn-outline-secondary > i { color: var(--color-primary); } .obras-gantt-scroll { overflow-x: auto; overflow-y: hidden; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); /* Al enfocar una barra con Tab, el navegador la desplaza hasta dejarla a la vista a la derecha de la columna fija. */ scroll-padding-left: var(--obras-gantt-col); } .obras-gantt-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); } .obras-gantt-tabla { width: calc(var(--obras-gantt-col) + var(--obras-gantt-ancho)); min-width: 100%; } .obras-gantt-filas { margin: 0; padding: 0; list-style: none; } .obras-gantt-fila { display: flex; border-bottom: 1px solid var(--color-border); } .obras-gantt-filas > .obras-gantt-fila:last-child { border-bottom: 0; } /* Columna fija: nombre de la obra (una línea, con puntos suspensivos y el nombre entero en el title) y su etapa. Fondo opaco: la línea de tiempo pasa por debajo al desplazarla. */ .obras-gantt-nombre { position: sticky; left: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; flex: 0 0 var(--obras-gantt-col); width: var(--obras-gantt-col); min-width: 0; padding: 0.375rem 0.75rem; background: var(--color-card); border-right: 1px solid var(--color-border); } .obras-gantt-nombre--cabecera { justify-content: flex-end; font-size: 0.75rem; font-weight: 600; color: var(--color-muted-foreground); } .obras-gantt-obra { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; } .obras-gantt-etapa { font-size: 0.75rem; color: var(--color-muted-foreground); } /* Línea de tiempo de una fila: una raya fina cada semana (con obras, el rango empieza en lunes: GeometriaGantt.Rango, que incluye también los rombos de los hitos). Se recorta por si algo sobresale de los extremos. */ .obras-gantt-linea { position: relative; flex: 0 0 var(--obras-gantt-ancho); width: var(--obras-gantt-ancho); min-height: var(--obras-gantt-alto); overflow: hidden; background-image: repeating-linear-gradient(to right, var(--color-border) 0 1px, transparent 1px calc(var(--obras-gantt-dia) * 7)); } /* Cabecera: meses y, en zoom Semanas, los números de día (lunes con su raya, fin de semana en gris, hoy resaltado). */ .obras-gantt-cabecera .obras-gantt-linea { background-image: none; } .obras-gantt-meses { display: flex; height: 1.75rem; } .obras-gantt-mes { flex: 0 0 auto; min-width: 0; overflow: hidden; border-left: 1px solid var(--color-border); } .obras-gantt-mes:first-child { border-left: 0; } .obras-gantt-mes-texto { display: block; padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 600; line-height: 1.75rem; } .obras-gantt-dias { display: flex; height: 1.5rem; border-top: 1px solid var(--color-border); } .obras-gantt-dia { flex: 0 0 var(--obras-gantt-dia); width: var(--obras-gantt-dia); text-align: center; font-size: 0.6875rem; line-height: 1.5rem; font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); } .obras-gantt-dia--lunes { box-shadow: inset 1px 0 0 var(--color-border); } /* En tinta navy: el gris de metadatos no llega a AA sobre el gris piedra. */ .obras-gantt-dia--finde { background: var(--color-muted); color: var(--color-foreground); } .obras-gantt-dia--hoy { background: var(--obra-curso-relleno); color: #fff; font-weight: 600; } /* Línea de hoy: por encima de las barras, sin recibir el puntero. */ .obras-gantt-hoy { position: absolute; top: 0; bottom: 0; z-index: 3; width: 2px; margin-left: -1px; pointer-events: none; background: var(--color-foreground); } /* Barra de una obra (un