/* =============================================================================
   COLORGRAMA DE SECCIONES — ORDEN DE SERVICIO (OSGO)

   Cada sección top-level del formulario tiene un color propio para poder
   identificarla de un vistazo (el fondo claro por defecto no diferenciaba
   las secciones). Aplica: banda de encabezado teñida, borde izquierdo de
   acento, título e ícono en el color de la sección.

   - Selectores anclados a los id de cada Section (->id(...) en
     OrdenServicioResource), por lo que NO afecta a otros recursos ni a las
     subsecciones anidadas (se usa `>` para el header directo).
   - --sec  = color de acento en modo claro (RGB, nivel ~700 de Tailwind)
   - --sec-dark = acento en modo oscuro (nivel ~400)
   - Cargado en el panel vía renderHook en OsgoPanelProvider.
   ============================================================================= */

/* ---- Tabla "Anexos Vinculados a esta OS" (ViewOrdenServicio) ----
   Igual que el resto del archivo: las clases Tailwind escritas a mano
   (bg-emerald-100, px-3 py-2, rounded-full, border-gray-100...) no están
   en el CSS compilado del panel, así que la tabla se veía sin bordes,
   sin badges de color y sin jerarquía visual. Todo el estilo va aquí. */
.os-anexos-wrap {
    overflow-x: auto;
}

.os-anexos-summary {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin-bottom: 0.5rem;
}

.os-anexos-summary-ok {
    color: rgb(5 150 105);
}

.os-anexos-table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgb(0 0 0 / 0.10);
    border-radius: 0.5rem;
    overflow: hidden;
}

.os-anexos-table thead {
    background-color: rgb(0 0 0 / 0.03);
}

.os-anexos-th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(55 65 81);
    border-bottom: 1px solid rgb(0 0 0 / 0.10);
}

.os-anexos-th-right {
    text-align: right;
}

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

.os-anexos-table tbody tr:last-child {
    border-bottom: none;
}

.os-anexos-td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

.os-anexos-td-right {
    text-align: right;
}

.os-anexos-mono {
    font-family: ui-monospace, monospace;
    color: rgb(75 85 99);
}

.os-anexos-muted {
    color: rgb(75 85 99);
}

.os-anexos-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    color: rgb(var(--primary-600));
}

.os-anexos-link:hover {
    color: rgb(var(--primary-700));
    text-decoration: underline;
}

.os-anexos-empty {
    font-size: 0.875rem;
    font-style: italic;
    color: rgb(107 114 128);
    padding: 1rem 0;
    text-align: center;
}

/* Badges de estado, coloreados por data-estado (evita clases Tailwind sueltas) */
.os-anexos-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: rgb(0 0 0 / 0.06);
    color: rgb(55 65 81);
}

.os-anexos-badge[data-estado="PEN"] {
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
}

.os-anexos-badge[data-estado="OBS"] {
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
}

.os-anexos-badge[data-estado="ACT"] {
    background-color: rgb(209 250 229);
    color: rgb(4 120 87);
}

.os-anexos-badge[data-estado="ANU"] {
    background-color: rgb(255 228 230);
    color: rgb(190 18 60);
}

.os-anexos-badge[data-estado="EJE"] {
    background-color: rgb(224 242 254);
    color: rgb(3 105 161);
}

.os-anexos-table tbody tr:hover {
    background-color: rgb(0 0 0 / 0.05);
}

/* ---- Modo oscuro ---- */
.dark .os-anexos-summary {
    color: rgb(156 163 175);
}

.dark .os-anexos-summary-ok {
    color: rgb(52 211 153);
}

.dark .os-anexos-table {
    border-color: rgb(255 255 255 / 0.14);
}

.dark .os-anexos-table thead {
    background-color: rgb(255 255 255 / 0.04);
}

.dark .os-anexos-th {
    color: rgb(229 231 235);
    border-bottom-color: rgb(255 255 255 / 0.12);
}

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

.dark .os-anexos-mono,
.dark .os-anexos-muted {
    color: rgb(209 213 219);
}

.dark .os-anexos-link {
    color: rgb(var(--primary-400));
}

.dark .os-anexos-empty {
    color: rgb(156 163 175);
}

.dark .os-anexos-badge {
    background-color: rgb(255 255 255 / 0.08);
    color: rgb(229 231 235);
}

.dark .os-anexos-badge[data-estado="PEN"] {
    background-color: rgb(255 255 255 / 0.08);
    color: rgb(209 213 219);
}

.dark .os-anexos-badge[data-estado="OBS"] {
    background-color: rgb(120 53 15 / 0.45);
    color: rgb(252 211 77);
}

.dark .os-anexos-badge[data-estado="ACT"] {
    background-color: rgb(6 78 59 / 0.45);
    color: rgb(110 231 183);
}

.dark .os-anexos-badge[data-estado="ANU"] {
    background-color: rgb(136 19 55 / 0.45);
    color: rgb(251 113 133);
}

.dark .os-anexos-badge[data-estado="EJE"] {
    background-color: rgb(12 74 110 / 0.45);
    color: rgb(125 211 252);
}

.dark .os-anexos-table tbody tr:hover {
    background-color: rgb(255 255 255 / 0.08);
}

#informacion-general     { --sec:   3 105 161; --sec-dark:  56 189 248; } /* sky     */
#configuracion-orden     { --sec: 109  40 217; --sec-dark: 167 139 250; } /* violet  */
#control                 { --sec:  67  56 202; --sec-dark: 129 140 248; } /* indigo  */
#despacho                { --sec:  14 116 144; --sec-dark:  34 211 238; } /* cyan    */
#centros-retencion       { --sec: 180  83   9; --sec-dark: 251 191  36; } /* amber   */
#grupos-operativos       { --sec:   4 120  87; --sec-dark:  52 211 153; } /* emerald */
#servicio-patrullero     { --sec:  29  78 216; --sec-dark:  96 165 250; } /* blue    */
#servicio-gruas          { --sec: 194  65  12; --sec-dark: 251 146  60; } /* orange  */
#servicio-motorizado     { --sec: 185  28  28; --sec-dark: 248 113 113; } /* red     */
#servicio-pedestre       { --sec:  77 124  15; --sec-dark: 163 230  53; } /* lime    */
#informacion-adicional   { --sec: 162  28 175; --sec-dark: 232 121 249; } /* fuchsia */
#personal-novedades      { --sec: 190  18  60; --sec-dark: 251 113 133; } /* rose    */
#disposiciones-generales { --sec:  51  65  85; --sec-dark: 148 163 184; } /* slate   */
#os-anexos-vinculados    { --sec:  15 118 110; --sec-dark:  45 212 191; } /* teal    */

/* ---- Contenedor de la sección: borde de acento + anillo teñido ---- */
:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec));
}

:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec));
}

/* =============================================================================
   SUBSECCIONES Y REPEATERS — heredan el color de la sección padre (var --sec
   se hereda por el DOM) en versión más suave, para distinguir qué pertenece
   a qué dentro de cada sección.
   ============================================================================= */

/* ---- Subsecciones (Section anidada, cualquier nivel) ---- */
:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section {
    border-left: 3px solid rgb(var(--sec) / 0.50);
    --tw-ring-color: rgb(var(--sec) / 0.18);
}

:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec) / 0.85);
}

:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec) / 0.70);
}

/* ---- Ítems de Repeater (grupos/filas añadibles): trazo aún más sutil ---- */
:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .fi-fo-repeater-item {
    border-left: 3px solid rgb(var(--sec) / 0.30);
    --tw-ring-color: rgb(var(--sec) / 0.22);
}

:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .fi-fo-repeater-item.fi-collapsed > .fi-fo-repeater-item-header {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Etiqueta del ítem (placa, grupo, nombre…) en el color de la sección */
:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section {
    border-left-color: rgb(var(--sec-dark));
    --tw-ring-color: rgb(var(--sec-dark) / 0.35);
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section > header .fi-section-header-heading,
.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec-dark));
}

/* ---- Oscuro: subsecciones anidadas ---- */
.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section {
    border-left-color: rgb(var(--sec-dark) / 0.55);
    --tw-ring-color: rgb(var(--sec-dark) / 0.22);
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .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(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section.fi-collapsed > header.fi-section-header {
    border-bottom-color: transparent;
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section > header .fi-section-header-heading {
    color: rgb(var(--sec-dark) / 0.90);
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section .fi-section > header > svg.fi-icon {
    color: rgb(var(--sec-dark) / 0.75);
}

/* ---- Oscuro: ítems de repeater ---- */
.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .fi-fo-repeater-item {
    border-left-color: rgb(var(--sec-dark) / 0.40);
    --tw-ring-color: rgb(var(--sec-dark) / 0.25);
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    background-color: rgb(var(--sec-dark) / 0.05);
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) .fi-fo-repeater-item > .fi-fo-repeater-item-header > .fi-fo-repeater-item-header-label {
    color: rgb(var(--sec-dark));
}

/* =============================================================================
   BARRA DE ACCESO RÁPIDO A SECCIONES (#os-quick-nav)

   Sticky bajo el topbar de Filament (4rem). Un chip por sección top-level,
   coloreado con las mismas variables --sec/--sec-dark del colorgrama (el JS
   las copia de cada sección al chip). Ver orden-servicio-quick-nav.js.
   ============================================================================= */

#os-quick-nav {
    position: sticky;
    top: 4rem;
    z-index: 15; /* bajo el topbar (z-20) y los dropdowns */
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background-color: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgb(3 7 18 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.08);
}

.os-qn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
}

.os-qn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: rgb(var(--sec));
    background-color: rgb(var(--sec) / 0.07);
    border: 1px solid rgb(var(--sec) / 0.25);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
}

.os-qn-chip:hover {
    background-color: rgb(var(--sec) / 0.15);
    border-color: rgb(var(--sec) / 0.45);
}

.os-qn-chip.os-qn-active {
    background-color: rgb(var(--sec) / 0.18);
    border-color: rgb(var(--sec) / 0.65);
}

.os-qn-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(var(--sec));
    flex: none;
}

.os-qn-label {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-qn-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: none;
}

.os-qn-btn {
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: rgb(55 65 81);
    background-color: rgb(0 0 0 / 0.04);
    border: 1px solid rgb(0 0 0 / 0.12);
    cursor: pointer;
    transition: background-color 0.15s;
}

.os-qn-btn:hover {
    background-color: rgb(0 0 0 / 0.09);
}

/* Destello al navegar a una sección (usa el color de la propia sección) */
:is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section {
    --os-flash: var(--sec);
}

.os-flash {
    animation: os-flash-anim 1.4s ease-out 1;
}

@keyframes os-flash-anim {
    0%   { box-shadow: 0 0 0 4px rgb(var(--os-flash) / 0.55); }
    100% { box-shadow: 0 0 0 4px rgb(var(--os-flash) / 0); }
}

/* ---- Oscuro ---- */
.dark #os-quick-nav {
    background-color: rgb(17 24 39 / 0.92);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10), 0 1px 3px 0 rgb(0 0 0 / 0.40);
}

.dark .os-qn-chip {
    color: rgb(var(--sec-dark));
    background-color: rgb(var(--sec-dark) / 0.10);
    border-color: rgb(var(--sec-dark) / 0.30);
}

.dark .os-qn-chip:hover {
    background-color: rgb(var(--sec-dark) / 0.18);
    border-color: rgb(var(--sec-dark) / 0.50);
}

.dark .os-qn-chip.os-qn-active {
    background-color: rgb(var(--sec-dark) / 0.22);
    border-color: rgb(var(--sec-dark) / 0.70);
}

.dark .os-qn-dot {
    background-color: rgb(var(--sec-dark));
}

.dark .os-qn-btn {
    color: rgb(209 213 219);
    background-color: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.14);
}

.dark .os-qn-btn:hover {
    background-color: rgb(255 255 255 / 0.12);
}

.dark :is(#informacion-general, #configuracion-orden, #control, #despacho,
    #centros-retencion, #grupos-operativos, #servicio-patrullero,
    #servicio-gruas, #servicio-motorizado, #servicio-pedestre,
    #informacion-adicional, #personal-novedades, #disposiciones-generales,
    #os-anexos-vinculados) > .fi-section {
    --os-flash: var(--sec-dark);
}

/* =============================================================================
   DENSIDAD DE REPEATERS — secciones de personal de la Orden de Servicio

   Con cientos de filas colapsadas, el padding por defecto de Filament
   (px-4 py-3 por encabezado + gap de 1rem entre filas) alarga la página
   innecesariamente. Se compacta SOLO dentro de las secciones de personal
   (ancladas a sus id), sin tocar otros recursos.
   ============================================================================= */
:is(#control, #despacho, #centros-retencion, #grupos-operativos,
    #servicio-patrullero, #servicio-gruas, #servicio-motorizado,
    #servicio-pedestre, #personal-novedades) .fi-fo-repeater-item-header {
    padding: 0.375rem 0.75rem;
}

:is(#control, #despacho, #centros-retencion, #grupos-operativos,
    #servicio-patrullero, #servicio-gruas, #servicio-motorizado,
    #servicio-pedestre, #personal-novedades) .fi-fo-repeater-items {
    row-gap: 0.5rem;
}

/* ---- Filtro local de filas (osgo-filtro-filas.blade.php) ---- */
.os-filtro-filas {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.os-filtro-input {
    flex: 0 1 26rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 0.15);
    background-color: #fff;
    color: inherit;
}

.os-filtro-input:focus {
    outline: 2px solid rgb(var(--sec, 59 130 246) / 0.45);
    outline-offset: 0;
}

.dark .os-filtro-input {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.2);
}

.os-filtro-conteo {
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
}

[x-cloak] {
    display: none !important;
}

/* ---- Modal "Firmar y Enviar": aviso de FirmaEC (alerta_firma) ---- */
.os-alerta-firma {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgb(0 0 0 / 0.03);
    border: 1px solid rgb(0 0 0 / 0.10);
}

.os-alerta-firma-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    margin-top: 0.125rem;
    color: rgb(var(--primary-600));
}

.os-alerta-firma-texto {
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgb(75 85 99);
}

.os-alerta-firma-texto strong {
    color: rgb(var(--primary-600));
}

.dark .os-alerta-firma {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.14);
}

.dark .os-alerta-firma-icon {
    color: rgb(var(--primary-400));
}

.dark .os-alerta-firma-texto {
    color: rgb(209 213 219);
}

.dark .os-alerta-firma-texto strong {
    color: rgb(var(--primary-400));
}