/* =============================================================================
   COLORGRAMA DE SECCIONES — ANEXO DE UNIDAD EDUCATIVA (OSGO)

   Mismo tratamiento que anexo-evento-secciones.css / orden-servicio-secciones.css:
   cada sección top-level del formulario de Unidades Educativas 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 y las cajas no se observaban bien.

   - Anclado a los id de cada Section (->id('ue-...') en AnexoUnidadEducativaResource),
     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.
   ============================================================================= */

#ue-vinculacion    { --sec:   3 105 161; --sec-dark:  56 189 248; } /* sky     */
#ue-supervisores   { --sec: 109  40 217; --sec-dark: 167 139 250; } /* violet  */
#ue-distributivo   { --sec: 180  83   9; --sec-dark: 251 191  36; } /* amber   */
#ue-siguiente-paso { --sec:  71  85 105; --sec-dark: 148 163 184; } /* slate   */

/* ---- Contenedor de la sección: borde de acento + anillo teñido ---- */
:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec));
}

:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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 ---- */
:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > .fi-section .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec) / 0.85);
}

:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > .fi-section .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec) / 0.70);
}

/* Leyenda del fieldset en el color de la sección */
:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    .fi-fieldset > legend {
    color: rgb(var(--sec) / 0.85);
}

/* ---- Ítems de Repeater (supervisores, grupos, circuitos, puntos): trazo sutil ---- */
:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    .fi-fo-repeater-item {
    border-left: 3px solid rgb(var(--sec) / 0.30);
    --tw-ring-color: rgb(var(--sec) / 0.22);
}

:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    .fi-fo-repeater-item.fi-collapsed > .fi-fo-repeater-item-header {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

:is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso) > .fi-section {
    border-left-color: rgb(var(--sec-dark));
    --tw-ring-color: rgb(var(--sec-dark) / 0.35);
}

.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso) > .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
}

.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > header .fi-section-header-heading,
.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec-dark));
}

/* ---- Oscuro: subsecciones / fieldsets ---- */
.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > .fi-section .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
}

.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    > .fi-section .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec-dark) / 0.90);
}

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

.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    .fi-fieldset > legend {
    color: rgb(var(--sec-dark) / 0.90);
}

/* ---- Oscuro: ítems de repeater ---- */
.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-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(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    background-color: rgb(var(--sec-dark) / 0.05);
}

.dark :is(#ue-vinculacion, #ue-supervisores, #ue-distributivo, #ue-siguiente-paso)
    .fi-fo-repeater-item > .fi-fo-repeater-item-header > .fi-fo-repeater-item-header-label {
    color: rgb(var(--sec-dark));
}

/* =============================================================================
   VISTA "Ver Anexo UE" (ViewAnexoUnidadEducativa) — tablas de Supervisores y
   Distributivo de Personal. Mismo motivo que el resto del archivo: las clases
   Tailwind escritas a mano (bg-blue-50, divide-gray-200, px-4 py-3...) no están
   en el CSS compilado del panel, así que las tarjetas/tablas salían sin bordes,
   sin cabecera de color y sin badges — solo texto plano.
   ============================================================================= */

.ue-view-empty {
    font-size: 0.875rem;
    font-style: italic;
    color: rgb(107 114 128);
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgb(0 0 0 / 0.03);
    border: 1px solid rgb(0 0 0 / 0.08);
}

.ue-view-card {
    width: 100%;
    border: 1px solid rgb(0 0 0 / 0.10);
    border-radius: 0.5rem;
    overflow: hidden;
}

.ue-view-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.10);
}

.ue-view-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.ue-view-card-header--violet {
    background-color: rgb(109 40 217 / 0.08);
}
.ue-view-card-header--violet h3 {
    color: rgb(109 40 217);
}

.ue-view-card-header--blue {
    background-color: rgb(29 78 216 / 0.08);
}
.ue-view-card-header--blue h3 {
    color: rgb(29 78 216);
}

.ue-view-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ue-view-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ue-view-th {
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(107 114 128);
    background-color: rgb(0 0 0 / 0.03);
    border-bottom: 1px solid rgb(0 0 0 / 0.10);
    white-space: nowrap;
}

.ue-view-table tbody tr {
    border-bottom: 1px solid rgb(0 0 0 / 0.06);
}

.ue-view-table tbody tr:last-child {
    border-bottom: none;
}

.ue-view-table tbody tr:hover {
    background-color: rgb(0 0 0 / 0.03);
}

.ue-view-td {
    padding: 0.6rem 0.9rem;
    vertical-align: top;
}

.ue-dist-td-wrap {
    word-wrap: break-word;
    white-space: normal;
}

.ue-view-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.ue-view-persona {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.ue-view-avatar {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: rgb(0 0 0 / 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ue-view-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ue-view-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.25rem;
    background-color: rgb(219 234 254);
    color: rgb(30 64 175);
    border: 1px solid rgb(191 219 254);
}

.ue-view-sin-asignar {
    font-size: 0.75rem;
    font-style: italic;
    color: rgb(156 163 175);
}

/* ---- Distributivo: niveles Grupo → Circuito → Subcircuito ---- */
.ue-dist-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ue-dist-grupo-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ue-dist-circuito {
    border-left: 4px solid rgb(99 102 241);
    padding-left: 1rem;
}

.ue-dist-circuito h4 {
    font-weight: 600;
    color: rgb(67 56 202);
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.ue-dist-sub {
    margin: 0 0 1.5rem 1rem;
    padding-left: 1rem;
    border-left: 2px solid rgb(0 0 0 / 0.12);
}

.ue-dist-sub:last-child {
    margin-bottom: 0;
}

.ue-dist-sub-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: rgb(55 65 81);
    margin: 0 0 0.5rem 0;
}

.ue-dist-sub-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    background-color: rgb(0 0 0 / 0.05);
    border: 1px solid rgb(0 0 0 / 0.10);
}

.ue-dist-agentes {
    font-size: 0.8rem;
}

.ue-dist-turno {
    font-weight: 500;
    white-space: nowrap;
}

.ue-dist-turno-1 {
    color: rgb(5 150 105);
}

.ue-dist-turno-2 {
    color: rgb(37 99 235);
}

/* ---- Modo oscuro ---- */
.dark .ue-view-empty {
    color: rgb(156 163 175);
    background-color: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.10);
}

.dark .ue-view-card {
    border-color: rgb(255 255 255 / 0.14);
}

.dark .ue-view-card-header {
    border-bottom-color: rgb(255 255 255 / 0.12);
}

.dark .ue-view-card-header--violet {
    background-color: rgb(167 139 250 / 0.12);
}
.dark .ue-view-card-header--violet h3 {
    color: rgb(196 181 253);
}

.dark .ue-view-card-header--blue {
    background-color: rgb(96 165 250 / 0.12);
}
.dark .ue-view-card-header--blue h3 {
    color: rgb(147 197 253);
}

.dark .ue-view-th {
    color: rgb(209 213 219);
    background-color: rgb(255 255 255 / 0.04);
    border-bottom-color: rgb(255 255 255 / 0.10);
}

.dark .ue-view-table tbody tr {
    border-bottom-color: rgb(255 255 255 / 0.08);
}

.dark .ue-view-table tbody tr:hover {
    background-color: rgb(255 255 255 / 0.06);
}

.dark .ue-view-mono {
    color: rgb(209 213 219);
}

.dark .ue-view-avatar {
    background-color: rgb(255 255 255 / 0.08);
}

.dark .ue-view-chip {
    background-color: rgb(30 58 138 / 0.45);
    color: rgb(191 219 254);
    border-color: rgb(30 64 175 / 0.60);
}

.dark .ue-view-sin-asignar {
    color: rgb(107 114 128);
}

.dark .ue-dist-circuito {
    border-left-color: rgb(129 140 248);
}

.dark .ue-dist-circuito h4 {
    color: rgb(165 180 252);
}

.dark .ue-dist-sub {
    border-left-color: rgb(255 255 255 / 0.14);
}

.dark .ue-dist-sub-title {
    color: rgb(209 213 219);
}

.dark .ue-dist-sub-badge {
    background-color: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.12);
}

.dark .ue-dist-turno-1 {
    color: rgb(52 211 153);
}

.dark .ue-dist-turno-2 {
    color: rgb(96 165 250);
}