/* =============================================================================
   COLORGRAMA DE SECCIONES — ANEXO DE EVENTO (OSGO)

   Mismo tratamiento que orden-servicio-secciones.css: cada sección top-level
   del formulario de Eventos gana un contorno propio (borde izquierdo de acento,
   banda de encabezado teñida, anillo teñido y título/ícono en color), porque
   en modo claro el borde por defecto de Filament casi no se distinguía.

   - Anclado a los id de cada Section (->id('ev-...') en AnexoEventoResource),
     así NO afecta a otros recursos. Se usa `>` para el header directo.
   - --sec = acento claro (RGB, nivel ~700 de Tailwind); --sec-dark = ~400.
   - Cargado en el panel vía renderHook en OsgoPanelProvider.
   ============================================================================= */

#ev-vinculacion    { --sec:   3 105 161; --sec-dark:  56 189 248; } /* sky     */
#ev-ficha          { --sec: 109  40 217; --sec-dark: 167 139 250; } /* violet  */
#ev-antecedentes   { --sec:  14 116 144; --sec-dark:  34 211 238; } /* cyan    */
#ev-detalles       { --sec:   4 120  87; --sec-dark:  52 211 153; } /* emerald */
#ev-rutagrama      { --sec:  15 118 110; --sec-dark:  45 212 191; } /* teal    */
#ev-distributivo   { --sec: 180  83   9; --sec-dark: 251 191  36; } /* amber   */
#ev-siguiente-paso { --sec:  71  85 105; --sec-dark: 148 163 184; } /* slate   */

/* ---- Contenedor de la sección: borde de acento + anillo teñido ---- */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso) > .fi-section {
    border-left: 4px solid rgb(var(--sec));
    --tw-ring-color: rgb(var(--sec) / 0.30);
}

/* ---- Encabezado: banda teñida con el color de la sección ---- */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section > header.fi-section-header {
    background-color: rgb(var(--sec) / 0.07);
    border-bottom: 1px solid rgb(var(--sec) / 0.22);
    border-top-left-radius: calc(0.75rem - 2px);
    border-top-right-radius: calc(0.75rem - 2px);
}

/* Colapsada: el header es todo lo visible — redondear también abajo */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso) > .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
    border-bottom-left-radius: calc(0.75rem - 2px);
    border-bottom-right-radius: calc(0.75rem - 2px);
}

/* ---- Título e ícono en el color de la sección ---- */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec));
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec));
}

/* =============================================================================
   SUBSECCIONES / FIELDSETS / REPEATERS — heredan el color del padre (--sec se
   hereda por el DOM) en versión más suave, para distinguir qué pertenece a qué.
   ============================================================================= */

/* ---- Subsecciones y fieldsets anidados (ej. "Cronograma") ---- */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section :is(.fi-section, .fi-fieldset) {
    border-left: 3px solid rgb(var(--sec) / 0.50);
    --tw-ring-color: rgb(var(--sec) / 0.18);
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section > header.fi-section-header {
    background-color: rgb(var(--sec) / 0.04);
    border-bottom: 1px solid rgb(var(--sec) / 0.15);
    border-top-left-radius: calc(0.75rem - 2px);
    border-top-right-radius: calc(0.75rem - 2px);
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
    border-bottom-left-radius: calc(0.75rem - 2px);
    border-bottom-right-radius: calc(0.75rem - 2px);
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec) / 0.85);
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec) / 0.70);
}

/* Leyenda del fieldset (ej. "Cronograma") en el color de la sección */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fieldset > legend {
    color: rgb(var(--sec) / 0.85);
}

/* ---- Ítems de Repeater (puntos de servicio, asignaciones): trazo sutil ---- */
:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item {
    border-left: 3px solid rgb(var(--sec) / 0.30);
    --tw-ring-color: rgb(var(--sec) / 0.22);
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    background-color: rgb(var(--sec) / 0.03);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item.fi-collapsed > .fi-fo-repeater-item-header {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

:is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item > .fi-fo-repeater-item-header > .fi-fo-repeater-item-header-label {
    color: rgb(var(--sec));
}

/* =============================================================================
   MODO OSCURO — acentos más claros (nivel 400) y tintes de baja opacidad
   ============================================================================= */

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso) > .fi-section {
    border-left-color: rgb(var(--sec-dark));
    --tw-ring-color: rgb(var(--sec-dark) / 0.35);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section > header.fi-section-header {
    background-color: rgb(var(--sec-dark) / 0.10);
    border-bottom-color: rgb(var(--sec-dark) / 0.25);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso) > .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > header .fi-section-header-heading,
.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec-dark));
}

/* ---- Oscuro: subsecciones / fieldsets ---- */
.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section :is(.fi-section, .fi-fieldset) {
    border-left-color: rgb(var(--sec-dark) / 0.55);
    --tw-ring-color: rgb(var(--sec-dark) / 0.22);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section > header.fi-section-header {
    background-color: rgb(var(--sec-dark) / 0.06);
    border-bottom-color: rgb(var(--sec-dark) / 0.18);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec-dark) / 0.90);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    > .fi-section .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec-dark) / 0.75);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fieldset > legend {
    color: rgb(var(--sec-dark) / 0.90);
}

/* ---- Oscuro: ítems de repeater ---- */
.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item {
    border-left-color: rgb(var(--sec-dark) / 0.40);
    --tw-ring-color: rgb(var(--sec-dark) / 0.25);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    background-color: rgb(var(--sec-dark) / 0.05);
}

.dark :is(#ev-vinculacion, #ev-ficha, #ev-antecedentes, #ev-detalles, #ev-rutagrama, #ev-distributivo, #ev-siguiente-paso)
    .fi-fo-repeater-item > .fi-fo-repeater-item-header > .fi-fo-repeater-item-header-label {
    color: rgb(var(--sec-dark));
}

/* =============================================================================
   ESTILOS PROPIOS DEL FORMULARIO (ev-*)

   IMPORTANTE: este panel NO compila un Tailwind propio — solo se sirve el CSS
   que trae Filament. Las utilidades sueltas puestas en `extraAttributes()`
   (bg-amber-100, rounded-xl, text-justify, text-lg…) NO existen en el CSS
   servido y por eso no pintaban nada. Todo realce del formulario de Eventos
   vive aquí, en CSS plano, anclado a clases con prefijo `ev-`.
   ============================================================================= */

/* ---- Nombre del evento: es el titular del documento ---- */
.ev-campo-titular input {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---- Texto de antecedentes ya redactado (modo lectura) ---- */
.ev-texto-final {
    display: block;
    padding: 1rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background-color: rgb(255 255 255);
    color: rgb(15 23 42);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
    text-wrap: pretty;
}

/* ---- Caja del generador de antecedentes ---- */
.ev-generador {
    display: block;
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid rgb(253 230 138);
    border-radius: 0.75rem;
    background-color: rgb(255 251 235);
}

/* ---- Vista previa del texto que se va a generar ---- */
.ev-texto-preview {
    display: block;
    padding: 1rem;
    border-left: 4px solid rgb(245 158 11);
    border-radius: 0.5rem;
    background-color: rgb(254 243 199);
    color: rgb(69 26 3);
    font-style: italic;
    line-height: 1.6;
    text-align: justify;
    text-wrap: pretty;
}

/* ---- Aviso informativo (sección "Siguiente paso") ---- */
.ev-aviso {
    display: block;
    padding: 0.875rem 1rem;
    border-left: 4px solid rgb(100 116 139);
    border-radius: 0.5rem;
    background-color: rgb(248 250 252);
    color: rgb(51 65 85);
    line-height: 1.6;
}

/* =============================================================================
   BARRA DE ACCIONES DEL FORMULARIO — NO estilizar el contenedor

   Aquí hubo un pie "sticky" con backdrop-filter. Se retiró porque rompía el
   botón flotante: un ancestro con `position: sticky`, `backdrop-filter` o
   `transform` crea un CONTAINING BLOCK, y entonces el `position: fixed` de
   "Guardar Progreso" se posiciona respecto a esa caja en vez del viewport —
   el botón quedaba encajonado al final del formulario en lugar de flotar.
   La Orden de Servicio funciona precisamente porque NO envuelve sus acciones.
   ============================================================================= */

/* =============================================================================
   MODO OSCURO — estilos propios
   ============================================================================= */

.dark .ev-texto-final {
    border-color: rgb(51 65 85);
    background-color: rgb(30 41 59);
    color: rgb(241 245 249);
}

.dark .ev-generador {
    border-color: rgb(120 53 15);
    background-color: rgb(69 26 3 / 0.35);
}

.dark .ev-texto-preview {
    border-left-color: rgb(251 191 36);
    background-color: rgb(120 53 15 / 0.35);
    color: rgb(254 243 199);
}

.dark .ev-aviso {
    border-left-color: rgb(148 163 184);
    background-color: rgb(30 41 59);
    color: rgb(203 213 225);
}


/* =============================================================================
   VISTA DE DETALLE — tabla del distributivo

   Sustituye al RepeatableEntry en columna (una tarjeta por asignación, que con
   16 detalles daba un scroll interminable). Agrupada por punto de control.
   ============================================================================= */

.ev-dist-scroll {
    overflow-x: auto;          /* la tabla scrollea sola; la página nunca */
    width: 100%;
}

.ev-dist-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ev-dist-tabla thead th {
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid rgb(226 232 240);
    color: rgb(71 85 105);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
    white-space: nowrap;
}

.ev-dist-tabla tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgb(241 245 249);
    vertical-align: top;
}

/* Cabecera de grupo: el punto de control, una sola vez por ubicación */
.ev-dist-tabla tr.ev-dist-grupo th {
    padding: 0.6rem 0.75rem;
    background-color: rgb(255 251 235);
    border-top: 1px solid rgb(253 230 138);
    border-bottom: 1px solid rgb(253 230 138);
    color: rgb(146 64 14);
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
}

.ev-dist-conteo {
    margin-left: 0.5rem;
    color: rgb(180 83 9);
    font-weight: 500;
    font-size: 0.8rem;
    white-space: nowrap;
}

.ev-dist-nombre { font-weight: 600; min-width: 16rem; }
.ev-dist-rol    { color: rgb(100 116 139); white-space: nowrap; }
.ev-dist-recurso{ color: rgb(51 65 85); }
.ev-dist-vacio  { color: rgb(100 116 139); font-style: italic; }

/* ---- Oscuro ---- */
.dark .ev-dist-tabla thead th {
    border-bottom-color: rgb(51 65 85);
    color: rgb(148 163 184);
}

.dark .ev-dist-tabla tbody td {
    border-bottom-color: rgb(30 41 59);
}

.dark .ev-dist-tabla tr.ev-dist-grupo th {
    background-color: rgb(69 26 3 / 0.45);
    border-top-color: rgb(120 53 15);
    border-bottom-color: rgb(120 53 15);
    color: rgb(253 230 138);
}

.dark .ev-dist-conteo  { color: rgb(251 191 36); }
.dark .ev-dist-rol     { color: rgb(148 163 184); }
.dark .ev-dist-recurso { color: rgb(203 213 225); }
.dark .ev-dist-vacio   { color: rgb(148 163 184); }

/* =============================================================================
   DISTRIBUTIVO — rejilla de puntos de servicio

   Los puntos se muestran en 2-3 columnas. Por defecto CSS Grid estira todos los
   ítems de una fila al alto del más alto: un punto con 10 asignaciones dejaba a
   sus vecinos con un enorme hueco vacío debajo (la "desproporción").
   `align-items: start` hace que cada tarjeta conserve su alto natural.
   ============================================================================= */

#ev-distributivo .fi-fo-repeater > .fi-grid,
#ev-distributivo .fi-fo-repeater-items {
    align-items: start;
}

/* =============================================================================
   "Disposiciones Operativas" (generarDisposiciones / generarResumenMedios)

   Mismo motivo que el resto del archivo: las clases Tailwind sueltas
   (bg-gray-50, text-primary-600, grid-cols-1 md:grid-cols-2, bg-blue-50...)
   no están en el CSS compilado del panel, así que salían como texto plano
   sin tarjetas ni color.
   ============================================================================= */

.ev-disposiciones {
    font-size: 0.875rem;
    color: rgb(75 85 99);
    background-color: rgb(0 0 0 / 0.03);
    border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ev-disposiciones ul {
    list-style: disc;
    list-style-position: inside;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ev-accent-label {
    color: rgb(var(--primary-600));
}

.dark .ev-disposiciones {
    color: rgb(209 213 219);
    background-color: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.10);
}

.dark .ev-accent-label {
    color: rgb(var(--primary-400));
}

.ev-resumen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .ev-resumen-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ev-resumen-card {
    border: 1px solid rgb(0 0 0 / 0.10);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.ev-resumen-card h4 {
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.ev-resumen-card ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ev-resumen-card--blue {
    background-color: rgb(219 234 254 / 0.6);
}
.ev-resumen-card--blue h4 {
    color: rgb(30 64 175);
}

.ev-resumen-card--amber {
    background-color: rgb(254 243 199 / 0.6);
}
.ev-resumen-card--amber h4 {
    color: rgb(146 64 14);
}

.dark .ev-resumen-card {
    border-color: rgb(255 255 255 / 0.12);
}

.dark .ev-resumen-card--blue {
    background-color: rgb(30 58 138 / 0.25);
}
.dark .ev-resumen-card--blue h4 {
    color: rgb(147 197 253);
}

.dark .ev-resumen-card--amber {
    background-color: rgb(120 53 15 / 0.25);
}
.dark .ev-resumen-card--amber h4 {
    color: rgb(252 211 77);
}