/* ═══════════════════════════════════════════════════════════════════════
   Bimo Lite — Estructura de la app (Layout/MainLayout, Layout/NavMenu, Shared/BarraSuperior)
   Escritorio (≥ 992 px): menú lateral fijo (contraíble a íconos) + barra superior + contenido.
   Tablet (768–991 px): el menú se abre como cajón desde la barra superior.
   Celular (< 768 px): barra superior compacta + barra inferior de 5 accesos; "Más" abre una hoja.
   ═══════════════════════════════════════════════════════════════════════ */

.app { min-height: 100vh; min-height: 100dvh; display: flex; }

/* ── Menú lateral ────────────────────────────────────────────────────── */
.menu {
    position: sticky; top: 0; height: 100vh; height: 100dvh; width: var(--menu-ancho); flex-shrink: 0;
    display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 16px; overflow-y: auto; overflow-x: hidden;
    background: var(--marino); color: #fff; transition: width .2s ease, padding .2s ease;
}
.menu:focus { outline: none; }
.menu-marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: #fff; text-decoration: none; }
.menu-marca:hover { color: #fff; }
.logo {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--verde); color: #fff; font-size: 19px; font-weight: 800; text-decoration: none;
}
a.logo:hover { color: #fff; }
.logo.grande { width: 40px; height: 40px; border-radius: var(--radio-campo); font-size: 20px; }
.marca-textos { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.marca-nombre { font-size: 17px; font-weight: 800; }
.marca-sub { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--marino-texto); text-transform: uppercase; }

.menu-nav { display: flex; flex-direction: column; gap: 12px; }
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo-titulo { padding: 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--marino-titulo-grupo); text-transform: uppercase; white-space: nowrap; }
.menu-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
    font-size: 15px; font-weight: 700; color: var(--marino-texto-3); text-decoration: none; white-space: nowrap;
}
.menu-item:hover { background: var(--marino-2); color: #fff; }
.menu-item.active { background: rgba(59, 171, 98, .16); color: #fff; }
.menu-item.active .menu-icono { color: var(--verde); }
.menu-icono { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.menu-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-item .candado { color: var(--marino-titulo-grupo); }

/* Contador rojo (Cobranza): al lado del texto o, con el menú contraído, sobre el ícono */
.menu-contador {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radio-pill); display: grid; place-items: center;
    background: var(--rojo); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.menu-contador-punto { display: none; position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }

/* Menú contraído (escritorio): solo íconos; los títulos de grupo pasan a ser divisores */
@media (min-width: 992px) {
    .menu.contraido { width: 76px; padding: 22px 12px 16px; }
    .menu.contraido .marca-textos, .menu.contraido .menu-texto, .menu.contraido .candado,
    .menu.contraido .menu-item > .menu-contador { display: none; }
    .menu.contraido .menu-marca { padding: 0; justify-content: center; }
    .menu.contraido .menu-item { justify-content: center; padding: 12px 0; }
    .menu.contraido .menu-contador-punto { display: grid; }
    .menu.contraido .menu-grupo-titulo { height: 1px; padding: 0; margin: 4px 10px; overflow: hidden; color: transparent; background: var(--marino-2); }
}
.menu-velo { display: none; }

/* ── Barra superior (Shared/BarraSuperior) ───────────────────────────── */
.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-superior {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px;
    min-height: 72px; padding: 12px 28px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.barra-boton {
    position: relative; display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px;
    border: 1px solid var(--borde); border-radius: var(--radio-opcion); background: var(--superficie); color: var(--marino);
}
.barra-boton:hover { border-color: var(--borde-campo-2); background: var(--superficie-2); }
.barra-boton.activo, .barra-boton.activo:hover { border-color: var(--verde); background: var(--verde-tenue); }
.barra-contador {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radio-pill);
    display: grid; place-items: center; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800;
    border: 2px solid var(--superficie);
}
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.barra-plan {
    display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; white-space: nowrap;
    border: 1px solid var(--verde-borde); border-radius: var(--radio-pill); background: var(--verde-tenue);
    color: var(--verde-texto); font-size: 14px; font-weight: 800; text-decoration: none;
}
.barra-plan:hover { color: var(--verde-texto); border-color: var(--verde); }
.barra-divisor { width: 1px; height: 32px; background: var(--borde); }
/* Sin espacio para el buscador (tablet y escritorio angosto): el plan queda en el menú del usuario */
@media (min-width: 768px) and (max-width: 1107.98px) { .barra-plan { display: none; } }
.barra-desplegable { position: relative; }

/* Buscador global */
.buscador-global { position: relative; flex: 1; min-width: 0; max-width: 480px; }
.buscador-barra { height: 46px; background: var(--superficie-2); border-color: var(--borde); }
.buscador-barra > input { font-size: 15px; }
.buscador-barra > input::-webkit-search-cancel-button { display: none; }
.buscador-atajo {
    padding: 2px 8px; border: 1px solid var(--borde-campo); border-radius: 6px; background: var(--superficie);
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--gris);
}
.buscador-resultados { left: 0; right: 0; max-height: min(70vh, 480px); overflow-y: auto; }

/* Botón del usuario */
.usuario-boton {
    display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 12px 0 6px;
    border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); color: var(--marino); text-align: left;
}
.usuario-boton:hover, .usuario-boton.abierto { border-color: var(--verde); background: var(--verde-tenue-2); }
.usuario-textos { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.usuario-textos > strong { font-size: 15px; font-weight: 800; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-textos > small { font-size: 13px; font-weight: 600; color: var(--gris); }
.usuario-flecha { color: var(--gris); }

/* Panel del usuario */
.menu-usuario-panel { width: 320px; }
.menu-usuario-cabecera { display: flex; align-items: center; gap: 14px; padding: 14px 12px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--divisor); }
.menu-usuario-cabecera > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-usuario-cabecera strong { font-size: 16px; font-weight: 800; color: var(--marino); }
.menu-usuario-cabecera span { font-size: 13px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario-cabecera small { font-size: 12px; font-weight: 800; color: var(--verde-texto); }
.menu-usuario-idiomas { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 12px 10px 44px; }

/* Avisos */
.notificaciones { width: 340px; max-height: min(70vh, 460px); overflow-y: auto; }
.notificacion { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radio-campo); }
.notificacion.nueva { background: var(--verde-tenue-2); }
.notificacion .punto { margin-top: 6px; }
.notificacion strong { font-size: 14px; font-weight: 800; color: var(--marino); }
.notificacion p { margin: 2px 0 4px; font-size: 13px; color: var(--gris); line-height: 1.4; }
.notificacion small { font-size: 12px; color: var(--gris-2); }

/* Centro de ayuda (Shared/CentroAyuda) */
.centro-ayuda { width: 360px; max-height: min(75vh, 540px); overflow-y: auto; }
.centro-ayuda-cabecera { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--divisor); }
.centro-ayuda-cabecera strong { font-size: 16px; font-weight: 800; color: var(--marino); }
.centro-ayuda-cabecera span { font-size: 13px; color: var(--gris); }
.centro-ayuda-recorrido {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; margin-bottom: 4px;
    border: 0; border-radius: var(--radio-opcion); background: var(--marino); color: #fff; text-align: left;
}
.centro-ayuda-recorrido:hover { background: var(--marino-2); }
.centro-ayuda-recorrido-icono { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radio-campo); background: var(--verde); }
.centro-ayuda-recorrido > .desplegable-item-textos { flex: 1; }
.centro-ayuda-recorrido strong { font-size: 15px; font-weight: 800; white-space: normal; }
.centro-ayuda-recorrido small { color: var(--marino-texto-2); }

/* ── Contenido ───────────────────────────────────────────────────────── */
.pagina { padding: var(--pad-contenido); display: flex; flex-direction: column; gap: 20px; animation: aparecer .3s ease; }

/* Encabezado de página (Shared/EncabezadoPagina.razor) */
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 36px 8px; }
.encabezado-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.encabezado-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.encabezado-titulo { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--marino); overflow-wrap: anywhere; }
.encabezado-sub { font-size: 14px; font-weight: 500; color: var(--gris); text-wrap: pretty; }
.encabezado-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.boton-mas { width: 46px; height: 46px; padding: 0; border-radius: var(--radio-opcion); font-size: 24px; }

/* ── Barra inferior y hoja "Más" (celular) ───────────────────────────── */
.barra-inferior { display: none; }
.hoja-mas { display: none; }

/* Tablet: el menú lateral pasa a ser un cajón */
@media (max-width: 991.98px) {
    .menu {
        position: fixed; left: 0; top: 0; z-index: 1040; box-shadow: var(--sombra-modal);
        transform: translateX(-100%); transition: transform .25s ease; visibility: hidden;
    }
    .menu.abierto { transform: none; visibility: visible; }
    .menu-velo { display: block; position: fixed; inset: 0; z-index: 1035; background: var(--velo); opacity: 0; pointer-events: none; transition: opacity .25s; }
    .menu-velo.visible { opacity: 1; pointer-events: auto; }
    .barra-superior { padding: 12px 20px; }
}

/* Celular: sin menú lateral; barra superior compacta y barra inferior fija */
@media (max-width: 767.98px) {
    .menu, .menu-velo { display: none; }
    .barra-superior { min-height: 60px; padding: 8px 12px; gap: 10px; }
    .barra-boton { width: 42px; height: 42px; border-radius: var(--radio-campo); }
    .buscador-barra { height: 42px; }
    .buscador-global { position: static; }
    .buscador-resultados { left: 12px; right: 12px; top: 58px; }
    .barra-derecha { gap: 8px; }
    .usuario-boton { height: 42px; padding: 0; border: 0; background: transparent; }
    .usuario-boton:hover, .usuario-boton.abierto { background: transparent; }
    .barra-desplegable { position: static; }
    .menu-usuario-panel, .notificaciones, .centro-ayuda { width: auto; left: 12px; right: 12px; top: 58px; }

    .encabezado { padding: 18px 16px 4px; }
    .encabezado-titulo { font-size: 22px; }
    .pagina { padding-bottom: calc(28px + var(--barra-inferior-h)); }

    .barra-inferior {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        display: grid; grid-template-columns: repeat(5, 1fr);
        padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
        background: var(--superficie); border-top: 1px solid var(--borde);
    }
    .barra-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px;
        border: 0; background: transparent; color: #66748c; font-size: 11px; font-weight: 800; text-decoration: none;
    }
    .barra-item > span:first-child { position: relative; width: 46px; height: 30px; border-radius: var(--radio-pill); display: grid; place-items: center; }
    .barra-item .menu-contador-punto { display: grid; top: -4px; right: 2px; }
    .barra-item.active, .barra-item.abierto { color: var(--verde-texto); }
    .barra-item.active > span:first-child { background: var(--verde-suave); }

    .hoja-mas.abierta { display: flex; }
    .hoja-mas { position: fixed; inset: 0; z-index: 1045; align-items: flex-end; background: var(--velo); animation: desvanecer .2s ease; }
    .hoja-mas-panel {
        width: 100%; max-height: 85dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
        padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
        background: var(--superficie); animation: aparecer .25s ease;
    }
    .hoja-mas-titulo { padding: 0 8px 8px; font-size: 13px; font-weight: 800; color: var(--gris-2); text-transform: uppercase; }
    .hoja-mas-item {
        display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 10px; border: 0; border-radius: var(--radio-campo);
        background: transparent; color: var(--marino); font-size: 15px; font-weight: 700; text-align: left; text-decoration: none;
    }
    .hoja-mas-item:hover, .hoja-mas-item.active { background: var(--superficie-2); color: var(--marino); }
    .hoja-mas-item > span { flex: 1; }
}

/* Splash mientras carga Blazor (index.html) */
.splash { min-height: 100vh; display: grid; place-items: center; background: var(--marino); }
.splash > div { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; }
.splash .cargando { width: 26px; height: 26px; color: var(--verde); }

/* Recorrido guiado: al traer un elemento a la vista, que no quede bajo la barra superior ni la inferior */
[data-recorrido] { scroll-margin-top: 84px; scroll-margin-bottom: calc(16px + var(--barra-inferior-h)); }