/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN — .nav- (la cabecera y el riel lateral: NavMenu), .navinf- (la
   barra inferior del teléfono), .navsec- (las secciones del menú: el riel del
   escritorio y la hoja «Más»), .navmas- (la hoja «Más»), .navhoja- (la hoja de
   búsqueda: pantalla completa en el teléfono, un diálogo al centro en el
   escritorio) y .bus- (el buscador progresivo, que se usa también en la portada).

   La barra y la hoja «Más» sólo existen por debajo de 1024 px, el mismo corte
   que usa el layout para cambiar el riel lateral por la cabecera.

   Las cifras: lo que pide una acción de la persona (lo que le toca, los avisos
   sin leer) va LLENO; lo que sólo espera envío va con CONTORNO y la nube. Nunca
   sólo el color: la cifra se lee y se oye.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --navinf-alto: 62px;
    /* Lo que tapa el teclado del teléfono (panNav lo mide con visualViewport). */
    --teclado: 0px;
}

/* Texto que sólo se oye (lector de pantalla). */
.nav-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Las áreas seguras a los lados (un teléfono con muesca, de lado). */
@media (max-width: 1023.98px) {
    .page {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* ── La barra inferior ── */
.navinf {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;                 /* bajo los diálogos de Radzen (1000+) y el panel de la campana (1050) */
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid rgba(12, 39, 64, .08);
    box-shadow: 0 -10px 28px -18px rgba(12, 39, 64, .45);
    transition: transform .2s ease;
    font-family: var(--pan-sans, 'IBM Plex Sans', system-ui, sans-serif);
}

.navinf-lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;
}

.navinf-li { min-width: 0; display: flex; }

.navinf-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 48px;              /* lo que se acierta con el pulgar */
    height: var(--navinf-alto);
    padding: 0 2px;
    margin: 0;
    border: 0;
    background: none;
    color: var(--pan-apagado, #5b7186);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.navinf-icono-caja { position: relative; display: inline-flex; }

.navinf-icono {
    font-size: 24px;
    line-height: 1;
    padding: 3px 16px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}

.navinf-texto {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navinf-item:hover .navinf-icono { background: rgba(24, 95, 165, .07); }
.navinf-item:focus-visible { outline: none; }
.navinf-item:focus-visible .navinf-icono { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 1px; }

/* El destino en el que se está: tinta navy y la pastilla del icono llena. */
.navinf-activo { color: var(--pan-tinta, #0C2740); }
.navinf-activo .navinf-icono {
    background: rgba(24, 95, 165, .13);
    color: var(--pan-azul, #185FA5);
    font-variation-settings: 'FILL' 1;
}

/* Las cifras de la barra: avisos sin leer (rojo), lo que le toca (azul), envíos (contorno). */
/* Empiezan a la derecha del centro del icono: tapan su esquina, no el dibujo. */
.navinf-insignia {
    position: absolute;
    top: -3px;
    left: calc(50% + 4px);
    right: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--pan-rojo, #d32f14);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

.navinf-insignia-tareas { background: var(--pan-azul, #185FA5); }

.navinf-insignia-envio {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 0 3px 0 2px;
    background: #fff;
    color: var(--pan-ambar, #b8541b);
    border: 1.5px solid currentColor;
    line-height: 15px;
    box-shadow: 0 0 0 1.5px #fff;
}

    .navinf-insignia-envio .material-symbols-outlined { font-size: 11px; line-height: 1; }

/* A 320 px caben cinco destinos de 64 px: «Seguimiento» y «Actividades» sin recortar. */
@media (max-width: 359.98px) {
    .navinf-lista { padding: 0 2px; }
    .navinf-item { padding: 0 1px; font-size: 10px; letter-spacing: 0; }
    .navinf-icono { padding: 3px 13px; }
}

/* El hueco al final de la página, para que la barra no tape lo último. */
.navinf-espacio {
    flex: 0 0 auto;
    height: calc(var(--navinf-alto) + env(safe-area-inset-bottom, 0px) + 10px);
}

/* Con el teclado abierto, la barra estorba: se retira hasta que se suelta el campo. */
.page:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus) .navinf {
    transform: translateY(110%);
}

@media (min-width: 1024px) {
    .navinf,
    .navinf-espacio,
    .navmas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .navinf { transition: none; }
}

/* ═════════════ La cabecera y el riel (NavMenu) ═════════════
   La cabecera en todos los anchos; el riel lateral (buscar, las secciones, la
   ayuda y la cuenta) sólo en el escritorio. Vivían en NavMenu.razor.css; aquí
   quedan con el resto de la navegación y llegan con la versión de esta hoja (un
   navegador que guardó el paquete de estilos con ámbito sin versión enseñaba
   «Buscar» en blanco y «dónde se está» encima del logo).

   Un solo lenguaje en el riel: filas como las de las secciones (icono de 20 px,
   texto de 13 px, el mismo resaltado) y botones fantasma de 36 px, iguales
   entre sí (transparentes; se iluminan al pasar), para fijar, la campana y salir. */

.nav-shell {
    display: flex;
    flex-direction: column;
    background: inherit;
}

/* ── La cabecera ── */
.nav-brand {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(159, 208, 242, .14);
    background: rgba(0, 0, 0, .14);
    overflow: hidden;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 0 1 auto;
    min-height: 44px;
    border-radius: 8px;
    text-decoration: none;
}

    .nav-logo:focus-visible { outline: 2px solid #9fd0f2; outline-offset: 2px; }

    .nav-logo img {
        height: 30px;
        width: auto;
        flex: none;
        object-fit: contain;
    }

/* El nombre institucional junto al isotipo (el SVG no trae texto). */
.nav-marca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.15;
}

.nav-marca-emp {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-marca-sub {
    color: #9fd0f2;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dónde se está (sólo en el teléfono, fuera del Inicio): la sección y la pantalla. */
.nav-donde {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    flex-direction: column;
    line-height: 1.2;
}

.nav-donde-sec {
    color: #9fd0f2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-donde-op {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La ayuda y el menú del teléfono van a la derecha. */
.nav-brand .nav-ayuda { margin-left: auto; }

/* El menú del teléfono (abre «Más»). 44 px: lo que se acierta con el pulgar. Con
   dos clases gana a las reglas de Bootstrap para .navbar-toggler. */
.nav-brand .navbar-toggler {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .nav-brand .navbar-toggler .material-symbols-outlined {
        font-size: 26px;
        line-height: 1;
    }

    .nav-brand .navbar-toggler:hover,
    .nav-brand .navbar-toggler:focus-visible {
        background: rgba(255, 255, 255, .20);
        outline: none;
    }

    .nav-brand .navbar-toggler:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

/* Fijar o contraer el riel, la campana y salir: botones fantasma de 36 px. */
.nav-pin,
.nav-foot .notif-boton,
.nav-foot .acct-logout {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #c8d6e2;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

    .nav-pin:hover,
    .nav-foot .notif-boton:hover { background: rgba(255, 255, 255, .09); color: #fff; }

    .nav-foot .acct-logout:hover { background: rgba(211, 47, 20, .24); color: #fff; }

    .nav-pin:focus-visible,
    .nav-foot .notif-boton:focus-visible,
    .nav-foot .acct-logout:focus-visible { outline: 2px solid #9fd0f2; outline-offset: -2px; }

    .nav-pin .material-symbols-outlined,
    .nav-foot .notif-boton .material-symbols-outlined,
    .nav-foot .acct-logout .material-symbols-outlined { font-size: 21px; line-height: 1; }

/* Fijar sólo tiene sentido en el escritorio. */
.nav-pin { display: none; }

/* ── El cuerpo del riel (escritorio) ── */
.nav-body {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

    .nav-body::-webkit-scrollbar { width: 9px; }

    .nav-body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .28);
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

        .nav-body::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, .45);
            background-clip: content-box;
        }

/* Buscar (Ctrl+K): abre la hoja de búsqueda como un diálogo en el centro. */
.nav-buscar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin: 0 0 10px;
    padding: 0 10px;
    border: 1px solid rgba(159, 208, 242, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #c8d6e2;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

    .nav-buscar:hover { background: rgba(255, 255, 255, .12); color: #fff; }
    .nav-buscar:focus-visible { outline: 2px solid #9fd0f2; outline-offset: 1px; }
    .nav-buscar .material-symbols-outlined { font-size: 20px; }

.nav-buscar-txt { flex: 1 1 auto; }

/* Gana al estilo de Bootstrap para <kbd> (negro). */
.nav-buscar-kbd {
    flex: none;
    padding: 1px 6px;
    border: 1px solid rgba(159, 208, 242, .3);
    border-radius: 5px;
    background: transparent;
    color: #9fd0f2;
    font-family: inherit;
    font-size: 10.5px;
    box-shadow: none;
}

.nav-secciones { flex: 1 1 auto; }

/* ── El pie (escritorio): la ayuda y, debajo, la cuenta con la campana y salir ── */
.nav-foot {
    display: none;
    flex: none;
    /* Los iconos y los textos del pie caen en las columnas de las opciones del
       menú: el icono y el avatar centrados a 30 px del borde, el texto a 50–52 px. */
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas:
        "ayuda  ayuda ayuda   ayuda"
        "avatar meta  campana salir";
    align-items: center;
    column-gap: 4px;
    row-gap: 6px;
    padding: 8px 8px 10px;
    border-top: 1px solid rgba(159, 208, 242, .14);
    background: rgba(0, 0, 0, .14);
}

/* La ayuda: una fila como las de las secciones; abierta, se marca como la pantalla actual. */
.nav-pie-ayuda {
    grid-area: ayuda;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #c8d6e2;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

    .nav-pie-ayuda .material-symbols-outlined {
        flex: none;
        width: 20px;
        font-size: 19px;
        line-height: 1;
        text-align: center;
        color: #9fbbd2;
    }

    .nav-pie-ayuda:hover { background: rgba(24, 95, 165, .24); color: #fff; }
    .nav-pie-ayuda:focus-visible { outline: 2px solid #9fd0f2; outline-offset: -2px; }
    .nav-pie-ayuda[aria-expanded="true"] { background: rgba(24, 95, 165, .48); color: #fff; font-weight: 700; }
    .nav-pie-ayuda[aria-expanded="true"] .material-symbols-outlined { color: #9fd0f2; }

.nav-pie-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La cuenta: sus partes entran en la rejilla del pie, con la campana entre el nombre y salir. */
.nav-foot .acct { display: contents; }

.nav-foot .acct-avatar {
    grid-area: avatar;
    justify-self: start;
    margin-left: 7px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #185FA5;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(159, 208, 242, .25);
}

.nav-foot .acct-meta {
    grid-area: meta;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.nav-foot .acct-name {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .nav-foot .acct-name:hover { text-decoration: underline; }
    .nav-foot .acct-name:focus-visible { outline: 2px solid #9fd0f2; outline-offset: 2px; border-radius: 3px; }

.nav-foot .acct-sub {
    color: #b9c9d8;
    font-size: 10.5px;
}

.nav-notif { grid-area: campana; display: flex; }

.nav-foot .acct-logout { grid-area: salir; }

/* Sin sesión: «Ingresar» ocupa la fila de la cuenta. */
.nav-foot .acct-login {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c8d6e2;
    text-decoration: none;
    padding: 8px;
    border-radius: 9px;
    font-size: 13px;
}

    .nav-foot .acct-login:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* La campana del riel enseña un punto, no la cifra encima del dibujo: la cifra va
   en «Mis avisos» y el nombre del botón la dice. */
.nav-foot .notif-insignia {
    top: 7px;
    right: 7px;
    min-width: 0;
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 0 0 2px #0f3351;
}

/* ═════════════ Teléfono y tableta: sólo la cabecera ═════════════ */
@media (max-width: 1023.98px) {
    /* Las áreas seguras: con la aplicación instalada, la barra de estado del
       teléfono queda encima de la cabecera. */
    .nav-brand {
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: calc(10px + env(safe-area-inset-left, 0px));
        padding-right: calc(10px + env(safe-area-inset-right, 0px));
    }

    /* Fuera del Inicio, el nombre cede su sitio a «dónde se está». */
    .nav-marca-con-donde { display: none; }
    .nav-donde { display: flex; }
}

/* ═════════════ Escritorio: el riel ═════════════ */
@media (min-width: 1024px) {
    .nav-brand .navbar-toggler { display: none; }

    /* La ayuda baja al pie del riel, ancho o angosto. */
    .nav-brand .nav-ayuda { display: none; }

    .nav-shell {
        height: 100vh;
        width: 92px;
        overflow: hidden;
        transition: width .2s ease;
    }

        /* Ancho fijado: cabe el nombre más largo de una opción con su icono. */
        .nav-shell.expanded { width: 272px; }

    .nav-brand { padding: 0 8px 0 14px; }

    .nav-pin { display: inline-flex; margin-left: auto; }

    .nav-body { display: flex; }
    .nav-foot { display: grid; }

    /* El panel de la campana sale a la derecha del riel, anclado a la ventana: el
       riel recorta lo que se sale de su ancho. */
    .nav-notif .notif-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 12px !important;
        right: auto !important;
        left: 280px !important;
        max-height: min(560px, calc(100vh - 24px)) !important;
    }

    .nav-shell.collapsed .nav-notif .notif-panel { left: 100px !important; }

    /* Angosto: el isotipo y fijar, centrados; sin nombre ni textos. */
    .nav-shell.collapsed .nav-marca { display: none; }

    .nav-shell.collapsed .nav-logo {
        justify-content: center;
        gap: 0;
    }

    .nav-shell.collapsed .nav-logo img { height: 24px; }

    .nav-shell.collapsed .nav-brand { justify-content: center; padding: 0 5px; gap: 2px; }

    .nav-shell.collapsed .nav-pin { width: 32px; height: 32px; margin-left: 0; }

        .nav-shell.collapsed .nav-pin .material-symbols-outlined { font-size: 19px; }

    .nav-shell.collapsed .nav-body { padding: 10px 6px 12px; }

    .nav-shell.collapsed .nav-buscar { justify-content: center; padding: 0; }
    .nav-shell.collapsed .nav-buscar-txt,
    .nav-shell.collapsed .nav-buscar-kbd { display: none; }

    /* Angosto: el pie es una columna de iconos centrados: la ayuda, la campana y el avatar. */
    .nav-shell.collapsed .nav-foot {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "ayuda" "campana" "avatar";
        justify-items: center;
        row-gap: 4px;
        padding: 8px 6px 10px;
    }

    .nav-shell.collapsed .nav-pie-ayuda { width: 44px; min-height: 40px; justify-content: center; padding: 0; }
    .nav-shell.collapsed .nav-foot .acct-avatar { justify-self: center; margin-left: 0; }

    .nav-shell.collapsed .nav-pie-txt,
    .nav-shell.collapsed .nav-foot .acct-meta,
    .nav-shell.collapsed .nav-foot .acct-logout,
    .nav-shell.collapsed .nav-foot .acct-login-txt { display: none; }

    .nav-shell.collapsed .nav-foot .notif-boton { width: 44px; height: 40px; }

    .nav-shell.collapsed .nav-foot .acct-login { grid-row: auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-shell { transition: none; }
}

/* ═════════════ Las secciones del menú (NavSecciones) ═════════════
   Dos niveles: la sección (un botón que se despliega) y sus pantallas (enlaces).
   Los subgrupos son rótulos. En el riel, sobre navy; en la hoja «Más», sobre claro. */

.navsec,
.navsec-ops {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navsec { display: flex; flex-direction: column; gap: 2px; }

.navsec [hidden],
.navmas[hidden],
.navmas [hidden] { display: none !important; }

.navsec-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.navsec-icono { flex: none; font-size: 21px; line-height: 1; }
.navsec-titulo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navsec-flecha { flex: none; font-size: 20px; line-height: 1; transition: transform .15s ease; }
.navsec-abierta > .navsec-cab .navsec-flecha { transform: rotate(180deg); }

.navsec-lista { padding: 2px 0 8px; }

.navsec-grupo {
    margin: 8px 0 2px;
    padding: 0 12px 0 42px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.navsec-op {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px 0 12px;
    border-radius: 9px;
    color: inherit;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.navsec-op-icono { flex: none; width: 20px; font-size: 19px; line-height: 1; text-align: center; }
.navsec-op-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La pantalla actual: barra a la izquierda, fondo y peso; nunca sólo el color. */
.navsec-op-activa { font-weight: 700; }
.navsec-op-activa::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
}

.navsec-cifra {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    justify-content: center;
}

    .navsec-cifra .material-symbols-outlined { font-size: 13px; line-height: 1; }

/* ── En el riel (navy) ── */
.navsec-riel { color: #c8d6e2; }
.navsec-riel .navsec-cab { color: #e3edf5; }
.navsec-riel .navsec-cab:hover { background: rgba(255,255,255,.07); color: #fff; }
.navsec-riel .navsec-cab:focus-visible,
.navsec-riel .navsec-op:focus-visible { outline: 2px solid #9fd0f2; outline-offset: -2px; }
.navsec-riel .navsec-icono { color: #9fd0f2; }
.navsec-riel .navsec-flecha { color: #8fb0c9; }
.navsec-riel .navsec-actual > .navsec-cab { background: rgba(159,208,242,.10); color: #fff; }
.navsec-riel .navsec-grupo { color: #9fd0f2; }
.navsec-riel .navsec-op:hover { background: rgba(24,95,165,.24); color: #fff; }
.navsec-riel .navsec-op-icono { color: #9fbbd2; }
.navsec-riel .navsec-op-activa { background: rgba(24,95,165,.48); color: #fff; }
.navsec-riel .navsec-op-activa .navsec-op-icono { color: #9fd0f2; }
.navsec-riel .navsec-op-activa::before { background: #9fd0f2; }
.navsec-riel .navsec-cifra-tareas { background: #9fd0f2; color: #0C2740; }
.navsec-riel .navsec-cifra-avisos { background: #d32f14; color: #fff; }
.navsec-riel .navsec-cifra-envio { border: 1.5px solid #f2b98a; color: #f6caa3; }

/* El riel angosto: sólo los iconos de las secciones, centrados. */
.navsec-comprimido .navsec-cab { justify-content: center; padding: 0; min-height: 44px; position: relative; }
.navsec-comprimido .navsec-titulo,
.navsec-comprimido .navsec-flecha { display: none; }
.navsec-comprimido .navsec-icono { font-size: 23px; }
.navsec-comprimido .navsec-cifra {
    position: absolute;
    top: 3px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9.5px;
}
.navsec-comprimido .navsec-cifra .material-symbols-outlined { display: none; }
/* En el riel angosto cabe una sola cifra (la primera: lo que le toca); el nombre del botón las dice todas. */
.navsec-comprimido .navsec-cifra ~ .navsec-cifra { display: none; }

/* El panel de una sección, al lado del riel angosto. */
.navsec-fondo { position: fixed; inset: 0; z-index: 1040; background: transparent; }

.navsec-flyout {
    position: fixed;
    top: 72px;
    left: 98px;
    bottom: 12px;
    z-index: 1045;
    width: 272px;
    overflow-y: auto;
    padding: 12px 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, #0f3050 0%, #143f63 100%);
    color: #c8d6e2;
    box-shadow: 0 24px 48px -16px rgba(5, 20, 35, .55), 0 0 0 1px rgba(159,208,242,.16);
}

.navsec-flyout-tit {
    margin: 0 0 4px;
    padding: 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.navsec-flyout .navsec-grupo { color: #9fd0f2; padding-left: 12px; }
.navsec-flyout .navsec-op:hover { background: rgba(24,95,165,.30); color: #fff; }
.navsec-flyout .navsec-op:focus-visible { outline: 2px solid #9fd0f2; outline-offset: -2px; }
.navsec-flyout .navsec-op-icono { color: #9fbbd2; }
.navsec-flyout .navsec-op-activa { background: rgba(24,95,165,.5); color: #fff; }
.navsec-flyout .navsec-op-activa::before { background: #9fd0f2; }
.navsec-flyout .navsec-cifra-tareas { background: #9fd0f2; color: #0C2740; }
.navsec-flyout .navsec-cifra-avisos { background: #d32f14; color: #fff; }
.navsec-flyout .navsec-cifra-envio { border: 1.5px solid #f2b98a; color: #f6caa3; }

/* ── En la hoja «Más» (claro): una columna, objetivos de 48 px ── */
.navsec-hoja { color: var(--pan-tinta, #0C2740); gap: 6px; }
.navsec-hoja .navsec-sec {
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--pan-linea, #e6ecf2);
}
.navsec-hoja .navsec-cab { min-height: 52px; padding: 0 14px; font-size: 15px; border-radius: 14px; }
.navsec-hoja .navsec-cab:hover { background: rgba(24, 95, 165, .05); }
.navsec-hoja .navsec-cab:focus-visible,
.navsec-hoja .navsec-op:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: -2px; }
.navsec-hoja .navsec-icono { color: var(--pan-azul, #185FA5); font-size: 22px; }
.navsec-hoja .navsec-flecha { color: var(--pan-apagado, #5b7186); }
.navsec-hoja .navsec-actual { border-color: rgba(24, 95, 165, .35); box-shadow: inset 3px 0 0 var(--pan-azul, #185FA5); }
.navsec-hoja .navsec-lista { padding: 0 6px 10px; }
.navsec-hoja .navsec-grupo { color: var(--pan-apagado, #5b7186); padding-left: 14px; margin-top: 10px; }
.navsec-hoja .navsec-op { min-height: 48px; padding: 0 12px 0 14px; font-size: 14.5px; color: #1d3550; }
.navsec-hoja .navsec-op:hover { background: rgba(24, 95, 165, .06); }
.navsec-hoja .navsec-op-icono { color: var(--pan-apagado, #5b7186); font-size: 21px; width: 22px; }
.navsec-hoja .navsec-op-activa { background: rgba(24, 95, 165, .10); color: var(--pan-tinta, #0C2740); }
.navsec-hoja .navsec-op-activa .navsec-op-icono { color: var(--pan-azul, #185FA5); }
.navsec-hoja .navsec-op-activa::before { background: var(--pan-azul, #185FA5); }
.navsec-hoja .navsec-cifra-tareas { background: var(--pan-azul, #185FA5); color: #fff; }
.navsec-hoja .navsec-cifra-avisos { background: var(--pan-rojo, #d32f14); color: #fff; }
.navsec-hoja .navsec-cifra-envio { border: 1.5px solid var(--pan-ambar, #b8541b); color: var(--pan-ambar, #b8541b); background: #fff; }

/* Pantallas táctiles de cualquier ancho (una tableta con el riel): 44 px por objetivo. */
@media (pointer: coarse) {
    .navsec-riel .navsec-op,
    .navsec-flyout .navsec-op { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .navsec-flecha { transition: none; }
}

/* ═════════════ La hoja «Más» (teléfono) ═════════════
   Sobre todo menos la barra inferior, que sigue a la vista y usable. */
.navmas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--navinf-alto) + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--pan-fondo, #f6f8fb);
    font-family: var(--pan-sans, 'IBM Plex Sans', system-ui, sans-serif);
    animation: navhoja-entrar .18s ease-out;
}

/* Sin barra inferior (formularios, detalles) o con el teclado abierto: hasta abajo. */
.page:not(:has(.navinf)) .navmas,
.page:has(.navmas input:focus) .navmas { bottom: 0; }

.navmas-cab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* En la tableta, el título y la X se alinean con la columna del cuerpo (640 px al centro). */
    padding: calc(8px + env(safe-area-inset-top, 0px))
             max(calc(8px + env(safe-area-inset-right, 0px)), calc((100% - 640px) / 2 - 10px))
             8px
             max(calc(16px + env(safe-area-inset-left, 0px)), calc((100% - 640px) / 2));
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--pan-linea, #e6ecf2);
}

.navmas-titulo { margin: 0; font-size: 17px; font-weight: 700; color: var(--pan-tinta, #0C2740); }
.navmas-titulo:focus { outline: none; }
.navmas-titulo:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 2px; border-radius: 4px; }

.navmas-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--pan-apagado, #5b7186);
    cursor: pointer;
}
.navmas-cerrar:hover { background: rgba(12, 39, 64, .06); }
.navmas-cerrar:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 1px; }

.navmas-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px calc(12px + env(safe-area-inset-right, 0px)) calc(18px + var(--teclado)) calc(12px + env(safe-area-inset-left, 0px));
}

/* En la tableta, la columna no se estira de borde a borde: se lee mejor. */
.navmas-cuerpo > * { width: min(100%, 640px); align-self: center; }

.navmas-cuenta {
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--pan-linea, #e6ecf2);
    padding: 6px;
}

.navmas-cuenta .acct { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.navmas-cuenta .acct-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: #185FA5; color: #fff; font-weight: 700; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.navmas-cuenta .acct-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.navmas-cuenta .acct-name {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--pan-tinta, #0C2740); font-size: 14.5px; font-weight: 600; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navmas-cuenta .acct-name:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 2px; border-radius: 4px; }
.navmas-cuenta .acct-sub { color: var(--pan-apagado, #5b7186); font-size: 12px; }
.navmas-cuenta .acct-logout {
    flex: none; width: 48px; height: 48px; border: 1px solid var(--pan-linea, #e6ecf2); border-radius: 12px;
    background: #fff; color: #a3361a; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.navmas-cuenta .acct-logout:hover { background: rgba(198, 40, 40, .06); }
.navmas-cuenta .acct-logout:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 1px; }
.navmas-cuenta .acct-logout .material-symbols-outlined { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
    .navmas { animation: none; }
}

/* ── La hoja de búsqueda: pantalla completa en el teléfono, un diálogo al centro en el escritorio ── */
.navhoja {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    background: var(--pan-fondo, #f6f8fb);
    font-family: var(--pan-sans, 'IBM Plex Sans', system-ui, sans-serif);
    animation: navhoja-entrar .18s ease-out;
}

/* El velo y el diálogo van juntos (la capa no pinta caja propia). */
.navhoja-capa { display: contents; }
.navhoja-fondo { display: none; }

.navhoja-cab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--pan-linea, #e6ecf2);
}

.navhoja-titulo { margin: 0; font-size: 16px; font-weight: 700; color: var(--pan-tinta, #0C2740); }

.navhoja-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--pan-apagado, #5b7186);
    cursor: pointer;
}
.navhoja-cerrar:hover { background: rgba(12, 39, 64, .06); }
.navhoja-cerrar:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); outline-offset: 1px; }

.navhoja-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px calc(14px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px) + var(--teclado)) calc(14px + env(safe-area-inset-left, 0px));
}

@keyframes navhoja-entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
    .navhoja-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1059;
        background: rgba(12, 39, 64, .32);
    }

    .navhoja {
        inset: auto;
        top: 10vh;
        left: 50%;
        width: min(640px, calc(100vw - 48px));
        max-height: 76vh;
        transform: translateX(-50%);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 30px 70px -24px rgba(5, 20, 35, .6), 0 0 0 1px rgba(12, 39, 64, .08);
        animation: navhoja-centro .16s ease-out;
    }

    .navhoja-cab { padding: 10px 10px 10px 18px; }
    .navhoja-cuerpo { padding: 12px 16px 18px; }
}

@keyframes navhoja-centro { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .navhoja { animation: none; }
}

/* ═══════════ El buscador progresivo ═══════════ */

.bus { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.bus-campo { position: relative; }

.bus-entrada {
    width: 100%;
    height: var(--rz-input-height, 36px);
    padding: 0 38px 0 36px;
    border: 1px solid var(--pan-linea, #e6ecf2);
    border-radius: 999px;
    background: #fff;
    color: var(--pan-tinta, #0C2740);
    font-family: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.bus-entrada::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.bus-entrada:focus { border-color: var(--pan-azul, #185FA5); box-shadow: 0 0 0 3px rgba(24, 95, 165, .12); }

.bus-lupa {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--pan-tenue, #8fa1b1); pointer-events: none;
}

.bus-limpiar {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: none; color: var(--pan-apagado, #5b7186); cursor: pointer;
}
.bus-limpiar .material-symbols-outlined { font-size: 18px; }
.bus-limpiar:hover { background: #eef2f6; color: var(--pan-tinta, #0C2740); }
.bus-limpiar:focus-visible { outline: 2px solid var(--pan-azul, #185FA5); }

.bus-ayuda { margin: 0; font-size: 11px; color: var(--pan-tenue, #8fa1b1); }

.bus-resultados { display: flex; flex-direction: column; gap: 10px; }
.bus-resultados:empty { display: none; }

.bus-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bus-grupo-cab {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 2px; padding: 0 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pan-apagado, #5b7186);
}
.bus-grupo-cab .material-symbols-outlined { font-size: 15px; color: var(--pan-tenue, #8fa1b1); }

.bus-todos {
    margin-left: auto; font-size: 10px; letter-spacing: .04em; text-transform: none; font-weight: 600;
    color: var(--pan-azul, #185FA5); text-decoration: none;
}
.bus-todos:hover { text-decoration: underline; }

.bus-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.bus-fila {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px;
    padding: 6px 8px; border-radius: 10px; text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.bus-fila:hover, .bus-fila:focus-visible { background: rgba(24, 95, 165, .07); outline: none; }
.bus-fila:focus-visible { box-shadow: inset 0 0 0 2px var(--pan-azul, #185FA5); }

.bus-fila-icono {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
    background: rgba(24, 95, 165, .08); color: var(--pan-azul, #185FA5);
}

.bus-fila-txt { display: flex; flex-direction: column; min-width: 0; }
.bus-fila-t { font-size: 13px; font-weight: 600; color: var(--pan-tinta, #0C2740); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bus-fila-d { font-size: 11.5px; color: var(--pan-apagado, #5b7186); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bus-buscando .bus-esqueleto {
    height: 34px; margin: 2px 6px; border-radius: 9px;
    background: linear-gradient(90deg, #eef2f6 25%, #f7fafc 50%, #eef2f6 75%); background-size: 200% 100%;
    animation: bus-brillo 1.2s ease-in-out infinite;
}
@keyframes bus-brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.bus-fallo {
    flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
    background: rgba(184, 84, 27, .06); border: 1px solid rgba(184, 84, 27, .22);
    font-size: 12px; color: var(--pan-ambar, #b8541b);
}
.bus-fallo > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.bus-fallo .material-symbols-outlined { font-size: 18px; }

.bus-reintentar {
    flex: 0 0 auto; min-height: 32px; padding: 4px 10px; border-radius: 8px;
    border: 1px solid rgba(184, 84, 27, .35); background: #fff;
    font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--pan-ambar, #b8541b); cursor: pointer;
}

.bus-nada { margin: 0; padding: 8px 6px; font-size: 12px; line-height: 1.45; color: var(--pan-apagado, #5b7186); }

/* En la portada, el buscador vive en la franja de filtros: sus resultados salen en
   un panel flotante bajo el campo, sin empujar la agenda. La ayuda sólo se oye. */
.bus-en-linea .bus-ayuda {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bus-en-linea .bus-con-resultados {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    max-height: min(70vh, 520px); overflow-y: auto;
    padding: 10px 8px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--pan-linea, #e6ecf2);
    border-radius: 14px;
    box-shadow: 0 18px 44px -20px rgba(12, 39, 64, .45), 0 2px 6px rgba(12, 39, 64, .06);
}

/* En la hoja del teléfono: más grande, y a 16 px para que el iPhone no acerque la vista. */
.bus-en-hoja .bus-rotulo { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--pan-apagado, #5b7186); }
.bus-en-hoja .bus-entrada { height: 48px; font-size: 16px; padding-left: 40px; }
.bus-en-hoja .bus-lupa { font-size: 20px; left: 13px; }
.bus-en-hoja .bus-resultados { margin-top: 8px; }
.bus-en-hoja .bus-fila { min-height: 50px; }

@media (max-width: 760px) {
    .bus-entrada { font-size: 16px; height: 42px; }
}

/* Pantallas táctiles (teléfono o tableta, de cualquier ancho): 44 px por objetivo y
   16 px en el campo, para que el teléfono no acerque la vista al escribir. */
@media (pointer: coarse) {
    .bus-entrada { height: 44px; font-size: 16px; padding-right: 46px; }
    .bus-en-hoja .bus-entrada { height: 48px; }
    .bus-limpiar { width: 44px; height: 44px; right: 0; }
    .bus-todos { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 8px; }
    .bus-reintentar { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .bus-buscando .bus-esqueleto { animation: none; }
}