/* ======================================================
   BE EXPERIENCE - OFFICIAL COLOR SYSTEM
   ====================================================== */

:root {
    --safe-area-top: 0px;
    --safe-area-bottom: 0px;
    --be-header-background: rgba(255, 0, 0, 0.883);
    --be-footer-background: rgba(171, 171, 171, 0.95);
    --be-gradient-tab: #ffffff;

    --be-footer-color: rgba(255, 255, 255, 0.95);
    --be-footer-color-idle: rgba(255, 255, 255, 0.86);
    --be-footer-accent: #f0dcff;
    --be-footer-accent-soft: rgba(240, 220, 255, 0.34);
    --be-header-company-text: #ffffff;
    --be-header-menu-text: rgba(255, 255, 255, 0.95);

    --be-purple-primary: #2b0f3a;
    --be-violet-electric: #8a1ed1;
    --be-magenta-premium: #b84bff;
    --be-body: #ffffff;
    --be-glass-white: #f2f2f4;

    --be-gradient-main: linear-gradient(
        135deg,
        #ffffff 0%,
        #ffffff 40%,
        #d3d3d3 70%,
        #000000 100%
    );
    --be-gradient-soft: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );

    --be-glow-soft: 0 0 24px rgba(138, 30, 209, 0.25);
    --be-glow-medium: 0 0 40px rgba(138, 30, 209, 0.45);
    --be-glow-premium: 0 0 64px rgba(184, 75, 255, 0.65);
    --be-glow-halo: 0 0 30px 5px rgba(184, 75, 255, 0.5);

    --be-text-primary: rgba(24, 24, 27, 0.92);
    --be-text-secondary: rgba(24, 24, 27, 0.65);
    --be-text-muted: rgba(24, 24, 27, 0.45);

    --be-border-glass: 1px solid rgba(255, 255, 255, 0.12);
    --be-border-glow: 1px solid rgba(138, 30, 209, 0.45);

    /* Acento del banner del menu: lo pisa el branding del tenant (color del
       footer); este violeta es solo el respaldo cuando no hay branding. */
    --be-menu-banner-base: var(--be-violet-electric);

    --be-status-active: var(--be-violet-electric);
    --be-status-premium: var(--be-magenta-premium);
    --be-status-disabled: rgba(255, 255, 255, 0.25);
}

.be-app,
/* Sin zoom, como una app nativa: el meta del viewport lo prohibe (y en el APK
   de Capacitor se respeta), `manipulation` mata el doble toque que acerca, y
   el guardia de gestos de main.js atiende al Safari de iOS, que ignora el meta
   desde iOS 10. El mapa no se ve afectado: Leaflet maneja su propio pellizco y
   su contenedor declara su touch-action. */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    touch-action: manipulation;
    background: var(--be-body);
    color: var(--be-text-primary);
    padding-top: calc(70px + var(--safe-area-top)) !important;
    padding-bottom: calc(85px + var(--safe-area-bottom)) !important;
    font-family: "Spline Sans", sans-serif;
    overflow: hidden;
    height: 100dvh;
}

h1,
h2,
h3,
.brand-font {
    font-family: "Exo 2", sans-serif;
}

.be-screen {
   /* background: var(--be-gradient-main);*/
    min-height: 100dvh;
}

.be-card {
    background: var(--be-gradient-soft);
    border: var(--be-border-glass);
    backdrop-filter: blur(18px);
    border-radius: 20px;
}

.be-premium {
    box-shadow: var(--be-glow-premium);
    border: var(--be-border-glow);
}

.be-btn-primary {
    background: var(--be-violet-electric);
    color: #fff;
    box-shadow: var(--be-glow-soft);
    border-radius: 999px;
}

.be-header {
    height: calc(70px + var(--safe-area-top));
    padding-top: var(--safe-area-top);
    background: var(--be-header-background);
    backdrop-filter: blur(15px);
    border-bottom: var(--be-border-glass);
    z-index: 1050;
}

.brand-logo {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--be-header-company-text);
}

.header-brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
}

.be-header-session-meta {
    font-size: 0.72rem;
    line-height: 1.1;
    color: var(--be-header-menu-text);
    max-width: 58vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--be-header-menu-text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.icon-btn-notif {
    position: relative;
}

/* Hamburguesa en modo launcher: se marca mientras la escena de menu esta
   abierta, igual que un boton del footer. */
.icon-btn.is-active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- modo iPhone (MENU_PRINCIPAL: launcher + footer:false) ----------
   Sin barra inferior: el body solo reserva el inset inferior y el contenedor
   de escena gana los 85px del footer. El FAB sale del footer y flota. */
body.modo-iphone {
    padding-bottom: var(--safe-area-bottom) !important;
}

body.modo-iphone .be-footer {
    display: none;
}

body.modo-iphone .be-body-container {
    height: calc(100dvh - (70px + var(--safe-area-top) + var(--safe-area-bottom)));
}

body.modo-iphone .offcanvas-bottom {
    padding-bottom: calc(16px + var(--safe-area-bottom));
}

/* ---------- footer POR ESCENA (window.appFooterEscena) ----------
   La escena abierta declaro su propia barra: en modo iPhone el footer vuelve
   solo para ella, el body recupera su padding y el contenedor su alto. El
   asistente sigue flotando, asi que la barra reparte sus acciones en cuatro
   columnas iguales (.footer-sin-fab) en vez de rodear al FAB. */
body.modo-iphone.footer-escena {
    padding-bottom: calc(85px + var(--safe-area-bottom)) !important;
}

body.modo-iphone.footer-escena .be-footer {
    display: block;
}

body.modo-iphone.footer-escena .be-body-container {
    height: calc(100dvh - (155px + var(--safe-area-top) + var(--safe-area-bottom)));
}

body.modo-iphone.footer-escena .offcanvas-bottom {
    padding-bottom: 16px;
}

#mainFooterNav.footer-sin-fab {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- menu de la escena en el boton de grid ----------
   El footer aguanta cuatro acciones alrededor del FAB. Cuando la escena
   declara mas, el boton de grid del header deja de navegar y despliega lo que
   no cupo: nombre de la escena, quien esta dentro, las acciones sobrantes y,
   hasta abajo, la salida al menu principal con el mismo icono. */
.escena-menu-telon {
    position: fixed;
    inset: 0;
    z-index: 1065;               /* sobre el header (1030) y el FAB flotante (1061) */
    background: rgba(15, 23, 42, 0.3);
}

.escena-menu-telon[hidden] {
    display: none !important;
}

.escena-menu {
    position: fixed;
    min-width: 232px;
    max-width: min(84vw, 320px);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.3);
    padding: 10px;
    animation: escenaMenuEntra 0.14s ease-out;
}

@keyframes escenaMenuEntra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.escena-menu-cab {
    padding: 6px 10px 2px;
}

.escena-menu-cab strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.escena-menu-cab small {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;              /* texto mudo: quien esta dentro, sin competir con el titulo */
    margin-top: 2px;
}

.escena-menu hr {
    margin: 8px 4px;
    border: 0;
    border-top: 1px solid #e5e7eb;
    opacity: 1;
}

.escena-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    padding: 10px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
    text-align: left;
}

.escena-menu button i {
    font-size: 1.15rem;
    color: #4b5563;
    width: 1.4em;
    text-align: center;
}

.escena-menu button:hover,
.escena-menu button:focus-visible {
    background: #f1f5f9;
    outline: none;
}

.escena-menu button.activo,
.escena-menu button.activo i {
    color: #4f46e5;
}

.escena-menu button.activo {
    background: #eef2ff;
}

/* Punto en el boton de grid: avisa que ahi vive algo mas de la escena. */
.icon-btn.tiene-menu-escena {
    position: relative;
}

.icon-btn.tiene-menu-escena::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--be-footer-accent);
    box-shadow: 0 0 6px rgba(240, 220, 255, 0.9);
}

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

/* .fab-container.fab-flotante: mas especifico que .fab-container, que se
   define mas abajo y si no ganaria (top:-30px, left:50%). */
.fab-container.fab-flotante {
    position: fixed;
    left: auto;
    top: auto;
    transform: none;
    width: 70px;
    height: 70px;
    z-index: 1061; /* sobre header y escena; bajo el telon del offcanvas (1064) */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.fab-container.fab-flotante.arrastrando {
    cursor: grabbing;
}

/* En el menu principal no hay FAB flotando: la parrilla ya ofrece el asistente
   como mosaico, y un boton suelto sobre los iconos se lee como un estorbo. */
body[data-escena="launcher"] .fab-container.fab-flotante {
    display: none;
}

.fab-container.fab-flotante.arrastrando .be-fab {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px rgba(184, 75, 255, 0.25), var(--be-glow-halo);
}

/* ---------- acople del FAB al centro del footer ----------
   Al arrastrar el FAB aparece una diana punteada en el centro de la barra
   (mitad de la pantalla, mitad del footer). Dentro de su radio el FAB se
   imanta; si ahi se suelta, queda acoplado y bajo el se dibuja medio circulo
   del color de la pagina, que finge el hueco del footer envolviendo su mitad
   inferior. La barra, mientras tanto, le devuelve su columna del centro. */
.fab-diana {
    position: fixed;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    border: 2px dashed rgba(15, 23, 42, 0.45);
    background: rgba(255, 255, 255, 0.32);
    z-index: 1060;              /* sobre el footer, bajo el FAB (1061) */
    pointer-events: none;
    animation: fabDianaLatir 1.5s ease-in-out infinite;
}

.fab-diana[hidden] {
    display: none !important;
}

.fab-diana.cerca {
    border: 2px solid #8a1ed1;
    background: rgba(184, 75, 255, 0.18);
    box-shadow: 0 0 0 6px rgba(184, 75, 255, 0.16);
    animation: none;
}

@keyframes fabDianaLatir {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.06); opacity: 1; }
}

/* El iman: el salto al centro se ve como un tiron corto, no como un brinco. */
.fab-container.fab-flotante.imantado {
    transition: right 0.12s ease-out, bottom 0.12s ease-out;
}

/* Medio circulo bajo el FAB: hijo con z-index negativo, asi queda sobre el
   footer y detras del boton. 7 px mas ancho y mas hondo que el FAB: esa orilla
   es la que se lee como hueco. */
.fab-hueco {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 14px);
    height: calc(50% + 7px);
    transform: translateX(-50%);
    border-radius: 0 0 999px 999px;
    background: var(--be-body);
    box-shadow: inset 0 -2px 4px rgba(15, 23, 42, 0.08);
    z-index: -1;
    pointer-events: none;
}

body.fab-acoplado .fab-hueco {
    display: block;
}


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

    .fab-container.fab-flotante.imantado {
        transition: none;
    }
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.global-connectivity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--be-header-menu-text);
    background: rgba(255, 255, 255, 0.08);
}

.global-connectivity-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.global-connectivity-badge.is-offline {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

.global-connectivity-badge.is-offline .dot {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

@media (max-width: 575.98px) {
    .global-connectivity-badge {
        padding: 0 8px;
        font-size: 0.68rem;
    }
}

.be-body-container {
    height: calc(100dvh - (155px + var(--safe-area-top) + var(--safe-area-bottom)));
    overflow-y: auto;
    overflow-x: hidden;
}

#sceneContainer {
    min-height: 100%;
}

.inicio-kpi {
    border-radius: 0.85rem;
    border: 1px solid #edf2f7;
    padding: 1rem;
    background: #fff;
}

.be-footer {
    height: 85px;
    min-height: 85px;
    bottom: var(--safe-area-bottom);
    background: var(--be-footer-background);
    backdrop-filter: blur(20px);
    border-top: var(--be-border-glass);
    z-index: 1060;
    padding-bottom: 0;
}

.fab-container {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
}

.be-fab {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #b84bff, #8a1ed1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--be-glow-halo);
    cursor: pointer;
}

#fabIcon {
    font-size: 1.35rem;
    color: #ffffff;
}

/* FAB en modo obturador: mientras hay camara de INE abierta, el boton
   flotante toma la foto. Verde y pulsante para que se lea el cambio de rol. */
.be-fab-override {
    background: radial-gradient(circle at 30% 30%, #34d399, #0f9d58);
    animation: fabObturador 1.6s ease-in-out infinite;
}

@keyframes fabObturador {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}

.help-list {
    margin: 0;
    padding-left: 1rem;
}

.help-list li {
    margin-bottom: 0.65rem;
}

.help-list small {
    color: #6b7280;
}

.nav-item-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--be-footer-color-idle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 65px;
    height: 100%;
    transition: color 0.18s ease;
}

/* Realce del item activo: pastilla lavanda pastel detras del icono */
.nav-item-btn::before {
    content: "";
    position: absolute;
    inset: 11px 5px 9px;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        var(--be-footer-accent-soft) 0%,
        rgba(255, 255, 255, 0.22) 100%
    );
    border: 1px solid rgba(245, 232, 255, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 14px rgba(240, 220, 255, 0.4);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

/* Barra indicadora superior */
.nav-item-btn::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: var(--be-footer-accent);
    box-shadow: 0 0 8px rgba(240, 220, 255, 0.85);
    opacity: 0;
    transform: translateX(-50%) scaleX(0.25);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.nav-item-btn i,
.nav-item-btn span {
    position: relative;
    z-index: 1;
}

.nav-item-btn i {
    font-size: 1.5rem;
    margin-bottom: 2px;
    transition: transform 0.18s ease;
}

.nav-item-btn.active {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(240, 220, 255, 0.7);
}

.nav-item-btn.active::before {
    opacity: 1;
    transform: scale(1);
}

.nav-item-btn.active::after {
    opacity: 0.95;
    transform: translateX(-50%) scaleX(1);
}

.nav-item-btn.active i {
    color: var(--be-footer-accent);
    transform: translateY(-1px) scale(1.06);
}

.nav-item-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -4px;
    border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-item-btn,
    .nav-item-btn i,
    .nav-item-btn::before,
    .nav-item-btn::after {
        transition: none;
    }
}

#mainFooterNav {
    --footer-center-slot: 84px;
    /* !important porque el marcado trae `d-flex` de Bootstrap, que tambien lo
       es: sin esto la rejilla nunca se aplicaba y el reparto quedaba a merced
       del espacio entre elementos, que descentra el hueco del FAB. */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--footer-center-slot) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2px;
    align-items: stretch;
}

#mainFooterNav .nav-item-btn {
    width: 100%;
}

#mainFooterNav .footer-slot-1 {
    grid-column: 1;
}

#mainFooterNav .footer-slot-2 {
    grid-column: 2;
}

#mainFooterNav .footer-slot-3,
#mainFooterNav .footer-fab-gap {
    grid-column: 3;
    width: 100%;
    height: 100%;
}

#mainFooterNav .footer-slot-4 {
    grid-column: 4;
}

#mainFooterNav .footer-slot-5 {
    grid-column: 5;
}

/* Tres botones con el FAB acoplado: el ultimo abarca la mitad derecha entera y
   se centra en ella. Si se dejara en una sola columna, quedaria pegado al FAB
   con un hueco muerto en la orilla. */
#mainFooterNav .footer-slot-ancho {
    grid-column: 4 / span 2;
    justify-self: center;
    max-width: 96px;
}

@media (max-width: 575.98px) {
    #mainFooterNav {
        --footer-center-slot: 74px;
    }
}

.offcanvas-camera {
    height: 85vh !important;
    width: 90vw !important;
    max-width: 560px;
    background-color: #f8fafc;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-top: 1px solid #dbe4f0;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.12);
}

.offcanvas-notificaciones {
    width: 90vw !important;
    max-width: 560px;
}

.offcanvas-general-menu {
    width: min(86vw, 360px) !important;
}

.offcanvas-general-menu .btn {
    font-weight: 700;
}

.offcanvas-help-manual {
    width: 96vw !important;
    max-width: 980px;
}

.offcanvas-help-manual .offcanvas-body {
    height: 100%;
    overflow: hidden;
}

.help-manual-toolbar {
    flex: 0 0 auto;
    background: #f8fafc;
}

.help-manual-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
}

#helpManualFrame {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
}

.offcanvas-ai-assistant {
    width: min(92vw, 520px) !important;
}

.ai-assistant-output {
    border: 1px solid #dbe3ef;
    border-radius: 0.8rem;
    padding: 0.7rem;
    background: #f8fafc;
    color: #1f2937;
    font-size: 0.85rem;
    white-space: pre-wrap;
    min-height: 180px;
    max-height: 42vh;
    overflow: auto;
}

.notif-close-corner {
    position: absolute;
    top: calc(0.5rem + var(--safe-area-top));
    right: 0.65rem;
    z-index: 1062;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.fisico-close-corner {
    position: absolute;
    top: calc(0.5rem + var(--safe-area-top));
    right: 0.65rem;
    z-index: 1062;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.notificaciones-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.notif-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: #ffffff;
}

.notif-item.is-unread {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.notif-item-title {
    font-weight: 700;
    color: #111827;
}

.notif-item-message {
    color: #374151;
    line-height: 1.25;
}

.notif-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.notif-empty i {
    font-size: 1.35rem;
    color: #64748b;
}

.offcanvas-camera .offcanvas-header {
    padding-top: calc(1rem + var(--safe-area-top));
}

.fisico-block {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
}

.fisico-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.fisico-menu-btn {
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
}

.fisico-menu-btn .small {
    margin-top: 0.15rem;
}

.fisico-tab-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    border-radius: 999px;
    min-height: 36px;
    font-weight: 600;
    font-size: 0.88rem;
}

.fisico-tab-btn.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.fisico-carousel {
    overflow: hidden;
    width: 100%;
}

.fisico-carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.28s ease;
    will-change: transform;
}

.fisico-tab-pane {
    display: block;
    flex: 0 0 100%;
    width: 100%;
}

.fisico-action-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fisico-action-pills .btn {
    font-weight: 600;
}

.fisico-qr-legend {
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0.55rem 0.7rem;
}

.fisico-qr-legend-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.fisico-qr-legend-body {
    font-size: 0.8rem;
    color: #334155;
    line-height: 1.3;
}

.fisico-user-qr {
    width: 108px;
    height: 108px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #ffffff;
    object-fit: contain;
}

#fisicoQrReader {
    min-height: 140px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.fisico-scanner-signal {
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    color: #334155;
    background: #f8fafc;
}

.fisico-scanner-signal.ok {
    border-color: #86efac;
    color: #166534;
    background: #f0fdf4;
}

.fisico-scanner-signal.busy {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.fisico-scanner-signal.error {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fef2f2;
}

#btnFisicoScannerRetry {
    border-radius: 999px;
    font-weight: 600;
}

.fisico-prestamos-list {
    max-height: 190px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.5rem;
}

.fisico-prestamo-item {
    border-bottom: 1px solid #edf2f7;
    padding: 0.45rem 0;
}

.fisico-prestamo-item:last-child {
    border-bottom: 0;
}

.fisico-station-card {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0.6rem;
}

#menuPrincipal {
    background-color: #ffffff !important;
    width: 80%;
    max-width: 85%;
}

.menu-link {
    text-decoration: none;
    transition: background-color 0.2s;
}

.menu-link:hover,
.menu-link:focus {
    background-color: rgba(1, 1, 1, 0.08);
}

.menu-link.active {
    background-color: rgba(198, 40, 255, 0.15);
    color: #e075ff;
    border-left: 4px solid #c628ff;
}

.menu-sub-link {
    font-size: 0.92rem;
    border-left: 2px solid rgba(198, 40, 255, 0.35);
    margin-left: 1.25rem;
}

.menu-sub-link:hover,
.menu-sub-link:focus {
    color: #e075ff !important;
    background-color: rgba(198, 40, 255, 0.1);
}



/* Versión y actualización en un solo renglón: el botón es solo el icono,
   la versión vive a su lado. */
.app-version-fila { display: flex; align-items: center; gap: 0.5rem; }

.app-version-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #d9deea;
    background: #fff;
    color: #4f5c77;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.app-version-btn:hover { background: #f4f7ff; }
.app-version-btn:active i { transform: rotate(180deg); transition: transform 0.3s ease; }

.app-version-sello { font-size: 0.78rem; color: #94a3b8; font-variant-numeric: tabular-nums; }

/* Encabezado del menú general: entrada elegante a las acciones, en la misma
   paleta violeta de la marca, con un halo decorativo detrás del icono. */
.menu-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--be-menu-banner-base) 55%, #000),
        var(--be-menu-banner-base));
    color: #fff;
    border-radius: 0.9rem;
    padding: 0.8rem 1rem;
    margin-bottom: 0.9rem;
}

.menu-banner-halo {
    position: absolute;
    top: -46px;
    right: -34px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--be-menu-banner-base) 50%, transparent), transparent 68%);
    pointer-events: none;
}

.menu-banner-icono {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(43, 15, 58, 0.35);
}

.menu-banner-texto { position: relative; line-height: 1.2; }
.menu-banner-texto strong { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em; }
.menu-banner-texto small { font-size: 0.72rem; opacity: 0.82; }

/* Reloj LCD del banner del menú: panel negro con dígitos verdes brillantes,
   sombra interna para el hundido de pantalla y fuente monoespaciada techie. */
.menu-lcd {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-top: 0.3rem;
    background: #060a06;
    border: 1px solid rgba(57, 255, 106, 0.25);
    border-radius: 0.45rem;
    padding: 0.22rem 0.6rem;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: "Share Tech Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.menu-lcd-fecha {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(57, 255, 106, 0.65);
}

.menu-lcd-hora {
    font-size: 1.05rem;
    color: #39ff6a;
    text-shadow: 0 0 6px rgba(57, 255, 106, 0.55), 0 0 14px rgba(57, 255, 106, 0.25);
}

/* ---------------------------------------------------------------------------
   Orden de apilamiento de los paneles

   El cromo de la app se pinta alto: .be-header en 1050 y .be-footer en 1060.
   Los offcanvas de Bootstrap viven en 1045 y su telon en 1040, asi que un panel
   abierto quedaba POR DEBAJO del header y del footer: el footer se veia encima
   del alta y seguia siendo tocable, de modo que se podia navegar por detras de
   un formulario abierto. De ahi venian los parches de padding inferior para que
   los botones no quedaran tapados por el FAB.

   La pila queda: cromo < telon < offcanvas < telon de modal < modal. Los
   modales se suben tambien para que sigan abriendo por encima de un offcanvas,
   que es de donde se invocan.
   --------------------------------------------------------------------------- */
.offcanvas-backdrop {
    z-index: 1064;
}

.offcanvas {
    z-index: 1065;
}

.modal-backdrop {
    z-index: 1070;
}

.modal {
    z-index: 1075;
}

/* ---------- grupos del menu general ----------
   "Dia D" agrupa las cinco vistas de la jornada. La cabecera despliega, no
   navega: sueltas en la lista plana se leian como modulos sin relacion entre
   si, cuando son cinco caras del mismo momento. */
.nav-grupo { display: grid; gap: .5rem; }
.nav-grupo-cab {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.nav-grupo-flecha { transition: transform .2s ease; font-size: .8rem; }
.nav-grupo.is-open .nav-grupo-flecha { transform: rotate(180deg); }

.nav-grupo-cuerpo {
    display: grid; gap: .5rem;
    padding-left: .9rem;
    border-left: 2px solid rgba(13, 110, 253, .18);
    margin-left: .35rem;
    overflow: hidden;
    max-height: 0; opacity: 0;
    transition: max-height .24s ease, opacity .18s ease;
}
.nav-grupo.is-open .nav-grupo-cuerpo { max-height: 34rem; opacity: 1; }
.nav-grupo-cuerpo .btn { font-size: .88rem; }