/* =========================================================================
   panel.css — Tema del panel de administración

   Implementación del prototipo "Panel Admin" (Claude Design).

   Dos reglas que no se rompen:

   1. Ningún componente escribe un color literal. Todo sale de un token.
      Así el modo oscuro es una segunda definición de tokens y nada más.

   2. Cero `!important`. Esta hoja se inyecta en `panels::head.end`, es
      decir DESPUÉS del CSS compilado de Filament. A igual especificidad
      gana el orden, y el orden ya lo tenemos. Cuando hace falta más peso
      se antepone `.fi-body`, que sube a (0,2,0) sin envenenar la cascada.

   Al tocar este archivo: si necesitás `!important`, el selector está mal.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────────
   Los nombres describen el ROL, no el color. `--superficie` sigue siendo
   `--superficie` cuando en oscuro vale #161d28.                          */

:root {
    /* Superficies */
    --p-fondo:          #f6f8fb;
    --p-superficie:     #ffffff;
    --p-superficie-2:   #fafbfd;   /* cabeceras de tabla, zonas hundidas  */
    --p-superficie-3:   #f1f4f9;   /* chips neutros, estados inactivos    */
    --p-velo:           rgba(255,255,255,.92);

    /* Bordes */
    --p-borde:          #e3e8f0;
    --p-borde-suave:    #eef1f6;   /* divisiones internas de una card     */
    --p-borde-campo:    #cbd5e1;
    --p-borde-control:  #d5dce8;
    --p-borde-punteado: #b8c4d9;

    /* Texto */
    --p-tinta:          #0f172a;
    --p-tinta-2:        #334155;
    --p-tinta-3:        #475569;
    --p-tinta-4:        #5b6b85;
    --p-tinta-tenue:    #64748b;
    --p-tinta-nav:      #3a4a63;   /* ítem de navegación en reposo         */
    --p-icono:          #8494ad;
    --p-icono-2:        #94a3b8;

    /* Tabla: dos grises propios, más fríos que los de las cards */
    --p-fila-hover:     #f8fafc;
    --p-borde-fila:     #f1f4f9;

    /* Marca */
    --p-marca:          #1e3a8a;
    --p-marca-hover:    #16306e;
    --p-marca-sobre:    #ffffff;   /* texto encima de --p-marca           */
    --p-marca-tinta:    #16306e;   /* texto de marca sobre fondo claro    */
    --p-marca-fondo:    #eef2fb;
    --p-marca-fondo-2:  #e4ebfa;   /* ítem activo, más presente           */
    --p-marca-borde:    #d9e2f5;
    --p-marca-borde-2:  #c3d2f0;
    --p-avatar-fondo:   #e8eefb;   /* avatar del sidebar, un punto mas frio */
    --p-avatar-borde:   #cfdbf5;
    --p-borde-boton:    #dbe2ee;   /* borde del boton de colapso        */
    --p-campo-hundido:  #f8fafc;   /* buscador de la topbar en reposo   */
    --p-enlace:         #1d4ed8;
    --p-enlace-hover:   #16309b;
    --p-foco:           #2563eb;

    /* Semánticos */
    --p-ok-fondo:       #e7f6ed;
    --p-ok-borde:       #b6e0c6;
    --p-ok-tinta:       #136c37;
    --p-ok-punto:       #15803d;

    --p-aviso-fondo:    #fdf3e3;
    --p-aviso-borde:    #f0d9a8;
    --p-aviso-tinta:    #7a5210;
    --p-aviso-punto:    #b57611;

    --p-peligro-fondo:  #fef4f2;
    --p-peligro-borde:  #e6bcb6;
    --p-peligro-tinta:  #9f1d16;
    --p-peligro-suave:  #8a5350;   /* icono de borrar en reposo           */

    /* Forma */
    --p-r-card:         12px;
    --p-r-control:      9px;
    --p-r-chico:        8px;
    --p-r-pill:         999px;
    --p-sombra-card:    0 1px 2px rgba(15,23,42,.05);
    --p-sombra-flot:    0 12px 28px rgba(15,23,42,.16);
    --p-sombra-modal:   0 24px 60px rgba(15,23,42,.28);
    --p-sombra-activo:  0 2px 8px rgba(30,58,138,.08);

    /* Medidas */
    --p-topbar-h:       56px;
    /* Alto de celda. Es token y no un valor fijo porque el conmutador de
       densidad lo unico que hace es redefinirlo. */
    --p-celda-y:        12px;
    --p-celda-cab-y:    9px;
    --p-ancho:          1180px;

    /* Icono del botón de colapso: panel lateral + flecha hacia dentro.
       Va como token porque cambia de sentido según el estado del sidebar. */
    --p-icono-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM10 5v14'/%3E%3Cpath d='M17 9.5 14.5 12 17 14.5'/%3E%3C/svg%3E");
    --p-icono-panel-abrir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM10 5v14'/%3E%3Cpath d='M13.5 9.5 16 12l-2.5 2.5'/%3E%3C/svg%3E");
}

.dark {
    --p-fondo:          #0e141d;
    --p-superficie:     #161d28;
    --p-superficie-2:   #111823;
    --p-superficie-3:   #1d2733;
    --p-velo:           rgba(22,29,40,.92);

    --p-borde:          #27313f;
    --p-borde-suave:    #212a36;
    --p-borde-campo:    #3a475a;
    --p-borde-control:  #35424f;
    --p-borde-punteado: #44536a;

    --p-tinta:          #e8edf5;
    --p-tinta-2:        #c3ccd9;
    --p-tinta-3:        #a2aebf;
    --p-tinta-4:        #8e9cb0;
    --p-tinta-tenue:    #8695aa;
    --p-tinta-nav:      #c3ccd9;
    --p-icono:          #7d8b9f;
    --p-icono-2:        #6b7a8f;

    --p-fila-hover:     #1b2430;
    --p-borde-fila:     #1e2733;

    --p-marca:          #2c5cc4;
    --p-marca-hover:    #3a6cd8;
    --p-marca-sobre:    #ffffff;
    --p-marca-tinta:    #a8c2f2;
    --p-marca-fondo:    #1a2740;
    --p-marca-fondo-2:  #21304e;
    --p-marca-borde:    #2c3f60;
    --p-marca-borde-2:  #3a5182;
    --p-avatar-fondo:   #1a2740;
    --p-avatar-borde:   #2c3f60;
    --p-borde-boton:    #35424f;
    --p-campo-hundido:  #111823;
    --p-enlace:         #8ab0f5;
    --p-enlace-hover:   #a8c4f8;
    --p-foco:           #7ea2e8;

    --p-ok-fondo:       #12291d;
    --p-ok-borde:       #24503a;
    --p-ok-tinta:       #74c79c;
    --p-ok-punto:       #3fa76c;

    --p-aviso-fondo:    #2b2113;
    --p-aviso-borde:    #574521;
    --p-aviso-tinta:    #e0b264;
    --p-aviso-punto:    #c9902f;

    --p-peligro-fondo:  #2c1614;
    --p-peligro-borde:  #5d2a26;
    --p-peligro-tinta:  #f19289;
    --p-peligro-suave:  #c97b73;

    --p-sombra-card:    0 1px 2px rgba(0,0,0,.4);
    --p-sombra-flot:    0 12px 28px rgba(0,0,0,.55);
    --p-sombra-modal:   0 24px 60px rgba(0,0,0,.6);
    --p-sombra-activo:  0 2px 8px rgba(0,0,0,.45);
}

/* ── Base ──────────────────────────────────────────────────────────── */

/* La clase repetida no es un descuido: Filament pinta el body con
   `.dark .fi-body`, que es (0,2,0). `.fi-body` sola es (0,1,0) y perdería en
   modo oscuro. Duplicarla iguala el peso y el orden decide — que es
   exactamente lo que evita tener que escribir !important. */
.fi-body.fi-body {
    font-family: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
    background: var(--p-fondo);
    color: var(--p-tinta);
    -webkit-font-smoothing: antialiased;
}

.fi-body ::placeholder { color: var(--p-tinta-tenue); opacity: 1; }

/* Texto solo para lectores de pantalla. `clip-path` en vez de `display:none`
   o `visibility:hidden`, que lo sacarían también del árbol de accesibilidad. */
.fi-body .p-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Foco visible en todo lo operable. Nunca se quita: se rediseña. */
.fi-body :focus-visible {
    outline: 3px solid var(--p-foco);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */

.fi-body .fi-sidebar,
.fi-body .fi-main-sidebar {
    background: var(--p-superficie);
    border-right: 1px solid var(--p-borde);
}

/* Colapso fluido en escritorio.
   Filament marca el aside con `lg:transition-none` y por eso el ancho salta
   de golpe. Estas reglas van después en la hoja, así que ganan por orden sin
   necesidad de !important. Se anima solo el ancho: el contenido interno se
   desvanece con su propia opacidad y transformar el aside entero arrastraría
   la topbar sticky. */
@media (min-width: 1024px) {
    .fi-body .fi-sidebar {
        transition: width .18s ease;
    }

    /* Filament declara --collapsed-sidebar-width en el layout pero solo la
       consume el CSS de un theme compilado. Sin esta regla el ancho colapsado
       lo decide el contenido y queda en 57 px. */
    .fi-body .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width, 72px);
    }

    /* Colapsada no hay etiquetas de grupo, así que la separación entre grupos
       la marca una regla fina: sin ella los iconos quedan en una lista sola. */
    .fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group {
        margin-top: 9px;
        padding-top: 9px;
        border-top: 1px solid var(--p-borde-suave);
    }

    .fi-body .fi-main-ctn {
        transition: margin-inline-start .18s ease, padding-inline-start .18s ease;
    }

    /* Etiquetas y textos: se van antes de que el ancho termine de cerrarse,
       para que no se vean cortados a mitad del recorrido. */
    .fi-body .fi-sidebar-item-label,
    .fi-body .p-marca-texto,
    .fi-body .p-usuario-datos,
    .fi-body .fi-sidebar-group-label {
        transition: opacity .12s ease;
    }

    .fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label {
        opacity: 0;
    }
}

.fi-body .fi-sidebar-header {
    min-height: var(--p-topbar-h);
    height: var(--p-topbar-h);
    gap: 10px;
    padding: 0 10px;
    background: var(--p-superficie);
    border-bottom: 1px solid var(--p-borde);
    box-shadow: none;
}

/* El enlace del logo ocupa el espacio libre y empuja el botón al extremo. */
.fi-body .fi-sidebar-header > a,
.fi-body .fi-sidebar-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.fi-body .fi-logo { width: 100%; height: auto; }

.fi-body .fi-sidebar-nav {
    padding: 8px 8px 16px;
    gap: 2px;
}

.fi-body .fi-sidebar-nav-groups { gap: 2px; }

/* Encabezado de grupo: 2.5:1 antes, 6:1 ahora. El gris tenue era el
   problema, no el tamaño. */
.fi-body .fi-sidebar-group-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--p-tinta-4);
    white-space: nowrap;
}

.fi-body .fi-sidebar-group-button {
    min-height: 34px;
    margin-top: 10px;
    padding: 0 10px 0 12px;
}
.fi-body .fi-sidebar-group-button:hover .fi-sidebar-group-label { color: var(--p-marca); }

.fi-body .fi-sidebar-group-collapse-button { color: var(--p-icono); }
.fi-body .fi-sidebar-group-items { gap: 2px; padding-top: 2px; }

.fi-body .fi-sidebar-item-button {
    min-height: 40px;
    gap: 11px;
    padding: 0 12px;
    border-radius: var(--p-r-control);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--p-tinta-nav);
    background-color: transparent;
}

.fi-body .fi-sidebar-item-button:hover {
    color: var(--p-marca-tinta);
    background: var(--p-marca-fondo);
}

/* El ítem actual no se distingue solo por color: suma peso y subrayado. */
/* Sin subrayado. El item actual sigue distinguiendose por dos senales que
   no son color: el fondo solido y el peso 700. */
.fi-body .fi-sidebar-item-active .fi-sidebar-item-button,
.fi-body .fi-sidebar-item-button[aria-current="page"] {
    font-weight: 700;
    color: var(--p-marca-tinta);
    background: var(--p-marca-fondo-2);
    text-decoration: none;
}

.fi-body .fi-sidebar-item-icon { width: 19px; height: 19px; color: inherit; }
.fi-body .fi-sidebar-item-label { font-size: 13.5px; }

/* Sidebar contraída: solo iconos, centrados. */
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
    justify-content: center;
    padding: 0;
}
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { justify-content: center; }

/* ── Marca del sidebar (render hook) ───────────────────────────────── */

.fi-body .p-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Escudo sin caja ni sombra: el PNG trae alfa y se apoya directo sobre el
   fondo del sidebar. El monograma con fondo azul solo aparece si el archivo
   del logo no existe. */
.fi-body .p-marca-sello {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--p-marca);
}

.fi-body .p-marca-sello img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* El botón de colapso del prototipo: cuadrado de 32 px con borde, no un
   chevron suelto. El icono es el de "panel lateral" (rectángulo dividido) más
   la flecha del sentido en que va a moverse.

   Se pinta con `mask` y `background-color: currentColor` para que siga al
   token de color en ambos temas; una imagen de fondo quedaría fija. */
.fi-body .fi-sidebar-header .fi-icon-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--p-borde-boton);
    border-radius: var(--p-r-chico);
    background-color: var(--p-superficie);
    color: var(--p-tinta-4);
}

.fi-body .fi-sidebar-header .fi-icon-btn:hover {
    border-color: var(--p-marca);
    color: var(--p-marca);
    background-color: var(--p-superficie);
}

.fi-body .fi-sidebar-header .fi-icon-btn svg { display: none; }

.fi-body .fi-sidebar-header .fi-icon-btn::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--p-icono-panel) center / contain no-repeat;
    mask: var(--p-icono-panel) center / contain no-repeat;
}

.fi-body .p-marca-texto { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.fi-body .p-marca-nombre {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-body .p-marca-sub {
    font-size: 11px;
    color: var(--p-tinta-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-body .fi-sidebar:not(.fi-sidebar-open) .p-marca-texto { display: none; }
.fi-body .fi-sidebar:not(.fi-sidebar-open) .p-marca { justify-content: center; }

/* Contraída, el escudo se queda.
   ÚNICO !important de la hoja, y va con motivo: Filament envuelve el logo en
   un `x-show="$store.sidebar.isOpen"` y Alpine escribe `display:none` como
   estilo EN LÍNEA. Un estilo en línea le gana a cualquier selector; la única
   forma de revertirlo desde una hoja es !important. La alternativa era forkear
   el blade del sidebar entero de Filament y volver a resolverlo en cada
   actualización del paquete. */
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header > div:first-child,
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header > a {
    display: block !important;
    flex: 0 0 auto;
}

.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
    justify-content: center;
    gap: 0;
}

/* Filament envuelve la cabecera en un div con `overflow-x: clip`. Con el
   botón asomado 16 px fuera del riel, ese clip lo parte al medio y deja una
   astilla en vez de un icono. El div solo contiene la cabecera —no el nav—
   así que dejarlo sin recortar no arrastra nada más. */
.fi-body .fi-sidebar > .overflow-x-clip { overflow: visible; }

/* A cambio, la etiqueta se recorta ella misma mientras dura el colapso. */
.fi-body .fi-sidebar-item-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* El botón de expandir se despega del borde para no quedar encima del logo. */
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header .fi-icon-btn {
    position: absolute;
    top: 60px;
    inset-inline-end: -16px;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header .fi-icon-btn::before {
    -webkit-mask-image: var(--p-icono-panel-abrir);
    mask-image: var(--p-icono-panel-abrir);
}
.fi-body .fi-sidebar-header { position: relative; }

/* ── Pie del sidebar: ficha de usuario ─────────────────────────────── */

.fi-body .p-usuario {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid var(--p-borde);
    background: var(--p-superficie);
}

.fi-body .p-usuario-fila {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--p-r-control);
    background: transparent;
    color: var(--p-tinta);
    cursor: pointer;
    text-align: left;
}
.fi-body .p-usuario-fila:hover { color: var(--p-marca-tinta); background: var(--p-marca-fondo); }

.fi-body .p-usuario-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--p-r-pill);
    background: var(--p-avatar-fondo);
    border: 1px solid var(--p-avatar-borde);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--p-marca-tinta);
}

.fi-body .p-usuario-datos { min-width: 0; line-height: 1.2; }
.fi-body .p-usuario-nombre {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-body .p-usuario-rol {
    display: block;
    font-size: 11.5px;
    color: var(--p-tinta-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-body .fi-sidebar:not(.fi-sidebar-open) .p-usuario-datos { display: none; }
.fi-body .fi-sidebar:not(.fi-sidebar-open) .p-usuario-fila { justify-content: center; padding: 0; }

/* ── Topbar ────────────────────────────────────────────────────────── */

/* Reparto del prototipo: migas a la izquierda, buscador centrado ocupando el
   hueco, y pastilla + avatar cerrando a la derecha. Filament agrupa buscador,
   pastilla y menú de usuario en un `.ms-auto` que los manda todos al extremo;
   se le quita ese margen y se deja que el buscador sea quien crezca. */
.fi-body .fi-topbar > nav {
    min-height: var(--p-topbar-h);
    height: var(--p-topbar-h);
    gap: 16px;
    padding: 0 20px;
    justify-content: flex-start;
    background: var(--p-velo);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--p-borde);
    box-shadow: none;
}

.fi-body .fi-topbar > nav > .ms-auto {
    margin-inline-start: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fi-body .fi-topbar .fi-global-search {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

/* Migas de la topbar */
.fi-body .p-migas {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}
.fi-body .p-migas-raiz { font-size: 13px; color: var(--p-tinta-3); white-space: nowrap; }
.fi-body .p-migas-sep { color: var(--p-icono-2); }
.fi-body .p-migas-actual {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Avatar del menú de usuario: 36 px con aro, como en el prototipo. */
.fi-body .fi-user-menu .fi-dropdown-trigger > button,
.fi-body .fi-user-menu .fi-avatar,
.fi-body .fi-user-menu img {
    width: 36px;
    height: 36px;
    border-radius: var(--p-r-pill);
}
.fi-body .fi-user-menu img { border: 1px solid var(--p-borde-control); }

.fi-body .fi-topbar .fi-breadcrumbs { margin: 0; }
.fi-body .fi-topbar .fi-breadcrumbs-item-label { font-size: 13px; color: var(--p-tinta-3); }
.fi-body .fi-topbar .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    font-weight: 600;
    color: var(--p-tinta);
}
.fi-body .fi-topbar .fi-breadcrumbs-item-separator { color: var(--p-icono-2); }

/* Buscador global.
   Entre `.fi-global-search` y el campo hay un div intermedio que Filament usa
   para posicionar el panel de resultados; el ancho hay que darlo ahí o el
   campo se queda en su tamaño natural en medio de una barra vacía. */
.fi-body .fi-topbar .fi-global-search > * { width: 100%; max-width: 420px; }
.fi-body .fi-global-search-field { width: 100%; }

.fi-body .fi-global-search-field .fi-input-wrp {
    background: var(--p-campo-hundido);
    border: 1px solid var(--p-borde-control);
    border-radius: var(--p-r-control);
    box-shadow: none;
}
.fi-body .fi-global-search-field .fi-input-wrp:focus-within {
    background: var(--p-superficie);
    border-color: var(--p-marca);
}
.fi-body .fi-global-search-field .fi-input {
    height: 38px;
    font-size: 13.5px;
    color: var(--p-tinta);
}

/* Contador de sitios (render hook) */
.fi-body .p-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--p-r-pill);
    background: var(--p-marca-fondo);
    border: 1px solid var(--p-marca-borde);
    font-size: 12px;
    font-weight: 600;
    color: var(--p-marca);
    white-space: nowrap;
}
.fi-body .p-pastilla svg { width: 13px; height: 13px; }

/* ── Área principal ────────────────────────────────────────────────── */

.fi-body .fi-main-ctn { background: var(--p-fondo); }

.fi-body .fi-main {
    max-width: var(--p-ancho);
    padding: 22px 20px 40px;
}

.fi-body .fi-page > .fi-header { margin-bottom: 16px; }

.fi-body .fi-header-heading {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--p-tinta);
}
.fi-body .fi-header-subheading { font-size: 13.5px; color: var(--p-tinta-3); }

.fi-body .fi-page .fi-breadcrumbs-item-label { font-size: 13px; color: var(--p-tinta-3); }
.fi-body .fi-page .fi-breadcrumbs-item-label:hover { color: var(--p-enlace); }

/* ── Secciones / cards ─────────────────────────────────────────────── */

.fi-body .fi-section {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: var(--p-r-card);
    box-shadow: var(--p-sombra-card);
}

/* Aire de la tarjeta. 18 px de padding en una tarjeta de 850 px de ancho
   dejaba el contenido pegado al borde; a este tamano 22 respira sin que la
   pagina crezca de mas. */
.fi-body .fi-section-header { padding: 22px 22px 0; }
.fi-body .fi-section-content { padding: 20px 22px 22px; }
.fi-body .fi-section-header + .fi-section-content-ctn .fi-section-content { padding-top: 20px; }

.fi-body .fi-section-header-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--p-tinta);
}
.fi-body .fi-section-header-description {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--p-tinta-3);
    max-width: 68ch;
}
.fi-body .fi-section-header-icon { color: var(--p-marca-tinta); }

.fi-body .fi-section-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--p-borde-suave);
    background: var(--p-superficie-2);
}

/* ── Pestañas ──────────────────────────────────────────────────────── */

/* Ojo con la anidación: `.fi-fo-tabs` es el CONTENEDOR (envuelve la barra y
   los paneles) y `.fi-tabs` es la barra en sí. Darle a los dos el mismo
   tratamiento pinta un borde de más y deja un scroll fantasma. */
.fi-body .fi-fo-tabs {
    gap: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.fi-body .fi-tabs {
    gap: 4px;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--p-borde);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 18px;
    /* Filament pone overflow-x:auto y el eje Y pasa a `auto` por cascada del
       propio CSS. Con el borde inferior de la pestaña activa el contenido mide
       1 px de más y aparece una barra de scroll vertical fantasma. */
    overflow-y: hidden;
}

/* Ojo: `.fi-fo-tabs-tab` es el PANEL de la pestaña, no el botón. Trae p-6 y
   dibuja una caja alrededor de las tarjetas que ya tienen la suya. */
.fi-body .fi-fo-tabs-tab { padding: 0; }

.fi-body .fi-tabs-item {
    min-height: 40px;
    gap: 7px;
    padding: 0 13px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--p-tinta-3);
}

.fi-body .fi-tabs-item:hover { color: var(--p-marca-tinta); }

.fi-body .fi-tabs-item[aria-selected="true"],
.fi-body .fi-tabs-item-active {
    font-weight: 700;
    color: var(--p-marca-tinta);
    border-bottom-color: var(--p-marca);
    background-color: transparent;
}

/* `color: inherit` y no un token propio: Filament pinta la etiqueta interna
   con slate-500, que sobre el fondo de la página da 4.47:1 — apenas por
   debajo de AA. Heredando toma el color de la pestaña, que ya cumple. */
.fi-body .fi-tabs-item-label { font-size: 13.5px; color: inherit; }

.fi-body .fi-tabs-item .fi-badge {
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
}

/* ── Formularios ───────────────────────────────────────────────────── */

.fi-body .fi-fo-field-wrp-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--p-tinta);
}
.fi-body .fi-fo-field-wrp-label .fi-fo-field-wrp-hint { font-weight: 500; }

.fi-body .fi-fo-field-wrp-helper-text,
.fi-body .fi-fo-field-wrp-helper-text p {
    font-size: 12px;
    line-height: 1.45;
    color: var(--p-tinta-3);
}

.fi-body .fi-fo-field-wrp-error-message { font-size: 12px; color: var(--p-peligro-tinta); }
.fi-body .fi-fo-field-wrp-hint-label { font-size: 12px; color: var(--p-tinta-3); }

/* El asterisco de obligatorio va en rojo semántico, no en el rojo de marca */
.fi-body .fi-fo-field-wrp-label sup { color: var(--p-peligro-tinta); }

.fi-body .fi-input-wrp {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde-campo);
    border-radius: var(--p-r-chico);
    box-shadow: none;
    overflow: hidden;
}

/* Un select con búsqueda (Choices.js) dibuja su lista DENTRO de este
   contenedor, en position:absolute. Con overflow:hidden quedaba recortada a
   la altura del campo —38 px— y la lista, de 248 px, era invisible: el campo
   tomaba foco y no pasaba nada.

   Solo afecta a los selects con búsqueda. Los normales usan el <select>
   nativo, cuya lista la dibuja el navegador fuera del documento, donde
   overflow no la alcanza; por eso "Plantilla" funcionaba y "Usuarios
   responsables" no. */
.fi-body .fi-input-wrp:has(.choices) { overflow: visible; }

.fi-body .fi-input-wrp:focus-within { border-color: var(--p-marca); }
.fi-body .fi-input-wrp-icon { color: var(--p-tinta-tenue); }

/* background-color, NO el atajo `background`: Filament dibuja la flecha del
   select con background-image y el atajo le reinicia el background-repeat,
   con lo que la flecha se repite a lo ancho de todo el campo. */
.fi-body .fi-input,
.fi-body .fi-select-input {
    min-height: 38px;
    font-size: 14px;
    color: var(--p-tinta);
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.fi-body .fi-fo-textarea .fi-input { min-height: 0; line-height: 1.5; }

/* Dominios, rutas y fechas: cifras de ancho fijo para que no bailen. */
.fi-body input[type="url"],
.fi-body input[inputmode="numeric"],
.fi-body .p-mono { font-variant-numeric: tabular-nums; }

.fi-body .fi-fo-select .fi-select-input { cursor: pointer; }

/* Campo de solo lectura: distinto de deshabilitado. Se puede leer y copiar. */
.fi-body .fi-input-wrp[data-disabled="true"],
.fi-body .fi-input:disabled {
    background-color: var(--p-superficie-3);
    color: var(--p-tinta-2);
}

.fi-body .fi-fo-toggle { --p-toggle-off: var(--p-superficie-3); }

/* ── Campo de archivo ──────────────────────────────────────────────────
   FilePond lo dibuja recién cuando termina de cargar su JS. Hasta entonces
   el hueco queda vacío, y un recuadro en blanco durante dos segundos se lee
   como que la página se rompió.

   Se reserva la altura final y se dice qué está pasando. Reservar el alto
   además evita que el resto del formulario salte cuando aparece. */

.fi-body .fi-fo-file-upload { border-radius: var(--p-r-control); }

.fi-body .fi-fo-file-upload:not(:has(.filepond--root)) {
    position: relative;
    min-height: 140px;
    border: 1px dashed var(--p-borde-punteado);
    border-radius: var(--p-r-control);
    background: var(--p-superficie-2);
}

/* `role="status"` no se puede poner desde CSS, así que el texto va como
   contenido generado: es informativo para quien ve, y quien usa lector de
   pantalla no pierde nada porque el campo real llega enseguida. */
.fi-body .fi-fo-file-upload:not(:has(.filepond--root))::after {
    content: "Preparando el campo de archivo…";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--p-tinta-3);
}

/* El input crudo del navegador aparece un instante antes de que FilePond lo
   reemplace, y es justo lo que se ve "sin estilos". */
.fi-body .fi-fo-file-upload:not(:has(.filepond--root)) input[type="file"] {
    opacity: 0;
}

/* ── Repetidores ───────────────────────────────────────────────────── */

/* Las filas colapsadas forman una escalera de barras casi iguales. Con 11 px
   de padding y 10 de separacion se leen como piezas y no como un bloque. */
.fi-body .fi-fo-repeater { gap: 10px; }

.fi-body .fi-fo-repeater-item {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: 10px;
    box-shadow: none;
}
.fi-body .fi-fo-repeater-item:not(.fi-collapsed) {
    border-color: var(--p-marca-borde-2);
    box-shadow: var(--p-sombra-activo);
}

.fi-body .fi-fo-repeater-item-header {
    gap: 10px;
    padding: 11px 12px;
    background: transparent;
    border: 0;
}
.fi-body .fi-fo-repeater-item-header .fi-fo-repeater-item-label,
.fi-body .fi-fo-repeater-item-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--p-tinta);
}

.fi-body .fi-fo-repeater-item-content {
    padding: 18px;
    background: var(--p-superficie-2);
    border-top: 1px solid var(--p-borde-suave);
}

/* Cuando el ítem solo guarda estado en campos Hidden —porque se edita en un
   modal— el área de contenido queda vacía pero con su padding, y cada fila
   arrastra un hueco de 35 px sin nada adentro. */
.fi-body .fi-fo-repeater-item-content:not(:has(.fi-fo-field-wrp, .fi-fo-repeater, .fi-section)) {
    display: none;
}

/* El botón de agregar va pegado a la izquierda, bajo su lista, y con borde
   punteado: es una acción de "sumar algo acá", no un botón principal. Filament
   lo centra, y centrado parece flotar sin dueño. */
/* El contenedor del boton no tiene clase `fi-`: es un div suelto, hijo
   directo del repetidor, con justify-content:center. Se lo identifica por lo
   que contiene. */
.fi-body .fi-fo-repeater > div:has(> .fi-btn) {
    justify-content: flex-start;
    margin-top: 2px;
}
.fi-body .fi-fo-repeater > div:has(> .fi-btn) .fi-btn {
    min-height: 36px;
    padding: 0 13px;
    background: transparent;
    border: 1px dashed var(--p-borde-punteado);
    color: var(--p-tinta-2);
    font-size: 13px;
    font-weight: 600;
}
.fi-body .fi-fo-repeater > div:has(> .fi-btn) .fi-btn:hover {
    border-color: var(--p-marca);
    color: var(--p-marca-tinta);
    background: var(--p-marca-fondo);
}

/* El botón de borrar de un ítem arranca apagado y se enciende al apuntarlo:
   destructivo pero sin gritar desde el reposo. */
.fi-body .fi-fo-repeater-item-header .fi-icon-btn-color-danger { color: var(--p-peligro-suave); }
.fi-body .fi-fo-repeater-item-header .fi-icon-btn-color-danger:hover {
    color: var(--p-peligro-tinta);
    background: var(--p-peligro-fondo);
    border-color: var(--p-peligro-borde);
}

/* ── Constructor de bloques ────────────────────────────────────────────
   Mismo lenguaje que los repetidores, pero cada bloque se numera: el orden
   ES el contenido de la página, así que el número no decora, informa. */

.fi-body .fi-fo-builder { gap: 8px; counter-reset: bloque; }

/* ── Riel de estructura ────────────────────────────────────────────────
   Resumen lateral con todos los bloques de la página. Lo arma panel.js
   leyendo el DOM que ya generó Filament; acá va solo la presentación.

   Dos columnas: el riel se queda quieto mientras se recorre la lista, que
   es todo el punto de tenerlo. Por debajo de 1024 px se oculta: en una
   pantalla angosta robaría el ancho que necesitan los campos, y la lista
   de bloques ya cumple el mismo papel. */

@media (min-width: 1024px) {
    .fi-body .fi-fo-builder.p-con-riel {
        display: grid;
        grid-template-columns: 290px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }
    .fi-body .fi-fo-builder.p-con-riel > *:not(.p-riel) { grid-column: 2; }

    /* El riel ES la lista de bloques. Repetirla a la derecha como una fila
       de cabeceras colapsadas mostraba lo mismo dos veces y alargaba la
       página al pedo. A la derecha va SOLO el bloque en edición. */
    .fi-body .fi-fo-builder.p-con-riel .fi-fo-builder-item.fi-collapsed { display: none; }

    /* Excepción: un bloque con errores de validación se muestra igual. Si
       falla un campo obligatorio del bloque 5 mientras se edita el 2, no
       puede quedar invisible. */
    .fi-body .fi-fo-builder.p-con-riel .fi-fo-builder-item.fi-collapsed:has(.fi-fo-field-wrp-error-message) {
        display: block;
    }

    /* Ordenar se hace desde el riel; en el panel sobran el asa de arrastre y
       las flechas. Quedan Duplicar y Quitar, que sí son del bloque abierto. */
    .fi-body .fi-fo-builder.p-con-riel .fi-fo-builder-item-header > ul:first-child { display: none; }


    /* "Contraer todo / Expandir todo" ya no aplica: expandir todo volvería a
       apilar los nueve paneles. */
    .fi-body .fi-fo-builder.p-con-riel > div:first-of-type:has(button) { display: none; }

    /* "Insertar bloque aquí" va ENTRE items. Con los items ocultos quedaban
       zonas de inserción sueltas en el aire, sin nada entre qué insertar.
       Se agrega desde el botón del final y se reordena desde el riel. */
    .fi-body .fi-fo-builder.p-con-riel .fi-fo-repeater-add-between-action-ctn,
    .fi-body .fi-fo-builder.p-con-riel .fi-fo-builder-add-between-action-ctn { display: none; }
    .fi-body .p-riel {
        grid-column: 1;
        /* `span 100` y no `1 / -1`: la linea -1 apunta al final de la grilla
           EXPLICITA, y acá las filas se crean implícitamente. Con `-1` el
           riel ocupaba solo la primera fila y empujaba la lista de bloques
           por debajo suyo en vez de ponerla al lado. */
        grid-row: 1 / span 100;
        position: sticky;
        top: calc(var(--p-topbar-h) + 22px);
    }
}

.fi-body .p-riel {
    display: none;
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: var(--p-r-card);
    box-shadow: var(--p-sombra-card);
    overflow: hidden;
}
@media (min-width: 1024px) { .fi-body .p-riel { display: block; } }

.fi-body .p-riel-cab {
    padding: 13px 14px;
    border-bottom: 1px solid var(--p-borde-suave);
}
.fi-body .p-riel-titulo {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--p-tinta-3);
}
.fi-body .p-riel-ayuda {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--p-tinta-4);
}

.fi-body .p-riel-lista {
    margin: 0;
    padding: 8px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Cada fila: el bloque a la izquierda, sus flechas de orden a la derecha. */
.fi-body .p-riel-fila {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fi-body .p-riel-item {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--p-r-control);
    background: transparent;
    text-align: start;
    cursor: pointer;
    color: var(--p-tinta-nav);
}

.fi-body .p-riel-flechas {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fi-body .p-riel-flecha {
    width: 24px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--p-icono);
    cursor: pointer;
}
.fi-body .p-riel-flecha:hover:not(:disabled) {
    color: var(--p-marca-tinta);
    background: var(--p-marca-fondo);
}
.fi-body .p-riel-flecha:disabled { opacity: .35; cursor: not-allowed; }

/* Aviso de bloque con errores: símbolo además de color. */
.fi-body .p-riel-alerta {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: var(--p-r-pill);
    background: var(--p-peligro-fondo);
    color: var(--p-peligro-tinta);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.fi-body .p-riel-item:hover {
    background: var(--p-marca-fondo);
    color: var(--p-marca-tinta);
}

/* El bloque en edición: relleno, borde y peso. Tres señales, ninguna
   depende de distinguir un color de otro. */
.fi-body .p-riel-item[aria-current="true"] {
    background: var(--p-marca-fondo-2);
    border-color: var(--p-marca-borde-2);
    color: var(--p-marca-tinta);
    font-weight: 700;
}

.fi-body .p-riel-num {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--p-superficie-3);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--p-tinta-4);
    font-variant-numeric: tabular-nums;
}
.fi-body .p-riel-item[aria-current="true"] .p-riel-num {
    background: var(--p-marca);
    color: var(--p-marca-sobre);
}

.fi-body .p-riel-nombre {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chapa numerada al inicio de cada fila.
   Se genera con un contador CSS y no con `blockNumbers()` de Filament, que
   pega el número al FINAL de la etiqueta ("Noticias 4") en vez de ponerlo
   como marca aparte. El contador además se renumera solo al reordenar. */
.fi-body .fi-fo-builder-item-header::before {
    counter-increment: bloque;
    content: counter(bloque);
    order: -1;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--p-superficie-3);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--p-tinta-4);
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-fo-builder-item:not(.fi-collapsed) .fi-fo-builder-item-header::before {
    background: var(--p-marca);
    color: var(--p-marca-sobre);
}

.fi-body .fi-fo-builder-item {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: 10px;
    box-shadow: none;
}

/* Bloque abierto: se despega del resto para no perder de vista cuál se
   está editando en una lista de nueve. */
.fi-body .fi-fo-builder-item:not(.fi-collapsed) {
    border-color: var(--p-marca-borde-2);
    box-shadow: var(--p-sombra-activo);
}

.fi-body .fi-fo-builder-item-header {
    gap: 10px;
    padding: 9px 10px;
    background: transparent;
    border: 0;
}

.fi-body .fi-fo-builder-item-header h4,
.fi-body .fi-fo-builder-item-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--p-tinta);
}

/* Chapa del número */
.fi-body .fi-fo-builder-item-header .fi-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--p-superficie-3);
    border: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--p-tinta-4);
    font-variant-numeric: tabular-nums;
}
.fi-body .fi-fo-builder-item:not(.fi-collapsed) .fi-fo-builder-item-header .fi-badge {
    background: var(--p-marca);
    color: var(--p-marca-sobre);
}

.fi-body .fi-fo-builder-item-header-icon { color: var(--p-marca-tinta); }

.fi-body .fi-fo-builder-item-content {
    padding: 18px;
    background: var(--p-superficie-2);
    border-top: 1px solid var(--p-borde-suave);
}

/* Flechas de reordenar: apagadas en reposo, marca al apuntarlas. */
.fi-body .fi-fo-builder-item-header .fi-icon-btn { color: var(--p-icono); }
.fi-body .fi-fo-builder-item-header .fi-icon-btn:hover {
    color: var(--p-marca-tinta);
    background: var(--p-marca-fondo);
    border-color: transparent;
}
.fi-body .fi-fo-builder-item-header .fi-icon-btn-color-danger { color: var(--p-peligro-suave); }
.fi-body .fi-fo-builder-item-header .fi-icon-btn-color-danger:hover {
    color: var(--p-peligro-tinta);
    background: var(--p-peligro-fondo);
    border-color: var(--p-peligro-borde);
}

/* "Añadir bloque" es la acción principal de esta pantalla: botón primario a
   todo el ancho, como en el prototipo, y no un enlace más entre otros. */
.fi-body .fi-fo-builder > .fi-fo-builder-block-picker { margin-top: 4px; }
.fi-body .fi-fo-builder > .fi-fo-builder-block-picker .fi-dropdown-trigger { width: 100%; }
.fi-body .fi-fo-builder > .fi-fo-builder-block-picker .fi-btn {
    width: 100%;
    justify-content: center;
    background: var(--p-marca);
    border-color: var(--p-marca);
    color: var(--p-marca-sobre);
    font-weight: 700;
}
.fi-body .fi-fo-builder > .fi-fo-builder-block-picker .fi-btn:hover {
    background: var(--p-marca-hover);
    border-color: var(--p-marca-hover);
}

/* Los "insertar aquí" entre bloques se mantienen discretos: aparecen al
   pasar por encima y no compiten con el botón principal. */
.fi-body .fi-fo-repeater-add-between-action-ctn .fi-btn,
.fi-body .fi-fo-builder-add-between-action-ctn .fi-btn {
    background: var(--p-superficie);
    border: 1px dashed var(--p-borde-punteado);
    color: var(--p-tinta-3);
    font-weight: 600;
}

/* ── Selector de bloques ─────────────────────────────────────────────
   Filament recorta las etiquetas a una línea ("Video (YouTube / Vim..."),
   que es justo la mitad que hace falta para elegir entre 26 bloques. */

.fi-body .fi-fo-builder-block-picker-ctn .fi-dropdown-list-item-label,
.fi-body .fi-fo-builder-block-picker-ctn .fi-btn-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}

.fi-body .fi-fo-builder-block-picker-ctn {
    gap: 10px;
    padding: 4px;
}

/* Alto maximo con scroll propio. Con 27 bloques el selector mide ~572 px y
   no tenia tope: en una pagina corta (constructor vacio) no entraba ni arriba
   ni abajo del boton, se abria hacia arriba y ~200 px quedaban fuera de la
   pantalla o bajo la topbar, sin forma de verlos. Con 45vh entra en el lado
   que elija Filament y el resto se alcanza scrolleando dentro del panel. */
.fi-body .fi-fo-builder-block-picker .fi-dropdown-panel {
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Cada bloque es una tarjeta con icono, nombre y para qué sirve. Con 26
   opciones, el nombre solo no alcanza para elegir. */
.fi-body .fi-fo-builder-block-picker .fi-dropdown-list-item,
.fi-body .fi-fo-builder-block-picker-ctn .fi-btn {
    min-height: 62px;
    gap: 11px;
    padding: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: start;
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--p-tinta);
}

.fi-body .fi-fo-builder-block-picker-ctn .fi-btn:hover {
    border-color: var(--p-marca);
    background: var(--p-marca-fondo);
}

.fi-body .fi-fo-builder-block-picker-ctn .fi-btn-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 8px;
    border-radius: var(--p-r-chico);
    background: var(--p-marca-fondo);
    color: var(--p-marca-tinta);
}

/* ── Botones ───────────────────────────────────────────────────────── */

.fi-body .fi-btn {
    min-height: 40px;
    padding: 0 16px;
    gap: 7px;
    border-radius: var(--p-r-control);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.fi-body .fi-btn-size-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.fi-body .fi-btn-size-lg { min-height: 44px; padding: 0 20px; }

.fi-body .fi-btn-color-primary {
    background: var(--p-marca);
    border: 1px solid var(--p-marca);
    color: var(--p-marca-sobre);
}
.fi-body .fi-btn-color-primary:hover {
    background: var(--p-marca-hover);
    border-color: var(--p-marca-hover);
}

.fi-body .fi-btn-color-gray,
.fi-body .fi-btn-outlined {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde-control);
    color: var(--p-tinta);
    font-weight: 600;
}
.fi-body .fi-btn-color-gray:hover,
.fi-body .fi-btn-outlined:hover { background: var(--p-superficie-3); }

/* Éxito: el verde de Tailwind con texto blanco daba 3.3:1. Este par da 7:1
   y no cambia el color, solo su profundidad. */
.fi-body .fi-btn-color-success {
    background: var(--p-ok-fondo);
    border: 1px solid var(--p-ok-borde);
    color: var(--p-ok-tinta);
}
.fi-body .fi-btn-color-success:hover { background: var(--p-ok-borde); }

.fi-body .fi-btn-color-danger {
    background: var(--p-superficie);
    border: 1px solid var(--p-peligro-borde);
    color: var(--p-peligro-tinta);
    font-weight: 600;
}
.fi-body .fi-btn-color-danger:hover { background: var(--p-peligro-fondo); }

.fi-body .fi-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--p-r-chico);
    border: 1px solid transparent;
    background: transparent;
    color: var(--p-tinta-3);
    box-shadow: none;
}
.fi-body .fi-icon-btn:hover {
    background: var(--p-superficie-3);
    border-color: var(--p-borde-control);
    color: var(--p-tinta);
}

.fi-body .fi-link { color: var(--p-enlace); font-weight: 600; }
.fi-body .fi-link:hover { color: var(--p-enlace-hover); text-decoration: underline; }

/* danger-600 de Tailwind sobre blanco da 4.31:1 y el mínimo AA es 4.5:1.
   Un escalón más oscuro sube a 7:1 sin dejar de leerse como rojo. */
.fi-body .fi-link.fi-color-danger,
.fi-body .fi-link.fi-color-danger span { color: var(--p-peligro-tinta); }

/* Filament pinta las etiquetas internas con `text-custom-600` y
   `dark:text-custom-400`, escalones derivados del primario. En oscuro eso
   cae a 3.3:1. Que hereden del contenedor, que ya sale de un token. */
.fi-body .fi-link span,
.fi-body .fi-btn-label,
.fi-body .fi-dropdown-list-item-label,
.fi-body .fi-pagination-item-label,
.fi-body .fi-tabs-item-label { color: inherit; }

/* ── Badges ────────────────────────────────────────────────────────── */

.fi-body .fi-badge {
    height: 24px;
    padding: 0 9px;
    gap: 6px;
    border-radius: var(--p-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
}

.fi-body .fi-badge.fi-color-primary,
.fi-body .fi-badge.fi-color-info {
    background: var(--p-marca-fondo);
    border: 1px solid var(--p-marca-borde);
    color: var(--p-marca-tinta);
}
.fi-body .fi-badge.fi-color-success {
    background: var(--p-ok-fondo);
    border: 1px solid var(--p-ok-borde);
    color: var(--p-ok-tinta);
}
.fi-body .fi-badge.fi-color-warning {
    background: var(--p-aviso-fondo);
    border: 1px solid var(--p-aviso-borde);
    color: var(--p-aviso-tinta);
}
.fi-body .fi-badge.fi-color-danger {
    background: var(--p-peligro-fondo);
    border: 1px solid var(--p-peligro-borde);
    color: var(--p-peligro-tinta);
}
.fi-body .fi-badge.fi-color-gray {
    background: var(--p-superficie-3);
    border: 1px solid var(--p-borde);
    color: var(--p-tinta-3);
}

/* Punto de estado: el color nunca informa solo, siempre acompaña al texto. */
.fi-body .p-punto {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: var(--p-r-pill);
    background: currentColor;
}

/* ── Tablas ────────────────────────────────────────────────────────── */

/* Scroll propio, siempre. Con titulos largos la tabla se pasa del ancho del
   contenedor y, sin esto, el que termina scrolleando de lado es el body. */
.fi-body .fi-ta-ctn {
    overflow-x: auto;
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: var(--p-r-card);
    box-shadow: var(--p-sombra-card);
}

/* Barra de herramientas en UNA fila.
   Filament apila tres bandas hermanas —acciones, filtros y buscador— dentro
   de `.fi-ta-header-ctn`. Medido en Noticias sumaban 272 px de controles
   antes de la primera fila de datos. Como son hermanos, alcanza con
   convertir el contenedor en una fila y ordenarlos.

   Orden: buscar, filtros, y la densidad empujada al extremo. Es el orden en
   que se usan: primero se acota, después se ajusta cómo se ve. */
.fi-body .fi-ta-header-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--p-borde-suave);
}

.fi-body .fi-ta-header-ctn > * {
    padding: 0;
    border: 0;
    background: transparent;
}

/* El buscador abre la barra, pegado al borde de la tarjeta. Filament lo
   empuja a la derecha con un `ms-auto` interno que acá sobra: ya no comparte
   fila con nada más. */
.fi-body .fi-ta-header-toolbar {
    order: 1;
    flex: 1 1 240px;
    max-width: 340px;
    justify-content: flex-start;
}
/* Dos hijos: un grupo de acciones que acá viene vacío, y el que trae el
   buscador con un `ms-auto`. Se anula ese margen y el ancho lo toma el
   segundo, no los dos. */
.fi-body .fi-ta-header-toolbar > * { margin-inline-start: 0; }
.fi-body .fi-ta-header-toolbar > *:first-child { flex: 0 0 auto; }
.fi-body .fi-ta-header-toolbar > *:last-child { flex: 1 1 auto; min-width: 0; }
.fi-body .fi-ta-filters-above-content-ctn { order: 2; flex: 0 1 auto; }
.fi-body .fi-ta-header { order: 3; margin-inline-start: auto; flex: 0 0 auto; }

/* Si alguna tabla sí declara título, se queda con su propia fila arriba. */
.fi-body .fi-ta-header:has(.fi-ta-header-heading) {
    order: 0;
    flex: 1 1 100%;
    margin-inline-start: 0;
}

/* Filtros en línea.
   Filament los apila —titulo "Filtros", etiqueta encima, campo debajo— y eso
   son 30 px de alto por filtro para mostrar una palabra. Acá la etiqueta va
   al lado del campo y el título sobra: el propio contenido lo dice.

   Ojo con la anidación: `.fi-fo-field-wrp` tiene UN solo hijo, un div en
   grid que contiene la fila de la etiqueta y la del campo. Ponerle flex al
   wrapper no hace nada; hay que flexear ese hijo. */
.fi-body .fi-ta-filters-above-content-ctn > * { padding: 0; }

.fi-body .fi-ta-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

/* La cabecera trae el h4 "Filtros" y el enlace para limpiarlos. Se esconde
   el título y el enlace pasa al final del grupo. */
.fi-body .fi-ta-filters > div:first-child {
    order: 2;
    display: flex;
    align-items: center;
}
.fi-body .fi-ta-filters > div:first-child h4 { display: none; }

.fi-body .fi-ta-filters > .fi-fo-component-ctn {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.fi-body .fi-ta-filters .fi-fo-field-wrp > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fi-body .fi-ta-filters .fi-fo-field-wrp-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p-tinta-3);
    white-space: nowrap;
}
.fi-body .fi-ta-filters .fi-input-wrp { min-width: 132px; }
.fi-body .fi-ta-filters .fi-select-input,
.fi-body .fi-ta-filters .fi-input { min-height: 36px; font-size: 13px; }
.fi-body .fi-ta-header-heading { font-size: 15px; font-weight: 700; color: var(--p-tinta); }
.fi-body .fi-ta-header-description { font-size: 13px; color: var(--p-tinta-3); }

.fi-body .fi-ta-search-field { width: 100%; }
.fi-body .fi-ta-search-field .fi-input-wrp {
    border: 1px solid var(--p-borde-control);
    border-radius: var(--p-r-control);
    background: var(--p-campo-hundido);
}
.fi-body .fi-ta-search-field .fi-input-wrp:focus-within { background: var(--p-superficie); }
.fi-body .fi-ta-search-field .fi-input { height: 38px; font-size: 13.5px; }

.fi-body .fi-ta-filters .fi-input-wrp,
.fi-body .fi-ta-filters .fi-select-input {
    border-radius: var(--p-r-control);
    font-size: 13.5px;
}

/* Filament pinta "Resetear los filtros" y "Deselecciona todos" en rojo de
   peligro. Ninguno borra nada: el rojo se reserva para lo que destruye datos.
   El `span` interno trae su propia clase de color, por eso se nombra. */
/* Controles de texto de la tabla: son autonomos, no enlaces dentro de una
   frase, asi que no aplica la excepcion "inline" de WCAG 2.2 SC 2.5.8 y les
   corresponde el minimo de 24x24. Medidos a 768 px daban 20 de alto. */
.fi-body .fi-ta-filters .fi-link,
.fi-body .fi-ta-selection-indicator .fi-link {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

.fi-body .fi-ta-filters .fi-link.fi-color-danger,
.fi-body .fi-ta-filters .fi-link.fi-color-danger span,
.fi-body .fi-ta-selection-indicator .fi-link.fi-color-danger,
.fi-body .fi-ta-selection-indicator .fi-link.fi-color-danger span {
    color: var(--p-tinta-3);
}
.fi-body .fi-ta-filters .fi-link.fi-color-danger:hover span,
.fi-body .fi-ta-selection-indicator .fi-link.fi-color-danger:hover span {
    color: var(--p-enlace);
}

.fi-body .fi-ta-table thead tr { background: var(--p-superficie-2); }
.fi-body .fi-ta-header-cell {
    padding: var(--p-celda-cab-y) 12px;
    border-bottom: 1px solid var(--p-borde);
}
.fi-body .fi-ta-header-cell-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--p-tinta-3);
}

.fi-body .fi-ta-row { background: var(--p-superficie); }
.fi-body .fi-ta-row:hover { background: var(--p-fila-hover); }
.fi-body .fi-ta-row:has(.fi-ta-record-checkbox:checked) { background: var(--p-marca-fondo); }

.fi-body .fi-ta-cell {
    padding: var(--p-celda-y);
    border-bottom: 1px solid var(--p-borde-fila);
    vertical-align: middle;
}

/* La celda ya pone su padding; `.fi-ta-text` agregaba otros 12 px y dejaba
   el contenido corrido respecto del encabezado de su propia columna. */
.fi-body .fi-ta-text { padding-inline: 0; }

.fi-body .fi-ta-text-item-label { font-size: 13.5px; color: var(--p-tinta-2); }

/* ── Punto de estado ───────────────────────────────────────────────────
   Solo en las columnas de estado, nunca en todos los badges: un punto
   delante de "Encargado Mecánica" no significaría nada. El color del punto
   refuerza el del badge, pero el texto sigue siendo quien informa. */
.fi-body .p-col-estado .fi-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: var(--p-r-pill);
    background: currentColor;
}
.fi-body .p-col-estado .fi-badge.fi-color-success::before { background: var(--p-ok-punto); }
.fi-body .p-col-estado .fi-badge.fi-color-warning::before { background: var(--p-aviso-punto); }
.fi-body .p-col-estado .fi-badge.fi-color-gray::before    { background: var(--p-icono-2); }


/* "Sin asignar" y demás huecos: el gris de Filament daba 2.56:1. En cursiva
   se distingue de un valor real sin depender del color. */
.fi-body .fi-ta-placeholder {
    font-size: 13px;
    font-style: italic;
    color: var(--p-tinta-tenue);
}
.fi-body .fi-ta-cell .fi-ta-text-item-label a { color: var(--p-tinta); }

/* Columna principal: el nombre es el enlace, la ruta va debajo en gris. */
.fi-body .p-celda-titulo {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--p-tinta);
}
.fi-body .p-celda-titulo:hover { color: var(--p-enlace); text-decoration: underline; }
.fi-body .p-celda-sub {
    display: inline-block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--p-tinta-3);
    font-variant-numeric: tabular-nums;
}

/* ── Paginación ────────────────────────────────────────────────────────
   Tres zonas: el recuento a la izquierda, los números al centro y el
   selector de tamaño a la derecha. Centrados, los números quedan donde la
   vista los busca y no pegados al borde derecho de la tarjeta.

   Sin bordes por botón: siete recuadros en fila competían con los de la
   tabla y con los de la barra de filtros. El número activo se distingue
   por relleno sólido, que es más fuerte que cualquier borde, y el resto
   aparece al pasar por encima. */

.fi-body .fi-ta-pagination,
.fi-body .fi-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--p-borde-suave);
}

.fi-body .fi-pagination-overview {
    grid-column: 1;
    /* Fila explícita en los tres. Con `grid-row: auto`, un ítem colocado en
       la columna 2 que aparece DESPUÉS de uno en la columna 3 se empuja a la
       fila siguiente: el auto-placement de grid no vuelve hacia atrás. Los
       números terminaban solos en un segundo renglón. */
    grid-row: 1;
    justify-self: start;
    font-size: 13px;
    color: var(--p-tinta-3);
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-pagination-items {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 2px;
    /* Filament le pone una pildora de fondo (blanco al 5% en oscuro) que
       sobra: los numeros ya no llevan borde y el relleno del activo es toda
       la caja que hace falta. */
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.fi-body .fi-pagination > div:has(.fi-pagination-records-per-page-select) {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

/* Cuadrados de 34: con padding lateral los de un dígito medían 42x34 y la
   fila se leía como rectángulos desparejos en vez de fichas iguales. */
.fi-body .fi-pagination-item-button {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--p-r-chico);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-tinta-2);
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}
.fi-body .fi-pagination-item-button:hover {
    background: var(--p-marca-fondo);
    color: var(--p-marca-tinta);
}

.fi-body .fi-pagination-item-button[aria-current="page"],
.fi-body .fi-pagination-item.fi-active .fi-pagination-item-button {
    background: var(--p-marca);
    color: var(--p-marca-sobre);
    font-weight: 700;
}

/* Filament separa los ítems con `divide-x`, o sea una línea vertical entre
   cada número. Con las fichas ya separadas por espacio, esas líneas son
   borde puro sin trabajo que hacer. */
.fi-body .fi-pagination-items > * {
    border-inline-start: 0;
    border-inline-end: 0;
}

/* Las flechas no son números: icono de 16 px (20 competía con el 13 del
   número) y color más tenue, para que se lean como navegación y no como una
   página más. Se separan del grupo para que en la página 1, donde Filament
   no dibuja "Anterior", la fila no parezca cortada. */
.fi-body .fi-pagination-item-button:has(svg) {
    min-width: 34px;
    padding: 0;
    color: var(--p-tinta-3);
}
/* El trazo por defecto es más fino que el peso de los dígitos y la flecha
   queda desdibujada al lado de ellos. */
.fi-body .fi-pagination-item-button svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.2;
}
.fi-body .fi-pagination-item:first-child:has(svg) { margin-inline-end: 6px; }
.fi-body .fi-pagination-item:last-child:has(svg) { margin-inline-start: 6px; }

.fi-body .fi-pagination-item-button:disabled {
    background: transparent;
    color: var(--p-icono-2);
    cursor: not-allowed;
}

.fi-body .fi-pagination-records-per-page-select .fi-select-input {
    min-height: 34px;
    font-size: 13px;
    border: 1px solid var(--p-borde-control);
    border-radius: var(--p-r-chico);
}

/* Angosto: las tres zonas se apilan y los números quedan centrados solos. */
@media (max-width: 768px) {
    .fi-body .fi-ta-pagination,
    .fi-body .fi-pagination {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
    }
    .fi-body .fi-pagination-overview,
    .fi-body .fi-pagination-items,
    .fi-body .fi-pagination > div:has(.fi-pagination-records-per-page-select) {
        grid-column: 1;
        justify-self: center;
    }
}

/* Barra de selección múltiple */
.fi-body .fi-ta-selection-indicator {
    padding: 10px 14px;
    background: var(--p-marca-fondo);
    border-bottom: 1px solid var(--p-marca-borde);
    color: var(--p-marca-tinta);
    font-size: 13px;
    font-weight: 600;
}

.fi-body .fi-ta-empty-state { padding: 44px 18px; }
.fi-body .fi-ta-empty-state-heading { font-size: 16px; font-weight: 700; color: var(--p-tinta); }
.fi-body .fi-ta-empty-state-description { font-size: 13.5px; color: var(--p-tinta-3); }

/* ── Desplegables ──────────────────────────────────────────────────── */

.fi-body .fi-dropdown-panel {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde-control);
    border-radius: 10px;
    box-shadow: var(--p-sombra-flot);
}
.fi-body .fi-dropdown-list { padding: 6px; }

.fi-body .fi-dropdown-list-item {
    min-height: 36px;
    gap: 9px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--p-tinta);
}
.fi-body .fi-dropdown-list-item:hover { background: var(--p-superficie-3); }
.fi-body .fi-dropdown-list-item.fi-dropdown-list-item-color-danger { color: var(--p-peligro-tinta); }
.fi-body .fi-dropdown-list-item-icon { color: inherit; }

.fi-body .fi-dropdown-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--p-tinta-3);
}

/* ── Modales ───────────────────────────────────────────────────────── */

.fi-body .fi-modal-window {
    background: var(--p-superficie);
    border-radius: 14px;
    box-shadow: var(--p-sombra-modal);
}
.fi-body .fi-modal-header { padding: 16px 18px; border-bottom: 1px solid var(--p-borde-suave); }
.fi-body .fi-modal-heading { font-size: 16px; font-weight: 700; color: var(--p-tinta); }
.fi-body .fi-modal-description { font-size: 13px; color: var(--p-tinta-3); }
.fi-body .fi-modal-content { padding: 18px; }
.fi-body .fi-modal-footer { padding: 14px 18px; border-top: 1px solid var(--p-borde-suave); }
.fi-body .fi-modal-close-overlay { background: rgba(15,23,42,.42); }

/* ── Barra de guardado fija ────────────────────────────────────────────
   Antes: 5691 px de scroll para llegar a "Guardar". Ahora la barra
   acompaña. El `left` lo pone Filament con --sidebar-width. */

/* z-index 5 y no 20: Filament dibuja TODOS los flotantes del formulario en
   z-index 10 — el selector de bloques (fi-dropdown-panel), el calendario, el
   selector de color y la lista del select. Con la barra en 20 quedaban por
   debajo suyo y se recortaban al abrirlos cerca del pie del formulario.
   Con 5 la barra sigue por encima del contenido normal y por debajo de esos
   flotantes; la topbar (20) y los modales (40) no se tocan. */
.fi-body .fi-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 24px -20px -40px;
    padding: 10px 20px;
    background: var(--p-velo);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--p-borde);
}

.fi-body .fi-form-actions .fi-ac {
    max-width: var(--p-ancho);
    margin: 0 auto;
    gap: 14px;
    flex-wrap: wrap;
}

/* Indicador de cambios sin guardar */
.fi-body .p-estado-guardado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 11px;
    border-radius: var(--p-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--p-ok-fondo);
    border: 1px solid var(--p-ok-borde);
    color: var(--p-ok-tinta);
}
.fi-body .p-estado-guardado[data-sucio="true"] {
    background: var(--p-aviso-fondo);
    border-color: var(--p-aviso-borde);
    color: var(--p-aviso-tinta);
}
.fi-body .p-estado-espaciador { flex: 1 1 auto; }

/* Aviso permanente arriba de la pestaña Menú: aplicar un ítem en su modal
   no guarda el registro completo. Ver DependenciaResource::form(). */
.fi-body .p-aviso-menu {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: var(--p-r-md, 10px);
    font-size: 13px;
    line-height: 1.5;
    background: var(--p-aviso-fondo);
    border: 1px solid var(--p-aviso-borde);
    color: var(--p-aviso-tinta);
}

/* ── Columna de apoyo del formulario ───────────────────────────────────
   Acompaña al editor sin entrar en el flujo: se queda a la vista mientras
   se recorren las pestañas. */

@media (min-width: 1024px) {
    .fi-body .fi-fo-component-ctn > div:last-child:has(.p-panel-apoyo) {
        position: sticky;
        top: calc(var(--p-topbar-h) + 22px);
    }
}

.fi-body .p-panel-apoyo .fi-section-header { padding: 16px 16px 0; }
.fi-body .p-panel-apoyo .fi-section-content { padding: 12px 16px 16px; }

/* Encabezado en versalitas: es una etiqueta de panel, no un título de
   sección del formulario. */
.fi-body .p-panel-apoyo .fi-section-header-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--p-tinta-3);
}

/* Barra de avance */
.fi-body .p-barra {
    height: 7px;
    border-radius: var(--p-r-pill);
    background: var(--p-marca-fondo-2);
    overflow: hidden;
}
.fi-body .p-barra-relleno {
    height: 100%;
    background: var(--p-marca);
    border-radius: inherit;
    transition: width .2s ease;
}
.fi-body .p-barra-cifra {
    margin: 8px 0 12px;
    font-size: 12px;
    color: var(--p-tinta-3);
    font-variant-numeric: tabular-nums;
}

/* Checklist */
.fi-body .p-check {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.fi-body .p-check-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}

/* La marca lleva símbolo además de color: quien no distingue verde de ámbar
   sigue leyendo ✓ contra !. */
.fi-body .p-check-marca {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--p-r-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.fi-body .p-check-item[data-estado="ok"] .p-check-marca {
    background: var(--p-ok-fondo);
    color: var(--p-ok-tinta);
}
.fi-body .p-check-item[data-estado="pendiente"] .p-check-marca {
    background: var(--p-aviso-fondo);
    color: var(--p-aviso-tinta);
}
.fi-body .p-check-item[data-estado="ok"] .p-check-texto {
    color: var(--p-tinta-2);
    font-weight: 500;
}
.fi-body .p-check-item[data-estado="pendiente"] .p-check-texto {
    color: var(--p-tinta);
    font-weight: 600;
}

/* Miniatura del sitio */
.fi-body .p-previa-marco {
    border-radius: var(--p-r-control);
    border: 1px solid var(--p-borde);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fi-body .p-previa-barra { height: 34px; flex: 0 0 auto; }
.fi-body .p-previa-cuerpo {
    flex: 1 1 auto;
    padding: 14px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* El marco crece con el contenido: ya no es un esquema de altura fija. */
.fi-body .p-previa-marca {
    display: block;
    padding: 0 10px;
    line-height: 34px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-body .p-previa-antetitulo {
    margin: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fi-body .p-previa-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.fi-body .p-previa-bajada {
    margin: 0;
    padding-left: 8px;
    border-left: 3px solid;
    font-size: 11.5px;
    line-height: 1.45;
    opacity: .85;
}
.fi-body .p-previa-parrafo {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    opacity: .8;
}
.fi-body .p-previa-enlace {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.fi-body .p-previa-boton {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

/* Informe de contraste: el numero medido, no solo un tilde. */
.fi-body .p-contraste {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fi-body .p-contraste-fila {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.35;
}
.fi-body .p-contraste-icono { font-weight: 700; text-align: center; }
.fi-body .p-contraste-par   { color: var(--p-tinta-2); }
.fi-body .p-contraste-ratio {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 11px;
}
.fi-body .p-contraste-ok    .p-contraste-icono,
.fi-body .p-contraste-ok    .p-contraste-ratio { color: #15803d; }
.fi-body .p-contraste-falla .p-contraste-icono,
.fi-body .p-contraste-falla .p-contraste-ratio { color: #b91c1c; font-weight: 600; }
.fi-body .p-contraste-falla .p-contraste-par   { color: var(--p-tinta); font-weight: 500; }

.fi-body .p-previa-dominio {
    margin: 9px 0 0;
    font-size: 12px;
    color: var(--p-tinta-3);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}
.fi-body .p-previa-nota {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--p-tinta-3);
}

/* ── Widgets ───────────────────────────────────────────────────────── */

.fi-body .fi-wi-stats-overview-stat {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: var(--p-r-card);
    box-shadow: var(--p-sombra-card);
    transition: box-shadow .15s, transform .15s;
}
.fi-body .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 12px rgba(15,23,42,.08);
    transform: translateY(-1px);
}
.fi-body .fi-wi-stats-overview-stat-label { font-size: 13px; color: var(--p-tinta-3); }
.fi-body .fi-wi-stats-overview-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--p-tinta);
    font-variant-numeric: tabular-nums;
}

/* ── Notificaciones ────────────────────────────────────────────────── */

.fi-body .fi-no-notification {
    background: var(--p-superficie);
    border: 1px solid var(--p-borde);
    border-radius: var(--p-r-card);
    box-shadow: var(--p-sombra-flot);
}

/* ── Responsive ────────────────────────────────────────────────────── */

/* El prototipo esta dibujado para escritorio. Estas reglas definen que cede
   primero al angostarse, de menor a mayor perdida:
     1. las migas (la ubicacion ya la dice el titulo de la pagina)
     2. la pastilla de sitios activos (dato de contexto, no una accion)
     3. el buscador global (queda el buscador propio de cada tabla)
   El sidebar no entra en esa lista: Filament lo pasa a panel deslizante por
   su cuenta por debajo de 1024 px. */

/* Tablet */
@media (max-width: 1024px) {
    .fi-body .fi-main { padding: 18px 16px 36px; }
    .fi-body .fi-form-actions { margin: 20px -16px -36px; padding: 10px 16px; }

    .fi-body .fi-topbar > nav { gap: 12px; padding: 0 16px; }
    .fi-body .p-migas { display: none; }

    /* El boton de abrir el sidebar hereda el estilo del de colapso. */
    .fi-body .fi-topbar-open-sidebar-btn,
    .fi-body .fi-topbar-close-sidebar-btn {
        width: 36px;
        height: 36px;
        border: 1px solid var(--p-borde-control);
        border-radius: var(--p-r-chico);
        color: var(--p-tinta-4);
    }

    /* Formulario a una columna: dos columnas de 230 px en 900 px de ancho
       dejan el campo mas angosto que su propio texto de ayuda. */
    .fi-body .fi-fo-component-ctn { grid-template-columns: minmax(0, 1fr); }
}

/* Movil grande */
@media (max-width: 768px) {
    .fi-body .p-pastilla { display: none; }
    .fi-body .fi-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .fi-body .fi-header .fi-ac { width: 100%; }

    /* Pestanas: se deslizan en horizontal en vez de apilarse en tres filas. */
    .fi-body .fi-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .fi-body .fi-tabs::-webkit-scrollbar { display: none; }
    .fi-body .fi-tabs-item { flex: 0 0 auto; }

    /* Ancho minimo para que las columnas no se aplasten al desbordar. */
    .fi-body .fi-ta-table { min-width: 720px; }

    .fi-body .fi-ta-filters-above-content-ctn { flex-direction: column; align-items: stretch; }
}

/* Movil chico: 375 px de referencia */
@media (max-width: 640px) {
    .fi-body .fi-main { padding: 14px 12px 32px; }
    .fi-body .fi-form-actions { margin: 16px -12px -32px; padding: 10px 12px; }
    .fi-body .fi-header-heading { font-size: 20px; }
    .fi-body .fi-section-header { padding: 14px 14px 0; }
    .fi-body .fi-section-content { padding: 14px; }
    .fi-body .fi-ta-cell,
    .fi-body .fi-ta-header-cell { padding: 10px; }
    .fi-body .fi-global-search { display: none; }

    /* 16 px en los campos: por debajo, iOS hace zoom al enfocar y deja la
       pagina descuadrada.
       Los de la barra de filtros se nombran aparte porque su regla de
       escritorio (13 px) es mas especifica y le ganaria a esta. */


    /* Filtros a todo el ancho y apilados: en 375 px no entran dos selects
       de 132 px con sus etiquetas al lado. */
    .fi-body .fi-ta-filters > .fi-fo-component-ctn { width: 100%; }
    .fi-body .fi-ta-filters .fi-fo-field-wrp > div { width: 100%; }
    .fi-body .fi-ta-filters .fi-input-wrp { flex: 1 1 auto; }

    /* La barra de guardado se apila y el boton principal toma el ancho. */
    .fi-body .fi-form-actions .fi-ac { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .fi-body .fi-form-actions .fi-ac .fi-btn { width: 100%; }
}

/* Objetivos tactiles: hasta 1024 px se asume dedo, no puntero. Una tablet
   se toca igual que un telefono y 40 px de boton se fallan seguido. */
@media (max-width: 1024px) {
    /* Area tactil minima de 44 px en todo lo que se toca, filtros incluidos.
       Medido a 375 px, los selects de filtro quedaban en 36. */
    .fi-body .fi-btn,
    .fi-body .fi-icon-btn,
    .fi-body .fi-sidebar-item-button,
    .fi-body .fi-ta-filters .fi-select-input,
    .fi-body .fi-ta-filters .fi-input,
    .fi-body .fi-ta-search-field .fi-input,
    .fi-body .fi-pagination-item-button,
    .fi-body .fi-pagination-records-per-page-select .fi-select-input { min-height: 44px; }
    .fi-body .fi-icon-btn,
    .fi-body .fi-pagination-item-button { min-width: 44px; }

    /* Los buscadores fijan `height: 38px` en escritorio, y un alto explicito
       le gana al min-height. Se libera y se declara el minimo tactil sobre el
       mismo selector, que si no pierde contra la regla base de 38. */
    .fi-body .fi-global-search-field .fi-input,
    .fi-body .fi-ta-search-field .fi-input {
        height: auto;
        min-height: 44px;
    }

    /* 16 px en los campos. Por debajo de eso iOS hace zoom al enfocar y deja
       la pagina descuadrada, y eso pasa igual en tablet que en telefono.
       Los de la barra de filtros se nombran aparte: su regla de escritorio
       (13 px) es mas especifica y le ganaria a una generica. */
    .fi-body .fi-input,
    .fi-body .fi-select-input,
    .fi-body .fi-ta-filters .fi-input,
    .fi-body .fi-ta-filters .fi-select-input,
    .fi-body .fi-ta-search-field .fi-input,
    .fi-body .fi-global-search-field .fi-input,
    .fi-body .fi-pagination-records-per-page-select .fi-select-input { font-size: 16px; }

    /* El avatar mide 36 px por diseño del prototipo, pero en táctil es un
       botón y tiene que llegar a 44. */
    .fi-body .fi-user-menu .fi-dropdown-trigger > button,
    .fi-body .fi-user-menu img { width: 44px; height: 44px; }

    /* Los enlaces de accion tambien se tocan con el dedo. */
    .fi-body .fi-ta-filters .fi-link,
    .fi-body .fi-ta-selection-indicator .fi-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Movimiento reducido: se respeta la preferencia del sistema. */
@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
    }
}