/* Estilos del panel — extraídos de panel.html (2026-07-13). Misma razón que base.css:
 * 13.2 KB que viajaban inline en CADA vista del panel y el navegador no podía cachear. */
:root {
        --app-bg: #fafafa;
        --sidebar-bg: #0a0a0a;
        --sidebar-text: rgba(255, 255, 255, 0.92);
        --sidebar-active-bg: #ffffff;
    }
    /* Buttons heredados de base.html — no duplicar aquí. */

        html,
        body {
            margin: 0;
            min-height: 100%;
        }

        body {
            font-family: "Inter", sans-serif;
            background: var(--app-bg);
            color: var(--text);
        }

        .app-shell {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 220px minmax(0, 1fr);
        }

        .app-sidebar {
            background: var(--sidebar-bg);
            color: #fff;
            padding: 22px 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: sticky;
            top: 0;
            height: 100vh;
        }

        .app-brand {
            display: block;
            padding: 4px 10px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-align: left;
            color: #fff;
            text-decoration: none;
        }

        .app-brand strong {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .app-brand:hover,
        .app-brand:focus,
        .app-brand:active,
        .app-brand:visited {
            color: #fff;
            text-decoration: none;
        }

        .app-nav {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            flex: 1 1 auto;
        }

        .app-nav a {
            display: block;
            padding: 10px 14px;
            color: var(--sidebar-text);
            text-decoration: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            letter-spacing: -0.01em;
            transition: background-color 0.16s ease, color 0.16s ease;
        }

        .app-nav a:hover {
            background: rgba(255, 255, 255, 0.10);
            color: #fff;
        }

        .app-nav a.active {
            background: var(--sidebar-active-bg);
            color: var(--accent);
            font-weight: 700;
        }

        .app-main {
            /* 22px arriba = alinea con el padding-top del sidebar (la marca "Univai").
               Antes 72px: aire reservado para el botón flotante de usuario, ya removido. */
            min-width: 0;
            padding: 22px;
            position: relative;
        }

        /* Cuenta + cerrar sesión: viven en el FOOTER del sidebar (antes era un menú flotante
           "Ramses" que tapaba la esquina y cortaba la vista). Lean + siempre a la mano. */
        .app-foot {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding: 12px 4px 2px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* Píldora de cuenta: [ (R) usuario │ →] ] — identidad a la izquierda, cerrar sesión
           (segmento dividido) a la derecha. Una sola unidad en vez de fila + Ops + botón ancho. */
        .app-acct {
            display: flex;
            align-items: stretch;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 10px;
            overflow: hidden;
        }

        .app-acct-user {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            color: rgba(255, 255, 255, 0.72);
            font-size: 13px;
            font-weight: 600;
        }

        .app-acct-avatar {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
        }

        .app-acct-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-acct-out { display: flex; flex-shrink: 0; }

        .app-acct-logout {
            padding: 0 14px;
            border: none;
            border-left: 1px solid rgba(255, 255, 255, 0.14);
            background: transparent;
            color: rgba(255, 255, 255, 0.55);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
        }

        .app-acct-logout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

        .app-acct-ops {
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.32);
            text-decoration: none;
            padding: 0 4px;
        }

        .app-acct-ops:hover { color: rgba(255, 255, 255, 0.7); }

        .app-content {
            min-width: 0;
            max-width: 920px;
            margin: 0 auto;
        }

        /* Botón "volver" CANÓNICO (un solo patrón en TODA la app — el usuario lo reconoce de una).
           Píldora sobria con borde + flecha. Reemplaza a breadcrumb-trail/emi-back/ne-back/back-link. */
        .app-back {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text);
            text-decoration: none;
            font-size: 13.5px;
            font-weight: 700;
            margin-bottom: 18px;
            padding: 7px 13px 7px 11px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--surface);
            transition: background-color .15s ease;
        }
        .app-back:hover { background: var(--surface-soft); color: var(--text); }

        /* Ícono "i"/"?" CANÓNICO (homologado founder 2026-06-28): círculo con BORDE visible (antes
           fondo gris tenue #f5f5f5 que se perdía sobre headers → parecía "i" pelona, p.ej. /nómina).
           Mismo look que el del pulso → se ve IGUAL en todas las vistas. Lo comparten info_hint ("i")
           y glossary_hint ("?"). flex:none = no se aplasta en flex/grid. */
        .glossary-hint {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.16em;          /* separación punto–asta de la "i" */
            /* PROPORCIONAL al contexto (em): escala con el texto de su etiqueta → se ve igual de
               proporcionado junto a un título grande (DIOT 32px) que junto a un eyebrow (11px). */
            width: 1.55em;
            height: 1.55em;
            margin-left: 0.45em;
            border-radius: 999px;
            /* currentColor = HEREDA el color del contexto → blanco sobre tarjeta oscura (héroe),
               gris sobre tarjeta clara. background transparent: sin relleno. */
            border: 1px solid currentColor;
            background: transparent;
            color: inherit;
            opacity: 0.75;
            font-size: 0.6em;     /* unidad em para DIBUJAR la "i" → escala proporcional al label */
            line-height: 0;
            cursor: default;      /* sin cursor "?"; el tooltip sale igual */
            vertical-align: middle;
            flex: none;
            transition: opacity .12s ease;
        }
        /* La "i" se DIBUJA (punto + asta), no se usa el glifo de la fuente: así queda PERFECTAMENTE
           centrada y simétrica a CUALQUIER tamaño. El glifo "i" minúsculo no tiene descendente → el
           hueco de abajo lo hacía verse un pelo alto/descentrado. flex-column + gap centra el grupo. */
        .glossary-hint::before {   /* punto */
            content: "";
            width: 0.24em; height: 0.24em;
            border-radius: 50%;
            background: currentColor;
        }
        .glossary-hint::after {    /* asta — con cuerpo (más gruesa) para que contraste y se lea claro */
            content: "";
            width: 0.26em; height: 0.5em;
            border-radius: 0.13em;
            background: currentColor;
        }
        .glossary-hint:hover,
        .glossary-hint:focus { opacity: 1; outline: none; }
        .glossary-hint.info-i { font-weight: 800; }
        .glossary-tooltip {
            /* position:FIXED + posicionado por JS (ver script abajo). z-index NO escapa overflow:hidden
               de tablas/cards → con absolute el tooltip se CORTABA dentro de la tabla de facturas, etc.
               Fixed se ancla al viewport (lo saca de cualquier overflow); el JS lo centra bajo el ícono,
               lo clampa al ancho de pantalla y lo voltea hacia arriba si no cabe abajo. */
            position: fixed;
            z-index: 1000;
            display: none;
            width: min(260px, 70vw);
            padding: 10px 12px;
            /* REMARCADO: anillo claro visible sobre el fondo oscuro + sombra fuerte en capas →
               se lee claramente como un popup/tooltip flotante, no como texto suelto. */
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 12px;
            background: var(--accent);
            color: #fff;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.26);
            text-align: left;
            /* No heredar cursiva/serif/MAYÚSCULAS del label contenedor (p.ej. un <th> uppercase):
               el tooltip va siempre en sans normal, sentence case — sobrio y uniforme. */
            font-style: normal;
            text-transform: none;
            letter-spacing: normal;
        }
        .glossary-tooltip strong,
        .glossary-tooltip span {
            display: block;
        }

        .glossary-tooltip strong {
            margin-bottom: 4px;
            font-size: 12px;
        }

        .glossary-tooltip span {
            font-size: 12px;
            line-height: 1.35;
            color: rgba(255, 255, 255, 0.78);
        }

        /* Mostrar/ocultar + posición los maneja el JS (tooltip fixed): ver el IIFE al final del body. */

        @media (max-width: 960px) {
            .app-shell {
                grid-template-columns: 1fr;
            }

            .app-sidebar {
                position: static;
                height: auto;
            }

            .app-main {
                padding-top: 16px;
            }
        }

        .app-empresa-static {
            width: 100%;
            padding: 8px 10px;
            display: grid;
            gap: 3px;
            text-align: left;
            background: transparent;
            border: none;
            border-radius: 10px;
            font-family: inherit;
            color: inherit;
        }
        button.app-empresa-static { cursor: pointer; }
        button.app-empresa-static:hover { background: rgba(255, 255, 255, 0.07); }

        .app-empresa-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            text-align: left;
        }
        .app-empresa-name,
        .app-empresa-rfc-sub,
        .app-empresa-rfc {
            font-size: 13.5px;
            font-weight: 700;
            color: #fff;
            text-align: left;
            line-height: 1.25;
            word-break: break-word;
        }

        .app-badge {
            display: inline-block;
            min-width: 18px;
            padding: 1px 6px;
            margin-left: 6px;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            text-align: center;
        }

        /* Punto de atención (e.firma revocada / perfil fiscal pendiente). B&W: blanco sólido
           sobre el sidebar oscuro = alto contraste sin color (el dorado #d4a017 se salía del tema).
           Un anillo tenue lo separa del texto blanco del item activo. */
        .app-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-left: 6px;
            vertical-align: middle;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
        }

        .app-nav a {
            transition: opacity 0.2s ease, background-color 0.15s ease;
        }

        .app-nav-hint {
            margin: 14px 8px 0;
            padding: 10px 12px;
            border: 1px dashed rgba(255, 255, 255, 0.18);
            border-radius: 10px;
            font-size: 11px;
            line-height: 1.4;
            color: rgba(255, 255, 255, 0.55);
        }

        .app-nav-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.14);
            margin: auto 12px 8px;
        }

        .app-demo-banner {
            margin-bottom: 18px;
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            border-radius: 18px;
            background: var(--surface-soft);
            color: var(--text);
            font-size: 13px;
            line-height: 1.45;
            font-weight: 500;
        }

        .app-demo-banner strong {
            color: var(--accent);
            font-weight: 700;
        }