/* Bottom tab bar mobile — v2.10.9 (rediseño con FAB central elevado).
 *
 * Carga GLOBAL desde base.html. Solo se ve en mobile (≤600px).
 * Provee:
 *   - .netza-bottom-tabs (la barra, 7 ítems + "+" central elevado)
 *   - .netza-bottom-fab (botón "+" elevado al centro)
 *   - .netza-bottom-fab-sheet (mini-sheet con 3 acciones)
 *   - body.has-bottom-tabs (padding-bottom del contenido)
 *   - filtro del menú hamburguesa (oculta items que ya están en el bar)
 *   - oculta el FAB "+" desktop flotante en mobile
 *   - estilo bottom-sheet del menú dropdown cuando se dispara desde mobile
 */

@media (max-width: 600px) {
    /* ── Barra fija al pie ───────────────────────────────────────
       Altura 76px (era 64) para acomodar el FAB elevado y dar más respiro.
       Display flex; el FAB es flex item normal pero con margin-top negativo
       que lo eleva. */
    nav.netza-bottom-tabs {
        position: fixed;
        top: auto;
        left: 0; right: 0; bottom: 0;
        height: 76px;
        background: #fbf8f2;
        border-top: 1px solid #e1d8c4;
        border-bottom: 0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
        padding: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* v2.10.9 rev11 — z-index 95 (era 90) para que el FAB sobresalido
           (margin-top -34, sobre los stacking contexts de menú/netzia z=91)
           NO quede tapado por los bottom-sheets que se abren. El nav y
           menú no se solapan visualmente (menú vive a bottom:76, justo
           arriba del nav), así que el menú sigue siendo legible. */
        z-index: 95;
        padding-bottom: env(safe-area-inset-bottom, 0);
        font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    }
    .netza-bottom-tab {
        background: transparent; border: 0;
        color: #6b6157;
        /* v2.10.9 rev3 — height fija + justify-center para que todos los
           tabs alineen ícono+label idénticamente, sin que el ícono central
           elevado o glifos FA de distinta densidad desplacen la baseline.
           v2.10.9 rev7 — gap 4→6 para dar más respiro entre el ícono y el
           label (NetzIA con fa-robot agrandado lo necesitaba). */
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 6px;
        flex: 1; min-width: 0;
        height: 76px;
        padding: 0;
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.02em;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    /* v2.10.9 rev2 — íconos con tamaño consistente: width fija + display inline-
       flex + center para que cada glifo FA ocupe el mismo "espacio visual" en
       el tab, independiente de su densidad inherente. */
    .netza-bottom-tab i {
        font-size: 18px;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                    color 0.2s ease, filter 0.25s ease;
    }
    /* v2.10.9 rev8 — fa-robot (NetzIA) bajado de 21 → 19 (entre los 18 de
       los otros y el 21 que se sentía más grande). Sin :has() para no
       desalinear el LABEL respecto al resto. Esta diferencia mínima (1px)
       compensa el viewBox más cuadrado del fa-robot sin generar
       desbalance vertical en el tab. */
    .netza-bottom-tab i.fa-robot {
        font-size: 19px;
    }
    /* Hover/focus suave en touch */
    .netza-bottom-tab:active i { transform: scale(0.92); }

    /* v2.10.9 rev4 — Active state mucho más visible: scale +35% (era 18),
       drop-shadow más intenso y label en bold con color accent. En light
       el accent action es el ink dark, en dark vuelve a terracota
       (override más abajo). */
    .netza-bottom-tab.active {
        color: #2d2520;
        font-weight: 700;
    }
    .netza-bottom-tab.active i {
        transform: scale(1.35) translateY(-1px);
        color: #2d2520;
        filter: drop-shadow(0 2px 6px rgba(45, 37, 32, 0.4))
                drop-shadow(0 0 10px rgba(45, 37, 32, 0.25));
    }

    /* Locked tab (plan free sin la feature). v2.10.31 (Facu 2026-05-16):
       el candado es un overlay-burbuja sobre el ícono principal, esquina
       inferior-derecha. Antes iba al lado del label (texto), lo que rompía
       la alineación entre tabs porque el span del label quedaba más ancho. */
    .netza-bottom-tab.is-locked {
        opacity: 0.55;
        cursor: pointer;
    }
    .netza-bottom-tab-icon-locked {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .netza-bottom-tab-icon-locked i.netza-bottom-tab-lock-badge {
        position: absolute;
        bottom: -3px;
        right: -5px;
        font-size: 7px;
        width: 11px;
        height: 11px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        /* v2.11.24 (Facu 2026-05-19) — Candado terracota en ambos modos:
             - Light: #a84a2a sobre badge blanco
             - Dark:  #a84a2a sobre badge dark — override abajo (mismo color,
               distinto background). */
        color: #a84a2a;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        /* Override de la regla `.netza-bottom-tab i { width:22px; height:22px }`
           — el badge usa 11×11 y queda fuera de la grilla del ícono. */
    }
    body.dark-mode .netza-bottom-tab.is-locked { opacity: 0.5; }
    body.dark-mode .netza-bottom-tab-icon-locked i.netza-bottom-tab-lock-badge {
        background: #231f1a;
        color: #a84a2a;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    /* ── FAB "+" central sobresalido ─────────────────────────────
       v2.10.9 rev6: bordes difuminados con doble box-shadow (Facu pide).
       El primer shadow es un glow soft alrededor (spread 4 + blur 12) que
       hace que el borde se difumine al bg; el segundo es la sombra de
       profundidad (proyecta hacia abajo). Sin border hard. */
    .netza-bottom-fab {
        flex: 0 0 auto;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #2d2520;
        color: #fff;
        border: 0;
        margin-top: -34px;
        font-size: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow:
            0 0 16px 4px rgba(45, 37, 32, 0.25),
            0 6px 20px rgba(45, 37, 32, 0.5);
        transition: transform 0.25s ease, background 0.15s ease;
        position: relative;
        z-index: 2;
    }
    .netza-bottom-fab:hover { background: #1a1611; }
    .netza-bottom-fab:active { transform: scale(0.94); }
    .netza-bottom-fab.open {
        transform: rotate(45deg);
        background: #0d0c0a;
    }

    /* ── Sheet del FAB (mini panel con 3 acciones) ──────────────
       Aparece desde abajo del "+", flotante encima de la barra. */
    .netza-bottom-fab-sheet {
        position: fixed;
        left: 50%;
        bottom: 90px;
        transform: translate(-50%, 16px);
        z-index: 91;
        background: #fbf8f2;
        border: 1px solid #e1d8c4;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(20, 19, 17, 0.18);
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 240px;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
    }
    .netza-bottom-fab-sheet.open {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
        visibility: visible;
    }
    .netza-bottom-fab-opt {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 10px;
        background: transparent;
        border: 0;
        color: #2d2520;
        font-family: 'Roboto', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.15s;
    }
    .netza-bottom-fab-opt:hover, .netza-bottom-fab-opt:active {
        background: rgba(45, 37, 32, 0.08);
    }
    .netza-bottom-fab-opt i {
        width: 22px;
        font-size: 15px;
        text-align: center;
    }
    /* v2.10.9 — Color del ícono según tipo (ingreso/egreso). Mismos
       semánticos que las cards: verde positivo, rojo negativo. */
    .netza-bottom-fab-opt.is-pos i { color: var(--netza-positivo, #3a7d5a); }
    .netza-bottom-fab-opt.is-neg i { color: var(--netza-negativo, #c45a3f); }
    /* v2.10.11 rev35 — Movimiento: icono compuesto con 2 flechas chicas
       (arriba verde = entra, abajo rojo = sale). El span replica el ancho
       del slot del ícono (22px) y monta las 2 flechas en horizontal. */
    .netza-bottom-fab-opt-mov-icon {
        display: inline-flex;
        width: 22px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        gap: 1px;
        line-height: 1;
    }
    .netza-bottom-fab-opt-mov-icon i {
        width: auto;
        font-size: 11px;
        text-align: center;
    }
    .netza-bottom-fab-opt-mov-icon i:nth-child(1) { color: var(--netza-positivo, #3a7d5a); }
    .netza-bottom-fab-opt-mov-icon i:nth-child(2) { color: var(--netza-negativo, #c45a3f); }
    /* v2.10.11 rev36 — Balanza de Ajuste: mitad izquierda verde, mitad derecha
       roja (representa la balanza ingreso vs egreso). Usamos linear-gradient
       sobre el texto del ícono con background-clip:text para colorear cada
       mitad del glyph SVG-rendered de FontAwesome. */
    .netza-bottom-fab-opt.is-ajuste i {
        background: linear-gradient(90deg,
            var(--netza-positivo, #3a7d5a) 0%,
            var(--netza-positivo, #3a7d5a) 50%,
            var(--netza-negativo, #c45a3f) 50%,
            var(--netza-negativo, #c45a3f) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* Backdrop translúcido detrás del sheet */
    .netza-bottom-fab-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(20, 19, 17, 0.25);
        z-index: 89;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s;
    }
    .netza-bottom-fab-backdrop.open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    /* ── Padding-bottom del body cuando el bar está activo ──── */
    body.has-bottom-tabs { padding-bottom: 76px; }

    /* ── Filtrar items redundantes del menú hamburguesa ─────── */
    /* Home, Dashboard, Splitza ya están en el bottom tab bar.
       Los ocultamos del menú en mobile. Marcados con data-bottom-tab="1". */
    body.has-bottom-tabs .nav-cards-drop [data-bottom-tab="1"] {
        display: none !important;
    }

    /* ── FAB "+" desktop oculto en mobile ─────────────────────
       Sin condición body.has-bottom-tabs para evitar el flash visual. */
    .fab-nuevo, #fab-nuevo, .nuevo-fab { display: none !important; }

    /* v2.10.7 — Ícono perfil del navbar oculto en mobile (ya está en tab). */
    .nav-profile-link { display: none !important; }

    /* v2.10.7 — Botón flotante minimizado de NetzIA oculto en mobile:
       el chatbot se abre/cierra desde la tab "NetzIA" del bottom tab bar. */
    .netzia-min-btn { display: none !important; }

    /* v2.10.8 — Labels "Inicio"/"Ingresar" del navbar pre-login ocultos en
       mobile (queda solo el ícono). Hace lugar para sol/luna sin overflow. */
    .nav-icons-label { display: none !important; }

    /* v2.10.9 rev4 — Menú hamburguesa del navbar ENTERAMENTE oculto en
       mobile (.nav-cards-wrap display:none). Antes width:0 dejaba un gap
       fantasma del flex-gap de .nav-icons entre correo y salir. Para que
       el dropdown #dropdown-nav-cards siga accesible cuando lo dispara
       la tab "Menú" del bottom bar, el JS del partial mobile lo MUEVE al
       <body> al cargar (ver _bottom_tabs_mobile.html). Así el dropdown
       queda fuera del wrap oculto y nuestra regla position:fixed lo
       sigue posicionando como bottom-sheet. */
    .nav-cards-wrap { display: none !important; }

    /* v2.10.9 — Top navbar más alto en mobile (era 48px → 58px) para acomodar
       mejor el gradient PN y dar respiro a los íconos. */
    nav.netza-top-nav { height: 58px !important; }

    /* v2.10.9 — Dropdown del menú (#dropdown-nav-cards) cuando se dispara
       desde la tab "Menú": estilo bottom-sheet. Cubre desde la base de la
       pantalla hacia arriba con slide-up animado. Sobreescribe la position
       absolute del navbar. La animación usa transform + opacity con
       visibility delay para que el dropdown se anime al cerrar también. */
    body.has-bottom-tabs #dropdown-nav-cards {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 76px !important;
        width: 100% !important;
        max-width: none !important;
        /* v2.10.9 rev2 — altura máxima = viewport menos el bottom tab bar y un
           padding; con overflow-y: auto el dropdown scrollea internamente
           cuando hay muchos items (config + tutoriales expandidos). Antes
           70vh dejaba items ocultos detrás del bottom tab bar. */
        max-height: calc(100vh - 96px) !important;
        overflow-y: auto !important;
        border-radius: 18px 18px 0 0 !important;
        margin: 0 !important;
        box-shadow: 0 -8px 32px rgba(20, 19, 17, 0.2) !important;
        z-index: 91 !important;
        /* Animación cerrado → abierto con slide-up + fade-in. */
        display: block !important;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.25s ease-out;
    }
    body.has-bottom-tabs #dropdown-nav-cards.activo {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* v2.10.9 rev10 — Dropdown de notificaciones queda como TOP-dropdown
       (no bottom-sheet) — decisión Facu: el bell está arriba, el dropdown
       sale desde arriba. Solo le agregamos la animación slide-down + fade
       para que match con el bounce del menú. Mantiene el position:absolute
       relativo al .notif-nav-wrap. */
    body.has-bottom-tabs #dropdown-notificaciones {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 76px - 64px) !important;
        overflow-y: auto !important;
        display: block !important;
        transform: translateY(-12px) scale(0.96);
        transform-origin: top right;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.22s ease-out;
    }
    body.has-bottom-tabs #dropdown-notificaciones.activo {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    /* v2.10.9 rev9 — Mismo patrón bottom-sheet para el chat NetzIA
       (.netzia-panel) en mobile. Antes era una card flotante 380x560
       a la derecha del FAB; ahora full-width desde la base como sheet
       con slide-up + fade. La altura se ajusta a 75vh para que el
       teclado al abrirse no tape el input. */
    body.has-bottom-tabs .netzia-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 76px !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 75vh !important;
        max-height: calc(100vh - 96px) !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(20, 19, 17, 0.2) !important;
        z-index: 91 !important;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.25s ease-out,
                    visibility 0.25s;
    }
    body.has-bottom-tabs .netzia-panel.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* v2.10.8 — Dark mode del bottom tab bar replicado acá (estaba en
       home-mercado.css scoped por @media, pero algunas pantallas no lo
       respetaban). Acá garantizado para todas las pantallas mobile. */
    body.dark-mode nav.netza-bottom-tabs {
        background: #1a1611 !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }
    body.dark-mode .netza-bottom-tab { color: rgba(244, 240, 232, 0.55) !important; }
    /* v2.10.9 rev10 — Active color en dark: #c0593c (terracota vibrante,
       más saturado que el #f4b08e anterior que era el tono "suave"). */
    body.dark-mode .netza-bottom-tab.active { color: #c0593c !important; }
    body.dark-mode .netza-bottom-tab.active i {
        color: #c0593c !important;
        filter: drop-shadow(0 2px 6px rgba(192, 89, 60, 0.5))
                drop-shadow(0 0 10px rgba(192, 89, 60, 0.35)) !important;
    }
    /* v2.10.31 — Selector `body.dark-mode .netza-bottom-tab.is-locked span i.fa-lock`
       removido: ya no aplica al nuevo overlay-burbuja sobre el ícono. El
       color dark del badge vive arriba en la regla `.netza-bottom-tab-icon-locked i.netza-bottom-tab-lock-badge`. */
    /* v2.10.9 rev6 — Dark mode FAB con bordes difuminados terracota
       (mismo patrón de doble shadow que light, ajustado al accent). */
    body.dark-mode .netza-bottom-fab {
        background: #a84a2a;
        box-shadow:
            0 0 16px 4px rgba(168, 74, 42, 0.3),
            0 6px 20px rgba(168, 74, 42, 0.55);
    }
    body.dark-mode .netza-bottom-fab:hover { background: #c0593c; }
    body.dark-mode .netza-bottom-fab.open { background: #7d3318; }
    body.dark-mode .netza-bottom-fab-sheet {
        background: #231f1a;
        border-color: rgba(255, 255, 255, 0.10);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    }
    body.dark-mode .netza-bottom-fab-opt { color: #f4f0e8; }
    body.dark-mode .netza-bottom-fab-opt:hover,
    body.dark-mode .netza-bottom-fab-opt:active {
        background: rgba(255, 255, 255, 0.06);
    }
    /* v2.10.9 rev3 — los iconos por tipo ya cambian solos vía var()
       (--netza-positivo/negativo se redefinen en body.dark-mode). No
       hace falta override hardcoded acá. */
}

/* ── Desktop / tablet: bottom tabs no visibles ───────────────── */
@media (min-width: 601px) {
    .netza-bottom-tabs { display: none !important; }
    /* v2.10.78 (Facu 2026-05-13) — FAB sheet en DT: el bloque de reglas
       base (opacity:0/visibility:hidden + transition + position:fixed)
       vive en @media (max-width:600px) → NO aplica en DT. Replicamos las
       reglas de hiding acá; sin esto el sheet se ve como una fila de
       botones flat al fondo de cualquier página, porque no tiene
       posicionamiento ni hide-rules en DT.
       Lateral: pegado al sidebar (88px = 80px width + 8px gap).
       Animación de apertura: scale + fade desde la posición del FAB. */
    .netza-bottom-fab-sheet {
        position: fixed;
        left: 88px;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(0, calc(-50% + 16px));
        z-index: 91;
        background: #fbf8f2;
        border: 1px solid #e1d8c4;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(20, 19, 17, 0.22);
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 220px;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease,
                    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    visibility 0.2s;
    }
    .netza-bottom-fab-sheet.open {
        opacity: 1;
        transform: translate(0, -50%);
        pointer-events: auto;
        visibility: visible;
    }
    /* Estilos de los botones del sheet (mismos que mobile pero
       replicados acá porque las reglas base viven en @media (max-width:600px). */
    .netza-bottom-fab-opt {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 10px;
        background: transparent;
        border: 0;
        color: #2d2520;
        font-family: 'Roboto', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.15s;
    }
    .netza-bottom-fab-opt:hover, .netza-bottom-fab-opt:active {
        background: rgba(45, 37, 32, 0.08);
    }
    .netza-bottom-fab-opt i {
        width: 22px;
        font-size: 15px;
        text-align: center;
    }
    .netza-bottom-fab-opt.is-pos i { color: var(--netza-positivo, #3a7d5a); }
    .netza-bottom-fab-opt.is-neg i { color: var(--netza-negativo, #c45a3f); }
    .netza-bottom-fab-opt-mov-icon {
        display: inline-flex;
        width: 22px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        gap: 1px;
        line-height: 1;
    }
    .netza-bottom-fab-opt-mov-icon i {
        width: auto;
        font-size: 11px;
        text-align: center;
    }
    .netza-bottom-fab-opt-mov-icon i:nth-child(1) { color: var(--netza-positivo, #3a7d5a); }
    .netza-bottom-fab-opt-mov-icon i:nth-child(2) { color: var(--netza-negativo, #c45a3f); }
    .netza-bottom-fab-opt.is-ajuste i {
        background: linear-gradient(90deg,
            var(--netza-positivo, #3a7d5a) 0%,
            var(--netza-positivo, #3a7d5a) 50%,
            var(--netza-negativo, #c45a3f) 50%,
            var(--netza-negativo, #c45a3f) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .netza-bottom-fab-backdrop {
        position: fixed;
        top: 0; bottom: 0; right: 0;
        left: 80px;       /* respeta la sidebar */
        background: rgba(20, 19, 17, 0.25);
        z-index: 89;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s;
    }
    .netza-bottom-fab-backdrop.open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
}

/* ======================================================================
   v2.10.91 (Facu 2026-05-14) — Tap highlight transparente GLOBAL en
   mobile. Antes solo aplicaba a bottom-tab/top-nav/menu (línea ~587),
   por lo que Splitza, Dashboard, Registros, etc. seguían mostrando el
   recuadro azul de selección del browser al tap. Esta regla global
   mata el blue tap rectangle en todos los elementos del viewport mobile.
   No afecta user-select (que sigue scoped a los clickables específicos
   más abajo para no romper text selection en inputs/párrafos).
   ====================================================================== */
@media (max-width: 600px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ======================================================================
   v2.10.44 (Facu 2026-05-13) — Anti-selección de texto en elementos
   clickeables. Con PJAX el browser puede interpretar el click rápido
   como inicio de selección y deja un rectángulo azul de selección en
   el texto del botón. Aplicamos `user-select: none` + `tap-highlight`
   transparente al bottom tab bar, top nav y menú "Ir a…".
   ====================================================================== */
.netza-bottom-tab,
.netza-bottom-tab *,
.netza-bottom-fab,
.netza-bottom-fab-opt,
.netza-bottom-fab-opt *,
.netza-top-nav,
.netza-top-nav a,
.netza-top-nav button,
.netza-top-nav *,
.nav-cards-btn,
.nav-cards-item,
.nav-cards-item *,
.nav-cards-item-expand,
.nav-cards-item-expand *,
.nav-cards-subitem,
.nav-cards-subitem * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ========================================================================
   v2.10.74 (Facu 2026-05-13) — SIDEBAR VERTICAL DESKTOP/TABLET (≥601px)
   Reemplaza el bottom-tab en DT por una barra vertical fija a la izquierda.
   Mismas opciones, mismos handlers JS (toggleNavCards, bottomFabToggle).
   ======================================================================== */

/* Mobile: ocultar la sidebar (solo se ve el bottom-tab) */
.netza-sidebar-desktop { display: none; }

@media (min-width: 601px) {
    /* Mostrar sidebar en DT. v2.10.104 (Facu 2026-05-14) — Revert del
       intento de centrado vertical de v2.10.103 (rompía render: la
       sidebar desaparecía en algunos casos). Vuelve al stack top-aligned
       de v2.10.88, que es estable. */
    .netza-sidebar-desktop {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* v2.10.105 (Facu 2026-05-14) — `justify-content: center` centra
           el stack completo verticalmente: items pegados entre sí, el FAB
           queda en su posición natural cerca del centro del viewport. */
        justify-content: center;
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 80px;
        /* `height: 100vh` para override la regla global
           `nav { height: var(--nav-h) }` de netza-base.css que se aplicaba
           al `<nav class="netza-sidebar-desktop">` y limitaba el alto. */
        height: 100vh;
        background: #fbf8f2;
        border-right: 1px solid #e1d8c4;
        padding: 16px 0 16px;
        gap: 6px;
        z-index: 95;
        font-family: 'Roboto', system-ui, sans-serif;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
    }
    /* v2.10.105 (Facu 2026-05-14) — Logo Netza del sidebar oculto: el
       navbar superior ya muestra la marca, era redundante en el sidebar. */
    .netza-sidebar-brand { display: none; }

    /* Cada tab vertical */
    .netza-sidebar-tab {
        background: transparent; border: 0;
        color: #6b6157;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 5px;
        width: 100%;
        padding: 10px 4px;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s, color 0.18s;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    /* v2.10.105 (Facu 2026-05-14) — Unificar look con bottom-tab mobile
       light: misma transition con cubic-bezier para que el scale del
       active state tenga "bounce", y el filter para el glow. */
    .netza-sidebar-tab i {
        font-size: 18px;
        line-height: 1;
        transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                    color 0.2s ease, filter 0.25s ease;
    }
    .netza-sidebar-tab:hover {
        background: rgba(20, 19, 17, 0.04);
        color: #2d2520;
    }
    /* v2.10.105 — Tap effect: scale leve al press (mismo que mobile). */
    .netza-sidebar-tab:active i { transform: scale(0.92); }

    /* v2.10.105 — Active state idéntico al bottom-tab mobile light:
       color ink dark + bold + scale 1.35 (bounce via cubic-bezier
       definido arriba) + glow vía doble drop-shadow. */
    .netza-sidebar-tab.active {
        color: #2d2520;
        font-weight: 700;
    }
    .netza-sidebar-tab.active i {
        transform: scale(1.35) translateY(-1px);
        color: #2d2520;
        filter: drop-shadow(0 2px 6px rgba(45, 37, 32, 0.4))
                drop-shadow(0 0 10px rgba(45, 37, 32, 0.25));
    }

    /* FAB "+" central — vertical. v2.10.105 (Facu 2026-05-14): mismo
       estilo que el `.netza-bottom-fab` mobile light → background dark
       ink (#2d2520), glow vía doble box-shadow (soft halo + sombra de
       profundidad). En dark mode pasa a terracota (override más abajo). */
    .netza-sidebar-fab {
        background: #2d2520;
        color: #fff;
        border: 0;
        width: 48px; height: 48px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
        cursor: pointer;
        margin: 8px 0;
        /* Doble box-shadow para glow + profundidad (idéntico al mobile FAB). */
        box-shadow:
            0 0 16px 4px rgba(45, 37, 32, 0.20),
            0 6px 20px rgba(45, 37, 32, 0.45);
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.18s, background 0.18s;
        flex-shrink: 0;
    }
    .netza-sidebar-fab:hover {
        transform: scale(1.06);
        background: #141311;
        box-shadow:
            0 0 20px 6px rgba(45, 37, 32, 0.30),
            0 8px 24px rgba(45, 37, 32, 0.55);
    }
    .netza-sidebar-fab.open {
        transform: rotate(45deg);
    }

    /* Lock badge sobre el icon (free sin IA) */
    .netza-sidebar-tab-icon-locked {
        position: relative;
        display: inline-flex;
        line-height: 1;
    }
    .netza-sidebar-tab-lock-badge {
        position: absolute;
        bottom: -2px; right: -4px;
        font-size: 9px !important;
        color: #a84a2a;
        background: #fbf8f2;
        border-radius: 50%;
        padding: 2px;
    }

    /* Logout abajo de todo */
    .netza-sidebar-tab-logout {
        margin-top: auto;
    }

    /* Body padding-left para que el contenido no quede tapado */
    body.has-bottom-tabs {
        padding-left: 80px;
    }
    /* En auth/landing/mantenimiento no hay sidebar — quitar el padding.
       Los selectores :has() permiten esto sin js. */
    body:not(.has-bottom-tabs) { padding-left: 0; }

    /* v2.10.76 (Facu 2026-05-13) — Top navbar pisa el área del logo del
       sidebar: con margin-left negativo iguala al body padding-left,
       extendiendo la navbar hasta el borde izquierdo del viewport (z-index
       100 vs sidebar 95 → la navbar tapa la región del logo del sidebar). */
    body.has-bottom-tabs > nav.netza-top-nav {
        margin-left: -80px;
    }

    /* v2.10.76 — Ocultar en DT: FAB flotante (reemplazado por el "+" del
       sidebar) + ícono perfil + botón hamburguesa del navbar (ambos ya
       están como tabs en el sidebar). NO ocultamos .nav-cards-wrap entero
       porque el dropdown #dropdown-nav-cards vive adentro y debe seguir
       disparándose desde la tab "Menú" del sidebar. */
    body.has-bottom-tabs .fab-nuevo,
    body.has-bottom-tabs #fab-nuevo,
    body.has-bottom-tabs .nuevo-fab,
    body.has-bottom-tabs .nav-profile-link,
    body.has-bottom-tabs .nav-cards-btn {
        display: none !important;
    }

    /* Ocultar bottom-tab y FAB sheet legacy desktop si se renderean */
    nav.netza-bottom-tabs { display: none !important; }

    /* Dropdown notif: ya queda en su posición (top:nav-h) — no se mueve.
       Solo el sidebar agrega padding al body. */

    /* DARK MODE */
    body.dark-mode .netza-sidebar-desktop {
        background: #1a1611;
        border-right-color: rgba(255, 255, 255, 0.06);
    }
    body.dark-mode .netza-sidebar-brand { color: #f4f0e8; }
    body.dark-mode .netza-sidebar-tab { color: rgba(244, 240, 232, 0.55); }
    body.dark-mode .netza-sidebar-tab:hover {
        background: rgba(255, 255, 255, 0.04);
        color: #f4f0e8;
    }
    body.dark-mode .netza-sidebar-tab.active { color: #c0593c; }
    /* v2.10.105 — Glow del active state en dark, idéntico al bottom-tab
       mobile dark: drop-shadow terracota vibrante. */
    body.dark-mode .netza-sidebar-tab.active i {
        color: #c0593c;
        filter: drop-shadow(0 2px 6px rgba(192, 89, 60, 0.5))
                drop-shadow(0 0 10px rgba(192, 89, 60, 0.35));
    }
    body.dark-mode .netza-sidebar-tab-lock-badge {
        background: #1a1611;
    }
    /* v2.10.105 — FAB en dark, idéntico al bottom-fab mobile dark:
       background terracota + glow del mismo tono. */
    body.dark-mode .netza-sidebar-fab {
        background: #a84a2a;
        box-shadow:
            0 0 16px 4px rgba(168, 74, 42, 0.30),
            0 6px 20px rgba(168, 74, 42, 0.55);
    }
    body.dark-mode .netza-sidebar-fab:hover { background: #c0593c; }
    body.dark-mode .netza-sidebar-fab.open { background: #7d3318; }

    /* v2.10.77 (Facu 2026-05-13) — Dropdown "Ir a…" (#dropdown-nav-cards)
       en DT con sidebar: pegado al borde derecho del sidebar (left:88px),
       desde el bottom (donde está la tab "Menú" que lo dispara). */
    body.has-bottom-tabs .nav-cards-drop.activo {
        position: fixed !important;
        left: 88px !important;
        right: auto !important;
        bottom: 16px !important;
        top: auto !important;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(20, 19, 17, 0.22);
        z-index: 9500;
    }
    /* v2.10.105 (Facu 2026-05-14) — Fuente del dropdown DT +50% respecto
       al base (13→19px) para legibilidad cómoda. Padding e íconos
       proporcionalmente más grandes. El re-anchor JS (MutationObserver
       sobre `.nav-cards-submenu`) maneja el caso de submenú grande:
       cuando se expande, el dropdown se desliza hacia arriba para usar
       el viewport completo. Si aún excede, el scroll-y del dropdown
       habilita scroll vertical (no lateral). */
    body.has-bottom-tabs .nav-cards-drop .nav-cards-item,
    body.has-bottom-tabs .nav-cards-drop .nav-cards-item-expand {
        padding: 9px 16px;
        font-size: 14px;
        gap: 10px;
    }
    body.has-bottom-tabs .nav-cards-drop .nav-cards-item i,
    body.has-bottom-tabs .nav-cards-drop .nav-cards-item-expand > i {
        font-size: 17px;
        width: 21px;
    }
    body.has-bottom-tabs .nav-cards-drop .nav-cards-subitem {
        padding: 8px 16px 8px 22px;
        font-size: 14px;
        gap: 10px;
    }
    body.has-bottom-tabs .nav-cards-drop .nav-cards-subitem i {
        font-size: 15px;
        width: 20px;
    }
    body.has-bottom-tabs .nav-cards-drop-header {
        padding: 9px 16px;
        font-size: 11px;
    }
    body.has-bottom-tabs .nav-cards-drop .nav-cards-item-expand .nav-caret {
        font-size: 12px;
    }

    /* v2.10.79 (Facu 2026-05-13) — Items que ya viven como tabs del sidebar
       (Home, Dashboard, Splitza) se ocultan del menú "Ir a…" para evitar
       duplicación. Mismo patrón que mobile (línea 294) pero replicado para
       DT porque la sidebar reemplaza al bottom-tab. */
    body.has-bottom-tabs .nav-cards-drop [data-bottom-tab="1"] {
        display: none !important;
    }
}