/* ═══ css/pro-welcome.css ═══ */
/* Vuelta de Stripe Checkout: "Activando tu plan…", bienvenida a Pro y aviso de pago cancelado.
 * Lógica en app/js/pro-welcome.js. Colores y tipografía solo con tokens --tp-*. */

.tpw-overlay {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-modal, 20000);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: env(safe-area-inset-top) 0 0;
    background-color: var(--tp-bg);
    /* Pattern de marca (barras + glow) con un velo de --tp-bg para que el contenido mande */
    background-image:
        linear-gradient(color-mix(in srgb, var(--tp-bg) 45%, transparent), color-mix(in srgb, var(--tp-bg) 45%, transparent)),
        url("/brand/patterns/pattern-bars-glow-1920x1080.svg");
    background-size: cover;
    background-position: 88% bottom;
    color: var(--tp-text);
    font-family: var(--tp-font);
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity 260ms ease;
}
.tpw-overlay.tpw-in { opacity: 1; }
/* Móvil: barras del pattern más pequeñas, abajo a la derecha, y velo más denso para que no compitan con la lista */
@media (max-width: 600px) {
    .tpw-overlay {
        background-image:
            linear-gradient(color-mix(in srgb, var(--tp-bg) 65%, transparent), color-mix(in srgb, var(--tp-bg) 65%, transparent)),
            url("/brand/patterns/pattern-bars-glow-1920x1080.svg");
        background-size: auto 60%;
        background-position: right bottom;
        background-repeat: no-repeat;
    }
}
.tpw-overlay:focus { outline: none; }
.tpw-overlay.tpw-out { opacity: 0; transition-duration: 200ms; }

.tpw-confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Zona central con scroll propio; el pie queda siempre visible */
.tpw-scroll {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: center;
    padding: 28px 20px 12px;
}
.tpw-card {
    width: 100%;
    max-width: 460px;
    margin: auto 0;
    text-align: center;
}

/* ── Isotipo animado (mismas 3 barras que brand/logo/icon/trackprop-icon-flat.svg) ── */
.tpw-mark {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
}
.tpw-mark svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tpw-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
.tpw-flash {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tp-green) 0%, transparent 65%);
    opacity: 0;
    pointer-events: none;
}

/* Bienvenida: suben con rebote, una tras otra, y destello */
.tpw-mark.tpw-rise .tpw-bar { animation: tpwRise 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.tpw-mark.tpw-rise .tpw-bar:nth-of-type(2) { animation-delay: 120ms; }
.tpw-mark.tpw-rise .tpw-bar:nth-of-type(3) { animation-delay: 240ms; }
.tpw-mark.tpw-rise .tpw-flash { animation: tpwFlash 900ms ease-out 520ms forwards; }
@keyframes tpwRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tpwFlash {
    0%   { opacity: 0;    transform: scale(0.4); }
    35%  { opacity: 0.45; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.35); }
}

/* Espera: suben una a una, en bucle */
.tpw-mark.tpw-loop .tpw-bar { animation: tpwLoop 1500ms ease-in-out infinite; }
.tpw-mark.tpw-loop .tpw-bar:nth-of-type(2) { animation-delay: 180ms; }
.tpw-mark.tpw-loop .tpw-bar:nth-of-type(3) { animation-delay: 360ms; }
@keyframes tpwLoop {
    0%        { transform: scaleY(0.15); }
    35%, 65%  { transform: scaleY(1); }
    100%      { transform: scaleY(0.15); }
}

/* ── Textos ── */
.tpw-title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.tpw-title em { font-style: normal; color: var(--tp-green); }
.tpw-sub {
    margin: 0 auto;
    max-width: 380px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tp-text-muted);
}
.tpw-sub a { color: var(--tp-green); text-decoration: none; }
.tpw-plan {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--tp-green);
    color: var(--tp-green);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tpw-save {
    margin: 10px 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tp-text);
}
.tpw-kicker {
    margin: 26px 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-text-muted);
    text-align: left;
}

/* Aparición escalonada del bloque de texto */
.tpw-reveal { opacity: 0; transform: translateY(8px); transition: opacity 360ms ease, transform 360ms ease; }
.tpw-reveal.tpw-shown { opacity: 1; transform: none; }

/* ── Lista de lo desbloqueado ── */
.tpw-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.tpw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--tp-radius-control);
    border: 1px solid var(--tp-hairline);
    background: var(--tp-card);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 280ms ease, transform 280ms ease, border-color 320ms ease, background-color 320ms ease;
}
.tpw-item.tpw-shown { opacity: 1; transform: none; }
.tpw-lock {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--tp-text-muted);
    border: 1px solid var(--tp-hairline);
    transition: color 320ms ease, border-color 320ms ease;
}
.tpw-lock svg { width: 16px; height: 16px; overflow: visible; }
.tpw-shackle { transform-box: view-box; transform-origin: 17px 11px; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tpw-item-text { min-width: 0; }
.tpw-item-name { display: block; font-size: 0.92rem; font-weight: 700; color: var(--tp-text-muted); transition: color 320ms ease; }
.tpw-item-desc { display: block; font-size: 0.78rem; line-height: 1.4; color: var(--tp-text-muted); }

.tpw-item.tpw-open { border-color: var(--tp-green); }
.tpw-item.tpw-open .tpw-lock { color: var(--tp-green); border-color: var(--tp-green); }
.tpw-item.tpw-open .tpw-shackle { transform: translateY(-2px) rotate(22deg); }
.tpw-item.tpw-open .tpw-item-name { color: var(--tp-green); }

/* ── Pie fijo con los botones ── */
.tpw-footer {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 20px max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--tp-bg) 70%, transparent);
}
.tpw-btn {
    width: 100%;
    max-width: 460px;
    min-height: 48px;
    border: 0;
    border-radius: var(--tp-radius-control);
    background: var(--tp-green);
    color: var(--tp-bg);
    font: 800 1rem/1 var(--tp-font);
    cursor: pointer;
}
.tpw-btn:hover { background: var(--tp-green-deep); }
.tpw-btn:focus-visible, .tpw-link:focus-visible { outline: 2px solid var(--tp-text); outline-offset: 3px; }
.tpw-btn.tpw-ghost { background: transparent; color: var(--tp-text); border: 1px solid var(--tp-hairline); }
.tpw-link {
    background: none;
    border: 0;
    padding: 6px 8px;
    color: var(--tp-text-muted);
    font: 600 0.88rem/1.2 var(--tp-font);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.tpw-link:hover { color: var(--tp-text); }

/* ── Pulso de las pestañas desbloqueadas al cerrar ── */
.tpw-pulse { animation: tpwPulse 900ms ease-in-out 2; }
.mobile-tab-picker.tpw-pulse { animation-name: tpwPulseBox; }
@keyframes tpwPulse {
    0%, 100% { text-shadow: none; box-shadow: none; }
    50%      { color: var(--tp-green);
               text-shadow: 0 0 12px color-mix(in srgb, var(--tp-green) 60%, transparent);
               box-shadow: inset 0 -2px 0 var(--tp-green); }
}
@keyframes tpwPulseBox {
    0%, 100% { box-shadow: none; }
    50%      { box-shadow: 0 0 0 1px var(--tp-green), 0 0 18px color-mix(in srgb, var(--tp-green) 35%, transparent); }
}

/* ── Aviso discreto (pago cancelado) ── */
.tpw-toast {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: var(--z-alert, 10001);
    max-width: calc(100vw - 32px);
    padding: 11px 16px;
    border-radius: var(--tp-radius-control);
    background: var(--tp-card);
    border: 1px solid var(--tp-hairline);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--tp-text);
    font: 600 0.88rem/1.4 var(--tp-font);
    transform: translate(-50%, 12px);
    opacity: 0;
    transition: opacity 240ms ease, transform 240ms ease;
}
.tpw-toast.tpw-shown { opacity: 1; transform: translate(-50%, 0); }

/* ── Movimiento reducido: todo aparece directamente, sin animaciones ── */
.tpw-static .tpw-bar,
.tpw-static .tpw-reveal,
.tpw-static .tpw-item { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
.tpw-static .tpw-flash { display: none; }
.tpw-static .tpw-shackle { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .tpw-overlay, .tpw-toast { transition: none !important; }
    .tpw-bar, .tpw-flash, .tpw-pulse { animation: none !important; }
    .tpw-bar { transform: none !important; }
}

/* ═══ css/base.css ═══ */
/* Base: móvil, capas (z-index), tokens --c-* del sistema, paleta clara --tp-l-*, fuentes de formulario y partículas de fondo.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── MOBILE BASE ─────────────────────────────────────────────────────
   Sin destello al tocar. `manipulation` quita el retardo del doble toque
   pero deja hacer zoom con pellizco (accesibilidad).
── ─────────────────────────────────────────────────────────────── */
* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Red de seguridad contra el desplazamiento horizontal (iOS). clip y no hidden:
   hidden en body rompe position:sticky y no impide el desplazamiento en iOS. */
html, body {
    overflow-x: clip;
    overscroll-behavior-x: none;
}

body {
    overscroll-behavior: none;
}

/* ── Z-INDEX STACKING SYSTEM ─────────────────────────────────────────
   All z-index values must use these variables. Never hardcode z-index.
   Layer order (low → high):
     base      → structural/background elements
     tooltip   → dropdowns, tooltips, sticky headers
     fab       → floating action buttons (undo, scroll-to-top)
     overlay   → semi-transparent backdrops
     header    → sticky nav, lang-switch
     login     → login overlay (above everything except alerts)
     alert     → toast notifications
     modal     → full dialog modals (highest)
── ─────────────────────────────────────────────────────────────── */
:root {
    --z-base:    1;
    --z-tooltip: 200;
    --z-fab:     9990;
    --z-overlay: 9996;
    --z-header:  9999;
    --z-login:   10000;
    --z-alert:   10001;
    --z-modal:   20000;

    /* ── SISTEMA DE DISEÑO ──────────────────────────────────────────
       Tokens base. Los componentes nuevos (.tp-*) solo usan estas
       variables; el modo claro redefine los colores más abajo. */
    --c-green: var(--tp-green); --c-green-strong: var(--tp-green-deep);
    --c-fill: var(--tp-green); --c-on-fill: var(--tp-bg);   /* relleno de botón primario: igual en los dos temas */
    --c-blue: #4A9EFF; --c-amber: var(--tp-gold); --c-red: var(--tp-danger);
    --c-bg: var(--tp-bg); --c-surface: var(--tp-card); --c-surface-2: #161D23;
    --c-border: var(--tp-hairline); --c-border-strong: rgba(232,236,240,.14);
    --c-text: var(--tp-text); --c-muted: #8A949E;
    --r-sm: 6px; --r-md: var(--tp-radius-control); --r-lg: 14px; --r-pill: 999px;
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
    --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-hero: 40px;
    --font-ui: var(--tp-font); --font-num: var(--tp-font);
}

/* ── MODO CLARO ─────────────────────────────────────────────────────
   Los colores fijos del CSS van como var(--tp-l-*, <color del tema oscuro>).
   En oscuro los --tp-l-* no existen y se usa el color de siempre; el modo claro
   los define (paleta de abajo) y remapea a ellos los tokens de marca
   (--tp-*) y del sistema (--c-*).
   --c-fill y --c-on-fill no cambian: se resuelven en :root (botón verde de marca
   con texto oscuro, legible en los dos temas). */
body.light-mode {
    --tp-bg: var(--tp-l-bg); --tp-card: var(--tp-l-card);
    --tp-text: var(--tp-l-text); --tp-text-muted: var(--tp-l-text-2); --tp-hairline: var(--tp-l-divider);
    --tp-green: var(--tp-l-green); --tp-danger: var(--tp-l-red); --tp-gold: var(--tp-l-gold);
    --c-green: var(--tp-l-green); --c-blue: #1D4ED8; --c-amber: var(--tp-l-gold); --c-red: var(--tp-l-red);
    --c-bg: var(--tp-l-bg); --c-surface: var(--tp-l-card); --c-surface-2: var(--tp-l-input);
    --c-border: var(--tp-l-border); --c-border-strong: rgba(var(--tp-l-ink-rgb), .26);
    --c-text: var(--tp-l-text); --c-muted: var(--tp-l-text-2);
}

/* Paleta clara "Claro neutro": blancos y grises limpios. Un color del modo claro se cambia aquí. */
body.light-mode {
    --tp-l-bg: #F3F5F8;           /* fondo de la app */
    --tp-l-card: #FFFFFF;         /* tarjetas y paneles */
    --tp-l-raised: #FFFFFF;       /* modales, hojas, menús (con sombra) */
    --tp-l-input: #F6F8FA;        /* campos, segmentos, superficies hundidas */
    --tp-l-text: #0F172A;         /* texto */
    --tp-l-text-2: #475569;       /* texto secundario */
    --tp-l-text-3: #64707F;       /* texto deshabilitado / pistas */
    --tp-l-ink-rgb: 15, 23, 42;   /* base de los translúcidos (antes blanco) */
    --tp-l-border: rgba(15, 23, 42, .14);   /* bordes de tarjetas y campos */
    --tp-l-divider: rgba(15, 23, 42, .08);  /* separadores y filas */
    --tp-l-btn2-bg: #FFFFFF; --tp-l-btn2-text: #0F172A; --tp-l-btn2-border: rgba(15, 23, 42, .22);
    --tp-l-green: #147A3A;        /* acento verde (texto, iconos, activo) */
    --tp-l-red: #C62828;
    --tp-l-gold: #A65A00;
    --tp-l-focus: #2563EB;
    --tp-l-on-danger: #FFFFFF;
    --tp-l-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
}

/* Zonas que siguen oscuras en modo claro (acceso, planes, What's New, bienvenida a Pro,
   visor de imágenes): vuelven a los colores del tema oscuro. */
body.light-mode :is(.login-overlay, .wn-overlay, .tpw-overlay, #hofLightbox) {
    --tp-l-bg: initial; --tp-l-card: initial; --tp-l-raised: initial; --tp-l-input: initial;
    --tp-l-text: initial; --tp-l-text-2: initial; --tp-l-text-3: initial; --tp-l-ink-rgb: initial;
    --tp-l-border: initial; --tp-l-divider: initial; --tp-l-green: initial; --tp-l-red: initial; --tp-l-gold: initial;
    --tp-bg: #070C0F; --tp-card: #0B141B; --tp-text: #E8ECF0;
    --tp-text-muted: rgba(232, 236, 240, .56); --tp-hairline: rgba(232, 236, 240, .08);
    --tp-green: #3DDB7A; --tp-danger: #FF6B6B; --tp-gold: #F59E0B;
    --c-green: #3DDB7A; --c-blue: #4A9EFF; --c-amber: #F59E0B; --c-red: #FF6B6B;
    --c-bg: #070C0F; --c-surface: #0B141B; --c-surface-2: #161D23;
    --c-border: rgba(232, 236, 240, .08); --c-border-strong: rgba(232, 236, 240, .14);
    --c-text: #E8ECF0; --c-muted: #8A949E;
    color: #E8ECF0;
}

/* Los controles de formulario no heredan la fuente por defecto (salían en Arial). */
button, input, select, textarea { font: inherit; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
    background: var(--tp-bg);
    color: var(--tp-l-text, #E6E8EB);
    line-height: 1.6;
    padding: 2rem;
}

/* ─── DASHBOARD BACKGROUND PARTICLES ─── */
#dashParticles {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity 1.2s ease;
}

/* ═══ css/componentes.css ═══ */
/* Componentes comunes: modales, cabecera y filtro de tiempo, pestañas, tarjetas, campos, botones, KPIs, tooltips, tablas, tp-*, avisos, barras, gauge y badge BETA.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* Modal styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    background: rgba(0, 0, 0, 0.8);
    z-index: var(--z-overlay);
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: var(--tp-l-raised, #181B20);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
}

.modal-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 1rem;
}

.modal-body {
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-btn.cancel {
    background: #9AA0A6;
    color: #121417;
}

.modal-btn.cancel:hover {
    background: #7F8C8D;
}

.modal-btn.confirm {
    background: #E74C3C;
    color: white;
}

.modal-btn.confirm:hover {
    background: #C0392B;
}

.modal-btn.confirm:not(:disabled):hover {
    background: #C0392B;
}

#confirmResetBtn:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
}

#resetConfirmInput:focus {
    outline: none;
    border-color: var(--tp-l-red, #E74C3C) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
}

.header h1 {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-ui);
    background: linear-gradient(135deg, #E6E8EB 0%, #2ECC71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.header p {
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.9rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── PER-VIEW TIME FILTER ─── */
.view-header {
    position: relative;
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 2rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
}
.view-header h2 {
    font-family: var(--font-ui);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.view-header .subtitle { color: var(--tp-l-text-2, #9AA0A6); font-size: 0.95rem; }
.time-filter {
    position: absolute;
    top: 2rem;
    right: 2rem;
}
.time-filter select {
    padding: 0.45rem 0.9rem;
    background: var(--tp-l-card, #181B20);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.12);
    border-radius: 6px;
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.time-filter select:focus { outline: none; border-color: rgba(46,204,113,0.4); }
.view-label {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.75rem;
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.2);
    border-radius: 20px;
    color: var(--tp-l-green, #2ECC71);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-reset {
    padding: 0.5rem 1rem;
    background: #E74C3C;
    color: white;
    border: none;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-reset:hover {
    background: #C0392B;
    transform: translateY(-1px);
}

.tabs-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.tabs-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--tp-bg));
    pointer-events: none;
    z-index: 1;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--tp-green) rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    padding-bottom: 0.5rem;
}

.tabs::-webkit-scrollbar {
    height: 6px;
}

.tabs::-webkit-scrollbar-track {
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    border-radius: 3px;
}

.tabs::-webkit-scrollbar-thumb {
    background: var(--tp-green);
    border-radius: 3px;
}

.tabs::-webkit-scrollbar-thumb:hover {
    background: var(--tp-green-deep);
}

.tab-container {
    position: relative;
    overflow: hidden;
}

.tab {
    padding: 0.65rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--tp-l-text-2, #6B7280);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    position: relative;
}

.tab:hover {
    color: var(--tp-l-text-2, #C0C7D0);
}

.tab.active {
    color: var(--tp-green);
    border-bottom-color: var(--tp-green);
}
.tab:focus-visible { outline: 2px solid var(--tp-green); outline-offset: -2px; border-radius: 6px; }
/* Destino del foco al cambiar de pestaña: sin anillo, es para lectores de pantalla */
.nav-focus-target:focus { outline: none; }

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card {
    background: var(--tp-l-card, #181B20);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
}

.card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    background: var(--tp-l-card, #121417);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 8px;
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--tp-l-green, #2ECC71);
}

/* Safari renders input[type="date"] with a calendar icon that can overflow
   the element's box. appearance:none removes the native chrome while keeping
   the date picker on tap/click (tested iOS Safari, Chrome, Firefox). */
.form-group input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}

.btn {
    padding: 0.875rem 1.5rem;
    background: #2ECC71;
    color: #121417;
    border: none;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
}

.btn:hover {
    background: #27AE60;
    transform: translateY(-1px);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: var(--tp-l-card, #181B20);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
}

.kpi-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-num);
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.5rem;
}

.kpi-value.success { color: var(--tp-l-green, #2ECC71); }
.kpi-value.warning { color: var(--tp-l-gold, #F39C12); }
.kpi-value.danger { color: var(--tp-l-red, #E74C3C); }

.kpi-subtitle {
    font-size: 0.8rem;
    color: var(--tp-l-text-2, #9AA0A6);
}

/* ── Info button tooltip ──────────────────────────────────────────── */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(154,160,166,0.18);
    border: 1px solid rgba(154,160,166,0.3);
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    flex-shrink: 0;
}
.info-btn.active .info-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-2px);
}
.info-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #1A1D22;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.13);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #C4C9CF;
    width: 210px;
    text-align: left;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
    line-height: 1.45;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.13);
}

.table-container {
    background: var(--tp-l-raised, #181B20);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 1rem;
    border-bottom: 2px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    color: var(--tp-l-text-2, #9AA0A6);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

td {
    padding: 1rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    font-size: 0.9rem;
}

tr:hover {
    background: rgba(46, 204, 113, 0.05);
}

/* ── COMPONENTES BASE DEL SISTEMA DE DISEÑO ─────────────────────────
   Solo usan tokens (:root), así que el modo claro sale solo. */

/* Pill de estado: única en todo el dashboard (ver STATUS_META / statusPill) */
.tp-pill {
    --pill: var(--c-muted);
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--pill);
    border: 1px solid currentColor;   /* respaldo sin color-mix */
    background: transparent;
    border-color: color-mix(in srgb, var(--pill) 45%, transparent);
    background: color-mix(in srgb, var(--pill) 10%, transparent);
}
.tp-pill--phase1    { --pill: var(--c-blue); }
.tp-pill--phase2    { --pill: var(--c-amber); }
.tp-pill--funded    { --pill: var(--c-green); }
.tp-pill--suspended { --pill: var(--c-red); }
/* En claro, el texto de color sobre su propio tinte al 10% se queda en ~4.1–4.4:1:
   se oscurece mezclándolo con --c-text (≥ 5:1). En oscuro ya pasa sin tocarlo. */
body.light-mode .tp-pill { color: color-mix(in srgb, var(--pill) 80%, var(--c-text)); }
/* Fila de cuenta cerrada: texto apagado sin opacidad, para que la pill siga legible */
.tp-row-muted > td { color: var(--c-muted) !important; }

/* Botones: se migran tab a tab en los PRs siguientes */
.tp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: 36px; padding: 0 var(--s-4);
    border-radius: var(--r-md); border: 1px solid transparent;
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tp-btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.tp-btn--primary { background: var(--c-fill); color: var(--c-on-fill); }
.tp-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--c-fill) 88%, #FFFFFF); }
.tp-btn--secondary {
    color: var(--c-green);
    background: color-mix(in srgb, var(--c-green) 10%, transparent);
    border-color: color-mix(in srgb, var(--c-green) 40%, transparent);
}
.tp-btn--secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--c-green) 16%, transparent); }
.tp-btn--ghost { color: var(--c-text); background: transparent; border-color: var(--c-border-strong); }
.tp-btn--ghost:hover:not(:disabled) { background: var(--c-surface-2); }
.tp-btn--danger {
    color: var(--c-red);
    background: color-mix(in srgb, var(--c-red) 10%, transparent);
    border-color: color-mix(in srgb, var(--c-red) 40%, transparent);
}
.tp-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--c-red) 16%, transparent); }
body.light-mode .tp-btn--secondary { color: color-mix(in srgb, var(--c-green) 80%, var(--c-text)); }
body.light-mode .tp-btn--danger { color: color-mix(in srgb, var(--c-red) 80%, var(--c-text)); }

/* Campo de texto / select / fecha */
.tp-input {
    height: 40px; width: 100%; min-width: 0; padding: 0 var(--s-3);
    background: var(--c-surface-2); color: var(--c-text);
    border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    font-family: var(--font-ui); font-size: var(--fs-sm);
}
.tp-input::placeholder { color: var(--c-muted); }
.tp-input:focus { outline: none; border-color: var(--c-green); }
.tp-input[type="date"] { -webkit-appearance: none; appearance: none; }

/* Título de sección */
.tp-section-title {
    font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted);
}

/* Tarjeta */
.tp-card {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
}

@media (max-width: 768px) {
    .tp-btn { height: 44px; }
    .tp-input { font-size: 16px; }
}

.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    z-index: var(--z-alert);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.alert.hiding {
    animation: slideOutRight 0.3s ease-in forwards;
}

.alert.success {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.2);
    color: white;
}

.alert.success::before {
    content: '✓';
    font-size: 1.5rem;
    font-weight: bold;
}

.alert.error {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.2);
    color: white;
}

.alert.error::before {
    content: '✕';
    font-size: 1.5rem;
    font-weight: bold;
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tp-l-text-2, #9AA0A6);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0 0.9rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.08);
}

.dashboard-header h2 {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.2rem;
    letter-spacing: 0.04em;
}

.dashboard-header .subtitle {
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.75rem;
}

/* Horizontal bar styles */
.bar-chart {
    width: 100%;
    margin: 1rem 0;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bar-label {
    min-width: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tp-l-text, #E6E8EB);
}

.bar-track {
    flex: 1;
    height: 32px;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ECC71, #27AE60);
    border-radius: 6px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
}

.bar-value {
    font-family: var(--font-num);
    font-size: 0.85rem;
    font-weight: 700;
    color: #121417;
}

.bar-count {
    min-width: 60px;
    text-align: right;
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--tp-l-text, #E6E8EB);
}

/* Texto del medidor (el medidor es de ECharts: graficos.css → .tpg-gauge) */
.gauge-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-percentage {
    font-family: var(--font-num);
    font-size: 3rem;
    font-weight: 800;
    color: var(--tp-l-green, #2ECC71);
}

.gauge-label {
    font-size: 0.85rem;
    color: var(--tp-l-text-2, #9AA0A6);
    text-transform: uppercase;
    font-weight: 600;
}

.btn-primary {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #F39C12, #E67E22);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.05em;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
}

.btn-secondary {
    padding: 0.75rem 1.5rem;
    background: #9AA0A6;
    color: #121417;
    border: none;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: #7F8C8D;
}

/* ─── EXTRACTED FROM INLINE STYLES ─── */

.reset-confirm-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--tp-l-card, #121417);
    border: 2px solid rgba(231,76,60,0.3);
    border-radius: 8px;
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.label-danger {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tp-l-red, #E74C3C);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.modal-btn.confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-reset--gray {
    background: #9AA0A6 !important;
}
/* ── BETA badge ─────────────────────────────────── */
.beta-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 4px;
    color: var(--tp-l-gold, #FFD700);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ═══ css/analisis.css ═══ */
/* Análisis: Wrapped (generador y «próximamente»), Prop Firm golden, selector de firma y zoom del P&L.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* Wrapped specific styles */
.wrapped-header {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(46, 204, 113, 0.1));
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.wrapped-title {
    font-family: var(--font-ui);
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #F39C12, #2ECC71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.wrapped-subtitle {
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.metric-highlight {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(46, 204, 113, 0.15);
    border-radius: 6px;
    color: var(--tp-l-green, #2ECC71);
    font-family: var(--font-num);
    font-weight: 700;
}

.achievement-card {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(52, 152, 219, 0.05));
    border: 1px solid rgba(46, 204, 113, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.achievement-icon {
    font-size: 2rem;
}

.achievement-content h4 {
    font-family: var(--font-ui);
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.25rem;
}

.achievement-content p {
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.85rem;
}

/* Wrapped Generator Styles */
.wrapped-generator {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(46, 204, 113, 0.1));
    border: 2px solid rgba(243, 156, 18, 0.3);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
}

.config-section {
    background: var(--tp-l-card, #181B20);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.config-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tp-l-gold, #F39C12);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.metric-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.03);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.metric-checkbox:hover {
    background: rgba(46, 204, 113, 0.1);
}

.metric-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.metric-checkbox label {
    cursor: pointer;
    flex: 1;
    font-size: 0.9rem;
    color: var(--tp-l-text, #E6E8EB);
}

.preview-container {
    background: var(--tp-l-card, #121417);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-canvas {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.design-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 0;
}

.design-option {
    padding: 1rem;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.design-option:hover {
    border-color: var(--tp-l-gold, #F39C12);
}

.design-option.selected {
    border-color: var(--tp-l-green, #2ECC71);
    background: rgba(46, 204, 113, 0.1);
}

.design-preview {
    width: 100%;
    height: 70px;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: radial-gradient(ellipse at 60% 20%, rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08) 0%, #0C0D0F 70%);
}

.design-preview.gradient1 {
    background: radial-gradient(ellipse at 80% 10%, rgba(243,156,18,0.7) 0%, #0D0A07 70%);
}

.design-preview.gradient2 {
    background: radial-gradient(ellipse at 80% 10%, rgba(46,204,113,0.7) 0%, #020D06 70%);
}

.design-preview.gradient3 {
    background: radial-gradient(ellipse at 80% 10%, rgba(52,152,219,0.7) 0%, #03060F 70%);
}

.design-preview.dark {
    background: radial-gradient(ellipse at 60% 20%, rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08) 0%, #0C0D0F 70%);
}

.wrapped-metric-toggle {
    padding: 0.45rem 0.9rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 20px;
    color: var(--tp-l-text-2, #6B7280);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.wrapped-metric-toggle.active {
    background: rgba(243,156,18,0.12);
    border-color: rgba(243,156,18,0.4);
    color: var(--tp-l-gold, #F39C12);
}

.wrapped-metric-toggle:hover:not(.active) {
    border-color: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.2);
    color: var(--tp-l-text-2, #C0C7D0);
}

/* ═══════════════════════════════════════════════════════
   PROPFIRM GOLDEN — Max Allocation alcanzado (SCOPED al tab)
   ═══════════════════════════════════════════════════════ */

/* KPI cards — dorados DENTRO del tab PropFirm únicamente */
#propfirm.propfirm-golden .kpi-card {
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.08) !important;
}
#propfirm.propfirm-golden .kpi-card:hover {
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.18) !important;
    border-color: rgba(255, 215, 0, 0.45) !important;
}
#propfirm.propfirm-golden .kpi-value {
    color: var(--tp-l-gold, #FFD700) !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}
#propfirm.propfirm-golden .view-header h2 {
    color: var(--tp-l-gold, #FFD700) !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
#propfirm.propfirm-golden .table-container {
    border-color: rgba(212, 175, 55, 0.2) !important;
}
#propfirm.propfirm-golden .table-container h3 {
    color: var(--tp-l-gold, #FFD700) !important;
}
#propfirm.propfirm-golden .subtitle {
    color: rgba(255, 215, 0, 0.55) !important;
}

/* Barra de progreso de allocación */
.alloc-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.75rem 0;
}
.alloc-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #27AE60, #2ECC71);
    transition: width 0.6s ease;
}
.alloc-bar-fill.golden {
    background: linear-gradient(90deg, #B8960C, #FFD700, #FFF2A0) !important;
    box-shadow: 0 0 12px rgba(255,215,0,0.5);
}

/* ── Wrapped — Coming Soon ──────────────────────── */
.tab-coming-soon {
    opacity: 0.45;
    position: relative;
}
.tab-coming-soon::after {
    content: 'SOON';
    position: absolute;
    top: -6px;
    right: -4px;
    background: rgba(243, 156, 18, 0.85);
    color: #121417;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}
.wrapped-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    text-align: center;
    color: var(--tp-l-text-2, #9AA0A6);
}
.wrapped-coming-soon .cs-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.5;
    filter: blur(1px);
}
.wrapped-coming-soon h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tp-l-gold, #F39C12);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
    text-shadow: 0 0 16px rgba(243,156,18,0.3);
}
.wrapped-coming-soon p {
    font-size: 0.9rem;
    max-width: 360px;
    line-height: 1.7;
}

/* Prop Firm firm selector — same look as form-group select, theme-aware */
.firm-selector {
    padding: 0.75rem 1.5rem;
    background: var(--tp-l-card, #181B20);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 8px;
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.firm-selector:focus { outline: none; border-color: rgba(46,204,113,0.4); }
body.light-mode .firm-selector {
    background: var(--tp-l-input, #F8FAFC);
    color: var(--tp-l-text, #1A1D21);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
}
body.light-mode .firm-selector:focus { border-color: var(--tp-l-green, #2ECC71); }


/* ═══ css/login.css ═══ */
/* Acceso: login, registro, planes, selector de idioma y partículas de la pantalla de acceso.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* Login Screen Styles */
/* iOS: bloquear scroll mientras el login está activo */
body.login-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Scroll propio si el formulario no cabe (teclado abierto, pantallas bajas),
       sin arrastrar la página de detrás */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, #060E16 0%, #020508 80%);
    z-index: var(--z-login);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centrar verticalmente aunque el teclado redimensione el viewport */
    min-height: 100dvh;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Botón "Volver" de la pantalla de planes */
.payment-back-btn {
    position: fixed;   /* sigue a mano al bajar hasta el plan anual */
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 5;   /* por encima de .login-box al hacer scroll */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px 0 10px;
    border: 1px solid var(--tp-hairline);
    border-radius: var(--tp-radius-control);
    background: var(--tp-card);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--tp-bg) 70%, transparent);
    color: var(--tp-text);
    font: 600 0.9rem/1 var(--tp-font);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.payment-back-btn[hidden] { display: none; }
.payment-back-btn:hover { border-color: var(--tp-green); color: var(--tp-green); }
.payment-back-btn:focus-visible { outline: 2px solid var(--tp-green); outline-offset: 2px; }
/* Con el botón visible, la tarjeta de planes empieza debajo de él */
/* Arriba del todo si no cabe (centrar con justify-content cortaba la parte de arriba);
   el margin:auto de .login-box la sigue centrando cuando cabe */
#paymentOverlay { justify-content: flex-start; }
#paymentOverlay.has-back { padding-top: calc(max(16px, env(safe-area-inset-top)) + 60px); padding-bottom: 24px; }
@media (prefers-reduced-motion: reduce) { .payment-back-btn { transition: none; } }

.login-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    touch-action: none;
    /* Tras el fundido, fuera del todo: sus campos no reciben foco ni el
       autorrelleno de iOS mientras se usa el dashboard */
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}
/* Arranque: el formulario no se pinta (ni se puede enfocar) hasta confirmar
   que NO hay sesión. Si la hay, se entra directo sin que iOS saque el teclado
   ni la sugerencia de contraseña. Ver _authRevealLogin(). */
body.auth-checking #loginOverlay .login-box { visibility: hidden; }

.login-box {
    margin: auto;   /* centrado seguro: si no cabe, se hace scroll desde arriba */
    background: var(--tp-l-card, #181B20);
    border-radius: 20px;
    padding: 3rem;
    max-width: 400px;
    width: 90%;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: loginSlideIn 0.5s ease-out;
    position: relative;
    z-index: 2;
    isolation: isolate;
}

@keyframes loginSlideIn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

/* Glow pulsante detrás del logo */
.login-header::before {
    content: '';
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 220px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(46, 204, 113, 0.22) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1);    }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}

/* Logo: mix-blend-mode elimina el fondo oscuro del PNG sin editar el archivo */
.nq-logo-img {
    width: 230px;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    mix-blend-mode: lighten;
    animation: logoBreath 3s ease-in-out infinite;
}

@keyframes logoBreath {
    0%, 100% { transform: scale(1);    }
    50%       { transform: scale(1.03); }
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@keyframes betaBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-form input {
    width: 100%;
    padding: 1rem;
    background: var(--tp-l-card, #121417);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 10px;
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    font-size: 1rem;
    transition: all 0.3s;
}

.login-form input:focus {
    outline: none;
    border-color: var(--tp-l-green, #2ECC71);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

.login-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.3);
}

.login-btn:active {
    transform: translateY(0);
}

/* ── Auth divider + Google button ────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--tp-l-text-3, rgba(255,255,255, 0.35));
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
}

.google-btn {
    width: 100%;
    padding: 11px 14px;
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.85);
    border-radius: 10px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}
.google-btn:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.google-btn:active {
    transform: translateY(0);
}
.google-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.light-mode .google-btn {
    background: var(--tp-l-card, #ffffff);
    color: #1f1f1f;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
}

.dev-bypass {
    margin-top: 1rem;
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
}

.dev-bypass button {
    background: transparent;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    color: var(--tp-l-text-2, #9AA0A6);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}

.dev-bypass button:hover {
    border-color: var(--tp-l-green, #2ECC71);
    color: var(--tp-l-green, #2ECC71);
}

/* Auth tabs (Login / Register toggle) */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--tp-l-card, #121417);
    border-radius: 10px;
    padding: 0.25rem;
}
.auth-tab {
    flex: 1;
    padding: 0.55rem;
    border: none;
    background: transparent;
    color: var(--tp-l-text-2, #9AA0A6);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.auth-tab.active {
    background: rgba(46, 204, 113, 0.15);
    color: var(--tp-l-green, #2ECC71);
}

/* Success info box (e.g. register confirmation) */
.login-success-msg {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: var(--tp-l-green, #2ECC71);
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    text-align: center;
    display: none;
}
.login-success-msg.show { display: block; }

/* Remember me checkbox */
.remember-me-row { margin-bottom: 0.5rem; }
.remember-me-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: var(--text-secondary, #aaa);
    cursor: pointer; user-select: none;
}
.remember-me-label input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--tp-green); }

/* Loading spinner on auth buttons */
.login-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.login-error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: var(--tp-l-red, #E74C3C);
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    text-align: center;
    display: none;
}

.login-error.show {
    display: block;
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* ─── LANGUAGE SELECTOR ─── */
/* ─── LANGUAGE SELECTOR (ES | EN) ─── */
.lang-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    background: rgba(24, 27, 32, 0.9);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.lang-switch-opt {
    background: none;
    border: none;
    color: var(--tp-l-text-2, #9AA0A6);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
    transition: color 0.2s;
}
.lang-switch-opt:hover { color: var(--tp-l-text, #E6E8EB); }
.lang-switch-opt.active { color: var(--tp-l-green, #2ECC71); }
.lang-switch-sep {
    color: var(--tp-l-text-3, rgba(230,232,235, 0.18));
    font-size: 0.75rem;
    padding: 0 0.05rem;
    pointer-events: none;
    user-select: none;
}
@media (max-width:968px) { .lang-switch { top:10px; right:10px; } }

/* ─── LOGIN CURSOR CANVAS ─── */
#loginCursorCanvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}

/* ═══ css/responsive.css ═══ */
/* Media queries generales (≤968 px, ≤480 px) que afectan a varias secciones.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
@media (max-width: 968px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Reducir padding del view-header en tablet para que el filtro no tape el título */
    .view-header {
        padding: 1.5rem 7rem 1.5rem 1.5rem; /* deja espacio a la derecha para el filtro */
    }
    .view-header h2 {
        font-size: 1.6rem;
        text-align: left;
    }
    .view-header .subtitle {
        text-align: left;
    }
}

@media (max-width: 480px) {
    body {
        padding: 1rem 0.75rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }
    .container {
        padding: 0;
    }
    header h1 {
        font-size: 1.4rem;
    }
    header .subtitle {
        font-size: 0.75rem;
    }
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .kpi-card {
        padding: 1rem 0.85rem;
    }
    .kpi-value {
        font-size: 1.5rem;
    }
    /* Horizontal tab strip is hidden on mobile; replaced by .mobile-tab-picker */
    .tabs-wrapper { display: none; }
    .mobile-tab-picker {
        /* !important needed because the base `.mobile-tab-picker { display: none }`
           rule lives later in the file (next to the other nav styles) and
           wins on source order at equal specificity without it. */
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex: 0 0 100%;
        width: 100%;
        order: 10;
        padding: 0.7rem 0.9rem;
        margin-top: 4px;
        background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
        border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.12);
        border-radius: 10px;
        color: var(--tp-l-text, #E6E8EB);
        font-family: var(--font-ui);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-tab-picker:active {
        background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    }
    .card {
        padding: 1rem;
    }
    .grid {
        gap: 1rem;
    }
    .dashboard-header h2, .view-header h2 {
        font-size: 1.1rem;
    }
    .lang-switch {
        top: 10px;
        right: 10px;
    }
    .header-actions {
        gap: 0.5rem;
    }
    .btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.75rem;
    }
    /* Time filter: sacarlo del flow absoluto en móvil para no solapar el título */
    .view-header {
        padding: 1.25rem 1rem 1rem;
    }
    .time-filter {
        position: static;
        margin-top: 0.75rem;
        text-align: center;
    }
    /* Reducir padding de kpi-grid en view-header */
    .view-header + .kpi-grid {
        margin-top: 0;
    }
    /* Asegurar que los valores ROI grandes no rompan layout */
    .kpi-value[style*="3.5rem"], .kpi-value[style*="2.5rem"] {
        font-size: 2rem !important;
    }
    .nav-wrapper {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0.6rem 0.75rem;
    }
    .nav-logo {
        flex: 1;
    }
    .nav-logo img {
        height: 24px;
    }
    #adminNavBtn {
        font-size: 0.7rem;
        padding: 0 0.5rem;
        height: 28px;
    }
    #historyHeaderBtn, #wnHeaderBtn {
        width: 28px;
        height: 28px;
    }
}

/* ═══ css/historial.css ═══ */
/* Historial de acciones (panel lateral y botones del reloj y de Novedades).
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ─── HISTORY DRAWER ─────────────────────────────────────── */
#historyHeaderBtn, #wnHeaderBtn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(61,219,122,0.25);
  background: rgba(61,219,122,0.08);
  color: var(--tp-green);
  font-size: 1rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

#wnHeaderBtn svg { width: 17px; height: 17px; }
#wnHeaderBtn:focus-visible, #historyHeaderBtn:focus-visible { outline: 2px solid var(--c-focus, var(--tp-green)); outline-offset: 2px; }

#historyBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--c-fill);
  color: var(--c-on-fill);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.6rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}

#historyDrawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9988;
  display: none;
}

#historyPanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 92vw;
  height: 100dvh;
  background: #0d1318;
  border-left: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
  z-index: 9989;
  /* Cerrado no existe en el layout: un fixed con right negativo deja desplazar
     la página a la derecha en iOS. La entrada/salida se anima con
     transition-behavior + @starting-style donde el navegador lo soporta. */
  display: none;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease, display 0.25s allow-discrete;
}

#historyPanel.open {
  display: flex;
  transform: translateX(0);
}
@starting-style {
  #historyPanel.open { transform: translateX(100%); }
}

#historyDrawerOverlay.open {
  display: block;
}

.hp-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.hp-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tp-l-text, #E6E8EB);
  letter-spacing: 0.02em;
}

.hp-close {
  background: none;
  border: none;
  color: var(--tp-l-text-3, rgba(255,255,255, 0.3));
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.hp-close:hover { color: var(--tp-l-text, #E6E8EB); }

.hp-filters {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
  flex-shrink: 0;
}

.hp-filter {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
  background: none;
  color: var(--tp-l-text-3, rgba(255,255,255, 0.4));
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}

.hp-filter.active {
  background: rgba(61,219,122,0.12);
  border-color: rgba(61,219,122,0.3);
  color: var(--tp-green);
}

.hp-body {
  overflow-y: auto;
  flex: 1;
  padding: 0.75rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--tp-green) rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
}

.hp-body::-webkit-scrollbar { width: 4px; }
.hp-body::-webkit-scrollbar-thumb { background: var(--tp-green); border-radius: 2px; }

.hp-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-green);
  margin: 0.75rem 0 0.4rem;
}

.hp-section-title:first-child { margin-top: 0; }

.hp-empty {
  color: var(--tp-l-text-3, rgba(255,255,255, 0.25));
  font-size: 0.78rem;
  font-style: italic;
  padding: 0.25rem 0;
}

.hp-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--tp-l-text-2, rgba(255,255,255, 0.6));
  transition: background 0.15s;
}

.hp-entry:hover { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06); }

.hp-entry-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.hp-dot-green { background: var(--tp-green); }
.hp-dot-amber { background: var(--tp-gold); }
.hp-dot-blue  { background: #378ADD; }

.hp-entry-info {
  flex: 1;
  line-height: 1.5;
}

.hp-entry-info strong {
  color: var(--tp-l-text, #E6E8EB);
  font-size: 0.8rem;
  display: block;
}

.hp-entry-info span { display: block; }

.hp-del {
  background: none;
  border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
  border-radius: 6px;
  color: var(--tp-l-text-3, rgba(255,255,255, 0.4));
  font-size: 0.75rem;
  cursor: pointer;
  padding: 3px 8px;
  flex-shrink: 0;
  transition: all 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.hp-del:hover {
  border-color: rgba(61,219,122,0.3);
  color: var(--tp-green);
}

/* History drawer overlay — oculto por defecto */
#historyDrawerOverlay {
  display: none !important;
}

/* ═══ css/legacy.css ═══ */
/* Legacy: botón de subir certificado, leaderboard, Verified Trail y sub-pestañas internas.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── Certificate upload button ── */
.cert-upload-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    border: 1.5px dashed rgba(var(--tp-l-ink-rgb, 255,255,255), 0.18);
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    color: var(--tp-l-text-2, #9AA0A6);
    transition: border-color 0.2s, color 0.2s;
    user-select: none;
}
.cert-upload-label:hover {
    border-color: var(--tp-l-green, #2ECC71);
    color: var(--tp-l-green, #2ECC71);
}
.cert-upload-label.has-file {
    border: 1px solid var(--tp-green);
    color: var(--tp-green);
    background: rgba(61,219,122,0.06);
}

/* ── Hall of Fame ── */
/* ─── LEADERBOARD ─── */
.lb-header { text-align: center; margin-bottom: 2rem; }
.lb-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tp-text);
    margin-bottom: 0.35rem;
}
.lb-header p { color: var(--tp-l-text-2, #9AA0A6); font-size: 0.9rem; }

.lb-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.9rem;
}
.lb-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.08); background: rgba(22,27,34,0.6); }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lb-table thead th {
    text-align: left;
    padding: 0.85rem 1rem;
    color: var(--tp-l-text-2, #9AA0A6);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.08);
    background: rgba(7,12,15,0.35);
}
.lb-table tbody td {
    padding: 0.85rem 1rem;
    color: #D8DCE1;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
}
.lb-table tbody tr:last-child td { border-bottom: none; }
.lb-pos { font-family: var(--font-num); font-weight: 800; }
.lb-name { font-weight: 700; color: var(--tp-text); }
.lb-amount { font-family: var(--font-num); font-weight: 700; color: var(--tp-green); }
body.light-mode .lb-table-wrap { background: var(--c-surface); border-color: var(--c-border); }
body.light-mode .lb-table thead th { background: var(--c-surface-2); color: var(--c-muted); border-bottom-color: var(--c-border); }
body.light-mode .lb-table tbody td { color: var(--c-text); border-bottom-color: var(--c-border); }
body.light-mode .lb-name { color: var(--c-text); }
body.light-mode .lb-amount { color: var(--c-green); }
.lb-badge-verified {
    display: inline-block;
    background: rgba(61,219,122,0.12);
    border: 1px solid rgba(61,219,122,0.3);
    color: var(--tp-green);
    font-family: var(--font-num);
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}
.lb-me-pill {
    background: rgba(61,219,122,0.15);
    color: var(--tp-green);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}
.lb-apply-btn {
    background: var(--c-fill);
    color: var(--c-on-fill);
    font-weight: 800;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.lb-apply-btn:hover { background: var(--tp-green-deep); }
.lb-pending-pill {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    color: var(--tp-gold);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 6px;
}
.lb-verified-pill {
    background: rgba(61,219,122,0.12);
    border: 1px solid rgba(61,219,122,0.3);
    color: var(--tp-green);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 6px;
}
.lb-locked-wrap {
    position: relative;
    margin-top: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
}
.lb-locked-content {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}
.lb-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(7,12,15,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.lb-upgrade-banner {
    margin-top: 1rem;
    text-align: center;
    padding: 0.9rem 1rem;
    background: rgba(61,219,122,0.08);
    border: 1px solid rgba(61,219,122,0.25);
    border-radius: 10px;
    color: var(--tp-green);
    font-size: 0.88rem;
    font-weight: 700;
}

/* ── Verified Trail Modal ───────────────────────────────── */
.vt-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}
.vt-step {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.vt-step.active { opacity: 1; }
.vt-step.done { opacity: 1; }
.vt-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(61,219,122,0.12);
    border: 1px solid rgba(61,219,122,0.35);
    color: var(--tp-green);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vt-step.active .vt-step-num {
    background: var(--c-fill);
    color: var(--c-on-fill);
    border-color: var(--tp-green);
}
.vt-step-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}
.vt-step.active .vt-step-label { color: var(--tp-l-text, #E6EDF3); }
.vt-step-line {
    width: 50px;
    height: 1px;
    background: rgba(61,219,122,0.25);
}
.vt-step-content {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}
.vt-upload-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 10px;
    margin-bottom: 10px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
}
.vt-upload-row.vt-upload-required {
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.05);
}
.vt-upload-label { min-width: 0; }
.vt-upload-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-l-text, #E6EDF3);
    margin-bottom: 2px;
}
.vt-upload-hint {
    font-size: 11px;
    color: var(--tp-l-text-2, #9AA0A6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vt-upload-btn {
    cursor: pointer;
    padding: 8px 14px;
    background: rgba(61,219,122,0.1);
    border: 1px solid rgba(61,219,122,0.3);
    border-radius: 8px;
    color: var(--tp-green);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.vt-upload-btn:hover { background: rgba(61,219,122,0.18); }
.vt-file-name {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--tp-green);
    word-break: break-all;
}
.vt-file-name:empty { display: none; }

/* ── Sub-tabs genéricas (Hall of Fame, Control Center) ── */
.nq-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.nq-subtab {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    color: var(--tp-l-text-2, rgba(232,236,240, 0.6));
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
}
.nq-subtab:hover {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    color: var(--tp-text);
}
.nq-subtab.active {
    background: var(--c-fill);
    color: var(--c-on-fill);
    border-color: var(--tp-green);
    font-weight: 700;
}
.nq-subtab.active:hover {
    background: #5DEBA0;
    color: var(--c-on-fill);
}
body.light-mode .nq-subtab { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.04); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); color: var(--tp-l-text-2, #4B5563); }
body.light-mode .nq-subtab:hover { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); color: var(--tp-l-text, #111827); }
body.light-mode .nq-subtab.active { background: var(--tp-green-deep); border-color: var(--tp-green-deep); color: #FFFFFF; }

/* ═══ css/registro.css ═══ */
/* Cuentas → Registro.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── Registro (Control Center → Registro) ──────────────────────────
   Solo tokens del sistema de diseño: el modo claro sale de las variables. */
.reg-wrap { display: flex; flex-direction: column; gap: var(--s-3); }
.reg-controls { display: flex; flex-direction: column; gap: var(--s-2); }
.reg-chips { display: flex; gap: 6px; flex-wrap: nowrap; }
.reg-chip {
    flex: 0 0 auto; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill);
    border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-muted);
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.reg-chip:hover { color: var(--c-text); }
.reg-chip.active {
    color: var(--c-green);
    background: color-mix(in srgb, var(--c-green) 10%, transparent);
    border-color: color-mix(in srgb, var(--c-green) 40%, transparent);
}
body.light-mode .reg-chip.active { color: color-mix(in srgb, var(--c-green) 80%, var(--c-text)); }
.reg-chip-toggle { margin-left: auto; }
.reg-sort-select { display: none; }
.reg-count { font-size: 12px; color: var(--c-muted); }
.reg-table-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow-x: auto; }
.reg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--c-text); }
.reg-table th {
    padding: var(--s-3) 10px; border-bottom: 1px solid var(--c-border);
    cursor: pointer; user-select: none; white-space: nowrap; text-align: left;
}
.reg-table th .tp-icon { vertical-align: -3px; margin-left: 2px; }
.reg-table th.reg-num { text-align: right; }
.reg-table th.active { color: var(--c-text); }
.reg-table td { padding: 10px; border-bottom: 1px solid var(--c-border); white-space: nowrap; vertical-align: middle; }
.reg-row { cursor: pointer; }
.reg-row:hover td { background: var(--c-surface-2); }
.reg-row.open td { background: color-mix(in srgb, var(--c-green) 6%, transparent); }
.reg-detail-cell { padding: 0 !important; white-space: normal !important; }
.reg-num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.reg-acc-firm { font-weight: 700; color: var(--c-text); }
.reg-acc-num { font-size: 12px; color: var(--c-muted); font-family: var(--font-num); }
.reg-pos { color: var(--c-green); }
.reg-neg { color: var(--c-red); }
.reg-roi-sub { display: block; font-size: 12px; }
.reg-muted { color: var(--c-muted); }
.reg-cards { display: none; flex-direction: column; gap: var(--s-2); }
.reg-card { overflow: hidden; }
.reg-card.open { border-color: color-mix(in srgb, var(--c-green) 40%, transparent); }
.reg-card-head { padding: var(--s-3); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.reg-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.reg-card-top > * { min-width: 0; }
.reg-card-roi { text-align: right; font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.reg-card-meta { display: flex; align-items: center; gap: var(--s-2); font-size: 12px; color: var(--c-muted); flex-wrap: wrap; }
.reg-card-meta .reg-fig { font-family: var(--font-num); }

/* Detalle en modo lectura: líneas etiqueta · valor · acciones */
.reg-detail {
    padding: var(--s-4); display: grid; gap: var(--s-6); white-space: normal;
    border-top: 1px solid var(--c-border); background: var(--c-surface);
}
@media (min-width: 1000px) { .reg-detail { grid-template-columns: 1.1fr 0.9fr 1.2fr; } }
.reg-block { min-width: 0; }
.reg-block > .tp-section-title { margin-bottom: var(--s-2); }
.reg-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "label value actions";
    align-items: center; column-gap: var(--s-2); min-height: 44px; border-bottom: 1px solid var(--c-border);
}
.reg-line-label { grid-area: label; color: var(--c-muted); font-size: var(--fs-sm); min-width: 0; display: flex; align-items: center; gap: 6px; }
.reg-line-value { grid-area: value; text-align: right; color: var(--c-text); font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; }
.reg-line-value.reg-fig, .reg-fig { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.reg-line-actions { grid-area: actions; display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.reg-line--payout { grid-template-columns: minmax(0, 1fr) auto 82px; }
.reg-line.editing { grid-template-areas: "label actions" "editor editor" "error error" "save save"; grid-template-columns: minmax(0, 1fr) auto; padding-bottom: var(--s-3); }
/* Guardar / Cancelar de cada línea en edición (en iPhone el teclado numérico no tiene Intro) */
.reg-line-save { grid-area: save; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-2); }
.reg-line-save .tp-btn { min-height: 40px; }
.reg-line.editing { scroll-margin-top: 72px; scroll-margin-bottom: calc(var(--tpn-offset, 0px) + 16px); }
.reg-line-save .tp-btn[disabled] { opacity: .65; cursor: progress; }
.reg-line-editor { grid-area: editor; display: flex; gap: var(--s-2); min-width: 0; }
.reg-line-editor > * { flex: 1 1 0; min-width: 0; }
.reg-line-error { grid-area: error; color: var(--c-red); font-size: 12px; padding-top: 6px; }
.reg-line:not(.editing) .reg-line-error { grid-column: 1 / -1; grid-area: auto; padding: 0 0 var(--s-2); }
.tp-input.is-invalid { border-color: var(--c-red); }
/* Fila del certificado bajo cada payout (y en "Añadir payout") */
.reg-cert-row { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s-2); padding: 0 0 var(--s-2); min-width: 0; }
.reg-add > .reg-cert-row { padding: 0; }
.reg-cert-row .tp-btn--sm { padding: 0 10px; gap: 6px; }
.reg-cert-thumb { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--c-surface-2); cursor: zoom-in; }
.reg-cert-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reg-cert-thumb:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.reg-cert-del { color: var(--c-red); }
.reg-cert-hint { font-size: 12px; color: var(--c-muted); }
.reg-cert-name { flex: 1 1 120px; min-width: 0; font-size: 13px; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-cert-pro { margin-left: 2px; padding: 1px 6px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 14%, transparent); }
body.light-mode .tp-btn.reg-cert-del { color: var(--c-red); }
body.light-mode .reg-cert-pro { color: color-mix(in srgb, var(--c-amber) 75%, var(--c-text)); }
.reg-note { font-size: 13px; color: var(--c-muted); padding: 6px 0 var(--s-2); border-bottom: 1px solid var(--c-border); }
.reg-hint { font-size: 13px; color: var(--c-muted); padding: var(--s-2) 0; }
.reg-status-actions { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }
.reg-add { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.reg-add-row { display: flex; gap: var(--s-2); }
.reg-add-row > * { flex: 1 1 0; min-width: 0; }
.reg-add-actions { display: flex; gap: var(--s-2); justify-content: flex-end; }
.reg-danger-zone { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.reg-empty { padding: var(--s-8); text-align: center; color: var(--c-muted); }

/* Botón-icono (área táctil ≥ 40px) y botón pequeño */
.tp-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.tp-icon-btn {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-muted); cursor: pointer;
}
.tp-icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.tp-icon-btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.tp-icon-btn--danger { color: var(--c-red); }
.tp-icon-btn--danger:hover { color: var(--c-red); background: color-mix(in srgb, var(--c-red) 10%, transparent); }
.tp-btn--sm { height: 32px; padding: 0 var(--s-3); font-size: 12px; }

/* Barra de cambios pendientes: fija abajo, dentro de la zona segura */
.reg-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fab);
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) max(var(--s-4), env(safe-area-inset-right)) calc(var(--s-3) + env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
    background: var(--c-surface); border-top: 1px solid var(--c-border-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}
.reg-bar[hidden] { display: none; }
.reg-bar-count { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--c-text); }
body.reg-bar-open { padding-bottom: calc(2rem + 76px); }

/* Modal de borrar cuenta */
.reg-modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center; padding: var(--s-4);
}
.reg-modal {
    width: 100%; max-width: 440px; background: var(--c-surface); color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c-red) 40%, transparent); border-radius: var(--r-lg); padding: 20px;
    display: flex; flex-direction: column; gap: var(--s-3);
}
.reg-modal h3 { margin: 0; font-size: 1.05rem; color: var(--c-red); }
.reg-modal p { margin: 0; font-size: 14px; color: var(--c-text); line-height: 1.5; }
.reg-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-muted); }
.reg-modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
@media (max-width: 639px) {
    .reg-table-wrap { display: none; }
    .reg-cards { display: flex; }
    .reg-sort-select { display: block; }
    .reg-chips { gap: 4px; }
    .reg-chip { padding: 0 10px; }
    .reg-detail { padding: var(--s-3) var(--s-3) var(--s-4); }
}
@media (max-width: 768px) {
    .tp-btn--sm { height: 40px; }
    .reg-line { min-height: 48px; }
}

/* ═══ css/legacy-certificados.css ═══ */
/* Legacy: Payout Counter, tarjetas de certificados (Hall of Fame) y visor.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── Payout Counter ── */
/* Card sólida: tapa las partículas del dashboard (#dashParticles) detrás de los controles */
.pc-card {
    background: #0C1318;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 16px;
    padding: 12px;
}
.pc-row { display: flex; gap: 8px; margin-bottom: 8px; }
.pc-seg {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--tp-bg);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 10px;
}
.pc-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tp-l-text-2, rgba(232,236,240, 0.45));
    font-family: var(--font-num);
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.pc-btn:hover { color: var(--tp-text); }
.pc-btn.active {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.09);
    color: var(--tp-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.pc-refresh {
    flex: 0 0 auto;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--tp-bg);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 10px;
    color: var(--tp-l-text-2, rgba(232,236,240, 0.6));
    cursor: pointer;
}
.pc-refresh:hover { color: var(--tp-text); }
.pc-refresh .pc-refresh-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform-origin: 50% 50%;
}
.pc-refresh.spinning .pc-refresh-icon {
    animation: pc-spin 1s linear infinite;
}
#payoutCounterFrame {
    display: block;
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 12px;
    background: var(--tp-bg);
}
@keyframes pc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.hof-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.hof-header h2 {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #2ECC71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.hof-header p { color: var(--tp-l-text-2, #9AA0A6); font-size: 0.9rem; }

.hof-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.hof-stat {
    text-align: center;
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 14px;
    padding: 1rem 1.8rem;
}
.hof-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--tp-l-gold, #FFD700);
}
body.light-mode .hof-stat-value { color: var(--c-amber); }
.hof-stat-label { font-size: 0.78rem; color: var(--tp-l-text-2, #9AA0A6); margin-top: 0.2rem; letter-spacing: 0.05em; text-transform: uppercase; }

.hof-grid {
    columns: 3 240px;
    column-gap: 1rem;
    row-gap: 1rem;
}
@media (max-width: 640px) { .hof-grid { columns: 1; } }

.hof-card {
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,215,0,0.18);
    background: var(--tp-l-card, #181B20);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.hof-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255,215,0,0.15);
}
.hof-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    cursor: zoom-in;
}
/* Certificado aún sin descargar (se pide al entrar en pantalla) */
img[data-cert-id]:not([src]) { background: var(--c-surface-2); }
.hof-card img[data-cert-id]:not([src]) { aspect-ratio: 4 / 3; }
img[data-cert-id][data-cert-state="loading"]:not([src]) { animation: certPulse 1.2s ease-in-out infinite; }
@keyframes certPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { img[data-cert-id][data-cert-state="loading"]:not([src]) { animation: none; } }
.hof-card-body {
    padding: 0.75rem 1rem;
}
.hof-card-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tp-l-green, #2ECC71);
}
.hof-card-meta {
    font-size: 0.78rem;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-top: 0.25rem;
}
.hof-no-cert {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
    border: 1px dashed rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 14px;
    break-inside: avoid;
    margin-bottom: 1rem;
    padding: 1.2rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.hof-no-cert-icon { font-size: 1.6rem; }
.hof-no-cert-amount { font-size: 1.1rem; font-weight: 700; color: var(--c-green); }
.hof-no-cert-meta { font-size: 0.75rem; color: var(--c-muted); margin-top: 0.15rem; }

/* Lightbox */
#hofLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 20000;
    align-items: center;
    justify-content: center;
}
#hofLightbox.active { display: flex; }
#hofLightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
#hofLightboxClose {
    position: absolute;
    top: 1rem; right: 1.2rem;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
}

/* ═══ css/navegacion.css ═══ */
/* Navegación: barra de pestañas antigua, selector móvil, menú de usuario y candado Pro.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ─── NAV WRAPPER (hamburger + tabs in one row) ─── */
.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    padding-bottom: 0.5rem;
}


/* Campos a 16px en pantallas táctiles: iOS hace zoom solo al escribir si son más pequeños */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Movimiento reducido: la navegación cambia sin animaciones */
@media (prefers-reduced-motion: reduce) {
    .tab, .tabs, .mobile-tab-picker, .mobile-tab-picker-chevron,
    .mobile-tab-sheet-overlay, .mobile-tab-sheet, .mobile-tab-sheet-item, .mobile-tab-sheet-item-dot,
    .nq-subtab {
        transition: none !important;
        animation: none !important;
    }
    .tabs { scroll-behavior: auto; }
}

/* ─── MOBILE TAB PICKER + SHEET ───
   The picker button replaces the horizontal .tabs-wrapper on narrow
   screens (≤480px). The sheet is a bottom-anchored overlay that lists
   every view; tapping an item delegates to the existing .tab click
   handler so all tab-switching logic (render, analytics, Pro lock,
   admin button state) keeps working unchanged. */
.mobile-tab-picker { display: none; }
.mobile-tab-picker-label {
    color: var(--tp-green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: left;
}
.mobile-tab-picker-chevron {
    color: var(--tp-l-text-2, #9AA0A6);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.mobile-tab-picker[aria-expanded="true"] .mobile-tab-picker-chevron {
    transform: rotate(180deg);
}
.mobile-tab-sheet-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    transition: opacity 0.2s ease, visibility 0s linear 0.25s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-tab-sheet-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s;
}
.mobile-tab-sheet {
    background: var(--tp-l-card, #181B20);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    width: 100%;
    max-width: 520px;
    padding: 8px 8px max(16px, env(safe-area-inset-bottom, 16px));
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-tab-sheet-overlay.open .mobile-tab-sheet {
    transform: translateY(0);
}
.mobile-tab-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.25);
    border-radius: 2px;
    margin: 6px auto 10px;
}
.mobile-tab-sheet-list {
    display: flex;
    flex-direction: column;
    padding: 4px 4px 8px;
}
.mobile-tab-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: transparent;
    border: none;
    color: var(--tp-l-text-2, #C0C7D0);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}
.mobile-tab-sheet-item:active {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
}
.mobile-tab-sheet-item.active {
    background: color-mix(in srgb, var(--tp-green) 10%, transparent);
    color: var(--tp-green);
}
.mobile-tab-sheet-item:focus-visible { outline: 2px solid var(--tp-green); outline-offset: -2px; }
.mobile-tab-sheet-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s;
}
.mobile-tab-sheet-item.active .mobile-tab-sheet-item-dot {
    background: var(--tp-green);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tp-green) 60%, transparent);
}
body.light-mode .mobile-tab-picker {
    background: var(--tp-l-card, #FFFFFF);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
    color: var(--tp-l-text, #1A1D21);
}
body.light-mode .mobile-tab-picker .mobile-tab-picker-chevron {
    color: var(--tp-l-text-2, #6B7280);
}
body.light-mode .mobile-tab-sheet {
    background: var(--tp-l-card, #FFFFFF);
    border-top-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
body.light-mode .mobile-tab-sheet-handle {
    background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.2);
}
body.light-mode .mobile-tab-sheet-item {
    color: var(--tp-l-text-2, #374151);
}
body.light-mode .mobile-tab-sheet-item:active {
    background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.05);
}
body.light-mode .mobile-tab-sheet-item.active {
    background: rgba(46,204,113,0.1);
    color: var(--tp-l-green, #2ECC71);
}

/* ─── USER MENU ─── */
.user-menu-container {
    position: relative;
    flex-shrink: 0;
    z-index: 201;
}

.user-menu-btn {
    width: 38px;
    height: 34px;
    border-radius: 8px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.12);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    transition: background 0.2s, border-color 0.2s;
}
.user-menu-btn:hover {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.25);
}
.user-menu-btn .hb-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #9AA0A6;
    border-radius: 2px;
    transition: background 0.2s;
}
.user-menu-btn:hover .hb-line { background: var(--tp-l-text, #E6E8EB); }

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 260px;
    background: var(--tp-l-raised, #181B20);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.user-menu-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.user-menu-header {
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.07);
}
.user-menu-email {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tp-l-text, #E6E8EB);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.3rem;
}
.user-menu-plan {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: rgba(46,204,113,0.12);
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 20px;
    color: var(--tp-l-green, #2ECC71);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.user-menu-pro-badge {
    display: inline-block;
    background: rgba(61,219,122,0.12);
    border: 1px solid rgba(61,219,122,0.3);
    color: var(--tp-green);
    font-family: var(--font-num);
    font-size: 9px;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: 6px;
}
.user-menu-upgrade-btn {
    background: var(--c-fill);
    color: var(--c-on-fill);
    font-weight: 800;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
}
.user-menu-upgrade-btn:hover { background: var(--tp-green-deep); }

/* ─── Pro lock overlay (tabs bloqueados para Free) ─── */
.pro-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(7,12,15,0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: inherit;
}
.pro-lock-overlay svg { color: var(--tp-green); }

.user-menu-section {
    padding: 0.4rem 0;
}
.user-menu-divider {
    height: 1px;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.07);
    margin: 0;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    font-size: 0.83rem;
    font-weight: 500;
    font-family: var(--font-ui);
    color: var(--tp-l-text, #C8CDD3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
}
.user-menu-item:hover {
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    color: var(--tp-l-text, #E6E8EB);
}
.user-menu-item.disabled {
    color: var(--tp-l-text-3, rgba(154,160,166,0.45));
    cursor: default;
    pointer-events: none;
}
.user-menu-item.disabled:hover { background: none; }

.user-menu-icon {
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.user-menu-label { flex: 1; }

.user-menu-soon {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tp-l-text-3, rgba(154,160,166,0.5));
    background: rgba(154,160,166,0.08);
    border: 1px solid rgba(154,160,166,0.15);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    margin-left: auto;
}

/* Language buttons inside menu */
.user-menu-lang-btns {
    display: flex;
    gap: 0.3rem;
    margin-left: auto;
}
.lang-opt {
    padding: 0.2rem 0.5rem;
    background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.05);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.12);
    border-radius: 5px;
    color: var(--tp-l-text-2, #9AA0A6);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.lang-opt:hover { color: var(--tp-l-text, #E6E8EB); border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.3); }
.lang-opt.active {
    background: rgba(46,204,113,0.12);
    border-color: rgba(46,204,113,0.4);
    color: var(--tp-l-green, #2ECC71);
}

/* Danger item */
.user-menu-item.user-menu-danger { color: var(--tp-l-red, #E74C3C); }
.user-menu-item.user-menu-danger:hover { background: rgba(231,76,60,0.08); color: var(--tp-danger); }

/* Logout item */
.user-menu-item.user-menu-logout { color: var(--tp-l-text-2, #9AA0A6); }
.user-menu-item.user-menu-logout:hover { background: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.04); color: var(--tp-l-text, #E6E8EB); }

@media (max-width: 480px) {
    .user-menu-dropdown { width: 230px; }
}

/* ═══ css/tema-claro.css ═══ */
/* Ajustes sueltos de body.light-mode (la paleta clara está en base.css).
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ─── LIGHT MODE ─── */
body.light-mode { background: var(--tp-l-bg, #F0F2F5); color: var(--tp-l-text, #1A1D21); }
body.light-mode .header { border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .kpi-card,
body.light-mode .table-container { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); }
body.light-mode .kpi-label,
body.light-mode .kpi-subtitle,
body.light-mode .header p,
body.light-mode .view-header .subtitle { color: var(--c-muted); }
body.light-mode .kpi-value { color: var(--tp-l-text, #1A1D21); }
body.light-mode th { color: var(--tp-l-text-2, #6B7280); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); }
body.light-mode td { color: var(--tp-l-text, #1A1D21); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.05); }
body.light-mode tr:hover { background: rgba(46,204,113,0.05); }
body.light-mode .tabs-wrapper { background: var(--tp-l-card, #FFFFFF); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .tabs-wrapper::after { background: linear-gradient(to right, transparent, var(--tp-l-card, #FFFFFF)); }
body.light-mode .tab { color: var(--tp-l-text-2, #6B7280); }
body.light-mode .tab:hover { color: var(--tp-l-text, #1A1D21); background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.03); }
body.light-mode .tab.active { color: var(--tp-green); border-bottom-color: var(--tp-green); }
body.light-mode .time-filter select { background: var(--tp-l-card, #FFFFFF); color: var(--tp-l-text, #1A1D21); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); }
body.light-mode .view-header { border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .view-header h2 { color: var(--tp-l-text, #1A1D21); }
body.light-mode .user-menu-btn { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.04); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); }
body.light-mode .user-menu-btn .hb-line { background: var(--tp-l-text-2, #6B7280); }
body.light-mode .user-menu-dropdown { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
body.light-mode .user-menu-item { color: var(--tp-l-text-2, #374151); }
body.light-mode .user-menu-item:hover { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.04); color: var(--tp-l-text, #1A1D21); }
body.light-mode .user-menu-email { color: var(--tp-l-text, #1A1D21); }
body.light-mode .user-menu-divider { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); height: 1px; }
body.light-mode .user-menu-header { border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); }
body.light-mode .bar-track { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode #historyPanel { background: var(--tp-l-raised, #f5f5f5); border-left-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .hp-entry { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.03); color: var(--tp-l-text-2, #374151); }
body.light-mode .hp-entry-info strong { color: var(--tp-l-text, #1A1D21); }
body.light-mode .modal-content { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); }
body.light-mode .modal-header { color: var(--tp-l-text, #1A1D21); }
body.light-mode .modal-body { color: var(--tp-l-text-2, #6B7280); }
body.light-mode .lang-opt { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.04); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); color: var(--tp-l-text-2, #6B7280); }
body.light-mode .lang-opt:hover { color: var(--tp-l-text, #1A1D21); }
body.light-mode .lang-opt.active { background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.4); color: var(--tp-l-green, #2ECC71); }

/* ── Modo claro: foco, botón secundario y sombras (comunes a A y B) ── */
body.light-mode :focus-visible { outline-color: var(--tp-l-focus) !important; }
body.light-mode :is(input, select, textarea):focus-visible { outline: 2px solid var(--tp-l-focus); outline-offset: 1px; }
body.light-mode :is(.tp-btn--ghost, .btn-secondary, .susp-toggle) {
    background: var(--tp-l-btn2-bg); color: var(--tp-l-btn2-text); border: 1px solid var(--tp-l-btn2-border);
}
body.light-mode :is(.card, .kpi-card, .table-container, .acct-mini-card) { box-shadow: var(--tp-l-shadow); }
body.light-mode #tpnSheetBackdrop { background: rgba(var(--tp-l-ink-rgb), .32); }
body.light-mode :is(.modal-content, .user-menu-dropdown, #historyPanel, .feedback-modal-box) { background: var(--tp-l-raised); }

/* ── Light mode: Control Center cards ───────────────────────────────── */
body.light-mode .card {
    background: var(--tp-l-card, #FFFFFF);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.light-mode .card-title { color: var(--tp-l-text-2, #9AA0A6); }
body.light-mode .form-group label { color: var(--tp-l-text-2, #6B7280); }
body.light-mode .form-group input,
body.light-mode .form-group select {
    background: var(--tp-l-input, #F8FAFC);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
    color: var(--tp-l-text, #1A1D21);
}
body.light-mode .form-group input:focus,
body.light-mode .form-group select:focus {
    background: var(--tp-l-card, #FFFFFF);
    border-color: var(--tp-l-green, #2ECC71);
}
body.light-mode .cert-upload-label {
    background: var(--tp-l-input, #F8FAFC);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
    color: var(--tp-l-text-2, #6B7280);
}
body.light-mode .cert-upload-label:hover {
    background: var(--tp-l-input, #F1F5F9);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.2);
    color: var(--tp-l-text, #1A1D21);
}
body.light-mode #statusTransitionHint { color: var(--tp-l-text-2, #374151); }

/* ── Light mode: Account Mini-Cards ─────────────────────────────────── */
body.light-mode .acct-mini-card {
    background: var(--tp-l-card, #FFFFFF);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light-mode .acct-mini-card:hover {
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.16);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
body.light-mode .acct-mini-size { color: var(--tp-l-text, #1A1D21); }
body.light-mode .acct-mini-number { color: var(--tp-l-text-3, rgba(107,114,128,0.75)); }

/* ── Light mode: Dashboard headers (hardcoded color: #E6E8EB overrides) ─ */
body.light-mode .dashboard-header h2 { color: var(--tp-l-text, #1A1D21); }
body.light-mode .dashboard-header .subtitle { color: var(--tp-l-text-2, #6B7280); }

/* ── Light mode: Bar chart labels and values ─────────────────────────── */
body.light-mode .bar-label { color: var(--tp-l-text-2, #374151); }
body.light-mode .bar-count { color: var(--tp-l-text-2, #374151); }

/* ── Light mode: Achievement cards ──────────────────────────────────── */
body.light-mode .achievement-card {
    background: linear-gradient(135deg, rgba(46,204,113,0.04), rgba(52,152,219,0.04));
    border-color: rgba(46,204,113,0.15);
}
body.light-mode .achievement-content h4 { color: var(--tp-l-text, #1A1D21); }
body.light-mode .achievement-content p  { color: var(--tp-l-text-2, #6B7280); }

/* ── Light mode: Feedback modal ─────────────────────────────────────── */
body.light-mode .feedback-modal-title   { color: var(--tp-l-text, #1A1D21); }
body.light-mode .feedback-modal-sub     { color: var(--tp-l-text-2, #6B7280); }
body.light-mode .feedback-modal-context { color: var(--tp-l-text-2, #9AA0A6); }
body.light-mode .feedback-char-count    { color: var(--tp-l-text-2, #9AA0A6); }
body.light-mode .feedback-modal-close   { color: var(--tp-l-text-2, #9AA0A6); }
body.light-mode .feedback-modal-close:hover { color: var(--tp-l-text, #1A1D21); }
body.light-mode .feedback-modal-box { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }

/* ── Light mode: Info tooltip ────────────────────────────────────────── */
body.light-mode .info-tooltip {
    background: var(--tp-l-card, #FFFFFF);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
    color: var(--tp-l-text-2, #374151);
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
body.light-mode .info-tooltip::after { border-top-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); }

/* ── Light mode: Wrapped section ─────────────────────────────────────── */
body.light-mode .wrapped-header {
    background: linear-gradient(135deg, rgba(243,156,18,0.06), rgba(46,204,113,0.06));
    border-color: rgba(243,156,18,0.15);
}
body.light-mode .wrapped-subtitle { color: var(--tp-l-text-2, #6B7280); }
body.light-mode .config-section   { background: var(--tp-l-input, #F8FAFC); border: 1px solid rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); }
body.light-mode .metric-checkbox  { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.02); }
body.light-mode .metric-checkbox:hover { background: rgba(46,204,113,0.07); }
body.light-mode .metric-checkbox label { color: var(--tp-l-text-2, #374151); }

/* ── Light mode: Suspended section toggle ────────────────────────────── */
body.light-mode .susp-toggle { color: var(--tp-l-text-2, #6B7280); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); }
body.light-mode .susp-toggle:hover { border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.2); color: var(--tp-l-text-2, #374151); }
body.light-mode .acct-strip-label { color: var(--tp-l-text-2, #6B7280); }

/* ── Light mode: Split payment notice (in update form hint) ─────────── */
body.light-mode .split-payment-notice {
    background: rgba(52,152,219,0.06);
    border-color: rgba(52,152,219,0.2);
}

/* ── Light mode: What's New modal — keep dark glass look, adjust overlay */
body.light-mode .wn-overlay.wn-entering { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.45); }

/* ── Light mode: Loading screen (shows briefly after login) ──────────── */
body.light-mode #loadingScreen { background: var(--tp-l-bg, #F0F2F5); }
body.light-mode #loadingPhrase { color: var(--tp-l-text, #1A1D21); }

/* ── Light mode: Empty state text ────────────────────────────────────── */
body.light-mode .empty-state { color: var(--tp-l-text-2, #6B7280); }

/* ── Light mode: Gauge labels ────────────────────────────────────────── */
body.light-mode .gauge-label { color: var(--tp-l-text-2, #6B7280); }

/* ── Light mode: Form focus ring ─────────────────────────────────────── */
body.light-mode .form-group input:focus,
body.light-mode .form-group select:focus {
    box-shadow: 0 0 0 3px rgba(46,204,113,0.15);
}

/* ═══ css/inicio.css ═══ */
/* Inicio (Control Center): mini-cards de cuentas, pantalla de carga, footer, modal de feedback y aviso de pago dividido.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── Account Mini-Cards Strip ────────────────────────────────────────── */
.acct-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.acct-mini-card {
    background: var(--tp-l-card, #181B20);
    border-radius: 10px;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.07);
    width: 130px;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
    cursor: default;
}
.acct-mini-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), 0.18);
}
.acct-mini-accent {
    height: 3px;
    border-radius: 10px 10px 0 0;
}
.acct-mini-body { padding: 0.75rem 0.75rem 0.8rem; }
.acct-mini-size {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.25rem;
}
.acct-mini-firm {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.3rem;
    color: var(--firm, var(--c-muted));
}
/* Tema claro: el color de la firma se mezcla con el texto para que se lea sobre blanco (FTMO es casi blanco) */
body.light-mode .acct-mini-firm { color: color-mix(in srgb, var(--firm, var(--c-muted)) 45%, var(--c-text)); }
.acct-mini-number {
    font-size: 0.63rem;
    font-weight: 500;
    color: var(--tp-l-text-3, rgba(154,160,166,0.55));
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
}
/* Section divider label above strip */
.acct-strip-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.75rem;
}
/* Suspended collapsible section */
.susp-section { margin-top: 0.75rem; }
.susp-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid rgba(154,160,166,0.15);
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.susp-toggle:hover { border-color: rgba(154,160,166,0.35); color: #C0C5CC; }
.susp-toggle-arrow {
    display: inline-block;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}
.susp-section.open .susp-toggle-arrow { transform: rotate(90deg); }
.susp-cards-wrap {
    display: none;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
}
.susp-section.open .susp-cards-wrap { display: flex; }

/* ── Motivational Loading Screen ─────────────────────────────────────── */
#loadingScreen {
    display: none;
    position: fixed;
    inset: 0;
    background: #0D0F12;
    z-index: 19999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    opacity: 1;
    transition: opacity 0.65s ease;
}
#loadingScreen.ls-visible { display: flex; }
#loadingScreen.ls-fade    { opacity: 0; pointer-events: none; }

#loadingPhrase {
    font-size: clamp(1.15rem, 4vw, 1.75rem);
    font-weight: 800;
    text-align: center;
    max-width: 560px;
    line-height: 1.45;
    color: var(--tp-l-text, #E6E8EB);
    padding: 0 2rem;
    letter-spacing: -0.02em;
    animation: lsFadeUp 0.6s ease both;
}
#loadingPhrase em {
    color: var(--tp-l-green, #2ECC71);
    font-style: normal;
}
@keyframes lsFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.loading-progress-track {
    width: 160px;
    height: 2px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.loading-progress-fill {
    height: 100%;
    width: 0%;
    background: #2ECC71;
    border-radius: 2px;
    transition: width 3.3s cubic-bezier(0.05, 0, 0.3, 1);
}
/* Footer legal del dashboard */
.app-footer {
    margin: 48px 0 8px;
    padding: 20px 0 8px;
    border-top: 1px solid var(--c-border);
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--c-muted);
}
.app-footer p { margin: 6px auto 0; max-width: 720px; }
.app-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.app-footer a { color: var(--c-muted); text-decoration: none; }
.app-footer a:hover { color: var(--c-green); }
.app-footer-risk { font-size: 11px; opacity: .85; }

.loading-screen-brand {
    display: flex;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN TAB BUTTON
═══════════════════════════════════════════════════════════════ */
.split-payment-notice {
    display: none;
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    color: #3498DB;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
}
.split-payment-notice.visible {
    display: block;
}

/* ═══ css/admin.css ═══ */
/* Panel de administración (incluidos .nq-*, botón Admin y panel de partners).
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
.tab.tab-admin {
    color: var(--tp-gold);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.tab.tab-admin:hover { color: #FCD34D; background: rgba(245,158,11,0.08); }
.tab.tab-admin.active {
    color: var(--tp-gold);
    border-bottom-color: var(--tp-gold);
}
body.light-mode .tab.tab-admin { color: #B45309; }
body.light-mode .tab.tab-admin.active { color: #B45309; border-bottom-color: #B45309; }

/* ─── ADMIN NAV BUTTON (Opción B: fuera de la tab bar) ─── */
#adminNavBtn {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    height: 34px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    color: var(--tp-gold);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
#adminNavBtn:hover {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.5);
    color: #FCD34D;
}
#adminNavBtn.active {
    background: rgba(245,158,11,0.18);
    border-color: var(--tp-gold);
    color: #FCD34D;
}
body.light-mode #adminNavBtn { color: #B45309; border-color: rgba(180,83,9,0.3); background: rgba(180,83,9,0.06); }
body.light-mode #adminNavBtn:hover { background: rgba(180,83,9,0.12); border-color: rgba(180,83,9,0.5); }
body.light-mode #adminNavBtn.active { background: rgba(180,83,9,0.15); border-color: #B45309; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL LAYOUT
═══════════════════════════════════════════════════════════════ */
.admin-wrapper {
    padding: 28px 32px 48px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(245,158,11,0.2);
}
.admin-header-left { display: flex; align-items: center; gap: 14px; }
.admin-header-icon { font-size: 2.2rem; line-height: 1; }
.admin-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tp-gold);
    margin: 0;
    letter-spacing: -0.02em;
}
.admin-subtitle { font-size: 0.75rem; color: var(--tp-l-text-2, #9AA0A6); margin: 2px 0 0; }
.admin-stats-row { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 10px;
    padding: 8px 18px;
    min-width: 80px;
}
.admin-stat-chip span:first-child {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tp-l-text, #E6E8EB);
    line-height: 1.1;
}
.admin-stat-chip span:last-child { font-size: 0.68rem; color: var(--tp-l-text-2, #9AA0A6); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-stat-chip--green span:first-child { color: var(--tp-l-green, #2ECC71); }

/* Section nav */
.admin-section-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
    border-radius: 12px;
    padding: 4px;
}
.admin-snav-btn {
    flex: 1;
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}
.admin-snav-btn:hover { color: var(--tp-l-text, #E6E8EB); background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05); }
.admin-snav-btn.active { background: rgba(245,158,11,0.15); color: var(--tp-gold); }

/* Sections */
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.admin-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tp-l-text, #E6E8EB);
    margin: 0;
}

/* Search */
.admin-search-wrap { position: relative; }
.admin-search { width: 240px; padding-left: 32px !important; }

/* Cards */
.admin-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.admin-card {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
    border-radius: 14px;
    padding: 20px;
}
.admin-card--full { grid-column: 1 / -1; }
.admin-card--create {
    margin-bottom: 0;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 14px;
    padding: 20px;
}
.admin-card-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tp-l-text-2, #9AA0A6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.admin-card-row { display: flex; align-items: center; gap: 10px; }
.admin-card-hint { font-size: 0.72rem; color: var(--tp-l-text-2, #6B7280); margin: 8px 0 0; }

/* Inputs */
.admin-input {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--tp-l-text, #E6E8EB);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.18s;
    width: 100%;
}
.admin-input:focus { border-color: var(--tp-gold); }
.admin-input--sm { width: 110px; }
.admin-textarea { resize: vertical; min-height: 60px; font-family: inherit; }

/* Buttons */
/* Filtros pill del Admin → Usuarios (marca v2, solo tokens --tp-*) */
.admin-filter-pill {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tp-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--tp-text-muted);
    font: 600 0.8rem/1 var(--tp-font);
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.admin-filter-pill:hover { color: var(--tp-text); border-color: color-mix(in srgb, var(--tp-text) 24%, transparent); }
.admin-filter-pill:focus-visible { outline: 2px solid var(--tp-green); outline-offset: 2px; }
.admin-filter-pill.active {
    color: var(--tp-green);
    border-color: var(--tp-green);
    background: color-mix(in srgb, var(--tp-green) 12%, transparent);
}
.admin-filter-pill--founding { color: var(--tp-gold); border-color: color-mix(in srgb, var(--tp-gold) 35%, transparent); }
.admin-filter-pill--founding:hover { color: var(--tp-gold); border-color: color-mix(in srgb, var(--tp-gold) 60%, transparent); }
.admin-filter-pill--founding.active {
    color: var(--tp-gold);
    border-color: var(--tp-gold);
    background: color-mix(in srgb, var(--tp-gold) 14%, transparent);
}
/* Modo claro: los tokens de texto de la marca son para fondo oscuro; aquí se usa --tp-ink */
body.light-mode .admin-filter-pill { color: color-mix(in srgb, var(--tp-l-text) 68%, transparent); border-color: color-mix(in srgb, var(--tp-l-text) 16%, transparent); }
body.light-mode .admin-filter-pill:hover { color: var(--tp-l-text); border-color: color-mix(in srgb, var(--tp-l-text) 32%, transparent); }
body.light-mode .admin-filter-pill.active { color: var(--tp-green); border-color: var(--tp-green); background: color-mix(in srgb, var(--tp-green) 10%, transparent); }
body.light-mode .admin-filter-pill--founding { color: color-mix(in srgb, var(--tp-gold) 55%, var(--tp-l-text)); border-color: color-mix(in srgb, var(--tp-gold) 45%, transparent); }
body.light-mode .admin-filter-pill--founding.active { color: color-mix(in srgb, var(--tp-gold) 55%, var(--tp-l-text)); border-color: var(--tp-gold); background: color-mix(in srgb, var(--tp-gold) 16%, transparent); }

.admin-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.18s;
    white-space: nowrap;
}
.admin-btn--primary { background: var(--tp-gold); color: #1A1D21; }
.admin-btn--primary:hover { background: #FCD34D; }
.admin-btn--danger { background: rgba(231,76,60,0.15); color: var(--tp-danger); border: 1px solid rgba(231,76,60,0.3); }
.admin-btn--danger:hover { background: rgba(231,76,60,0.25); }
.admin-btn--ghost { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05); color: var(--tp-l-text-2, #9AA0A6); border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1); }
.admin-btn--ghost:hover { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.09); color: var(--tp-l-text, #E6E8EB); }
.admin-btn--sm { padding: 5px 10px; font-size: 0.75rem; }
.admin-btn--green { background: rgba(46,204,113,0.15); color: var(--tp-l-green, #2ECC71); border: 1px solid rgba(46,204,113,0.3); }
.admin-btn--green:hover { background: rgba(46,204,113,0.25); }

/* Toggle */
.admin-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.admin-toggle-input { display: none; }
.admin-toggle-track {
    width: 40px; height: 22px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}
.admin-toggle-input:checked + .admin-toggle-track { background: var(--tp-gold); }
.admin-toggle-thumb {
    position: absolute;
    left: 3px; top: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
}
.admin-toggle-input:checked + .admin-toggle-track .admin-toggle-thumb { left: 21px; }

/* Table */
.admin-table-wrap {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
    border-radius: 14px;
    overflow: hidden;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.admin-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tp-l-text-2, #9AA0A6);
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
}
.admin-table tbody td {
    padding: 12px 16px;
    color: var(--tp-l-text, #C8CDD2);
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02); }
.admin-loading { text-align: center; color: var(--tp-l-text-2, #6B7280); padding: 32px !important; }

/* Badges */
.admin-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-badge--green { background: rgba(46,204,113,0.15); color: var(--tp-l-green, #2ECC71); }
.admin-badge--red   { background: rgba(231,76,60,0.12);  color: var(--tp-danger); }
.admin-badge--gold  { background: rgba(245,158,11,0.15); color: var(--tp-gold); }
.admin-badge--gray  { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06); color: var(--tp-l-text-2, #9AA0A6); }

/* Create grid */
.admin-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.admin-field-group { display: flex; flex-direction: column; gap: 5px; }
.admin-field-group label { font-size: 0.72rem; color: var(--tp-l-text-2, #9AA0A6); font-weight: 600; }

/* Link preview */
.admin-link-preview {
    font-size: 0.78rem;
    color: var(--tp-gold);
    word-break: break-all;
    cursor: pointer;
}
.admin-link-preview:hover { text-decoration: underline; }

/* Light mode overrides */
body.light-mode .admin-title { color: #B45309; }
body.light-mode .admin-snav-btn.active { background: rgba(180,83,9,0.12); color: #B45309; }
body.light-mode .admin-card { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .admin-card--create { border-color: rgba(180,83,9,0.25); }
body.light-mode .admin-section-nav { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.03); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .admin-input { background: var(--tp-l-input, #F9FAFB); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); color: var(--tp-l-text, #1A1D21); }
body.light-mode .admin-table thead th { color: var(--tp-l-text-2, #6B7280); background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.02); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); }
body.light-mode .admin-table tbody td { color: var(--tp-l-text-2, #374151); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.05); }
body.light-mode .admin-table-wrap { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .admin-toggle-track { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); }
body.light-mode .admin-stat-chip { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.03); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .admin-stat-chip span:first-child { color: var(--tp-l-text, #1A1D21); }

/* Metrics */
.admin-metrics-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.admin-metrics-kpi {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.admin-metrics-kpi-val { font-size: 1.6rem; font-weight: 800; color: var(--tp-l-text, #E6E8EB); line-height: 1; }
.admin-metrics-kpi span:last-child { font-size: 0.68rem; color: var(--tp-l-text-2, #9AA0A6); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }

/* Bar charts */
.admin-bar-chart { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-bar-row { display: flex; align-items: center; gap: 10px; }
.admin-bar-label { width: 110px; font-size: 0.78rem; color: var(--tp-l-text-2, #9AA0A6); text-align: right; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-bar-track { flex: 1; height: 10px; background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05); border-radius: 5px; overflow: hidden; }
.admin-bar-fill  { height: 100%; border-radius: 5px; background: #2ECC71; transition: width 0.6s ease; }
.admin-bar-fill--gold { background: var(--tp-gold); }
.admin-bar-count { width: 36px; text-align: right; font-size: 0.78rem; color: var(--tp-l-text-2, #9AA0A6); flex-shrink: 0; }
.admin-bar-chart--daily .admin-bar-label { width: 70px; }
.admin-bar-chart--daily .admin-bar-fill  { background: #3B82F6; }

body.light-mode .admin-metrics-kpi { background: var(--tp-l-card, #fff); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .admin-metrics-kpi-val { color: var(--tp-l-text, #1A1D21); }
body.light-mode .admin-bar-track { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.06); }

/* Responsive */
@media (max-width: 640px) {
    .admin-wrapper { padding: 16px; }
    .admin-header { flex-direction: column; align-items: flex-start; }
    .admin-cards-grid { grid-template-columns: 1fr; }
    .admin-create-grid { grid-template-columns: 1fr; }
    .admin-snav-btn { font-size: 0.75rem; padding: 8px 10px; }
    .admin-metrics-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── PARTNER PANEL & SHARED ADMIN HELPERS ──────────────────────────── */
.admin-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 32px 20px;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
}
.admin-back-btn {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    color: var(--tp-l-text-2, #9AA0A6);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.admin-back-btn:hover { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.09); color: var(--tp-l-text, #E6E8EB); }
.admin-content { padding: 24px 32px 48px; max-width: 960px; margin: 0 auto; }
.admin-kpi-value { font-size: 1.8rem; font-weight: 800; color: var(--tp-l-text, #E6E8EB); line-height: 1.1; margin-bottom: 4px; }
.admin-kpi-label { font-size: 0.7rem; color: var(--tp-l-text-2, #9AA0A6); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07); }
.admin-empty { text-align: center; color: var(--tp-l-text-2, #6B7280); padding: 24px !important; }
.btn-sm { padding: 5px 10px !important; font-size: 0.78rem !important; }
body.light-mode .admin-back-btn { color: var(--tp-l-text-2, #6B7280); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.04); }
body.light-mode .admin-back-btn:hover { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); color: var(--tp-l-text-2, #374151); }
body.light-mode .admin-kpi-value { color: var(--tp-l-text, #1A1D21); }
body.light-mode .admin-table-container { border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
@media (max-width: 640px) {
    .admin-panel-header { padding: 16px; flex-wrap: wrap; }
    .admin-content { padding: 16px 16px 48px; }
    #partnerPanelView .admin-content { padding: 16px; }
}
@media (max-width: 768px) {
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NQ ADMIN PANEL — .nq-* component styles (MasterAdmin v2)
═══════════════════════════════════════════════════════════════ */

/* CSS Custom Properties */
.nq-admin-panel,
#adminpanel {
    --admin-card-bg:   rgba(255, 255, 255, 0.03);
    --admin-border:    rgba(255, 255, 255, 0.08);
    --admin-text:      #E6E8EB;
    --admin-muted:     #9AA0A6;
    --admin-accent:    var(--tp-gold);
    --admin-accent-bg: rgba(245, 158, 11, 0.12);
    --admin-green:     #2ECC71;
    --admin-red:       var(--tp-danger);
    --admin-radius:    14px;
    --admin-radius-sm: 9px;
}

/* Panel container */
.nq-admin-panel {
    padding: 28px 32px 64px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.nq-admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}
.nq-admin-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--admin-accent);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nq-admin-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--admin-accent-bg);
    color: var(--admin-accent);
    border: 1px solid rgba(245, 158, 11, 0.3);
    vertical-align: middle;
    letter-spacing: 0.04em;
}
.nq-admin-subtitle {
    font-size: 0.78rem;
    color: var(--admin-muted);
    margin: 0;
}
.nq-admin-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Stats grid */
.nq-admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.nq-stat-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.18s;
}
.nq-stat-card:hover { border-color: rgba(245, 158, 11, 0.25); }
.nq-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
}
.nq-stat-icon.users   { background: rgba(99, 102, 241, 0.15); }
.nq-stat-icon.beta    { background: rgba(245, 158, 11, 0.15); }
.nq-stat-icon.paid    { background: rgba(46, 204, 113, 0.15); }
.nq-stat-icon.revenue { background: rgba(251, 191, 36, 0.15); }
.nq-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--admin-text);
    line-height: 1.1;
    font-family: var(--font-num);
}
.nq-stat-label {
    font-size: 0.68rem;
    color: var(--admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* Nav tabs */
.nq-admin-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.025);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 5px;
    flex-wrap: wrap;
}
.nq-nav-btn {
    flex: 1;
    min-width: max-content;
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--admin-muted);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    font-family: inherit;
}
.nq-nav-btn:hover { color: var(--admin-text); background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05); }
.nq-nav-btn.active { background: var(--admin-accent-bg); color: var(--admin-accent); }

/* Tab panes */
.nq-tab-pane { display: none; }
.nq-tab-pane.active { display: block; }

/* Section header */
.nq-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.nq-section-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
}
.nq-section-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
}

/* Filters */
.nq-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Inputs */
.nq-input,
.nq-search,
.nq-select {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--admin-text);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.18s;
    font-family: inherit;
}
.nq-input:focus,
.nq-search:focus,
.nq-select:focus { border-color: var(--admin-accent); }
.nq-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA0A6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
.nq-textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.nq-search { min-width: 200px; }

/* Form groups */
.nq-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.nq-form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nq-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.nq-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Buttons */
.nq-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
    white-space: nowrap;
    font-family: inherit;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    color: var(--admin-muted);
}
.nq-btn:hover { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1); color: var(--admin-text); }
.nq-btn.nq-btn-primary,
.nq-btn-primary {
    background: var(--admin-accent) !important;
    color: #1A1D21 !important;
    border-color: transparent;
}
.nq-btn.nq-btn-primary:hover,
.nq-btn-primary:hover { background: #FCD34D !important; }
.nq-btn.nq-btn-secondary,
.nq-btn-secondary {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    color: var(--admin-muted);
    border-color: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
}
.nq-btn.nq-btn-secondary:hover,
.nq-btn-secondary:hover { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.09); color: var(--admin-text); }

/* Table */
.nq-table-wrap {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
}
.nq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.nq-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-muted);
    border-bottom: 1px solid var(--admin-border);
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    white-space: nowrap;
}
.nq-table tbody td {
    padding: 12px 16px;
    color: var(--tp-l-text, #C8CDD2);
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    vertical-align: middle;
}
.nq-table tbody tr:last-child td { border-bottom: none; }
.nq-table tbody tr:hover td { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.025); }

/* Loading */
.nq-loading {
    text-align: center;
    color: var(--admin-muted);
    padding: 40px 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Spinner */
@keyframes nq-spin { to { transform: rotate(360deg); } }
.nq-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-top-color: var(--admin-accent);
    border-radius: 50%;
    animation: nq-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Pagination */
.nq-pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 24px;
    font-size: 0.82rem;
    color: var(--admin-muted);
}
.nq-pagination button {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    color: var(--admin-muted);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.nq-pagination button:hover { border-color: var(--admin-accent); color: var(--admin-accent); }
.nq-pagination button.active { background: var(--admin-accent-bg); border-color: rgba(245,158,11,0.35); color: var(--admin-accent); font-weight: 700; }
.nq-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* Action card */
.nq-action-card {
    background: var(--admin-card-bg);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--admin-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.nq-action-card h3 { font-size: 0.9rem; font-weight: 700; color: var(--admin-accent); margin: 0 0 6px; }
.nq-action-card p  { font-size: 0.82rem; color: var(--admin-muted); margin: 0; }

/* Plans grid */
.nq-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

/* Metrics grid */
.nq-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

/* KPI card */
.nq-kpi-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.nq-kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--admin-text);
    line-height: 1;
    font-family: var(--font-num);
}
.nq-kpi-label {
    font-size: 0.68rem;
    color: var(--admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Badges */
.nq-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
    color: var(--admin-muted);
}
.nq-badge-new {
    background: var(--admin-accent-bg);
    color: var(--admin-accent);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Modals */
.nq-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 20000);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.nq-modal.open { display: flex; }
.nq-modal-box {
    background: var(--tp-l-raised, #161b22);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    animation: nq-modal-in 0.22s ease;
}
@keyframes nq-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nq-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    flex-shrink: 0;
}
.nq-modal-head h3 { font-size: 1rem; font-weight: 700; color: var(--admin-text); margin: 0; }
.nq-modal-close {
    width: 30px; height: 30px;
    border: none;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    border-radius: 6px;
    color: var(--admin-muted);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
}
.nq-modal-close:hover { background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.12); color: var(--admin-text); }
.nq-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.nq-modal-body label { font-size: 0.75rem; font-weight: 600; color: var(--admin-muted); }
.nq-modal-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 24px 20px;
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    flex-shrink: 0;
}

/* Light mode overrides */
body.light-mode .nq-admin-panel,
body.light-mode #adminpanel {
    --admin-card-bg: #FFFFFF;
    --admin-border:  rgba(0,0,0,0.08);
    --admin-text:    var(--tp-l-text, #1A1D21);
    --admin-muted:   var(--tp-l-text-2, #6B7280);
    --admin-accent:  #B45309;
    --admin-accent-bg: rgba(180,83,9,0.10);
}
body.light-mode .nq-nav-btn.active { background: rgba(180,83,9,0.1); color: #B45309; }
body.light-mode .nq-input,
body.light-mode .nq-search,
body.light-mode .nq-select { background: var(--tp-l-input, #F9FAFB); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); color: var(--tp-l-text, #1A1D21); }
body.light-mode .nq-table-wrap { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .nq-table thead th { color: var(--tp-l-text-2, #6B7280); background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.02); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); }
body.light-mode .nq-table tbody td { color: var(--tp-l-text-2, #374151); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.05); }
body.light-mode .nq-modal-box { background: var(--tp-l-card, #FFFFFF); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1); }
body.light-mode .nq-spinner { border-color: rgba(180,83,9,0.15); border-top-color: #B45309; }

/* Responsive */
@media (max-width: 768px) {
    .nq-admin-panel { padding: 16px 16px 48px; }
    .nq-admin-title  { font-size: 1.25rem; }
    .nq-admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .nq-admin-nav { gap: 2px; padding: 4px; }
    .nq-nav-btn   { padding: 7px 10px; font-size: 0.75rem; }
    .nq-form-row  { grid-template-columns: 1fr; }
    .nq-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .nq-table thead th,
    .nq-table tbody td { padding: 10px 12px; font-size: 0.78rem; }
    .nq-section-header { flex-direction: column; align-items: flex-start; }
    .nq-filters { width: 100%; }
    .nq-search  { min-width: unset; flex: 1; }
    .nq-modal-box { max-height: 95vh; }
}
@media (max-width: 480px) {
    .nq-admin-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .nq-stat-card  { padding: 14px; }
    .nq-stat-value { font-size: 1.2rem; }
    .nq-plans-grid { grid-template-columns: 1fr; }
    .nq-kpi-value  { font-size: 1.6rem; }
    .nq-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
}

/* ═══ css/novedades.css ═══ */
/* What's New (modal y botón Novedades).
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── WHAT'S NEW MODALS ─────────────────────────────────────────────── */
/* El modal nunca supera la pantalla visible: altura máxima con 100dvh (fallback vh),
   cabecera y botones fijos y solo la lista con scroll. Vale para cualquier versión. */
.wn-overlay {
    display: none;
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    transition: background 300ms ease, backdrop-filter 300ms ease;
}
.wn-overlay.wn-entering {
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(14px);
}
.wn-modal {
    position: relative;
    width: 90%;
    max-width: 700px;
    background: rgba(18, 22, 30, 0.82);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.09);
    box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 2.5rem 2.5rem max(2rem, calc(1rem + env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.38s cubic-bezier(0.34,1.56,0.64,1), transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.wn-modal.wn-modal-in {
    opacity: 1;
    transform: scale(1);
}
.wn-modal.wn-modal-out {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.wn-modal--admin {
    background: rgba(0, 200, 220, 0.11);
    backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(0, 220, 240, 0.28);
    box-shadow: 0 24px 70px rgba(0,200,220,0.22), inset 0 1px 0 rgba(0,240,255,0.18);
}
.wn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 100px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--tp-l-text-2, rgba(255,255,255, 0.55));
    margin-bottom: 1.4rem;
}
.wn-badge--admin {
    background: rgba(0,220,240,0.12);
    border-color: rgba(0,220,240,0.25);
    color: #00f5ff;
}
.wn-title-line {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;   /* "UPDATE 0.21-beta" en una línea */
    white-space: nowrap;
    gap: 0.55em;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.4rem;
    min-height: 1.15em;
    font-family: var(--font-ui);
}
.wn-version {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #00f5ff;
    text-shadow: 0 0 20px #00f5ff, 0 0 45px #00f5ff88;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wn-subtitle {
    font-size: 13px;
    color: var(--tp-l-text-3, rgba(255,255,255, 0.32));
    margin-bottom: 1.4rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.wn-subtitle.wn-show { opacity: 1; }
.wn-subtitle--admin { color: rgba(180,240,255,0.5); }
.wn-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1), transparent);
    margin-bottom: 1.4rem;
}
.wn-divider--admin {
    background: linear-gradient(90deg, rgba(0,220,240,0.35), transparent);
}
.wn-head, .wn-footer { flex-shrink: 0; }
.wn-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    margin-right: -8px;
    padding-right: 8px;
}
/* X de cerrar: solo el icono (20 px, trazo fino) en la esquina de la tarjeta, fuera del flujo.
   El botón es el área táctil invisible de 44×44 px; con top/right de 2 px el icono queda a
   14 px de cada borde. */
.wn-close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--tp-l-text-2, rgba(255,255,255, 0.7));
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.wn-close svg { width: 20px; height: 20px; display: block; }
.wn-close:hover, .wn-close:focus-visible { color: var(--tp-l-text, #fff); }
.wn-close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.wn-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wn-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--tp-l-text, rgba(255,255,255, 0.78));
    line-height: 1.5;
    opacity: 0;
}
.wn-item.wn-show { opacity: 1; }
.wn-item--admin { color: rgba(220,248,255,0.88); }
.wn-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wn-accent, #00f5ff);
    box-shadow: 0 0 6px var(--wn-accent, #00f5ff), 0 0 12px color-mix(in srgb, var(--wn-accent, #00f5ff) 53%, transparent);
    margin-top: 0.5em;
}
.wn-footer { padding-top: 4px; }
.wn-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
#wnSkipBtn {
    flex: 1;
    padding: 11px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 8px;
    color: var(--tp-l-text-3, rgba(255,255,255, 0.4));
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.wn-btn {
    flex: 2;
    padding: 11px;
    border: none;
    border-radius: 8px;
    color: var(--c-on-fill);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.wn-btn.wn-show { opacity: 1; }
/* Historial de versiones (dentro de #wnBody; el color de cada versión llega por --wn-accent) */
.wn-links { display: flex; justify-content: center; margin-top: 10px; }
.wn-link {
    background: none; border: none; padding: 10px 12px; min-height: 44px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--tp-l-text-2, rgba(255,255,255, 0.78));
    text-decoration: underline; text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}
.wn-link:hover { color: #fff; }
.wn-link:focus-visible, .wn-hist-sum:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.wn-hist { display: flex; flex-direction: column; gap: 10px; margin: 0 0 1rem; }
.wn-list[hidden], .wn-hist[hidden] { display: none; }
.wn-hist-item {
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-left: 3px solid var(--wn-accent, rgba(255,255,255,0.4));
    border-radius: 12px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
}
.wn-hist-sum {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 8px 14px; box-sizing: border-box;
    color: var(--tp-l-text, rgba(255,255,255, 0.92)); font-weight: 700; font-size: 15px;
    -webkit-tap-highlight-color: transparent;
}
.wn-hist-sum::-webkit-details-marker { display: none; }
.wn-hist-sum .wn-dot { margin-top: 0; background: var(--wn-accent); box-shadow: 0 0 6px var(--wn-accent); }
.wn-hist-label { font-variant-numeric: tabular-nums; }
.wn-hist-badge { font-size: 11px; font-weight: 600; color: var(--tp-l-text-2, rgba(255,255,255, 0.72)); }
.wn-hist-chev { margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; color: var(--tp-l-text-2, rgba(255,255,255, 0.72)); transition: transform 0.2s ease; }
.wn-hist-item[open] .wn-hist-chev { transform: rotate(180deg); }
.wn-hist-item .wn-list { padding: 2px 14px 14px; margin: 0; gap: 10px; }
.wn-hist-item .wn-item { opacity: 1; font-size: 14px; }
.wn-hist-item .wn-item .wn-dot { background: var(--wn-accent); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .wn-hist-chev { transition: none; } }
.wn-btn:hover { transform: translateY(-1px); }
@media (max-width: 600px) {
    .wn-modal { padding: 1.6rem 1.25rem max(1.25rem, calc(0.75rem + env(safe-area-inset-bottom))); }
    .wn-title-line { font-size: 34px; gap: 0.35em; }
    /* El número de versión se ajusta al ancho disponible (90vw − márgenes − "UPDATE")
       para que el título no se parta; "UPDATE" mantiene su tamaño. */
    .wn-version { font-size: clamp(14px, calc(16vw - 35px), 34px); }
    .wn-badge { margin-bottom: 1rem; }
    .wn-subtitle, .wn-divider { margin-bottom: 1rem; }
    .wn-item { font-size: 14px; }
}
@media (max-height: 700px) {
    .wn-title-line { font-size: 30px; }
    .wn-version { font-size: clamp(14px, calc(16vw - 35px), 30px); }
}

/* ═══ css/datos.css ═══ */
/* Exportar / importar datos.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ══════════════════════════════════════════════════════════════
   DATA EXPORT / IMPORT MODAL
   ══════════════════════════════════════════════════════════════ */
.data-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 20000;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.data-modal-overlay.active {
    display: flex;
}
.data-modal-box {
    width: 100%;
    max-width: 500px;
    background: var(--tp-bg);
    border: 1px solid rgba(61, 219, 122, 0.22);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(61, 219, 122, 0.05);
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    animation: dataModalIn 0.22s ease-out;
    margin: auto 0;
}
@keyframes dataModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.data-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
}
.data-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--tp-l-text, #E6E8EB);
}
.data-modal-close {
    background: transparent;
    border: 0;
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.data-modal-close:hover {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    color: var(--tp-l-text, #E6E8EB);
}
.data-modal-tabs {
    display: flex;
    gap: 0;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
}
.data-tab-btn {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.8rem 0.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.data-tab-btn:hover {
    color: var(--tp-l-text, #E6E8EB);
}
.data-tab-btn.active {
    color: var(--tp-green);
    border-bottom-color: var(--tp-green);
}
.data-tab-content {
    display: none;
    padding: 1.2rem 1.25rem 1.25rem;
}
.data-tab-content.active {
    display: block;
}
.data-summary-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--tp-l-text-2, #9AA0A6);
    padding: 0.7rem 0.85rem;
    background: rgba(61, 219, 122, 0.04);
    border: 1px solid rgba(61, 219, 122, 0.12);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.data-summary-row strong {
    color: var(--tp-l-text, #E6E8EB);
    font-weight: 600;
}
.data-summary-dot {
    opacity: 0.4;
}
.data-format-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.data-format-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.data-format-card:hover {
    border-color: rgba(61, 219, 122, 0.3);
    background: rgba(61, 219, 122, 0.03);
}
.data-format-card.selected {
    border-color: var(--tp-green);
    background: rgba(61, 219, 122, 0.06);
    box-shadow: 0 0 0 2px rgba(61, 219, 122, 0.1);
}
.data-format-card input[type="radio"] {
    display: none;
}
.data-format-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tp-green);
    background: rgba(61, 219, 122, 0.08);
    border: 1px solid rgba(61, 219, 122, 0.2);
    border-radius: 8px;
    flex-shrink: 0;
}
.data-format-body {
    flex: 1;
    min-width: 0;
}
.data-format-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tp-l-text, #E6E8EB);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.data-format-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--tp-green);
    background: rgba(61, 219, 122, 0.1);
    border: 1px solid rgba(61, 219, 122, 0.22);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    text-transform: uppercase;
}
.data-format-desc {
    font-size: 0.78rem;
    color: var(--tp-l-text-2, #9AA0A6);
    line-height: 1.35;
}
.data-filename-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--tp-l-text-2, #9AA0A6);
    padding: 0.6rem 0.85rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border: 1px dashed rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.data-filename-preview code {
    color: var(--tp-green);
    font-family: var(--font-num);
    font-size: 0.75rem;
    background: transparent;
    padding: 0;
}
.data-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.25rem;
}
.data-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    border: 0;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.data-btn:active { transform: scale(0.98); }
.data-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.data-btn-secondary {
    background: transparent;
    color: var(--tp-l-text-2, #9AA0A6);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.12);
}
.data-btn-secondary:hover:not(:disabled) {
    color: var(--tp-l-text, #E6E8EB);
    border-color: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.22);
}
.data-btn-primary {
    background: var(--tp-green);
    color: #0B120C;
}
.data-btn-primary:hover:not(:disabled) {
    background: #4CE589;
}

/* STEPPER */
.data-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0 1.1rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
}
.data-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.data-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.15);
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.data-step.active .data-step-dot,
.data-step-dot.active {
    background: var(--tp-green);
    border-color: var(--tp-green);
    color: #0B120C;
    box-shadow: 0 0 0 4px rgba(61, 219, 122, 0.12);
}
.data-step.done .data-step-dot,
.data-step-dot.done {
    background: rgba(61, 219, 122, 0.2);
    border-color: rgba(61, 219, 122, 0.4);
    color: var(--tp-green);
}
.data-step-label {
    font-size: 0.72rem;
    color: var(--tp-l-text-2, #9AA0A6);
    text-align: center;
    white-space: nowrap;
}
.data-step.active .data-step-label,
.data-step.done .data-step-label {
    color: var(--tp-l-text, #E6E8EB);
}
.data-step-line {
    flex: 1;
    height: 1px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    max-width: 60px;
    margin-bottom: 1.1rem;
}
.data-import-step {
    display: none;
}
.data-import-step.active {
    display: block;
}

/* DROPZONE */
.data-dropzone {
    border: 2px dashed rgba(61, 219, 122, 0.3);
    border-radius: 12px;
    padding: 1.8rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 0.85rem;
}
.data-dropzone:hover,
.data-dropzone.drag-over {
    background: rgba(61, 219, 122, 0.05);
    border-color: rgba(61, 219, 122, 0.55);
}
.data-dropzone-icon {
    color: var(--tp-green);
    margin-bottom: 0.45rem;
    display: flex;
    justify-content: center;
}
.data-dropzone-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.25rem;
}
.data-dropzone-sub {
    font-size: 0.8rem;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.35rem;
}
.data-dropzone-types {
    font-size: 0.72rem;
    color: var(--tp-l-text-2, #6B7076);
    font-family: var(--font-num);
}
.data-file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--tp-l-text, #E6E8EB);
    padding: 0.55rem 0.8rem;
    background: rgba(61, 219, 122, 0.06);
    border: 1px solid rgba(61, 219, 122, 0.22);
    border-radius: 8px;
    margin-bottom: 0.85rem;
}
.data-file-info.error {
    background: rgba(231, 76, 60, 0.06);
    border-color: rgba(231, 76, 60, 0.3);
    color: #FFB4A9;
}
.data-file-info-icon {
    flex-shrink: 0;
    font-size: 1rem;
}
.data-template-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--tp-l-text-2, #9AA0A6);
    padding: 0.35rem 0;
    margin-bottom: 1.2rem;
}
.data-link-btn {
    background: transparent;
    border: 0;
    color: var(--tp-green);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}
.data-link-btn:hover {
    background: rgba(61, 219, 122, 0.08);
}
.data-fields-section {
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    padding-top: 1rem;
    margin-bottom: 1rem;
}
.data-fields-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.3rem;
}
.data-fields-legend {
    font-size: 0.72rem;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
.data-legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.data-legend-req { background: var(--tp-green); }
.data-legend-opt { background: #6B7076; }
.data-accordion {
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.08);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
}
.data-accordion-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: 0;
    color: var(--tp-l-text, #E6E8EB);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.data-accordion-head:hover {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
}
.data-accordion-title {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.data-accordion-sub {
    font-size: 0.72rem;
    color: var(--tp-l-text-2, #6B7076);
    font-weight: 400;
    font-family: var(--font-num);
}
.data-accordion-arrow {
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.8rem;
    transition: transform 0.2s;
}
.data-accordion.open .data-accordion-arrow {
    transform: rotate(180deg);
}
.data-accordion-body {
    display: none;
    padding: 0.5rem 0.85rem 0.85rem;
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.05);
}
.data-accordion.open .data-accordion-body {
    display: block;
}
.data-fields-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    margin-top: 0.3rem;
}
.data-fields-table th {
    text-align: left;
    padding: 0.35rem 0.5rem;
    color: var(--tp-l-text-2, #9AA0A6);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
}
.data-fields-table td {
    padding: 0.4rem 0.5rem;
    color: #C2C6CC;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    vertical-align: top;
}
.data-fields-table td:first-child {
    font-family: var(--font-num);
    color: var(--tp-l-text, #E6E8EB);
    font-size: 0.72rem;
    white-space: nowrap;
}
.data-fields-table td:nth-child(2) {
    font-size: 0.7rem;
    color: var(--tp-l-text-2, #6B7076);
    font-family: var(--font-num);
}
.data-fields-table tr:last-child td {
    border-bottom: 0;
}
.data-fields-note {
    font-size: 0.74rem;
    color: var(--tp-l-text-2, #9AA0A6);
    padding: 0.55rem 0.65rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border-left: 2px solid rgba(61, 219, 122, 0.3);
    border-radius: 3px;
    margin-top: 0.65rem;
    line-height: 1.45;
}

/* IMPORT PREVIEW */
.data-summary-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.65rem 0 1rem;
}
.data-chip {
    padding: 0.35rem 0.7rem;
    background: rgba(61, 219, 122, 0.06);
    border: 1px solid rgba(61, 219, 122, 0.18);
    border-radius: 100px;
    font-size: 0.76rem;
    color: var(--tp-l-text, #E6E8EB);
}
.data-chip strong {
    color: var(--tp-green);
    font-weight: 700;
}
.data-chip.data-chip-warn {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}
.data-chip.data-chip-warn strong { color: var(--tp-gold); }

.data-rejected-wrap {
    margin-bottom: 0.85rem;
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(231, 76, 60, 0.04);
}
.data-rejected-head {
    color: #FFB4A9 !important;
}
.data-rejected-ul {
    margin: 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
    font-size: 0.76rem;
    color: #FFB4A9;
    max-height: 140px;
    overflow-y: auto;
}
.data-rejected-ul li {
    padding: 0.2rem 0;
    line-height: 1.4;
}
.data-info-notice {
    padding: 0.55rem 0.8rem;
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.25);
    color: #BFD9FF;
    border-radius: 8px;
    font-size: 0.77rem;
    margin-bottom: 0.85rem;
    line-height: 1.45;
}
.data-preview-table-wrap {
    margin-bottom: 1rem;
}
.data-preview-caption {
    font-size: 0.74rem;
    color: var(--tp-l-text-2, #9AA0A6);
    margin-bottom: 0.35rem;
}
.data-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    border-radius: 8px;
    overflow: hidden;
}
.data-preview-table th {
    text-align: left;
    padding: 0.4rem 0.55rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.03);
    color: var(--tp-l-text-2, #9AA0A6);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-preview-table td {
    padding: 0.4rem 0.55rem;
    color: var(--tp-l-text, #E6E8EB);
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
}
.data-mode-section {
    margin-bottom: 1rem;
}
.data-mode-question {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tp-l-text, #E6E8EB);
    margin-bottom: 0.55rem;
}
.data-mode-toggle {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}
.data-mode-btn {
    flex: 1;
    padding: 0.55rem 0.8rem;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.02);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.1);
    border-radius: 8px;
    color: var(--tp-l-text-2, #9AA0A6);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.data-mode-btn:hover {
    color: var(--tp-l-text, #E6E8EB);
    border-color: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.2);
}
.data-mode-btn.active {
    background: rgba(61, 219, 122, 0.08);
    border-color: var(--tp-green);
    color: var(--tp-green);
}
.data-mode-warning {
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 0.77rem;
    line-height: 1.45;
}
.data-warn-amber,
.import-warning.warn-amber {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #FDE68A;
}
.data-warn-info,
.import-warning.warn-blue {
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.25);
    color: #BFD9FF;
}
.import-warning {
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 0.77rem;
    line-height: 1.45;
}

/* IMPORT RESULT */
.data-import-result {
    text-align: center;
    padding: 2rem 1rem 1rem;
}
.data-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(61, 219, 122, 0.15);
    border-top-color: var(--tp-green);
    border-radius: 50%;
    animation: dataSpin 0.9s linear infinite;
    margin: 0 auto 0.85rem;
}
@keyframes dataSpin {
    to { transform: rotate(360deg); }
}
.data-import-msg {
    font-size: 0.92rem;
    color: var(--tp-l-text, #E6E8EB);
    line-height: 1.45;
}
.data-import-result.success .data-spinner,
.data-import-result.error   .data-spinner {
    display: none;
}
.data-import-success-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(61, 219, 122, 0.12);
    border: 2px solid var(--tp-green);
    color: var(--tp-green);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
    animation: dataPop 0.35s ease-out;
}
.data-import-error-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.12);
    border: 2px solid var(--tp-l-red, #E74C3C);
    color: var(--tp-l-red, #E74C3C);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
}
@keyframes dataPop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* LIGHT MODE */
body.light-mode .data-modal-box {
    background: var(--tp-l-card, #FFFFFF);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.1);
    color: var(--tp-l-text, #1A1D21);
}
body.light-mode .data-modal-title { color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-modal-close { color: var(--tp-l-text-2, #6B7076); }
body.light-mode .data-modal-close:hover { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.05); color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-modal-header,
body.light-mode .data-modal-tabs,
body.light-mode .data-fields-section,
body.light-mode .data-stepper { border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .data-tab-btn { color: var(--tp-l-text-2, #6B7076); }
body.light-mode .data-tab-btn:hover { color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-format-card { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.02); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .data-format-name { color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-format-desc { color: var(--tp-l-text-2, #6B7076); }
body.light-mode .data-dropzone-text { color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-accordion { background: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.02); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .data-accordion-head { color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-fields-table td { color: var(--tp-l-text-2, #374151); }
body.light-mode .data-fields-table td:first-child { color: var(--tp-l-text, #1A1D21); }
body.light-mode .data-btn-secondary { color: var(--tp-l-text-2, #6B7076); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12); }
body.light-mode .data-btn-secondary:hover:not(:disabled) { color: var(--tp-l-text, #1A1D21); border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.22); }
body.light-mode .data-preview-table td { color: var(--tp-l-text, #1A1D21); }

@media (max-width: 560px) {
    .data-modal-overlay { padding: 0; align-items: stretch; }
    .data-modal-box { max-width: 100%; border-radius: 0; min-height: 100vh; }
    .data-stepper { padding: 0.4rem 0 0.9rem; }
    .data-step-line { max-width: 32px; }
    .data-summary-row { font-size: 0.76rem; }
    .data-fields-table { font-size: 0.72rem; }
    .data-fields-table td:first-child { font-size: 0.68rem; }
}

/* ═══ css/movil.css ═══ */
/* Móvil (iPhone): sin desplazamiento horizontal ni auto-zoom. Va casi al final: gana a las reglas de las secciones.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ── Móvil (iPhone): sin desplazamiento horizontal ni auto-zoom ───────────
   Solo ≤768px para no tocar escritorio. */
@media (max-width: 768px) {
    /* Menú de usuario: cerrado no ocupa espacio; abierto, dentro de la pantalla */
    .user-menu-dropdown:not(.open) { display: none; }
    .user-menu-dropdown { max-width: calc(100vw - 24px); }
    /* Tooltips (i): ocultos no ocupan espacio; visibles, nunca más anchos que la pantalla */
    .info-btn:not(.active) .info-tooltip { display: none; }
    .info-tooltip { width: min(210px, calc(100vw - 32px)); }

    /* Controles de formulario: nunca más anchos que su contenedor */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .form-group input, .form-group select, .form-group textarea { width: 100%; }
    /* Fechas: mismo aspecto que el resto de campos (en iOS el nativo tiene ancho propio) */
    input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        text-align: left;
        min-height: 2.6em;
    }
    input[type="date"]::-webkit-date-and-time-value { text-align: left; }

    /* Auto-zoom de iOS: todo campo editable a ≥16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea { font-size: 16px !important; }

    /* Hijos de flex/grid que no deben forzar ancho */
    .grid > *, .grid-2 > *, .kpi-grid > *, .form-group { min-width: 0; }

    /* Textos largos */
    .split-payment-notice, .reg-note, .reg-hint, .alert,
    #accountInfoEmail, .user-menu-email { overflow-wrap: anywhere; }

    /* Registro: chips en dos líneas si no caben (320px) */
    .reg-chips { flex-wrap: wrap; }
}
/* En ≤480px el botón del menú queda en el borde derecho: el desplegable se abre hacia la izquierda */
@media (max-width: 480px) {
    .user-menu-dropdown { left: auto; right: 0; }
}

/* ═══ css/secciones.css ═══ */
/* Barra de secciones y selector de sub-vistas (navegación fase 2). Va la última.
   Movido sin cambios de app/index.html (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ─── NAVEGACIÓN FASE 2 ─────────────────────────────────────────────
   5 secciones (Inicio · Cuentas · Análisis · Legacy · Perfil).
   ≤968px: barra inferior fija con safe-area. ≥969px: barra lateral.
   Solo tokens --tp-*. La barra de pestañas antigua (.tabs) queda oculta
   como registro interno de paneles. */
:root { --tpn-h: 60px; --tpn-side-w: 224px; }
body { --tpn-offset: 0px; }
.tabs-wrapper { display: none !important; }
/* Sub-pestañas internas que ahora gobierna la navegación */
#control > .nq-subtabs, #hofSubtabs { display: none !important; }

.tpn-bar { display: none; font-family: var(--tp-font); }
body.tpn-on .tpn-bar { display: flex; }
.tpn-item {
    position: relative;
    display: flex; align-items: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--tp-text-muted);
    font-family: var(--tp-font);
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background-color .15s ease;
}
.tpn-item svg { flex: 0 0 auto; width: 22px; height: 22px; }
.tpn-item:hover { color: var(--tp-text); }
.tpn-item[aria-current="page"] { color: var(--tp-green); }
.tpn-item:focus-visible { outline: 2px solid var(--tp-green); outline-offset: -2px; border-radius: var(--tp-radius-control); }
.tpn-lock { width: 11px !important; height: 11px !important; opacity: .75; }
.tpn-item .tpn-lock { position: absolute; }

@media (max-width: 968px) {
    body.tpn-on {
        --tpn-offset: calc(var(--tpn-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(1.5rem + var(--tpn-offset)) !important;
    }
    body.tpn-on.tpn-kb { --tpn-offset: 0px; }
    body.tpn-on.tpn-kb .tpn-bar { display: none; }
    .tpn-bar {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: var(--z-header);
        height: calc(var(--tpn-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: color-mix(in srgb, var(--tp-card) 92%, transparent);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--tp-hairline);
        justify-content: space-around; align-items: stretch;
    }
    .tpn-item {
        flex: 1 1 0; min-width: 0;
        flex-direction: column; justify-content: center; gap: 3px;
        font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1;
    }
    .tpn-item .tpn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
    .tpn-item[aria-current="page"]::before {
        content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 2px;
        border-radius: 0 0 2px 2px; background: var(--tp-green);
    }
    .tpn-item .tpn-lock { top: 9px; left: calc(50% + 9px); }
}
@media (min-width: 969px) {
    body.tpn-on { padding-left: calc(var(--tpn-side-w) + 2rem); }
    .tpn-bar {
        position: fixed; top: 0; bottom: 0; left: 0; width: var(--tpn-side-w);
        z-index: var(--z-header);
        flex-direction: column; gap: 4px;
        padding: 96px 12px 20px;
        background: var(--tp-card);
        border-right: 1px solid var(--tp-hairline);
    }
    .tpn-item {
        flex-direction: row; gap: 12px;
        height: 44px; padding: 0 14px;
        border-radius: var(--tp-radius-control);
        font-size: 14px; font-weight: 600; text-align: left;
    }
    .tpn-item:hover { background: var(--tp-hairline); }
    .tpn-item[aria-current="page"] { background: color-mix(in srgb, var(--tp-green) 11%, transparent); }
    .tpn-item[data-section="profile"] { margin-top: auto; }
    .tpn-item .tpn-lock { position: static; margin-left: auto; }
}

/* Selector segmentado de sub-vistas */
.tpn-subnav {
    display: flex; gap: 4px;
    margin: 0 0 1.25rem; padding: 4px;
    background: var(--tp-card);
    border: 1px solid var(--tp-hairline);
    border-radius: calc(var(--tp-radius-control) + 4px);
    overflow-x: auto; scrollbar-width: none;
    font-family: var(--tp-font);
}
.tpn-subnav[hidden] { display: none; }
.tpn-subnav::-webkit-scrollbar { display: none; }
.tpn-seg {
    flex: 1 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 0 14px;
    border: 0; border-radius: var(--tp-radius-control);
    background: transparent; color: var(--tp-text-muted);
    font: 600 13px/1 var(--tp-font); white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background-color .15s ease;
}
.tpn-seg:hover { color: var(--tp-text); }
.tpn-seg[aria-selected="true"] { background: color-mix(in srgb, var(--tp-green) 14%, transparent); color: var(--tp-green); }
.tpn-seg:focus-visible { outline: 2px solid var(--tp-green); outline-offset: -2px; }

/* Perfil: el menú de usuario se abre como hoja (abajo en móvil, junto a la barra en escritorio) */
body.tpn-on #userMenuBtn { display: none; }
/* Sin contexto de apilamiento propio: la hoja queda por encima del fondo y de la barra */
body.tpn-on .user-menu-container { z-index: auto; }
#tpnSheetBackdrop {
    position: fixed; inset: 0; z-index: calc(var(--z-header) + 1);
    background: color-mix(in srgb, var(--tp-bg) 55%, transparent);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
body.tpn-profile-open #tpnSheetBackdrop { opacity: 1; pointer-events: auto; }
body.tpn-on .user-menu-dropdown {
    position: fixed; z-index: calc(var(--z-header) + 2);
    max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 968px) {
    body.tpn-on .user-menu-dropdown {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
        max-height: 82dvh;
        border-radius: var(--tp-radius-card) var(--tp-radius-card) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(24px);
    }
    body.tpn-on .user-menu-dropdown.open { transform: translateY(0); }
}
@media (min-width: 969px) {
    body.tpn-on .user-menu-dropdown { top: auto; bottom: 16px; left: calc(var(--tpn-side-w) + 8px); right: auto; width: 280px; }
}

/* Lo que flota abajo no queda tapado por la barra inferior */
body.tpn-on .tp-cookie { bottom: calc(16px + var(--tpn-offset)) !important; }
body.tpn-on .tpw-toast { bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--tpn-offset)); }
body.tpn-on .reg-bar { bottom: var(--tpn-offset); padding-bottom: var(--s-3); }
body.tpn-on.tpn-kb .reg-bar { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
body.tpn-on.reg-bar-open { padding-bottom: calc(2rem + 76px + var(--tpn-offset)) !important; }
@media (min-width: 969px) { body.tpn-on .reg-bar { left: var(--tpn-side-w); } }

/* Modo claro */
body.light-mode .tpn-bar { background: color-mix(in srgb, var(--tp-l-card) 94%, transparent); border-color: color-mix(in srgb, var(--tp-l-text) 10%, transparent); }
body.light-mode .tpn-item { color: var(--tp-l-text-2); }
body.light-mode .tpn-item:hover { color: var(--tp-l-text); }
body.light-mode .tpn-item[aria-current="page"] { color: var(--tp-green); }
@media (min-width: 969px) {
    body.light-mode .tpn-bar { background: var(--tp-l-card); }
    body.light-mode .tpn-item:hover { background: color-mix(in srgb, var(--tp-l-text) 6%, transparent); }
}
body.light-mode .tpn-subnav { background: var(--tp-l-input); border-color: color-mix(in srgb, var(--tp-l-text) 10%, transparent); }
body.light-mode .tpn-seg { color: var(--tp-l-text-2); }
body.light-mode .tpn-seg:hover { color: var(--tp-l-text); }
body.light-mode .tpn-seg[aria-selected="true"] { color: var(--tp-green); }

@media (prefers-reduced-motion: reduce) {
    .tpn-item, .tpn-seg, #tpnSheetBackdrop, body.tpn-on .user-menu-dropdown { transition: none !important; }
}

/* ═══ css/feedback.css ═══ */
/* «Sugerir mejora»: modal.
   Movido sin cambios de app/css/inicio.css (2026-10-03). El orden de carga de los <link> importa:
   ver PROYECTO.md → «Estructura de app/». */
/* ═══════════════════════════════════════════════════════════════
   FEEDBACK MODAL
═══════════════════════════════════════════════════════════════ */
.feedback-modal-box {
    width: 480px;
    max-width: 95vw;
    padding: 0;
    overflow: hidden;
}
.feedback-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.07);
}
.feedback-modal-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.feedback-modal-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--tp-l-text, #E6E8EB); }
.feedback-modal-sub   { margin: 3px 0 0; font-size: 0.75rem; color: var(--tp-l-text-2, #9AA0A6); }
.feedback-modal-close {
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; color: var(--tp-l-text-2, #6B7280); font-size: 1rem;
    cursor: pointer; padding: 2px 6px; border-radius: 6px;
    transition: color 0.15s;
}
.feedback-modal-close:hover { color: var(--tp-l-text, #E6E8EB); }
.feedback-modal-context {
    padding: 8px 24px 0;
    font-size: 0.72rem;
    color: var(--tp-l-text-2, #6B7280);
}
.feedback-modal-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    padding: 16px 24px;
    color: var(--tp-l-text, #E6E8EB);
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.6;
}
.feedback-modal-textarea::placeholder { color: var(--tp-l-text-3, #4B5563); }
.feedback-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}
.feedback-char-count { font-size: 0.72rem; color: var(--tp-l-text-2, #6B7280); }
body.light-mode .feedback-modal-header { border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.08); }
body.light-mode .feedback-modal-textarea { color: var(--tp-l-text, #1A1D21); border-bottom-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.07); }
body.light-mode .feedback-modal-textarea::placeholder { color: var(--tp-l-text-2, #9AA0A6); }

/* Caja con fondo propio (la clase .modal-box nunca tuvo estilos: en oscuro se veía el texto sobre la
   página), tope de alto en pantallas bajas y botón «Enviar» verde (no es una acción destructiva). */
#feedbackModal { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); box-sizing: border-box; }
#feedbackModal .feedback-modal-box {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    background: var(--tp-l-raised, #181B20);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 12px;
    box-sizing: border-box;
}
#feedbackModal .feedback-modal-header,
#feedbackModal .feedback-modal-context,
#feedbackModal .feedback-modal-footer { flex: none; }
#feedbackModal .feedback-modal-textarea { flex: 1 1 auto; min-height: 120px; }
#feedbackModal .feedback-modal-close {
    width: 44px; height: 44px; margin: -10px -12px 0 auto; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
#feedbackModal .feedback-modal-close:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
#feedbackModal #feedbackSubmitBtn { background: var(--c-fill); color: var(--c-on-fill); }
#feedbackModal #feedbackSubmitBtn:not(:disabled):hover { filter: brightness(1.08); }
#feedbackModal #feedbackSubmitBtn:disabled { opacity: 0.6; cursor: default; }

/* Admin → Feedback: nueva / leída */
.nq-fb-head-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.nq-fb-head-actions [hidden] { display: none; }
.nq-fb-row.is-read td { color: var(--tp-l-text-2, #9AA0A6); }
.nq-fb-row.is-new td { font-weight: 500; }
.nq-fb-msg { max-width: 320px; word-break: break-word; white-space: pre-wrap; }
.nq-fb-date { color: var(--tp-l-text-2, #9AA0A6); font-size: 0.8rem; white-space: nowrap; }
.nq-fb-pill {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--c-on-fill);
    background: var(--c-fill);
}
.nq-fb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nq-fb-btn {
    min-height: 32px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--tp-l-text, #E6E8EB);
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.14);
}
.nq-fb-del { color: var(--tp-danger); background: rgba(231,76,60,0.1); border-color: rgba(231,76,60,0.25); }

/* ═══ css/partners.css ═══ */
/* Partners: modal «Solicitar ser Partner» (cabecera y botones fijos; solo el contenido hace scroll,
   como en What's New). Las capas abiertas desde Perfil comparten comportamiento en css/capas.css. */
#partnerApplicationModal {
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}
#partnerApplicationModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
#partnerApplicationModal .modal-header {
    flex: none;
    position: relative;
    margin: 0;
    padding: 18px 56px 14px 20px;
    border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.08);
}
#partnerApplicationModal .modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--tp-l-text, #E6E8EB);
}
/* X: solo el icono, área táctil de 44×44 (igual que en What's New) */
#partnerApplicationModal .modal-close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--tp-l-text-2, #9AA0A6);
    cursor: pointer;
}
#partnerApplicationModal .modal-close svg { width: 20px; height: 20px; }
#partnerApplicationModal .modal-close:hover,
#partnerApplicationModal .modal-close:focus-visible { color: var(--tp-l-text, #E6E8EB); }
#partnerApplicationModal .modal-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
#partnerApplicationModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 16px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#partnerApplicationModal .modal-footer {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.08);
}
#partnerApplicationModal .modal-footer button[disabled] { opacity: 0.6; cursor: default; }

/* El textarea con el mismo estilo que los demás campos (componentes.css solo cubre input y select) */
#partnerApplicationModal .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    background: var(--tp-l-card, #121417);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.1);
    border-radius: 8px;
    color: var(--tp-l-text, #E6E8EB);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 96px;
}
#partnerApplicationModal .form-group textarea:focus { outline: none; border-color: var(--tp-l-green, #2ECC71); }
body.light-mode #partnerApplicationModal .form-group textarea {
    background: var(--tp-l-input, #F8FAFC);
    border-color: rgba(var(--tp-l-ink-rgb, 0,0,0), 0.12);
    color: var(--tp-l-text, #1A1D21);
}
body.light-mode #partnerApplicationModal .form-group textarea:focus {
    background: var(--tp-l-card, #FFFFFF);
    border-color: var(--tp-l-green, #2ECC71);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.15);
}

.partner-apply-error {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--tp-l-red, #F87171);
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* Botones del pie con los colores de marca (los .btn-primary / .btn-secondary genéricos son los de Wrapped) */
#partnerApplicationModal .modal-footer button {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font: 600 0.95rem var(--font-ui);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    transform: none;
}
#partnerApplicationModal .modal-footer .btn-primary { background: var(--c-fill); color: var(--c-on-fill); border: none; }
#partnerApplicationModal .modal-footer .btn-primary:not([disabled]):hover { filter: brightness(1.08); }
#partnerApplicationModal .modal-footer .btn-secondary {
    background: transparent;
    color: var(--tp-l-text, #E6E8EB);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), 0.18);
}

/* Ya hay una solicitud pendiente: aviso en lugar del formulario */
.partner-apply-pending {
    margin: 0 0 4px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--tp-l-text, #E6E8EB);
    background: rgba(61, 219, 122, 0.08);
    border: 1px solid rgba(61, 219, 122, 0.25);
}
#applyPartnerFields[hidden], #applyPartnerSubmit[hidden] { display: none; }

/* ═══ css/capas.css ═══ */
/* Capas (modales) abiertas desde Perfil. Comportamiento en js/capas/capas.js.
   - Encima de la barra inferior (--z-header) y por debajo de los avisos flotantes (--z-alert),
     para que un mensaje de error o de «enviado» se siga viendo.
   - Mientras hay una abierta, la página de detrás queda fija (en iOS overflow:hidden en body no basta)
     y sin «tirar para recargar». */
#partnerApplicationModal,
#feedbackModal,
#resetModal { z-index: calc(var(--z-header) + 1); }

html.tp-capa-abierta,
html.tp-capa-abierta body {
    overflow: hidden;
    overscroll-behavior: none;
}
html.tp-capa-abierta body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

/* ═══ css/avisos.css ═══ */
/* Panel admin → Métricas: avisos por email (js/avisos/avisos.js) */
.nq-avisos {
    background: var(--admin-card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--admin-border, rgba(255,255,255,0.08));
    border-radius: 1rem;
    padding: 0.25rem 1.25rem;
    margin-bottom: 1.5rem;
}
.nq-aviso-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 0.75rem 0;
    cursor: pointer;
}
.nq-aviso-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nq-aviso-text strong { font-size: 0.9rem; color: var(--admin-text, var(--tp-l-text, #E6E8EB)); }
.nq-aviso-sub { font-size: 0.78rem; color: var(--tp-l-text-2, #9AA0A6); }
.nq-aviso-sub.is-error { color: var(--tp-l-red, #F87171); }
/* Interruptor: casilla nativa con aspecto de switch (sigue siendo accesible con teclado) */
.nq-switch {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    width: 46px;
    height: 26px;
    margin: 0;
    border-radius: 13px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.18);
    cursor: pointer;
    transition: background 0.15s;
}
.nq-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tp-l-card, #FFFFFF);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.15s;
}
.nq-switch:checked { background: var(--c-fill); }
.nq-switch:checked::after { transform: translateX(20px); }
.nq-switch:focus-visible { outline: 2px solid var(--tp-l-green, #3DDB7A); outline-offset: 2px; }
.nq-switch:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .nq-switch, .nq-switch::after { transition: none; } }
.nq-aviso-row + .nq-aviso-row { border-top: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06); }

/* ═══ css/metricas.css ═══ */
/* Métricas del admin (js/metricas/admin.js): usuarios por plan, MRR, ingresos y comisiones */
.tp-met { grid-column: 1 / -1; display: block; }
.tp-met-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-l-text-2, #9AA0A6);
    margin: 22px 0 10px;
}
.tp-met-title:first-child { margin-top: 0; }
.tp-met-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tp-met-card {
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), 0.04);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
}
.tp-met-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tp-l-text-2, #9AA0A6); margin-bottom: 6px; }
.tp-met-value { font-size: 22px; font-weight: 700; color: var(--tp-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tp-met-note { font-size: 11px; color: var(--tp-l-text-2, #9AA0A6); margin-top: 4px; line-height: 1.4; }
.tp-met-card.is-main { border-color: rgba(61, 219, 122, 0.35); }
.tp-met-card.is-main .tp-met-value { color: var(--tp-green); }
.tp-met-card.is-neg .tp-met-value { color: var(--tp-danger); }
.tp-met-card.is-gold .tp-met-value { color: var(--tp-gold); }
.tp-met-warn, .tp-met-error { font-size: 12px; margin: 10px 0 0; color: var(--tp-danger); }
@media (max-width: 720px) {
    .tp-met-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-met-value { font-size: 19px; }
}

/* ═══ css/planes.css ═══ */
/* Planes: etiqueta PRO en lo que es solo Pro (de momento, la pestaña «Importar» para Free). */
.data-tab-btn.tp-pro-tag::after {
    content: 'PRO';
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(61,219,122,0.3);
    background: rgba(61,219,122,0.12);
    color: var(--tp-green);
    font-size: 9px;
    letter-spacing: 0.12em;
    vertical-align: 2px;
}

/* ─── Vista previa de Análisis para Free (js/planes/vista-previa.js) ─────────────────────────────
   Aviso arriba de Dinero, Embudo y Prop firms, y la etiqueta «EJEMPLO» en cada tarjeta de gráfico o tabla.
   Colores: tokens o color-mix sobre --c-green (sigue al tema). */
.tp-preview-banner {
    display: grid; gap: .45rem; margin: 0 0 1.25rem; padding: 1.1rem 1.25rem 1.15rem; border-radius: 14px;
    background: var(--tp-l-card, #181B20);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--c-green) 13%, transparent), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--c-green) 40%, transparent);
}
.tp-preview-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tp-preview-tags .user-menu-pro-badge { margin-left: 0; }
.tp-preview-tag, .tp-preview .table-container::before {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tp-l-text-2, #9AA0A6);
    background: var(--tp-l-raised, #22262D); border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .14);
}
.tp-preview-title { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 800; color: var(--tp-l-text, #E6E8EB); }
.tp-preview-text { margin: 0; max-width: 68ch; font-size: .9rem; line-height: 1.5; color: var(--tp-l-text-2, #9AA0A6); }
.tp-preview-actions { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-top: .35rem; }
.btn.tp-preview-btn { width: auto; padding: .65rem 1.2rem; background: var(--c-fill); color: var(--c-on-fill); text-transform: none; letter-spacing: 0; font-size: .9rem; }
.btn.tp-preview-btn:hover { filter: brightness(1.06); }
.tp-preview-note { font-size: .78rem; color: var(--tp-l-text-2, #9AA0A6); }
/* «EJEMPLO» arriba a la izquierda de cada tarjeta, en un hueco propio: no tapa cabeceras ni botones
   (.table-container lleva overflow-x: auto, así que no puede salirse del borde) */
.tp-preview .table-container { position: relative; padding-top: 2.4rem; }
.tp-preview .table-container::before { content: var(--tp-ex-label, "EJEMPLO"); position: absolute; top: .8rem; left: 1.5rem; pointer-events: none; }

/* ─── Comparativa Free / Pro en la pantalla de planes (js/planes/plan.js) ────────────────────────
   La pantalla de planes es zona oscura en los dos temas: los --tp-l-* caen en su valor oscuro.
   Todo con .plan-compare delante: tema-claro.css pinta th y td con body.light-mode (más específico). */
.plan-compare { margin: 0 auto 1.5rem; max-width: 496px; text-align: left; }
.plan-compare-title { margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-l-text-2, #9AA0A6); text-align: center; }
.plan-compare .plan-compare-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.plan-compare .plan-compare-table th, .plan-compare .plan-compare-table td { padding: .55rem .5rem; border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .08); vertical-align: middle; }
.plan-compare .plan-compare-table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-l-text-2, #9AA0A6); text-align: center; }
.plan-compare .plan-compare-table thead th:last-child { color: var(--tp-green); }
.plan-compare .plan-compare-table tbody th { font-size: inherit; font-weight: 600; text-transform: none; color: var(--tp-text); text-align: left; }
.plan-compare .plan-compare-table tr:hover { background: transparent; }
.plan-compare .plan-compare-table td { width: 26%; text-align: center; color: var(--tp-l-text-2, #9AA0A6); }
.plan-compare .plan-compare-table tr:last-child th, .plan-compare .plan-compare-table tr:last-child td { border-bottom: 0; }
.plan-compare .plan-yes { color: var(--tp-green); font-weight: 800; }
.plan-compare .plan-no { color: var(--tp-l-text-2, #9AA0A6); }
.plan-compare .plan-txt--pro { color: var(--tp-text); font-weight: 600; }
@media (max-width: 480px) { .plan-compare .plan-compare-table { font-size: .8rem; } .plan-compare .plan-compare-table th, .plan-compare .plan-compare-table td { padding: .5rem .3rem; } }

/* ═══ css/graficos.css ═══ */
/* Gráficos (Fase 2): contenedores de ECharts, leyendas, botones de periodo, embudo, tabla de firmas y chips.
   Va al final de la cascada. Colores: tokens o var(--tp-l-*, <oscuro>), nunca fijos sin versión clara. */

/* Cabecera de una tarjeta de gráfico: título a la izquierda, controles a la derecha */
.tpg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tpg-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--tp-l-text, #E6E8EB); display: flex; align-items: center; gap: .35rem; }
.tpg-sub { margin: .25rem 0 0; font-size: .82rem; color: var(--tp-l-text-2, #9AA0A6); line-height: 1.45; }
.tpg-q { font-weight: 400; }

/* El gráfico: ancho completo (antes 400 px como máximo) y alto fijo */
.tpg-box { width: 100%; height: 300px; position: relative; }
.tpg-box--pnl { height: 400px; }
.tpg-box--sm { height: 240px; }
.tpg-box--gauge { height: 230px; max-width: 300px; margin: 0 auto; }
@media (max-width: 600px) {
    .tpg-box { height: 260px; }
    .tpg-box--pnl { height: 360px; }
    .tpg-box--sm { height: 220px; }
}
.tpg-empty, .tpg-fallback { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; padding: 1.5rem; text-align: center; color: var(--tp-l-text-2, #9AA0A6); font-size: .9rem; border: 1px dashed rgba(var(--tp-l-ink-rgb, 230,232,235), .14); border-radius: 10px; }

/* Leyenda en HTML (texto en color de texto; el color solo en la marca) */
.tpg-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0 0 .7rem; font-size: .8rem; color: var(--tp-l-text-2, #9AA0A6); }
.tpg-key { display: inline-flex; align-items: center; gap: .4rem; }
.tpg-key b { color: var(--tp-l-text, #E6E8EB); }
.tpg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; margin-right: .1rem; }
.tpg-key-line { display: inline-block; width: 16px; height: 2px; background: var(--tp-l-text, #E6E8EB); }
.tpg-key-tri { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--c-green); }
.tpg-key-tick { display: inline-block; width: 3px; height: 12px; border-radius: 1px; background: var(--c-red); }
.tpg-key-sw { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--c-green); }
.tpg-key-sw--prev { border-top: 2px dashed var(--tp-l-text-3, #6B7380); }

/* Botones de periodo (1M 3M 6M YTD 1A Todo) */
.tpg-range { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: rgba(var(--tp-l-ink-rgb, 230,232,235), .05); border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .08); }
.tpg-range button { min-width: 38px; min-height: 30px; padding: .25rem .55rem; border: 0; border-radius: 7px; background: transparent; color: var(--tp-l-text-2, #9AA0A6); font: 700 .75rem/1 var(--font-ui); cursor: pointer; }
.tpg-range button:hover { color: var(--tp-l-text, #E6E8EB); }
.tpg-range button[aria-pressed="true"] { background: var(--tp-l-card, #2A2F37); color: var(--tp-l-text, #E6E8EB); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tpg-range button:focus-visible, .tpg-chip:focus-visible, .tpg-linkbtn:focus-visible, .tpg-ftable th button:focus-visible, .tpg-ftable tbody tr:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }
@media (pointer: coarse) { .tpg-range button { min-height: 36px; } }

.tpg-hint { font-size: .75rem; color: var(--tp-l-text-3, #6B7380); margin: .45rem 0 0; }
.tpg-note { font-size: .82rem; color: var(--tp-l-text-2, #9AA0A6); margin: .9rem 0 0; line-height: 1.5; }
.tpg-note b { color: var(--tp-l-text, #E6E8EB); }
.tpg-muted { color: var(--tp-l-text-2, #9AA0A6); }
.up { color: var(--c-green); }
.down { color: var(--c-red); }

/* Ver como tabla */
.tpg-linkbtn { border: 0; background: none; padding: .35rem 0; margin-top: .5rem; color: var(--tp-l-text-2, #9AA0A6); font: 600 .78rem var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tpg-linkbtn:hover { color: var(--tp-l-text, #E6E8EB); }
.tpg-table { width: 100%; margin-top: .6rem; font-size: .82rem; border-collapse: collapse; }
.tpg-table th, .tpg-table td { padding: .4rem .5rem; border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .07); text-align: left; }
.tpg-table .num, .tpg-ftable .num { text-align: right; font-variant-numeric: tabular-nums; }
.tpg-table[hidden] { display: none; }

/* Dos gráficos lado a lado en escritorio */
.tpg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.tpg-grid > .table-container { margin-bottom: 0; min-width: 0; }
.tpg-grid { margin-bottom: 1.5rem; }
@media (max-width: 968px) { .tpg-grid { grid-template-columns: 1fr; } }

/* Chips de firma (filtro del embudo) */
.tpg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tpg-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .14); background: transparent; color: var(--tp-l-text-2, #9AA0A6); font: 600 .78rem var(--font-ui); cursor: pointer; }
.tpg-chip:hover { color: var(--tp-l-text, #E6E8EB); }
.tpg-chip[aria-pressed="true"] { background: rgba(var(--tp-l-ink-rgb, 230,232,235), .08); border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), .3); color: var(--tp-l-text, #E6E8EB); }
.tpg-chip .tpg-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Embudo */
.tpg-funnel { display: grid; gap: .55rem; }
.tpg-fstep { display: grid; grid-template-columns: minmax(118px, 168px) 1fr 92px; align-items: center; gap: .75rem; }
.tpg-flab { font-size: .85rem; font-weight: 700; color: var(--tp-l-text, #E6E8EB); line-height: 1.2; }
.tpg-flab small { display: block; font-weight: 500; font-size: .74rem; color: var(--tp-l-text-2, #9AA0A6); margin-top: .15rem; }
.tpg-fbar { height: 30px; border-radius: 8px; background: rgba(var(--tp-l-ink-rgb, 230,232,235), .05); overflow: hidden; }
.tpg-fbar > span { display: flex; align-items: center; height: 100%; border-radius: 8px; padding-left: .6rem; transition: width .35s ease; }
.tpg-fbar b { font-size: .82rem; font-weight: 800; color: var(--tp-l-on-danger, #0B0E11); font-variant-numeric: tabular-nums; }
.tpg-frate { font-size: .72rem; color: var(--tp-l-text-2, #9AA0A6); text-align: right; line-height: 1.2; }
.tpg-frate b { display: block; font-size: 1rem; color: var(--tp-l-text, #E6E8EB); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .tpg-fstep { grid-template-columns: 1fr 64px; grid-template-areas: "lab rate" "bar bar"; gap: .3rem .5rem; }
    .tpg-flab { grid-area: lab; } .tpg-fbar { grid-area: bar; height: 24px; } .tpg-frate { grid-area: rate; }
}

/* Tabla de firmas */
.tpg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; }
.tpg-ftable { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .84rem; }
.tpg-ftable th { padding: 0; border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .12); white-space: nowrap; }
.tpg-ftable th button { width: 100%; padding: .55rem .5rem; border: 0; background: none; color: var(--tp-l-text-2, #9AA0A6); font: 700 .72rem var(--font-ui); text-transform: uppercase; letter-spacing: .04em; text-align: inherit; cursor: pointer; }
.tpg-ftable th.num button { text-align: right; }
.tpg-ftable th[aria-sort="ascending"] button::after { content: ' ▲'; }
.tpg-ftable th[aria-sort="descending"] button::after { content: ' ▼'; }
.tpg-ftable th[aria-sort="ascending"] button, .tpg-ftable th[aria-sort="descending"] button { color: var(--tp-l-text, #E6E8EB); }
.tpg-ftable td { padding: .6rem .5rem; border-bottom: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .06); color: var(--tp-l-text, #E6E8EB); white-space: nowrap; }
.tpg-ftable tbody tr:not(.tot) { cursor: pointer; }
.tpg-ftable tbody tr:not(.tot):hover td { background: rgba(var(--tp-l-ink-rgb, 230,232,235), .035); }
.tpg-ftable tbody tr.sel td { background: rgba(var(--tp-l-ink-rgb, 230,232,235), .06); }
.tpg-ftable tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--tp-l-text, #E6E8EB); }
.tpg-ftable tr.tot td { border-bottom: 0; border-top: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .12); }
.tpg-firm { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.tpg-rate { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tpg-rate small { color: var(--tp-l-text-2, #9AA0A6); font-size: .72rem; }
.tpg-rate-b { width: 64px; height: 4px; border-radius: 2px; background: rgba(var(--tp-l-ink-rgb, 230,232,235), .1); overflow: hidden; }
.tpg-rate-b > span { display: block; height: 100%; background: var(--tp-l-text-2, #9AA0A6); border-radius: 2px; }
.tpg-roi { display: grid; grid-template-columns: 40px 40px auto; align-items: center; justify-content: end; gap: 0; }
.tpg-roi .neg, .tpg-roi .pos { height: 8px; display: flex; }
.tpg-roi .neg { justify-content: flex-end; border-right: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .3); }
.tpg-roi .neg span { background: var(--c-red); border-radius: 3px 0 0 3px; }
.tpg-roi .pos span { background: var(--c-green); border-radius: 0 3px 3px 0; }
.tpg-roi em { font-style: normal; font-weight: 700; min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.tpg-roi em.up { color: var(--c-green); } .tpg-roi em.down { color: var(--c-red); }

/* Nombre de firma en la cabecera de Prop Firm: texto normal con un punto de su color */
.pf-firm-name .tpg-dot { width: .55em; height: .55em; border-radius: 50%; vertical-align: .18em; margin-right: .3em; }

/* Medidor de autofinanciación con ECharts */
.tpg-gauge { position: relative; }
.tpg-gauge .gauge-text { position: absolute; left: 0; right: 0; top: 56%; transform: translateY(-50%); text-align: center; }
.tpg-gauge .gauge-percentage { font-size: 2.6rem; line-height: 1.1; }

/* Recorrido en texto (solo móvil; en escritorio las etiquetas van en el gráfico) */
.tpg-sk-list { list-style: none; margin: .75rem 0 0; padding: 0; display: none; font-size: .8rem; color: var(--tp-l-text-2, #9AA0A6); line-height: 1.5; }
.tpg-sk-list li + li { margin-top: .35rem; }
.tpg-sk-list b { color: var(--tp-l-text, #E6E8EB); }
@media (max-width: 600px) { .tpg-sk-list { display: block; } }

/* Prop firms: cabecera del detalle de una firma (debajo de la tabla y los gráficos) */
.pf-detail { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin: .5rem 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .1); scroll-margin-top: 80px; }
.pf-detail-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--tp-l-text, #E6E8EB); }
.pf-detail-note { font-size: .8rem; color: var(--tp-l-gold, #F39C12); }

/* Modo claro: los KPI de beneficio y pérdida conservan su color (tema-claro.css los ponía todos en color de texto,
   y un ROI negativo salía igual que uno positivo). */
body.light-mode .kpi-value.success { color: var(--tp-l-green, #147A3A); }
body.light-mode .kpi-value.danger  { color: var(--tp-l-red, #C62828); }
body.light-mode .kpi-value.warning { color: var(--tp-l-gold, #A65A00); }

/* ═══ css/explica.css ═══ */
/* Análisis: botón ⓘ con la cuenta hecha y glosario (Fase 2). Va al final de la cascada. */
.tpx-btn {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 16px; height: 16px; margin-left: 6px; padding: 0; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .3); background: rgba(var(--tp-l-ink-rgb, 230,232,235), .08);
    color: var(--tp-l-text-2, #9AA0A6); font: italic 800 10px/1 Georgia, 'Times New Roman', serif; cursor: pointer; vertical-align: middle; text-transform: none;
}
/* Zona táctil de 32 px sin cambiar el tamaño visible */
.tpx-btn::before { content: ''; position: absolute; inset: -8px; }
.tpx-btn:hover, .tpx-btn[aria-expanded="true"] { color: var(--tp-l-text, #E6E8EB); border-color: var(--tp-l-text-2, #9AA0A6); }
.tpx-btn:focus-visible, .tpx-glossbtn:focus-visible, .tpx-gloss:focus-visible, .tpx-x:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }

.tpx-pop {
    position: fixed; z-index: var(--z-modal, 20000); width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
    background: var(--tp-l-raised, #1E2228); color: var(--tp-l-text, #E6E8EB);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .14); border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.45); padding: .9rem 1rem 1rem; font-size: .84rem; line-height: 1.5; text-align: left;
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
body.light-mode .tpx-pop { box-shadow: 0 12px 32px rgba(15,23,42,.16); }
.tpx-pop--gloss { width: min(480px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 24px)); }
.tpx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.tpx-head h4 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--tp-l-text, #E6E8EB); }
.tpx-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px 0 0; border: 0; border-radius: 8px; background: none; color: var(--tp-l-text-2, #9AA0A6); cursor: pointer; flex-shrink: 0; }
.tpx-x:hover { color: var(--tp-l-text, #E6E8EB); background: rgba(var(--tp-l-ink-rgb, 230,232,235), .06); }
.tpx-sec + .tpx-sec { margin-top: .65rem; }
.tpx-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-l-text-2, #9AA0A6); margin-bottom: .15rem; }
.tpx-calc { padding: .45rem .6rem; border-radius: 8px; background: rgba(var(--tp-l-ink-rgb, 230,232,235), .06); font-variant-numeric: tabular-nums; }
.tpx-calc b { color: var(--tp-l-text, #E6E8EB); }
.tpx-muted { color: var(--tp-l-text-2, #9AA0A6); }
.tpx-gloss { display: inline-block; margin-top: .75rem; padding: .3rem 0; border: 0; background: none; color: var(--tp-l-text-2, #9AA0A6); font: 700 .78rem var(--font-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tpx-gloss:hover { color: var(--tp-l-text, #E6E8EB); }
.tpx-dl { margin: 0; }
.tpx-dl dt { font-weight: 800; margin-top: .7rem; color: var(--tp-l-text, #E6E8EB); }
.tpx-dl dt:first-child { margin-top: 0; }
.tpx-dl dd { margin: .1rem 0 0; color: var(--tp-l-text-2, #9AA0A6); }

/* Botón «Glosario» en la cabecera de las vistas de Análisis */
.tpx-glossbtn {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; margin-top: .6rem; padding: .3rem .8rem; border-radius: 999px;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .14); background: transparent; color: var(--tp-l-text-2, #9AA0A6); font: 600 .78rem var(--font-ui); cursor: pointer;
}
.tpx-glossbtn:hover { color: var(--tp-l-text, #E6E8EB); border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), .3); }

/* ═══ css/inicio-resumen.css ═══ */
/* Inicio: resumen del negocio y «＋ Añadir» (js/inicio/resumen.js). Va al final de la cascada.
   Colores: tokens o var(--tp-l-*, <oscuro>). */

.home-summary { margin-bottom: 1.25rem; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .25rem 0 1.1rem; }
.home-title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: var(--tp-l-text, #E6E8EB); }
.home-sub { margin: .25rem 0 0; font-size: .85rem; color: var(--tp-l-text-2, #9AA0A6); max-width: 60ch; line-height: 1.45; }
.btn.home-add-btn { width: auto; padding: .7rem 1.2rem; background: var(--c-fill); color: var(--c-on-fill); text-transform: none; font-size: .9rem; letter-spacing: 0; }
.btn.home-add-btn:hover { filter: brightness(1.06); }

/* Cuatro cifras con su evolución */
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .home-tiles { gap: .65rem; } }
.home-tile { position: relative; overflow: hidden; padding: 1rem 1rem .5rem; border-radius: 12px; background: var(--tp-l-card, #181B20); border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .06); min-width: 0; }
.home-tile-l { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tp-l-text-2, #9AA0A6); }
.home-tile-v { margin: .35rem 0 .2rem; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tp-l-text, #E6E8EB); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-tile-v.up { color: var(--c-green); } .home-tile-v.down { color: var(--c-red); }
@media (max-width: 480px) { .home-tile { padding: .8rem .8rem .4rem; } .home-tile-v { font-size: 1.25rem; } }
.home-delta { display: block; min-height: 1.2em; font-size: .74rem; color: var(--tp-l-text-2, #9AA0A6); line-height: 1.35; }
.home-delta.up { color: var(--c-green); } .home-delta.down { color: var(--c-red); }
.home-spark { display: block; width: calc(100% + 2rem); height: 36px; margin: .4rem -1rem 0; }
.home-spark .a { opacity: .12; fill: currentColor; } .home-spark .l { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; } .home-spark .p { fill: currentColor; }
.home-spark--up { color: var(--c-green); } .home-spark--down { color: var(--c-red); } .home-spark--ink { color: var(--tp-l-text-2, #9AA0A6); }

/* Curva y cuentas en curso */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; }
.home-grid > .table-container { margin-bottom: 0; }
@media (max-width: 968px) { .home-grid { grid-template-columns: 1fr; } }
.home-curve-card .tpg-box { cursor: pointer; }
.home-more { margin-top: 0; white-space: nowrap; }
.home-ip { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.home-ip-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: var(--tp-l-text, #E6E8EB); }
.home-ip-row .tp-pill { margin-left: .35rem; vertical-align: 1px; }
.home-ip-d { font-size: .75rem; color: var(--tp-l-text-2, #9AA0A6); font-variant-numeric: tabular-nums; }
.home-ip-bar { height: 6px; margin-top: .35rem; border-radius: 3px; background: rgba(var(--tp-l-ink-rgb, 230,232,235), .08); overflow: hidden; }
.home-ip-bar > span { display: block; height: 100%; border-radius: 3px; }
.home-ip-bar.over { box-shadow: inset 0 0 0 1px var(--c-amber); }

/* «＋ Añadir»: los tres formularios plegados */
.home-add { margin: 1.25rem 0 0; scroll-margin-top: 80px; }
.home-add-toggle { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: 12px; cursor: pointer; text-align: left;
    border: 1px dashed rgba(var(--tp-l-ink-rgb, 230,232,235), .22); background: transparent; color: var(--tp-l-text, #E6E8EB); font: 700 .9rem var(--font-ui); }
.home-add-toggle:hover { border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), .4); background: rgba(var(--tp-l-ink-rgb, 230,232,235), .03); }
.home-add-toggle:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }
.home-add-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c-fill); color: var(--c-on-fill); font-size: 1rem; flex-shrink: 0; }
.home-add-chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; opacity: .7; }
.home-add[data-open="true"] .home-add-chev { transform: rotate(-135deg); }
.home-add[data-open="true"] .home-add-toggle { border-style: solid; }
.home-add > .grid { margin-top: 1rem; }
.home-add[data-open="false"] > .grid { display: none; }
@media (prefers-reduced-motion: reduce) { .home-add-chev { transition: none; } }

/* ═══ css/max-allocation.css ═══ */
/* Análisis → Prop firms: editor del max allocation (js/analisis/max-allocation.js).
   Colores: tokens o var(--tp-l-*, <oscuro>). */

.tpg-linkbtn.tpa-edit { margin-top: 0; min-height: 36px; padding: .4rem .9rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .16); color: var(--tp-l-text, #E6E8EB); font-size: .8rem; }
.tpg-linkbtn.tpa-edit:hover { border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), .32); }

.tpa-editor { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .08); display: grid; gap: .75rem; }
.tpa-intro { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--tp-l-text-2, #9AA0A6); }
.tpa-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); grid-template-areas: "firm field" "hint reset"; gap: .25rem .75rem; align-items: center; }
.tpa-firm { grid-area: firm; display: flex; align-items: center; gap: .1rem; min-width: 0; font-weight: 700; font-size: .88rem; color: var(--tp-l-text, #E6E8EB); overflow-wrap: anywhere; }
.tpa-field { grid-area: field; position: relative; }
.tpa-cur { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--tp-l-text-2, #9AA0A6); pointer-events: none; }
.tpa-input { width: 100%; min-height: 40px; padding: .5rem .7rem .5rem 1.45rem; border-radius: 8px; font: 600 .9rem var(--font-ui); font-variant-numeric: tabular-nums; text-align: right;
    color: var(--tp-l-text, #E6E8EB); background: var(--tp-l-card, #0F1215); border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .16); }
.tpa-input::placeholder { color: var(--tp-l-text-2, #9AA0A6); font-weight: 500; }
.tpa-input:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 1px; }
.tpa-input[aria-invalid="true"] { border-color: var(--c-red); }
.tpa-hint { grid-area: hint; font-size: .74rem; color: var(--tp-l-text-2, #9AA0A6); }
.tpa-reset { grid-area: reset; justify-self: end; border: 0; background: none; padding: .3rem 0; min-height: 32px; cursor: pointer;
    color: var(--tp-l-text-2, #9AA0A6); font: 600 .74rem var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
.tpa-reset:hover { color: var(--tp-l-text, #E6E8EB); }
.tpa-reset:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }
.tpa-err { margin: 0; font-size: .82rem; font-weight: 600; color: var(--c-red); }
.tpa-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.tpa-btn { min-height: 40px; padding: .5rem 1.1rem; border-radius: 8px; cursor: pointer; font: 700 .85rem var(--font-ui);
    color: var(--tp-l-text, #E6E8EB); background: transparent; border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .2); }
.tpa-btn--save { background: var(--c-fill); color: var(--c-on-fill); border-color: transparent; }
.tpa-btn:disabled { opacity: .6; cursor: default; }
.tpa-btn:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }
@media (max-width: 480px) { .tpa-row { grid-template-columns: minmax(0, 1fr) minmax(0, 128px); } }

/* ═══ css/tour.css ═══ */
/* Tour de bienvenida (js/tour/tour.js). Foco con «agujero» (box-shadow) sobre lo que se explica y una tarjeta.
   En ≤600 px la tarjeta va abajo, encima de la barra de navegación (--tpn-offset). Colores: tokens o var(--tp-l-*, <oscuro>). */
.tpt { position: fixed; inset: 0; z-index: calc(var(--z-modal, 20000) + 5); pointer-events: none; }
.tpt-block { position: fixed; inset: 0; pointer-events: auto; }
.tpt--center .tpt-block { background: rgba(3, 7, 9, .66); }
.tpt-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(3, 7, 9, .66); outline: 2px solid var(--c-fill); outline-offset: 2px;
    pointer-events: none; transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease; }
.tpt--center .tpt-spot { display: none; }
.tpt-card { position: fixed; pointer-events: auto; width: min(340px, calc(100vw - 24px)); display: grid; gap: .5rem; padding: 1rem 1rem .9rem;
    border-radius: 16px; background: var(--tp-l-card, #181B20); color: var(--tp-l-text, #E6E8EB);
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .14); box-shadow: 0 18px 48px rgba(0, 0, 0, .45); outline: none; }
.tpt--center .tpt-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); }
.tpt--sheet .tpt-card { left: 12px !important; right: 12px; top: auto !important; width: auto; bottom: calc(var(--tpn-offset, 0px) + 12px); }
.tpt-x { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
    background: none; color: var(--tp-l-text-2, #9AA0A6); cursor: pointer; }
.tpt-x:hover { color: var(--tp-l-text, #E6E8EB); }
.tpt-step { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tp-green); }
.tpt-title { margin: 0; padding-right: 2rem; font-size: 1.08rem; font-weight: 800; line-height: 1.25; color: var(--tp-l-text, #E6E8EB); }
.tpt-text { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--tp-l-text-2, #9AA0A6); }
.tpt-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.tpt-dots { display: flex; gap: 4px; }
.tpt-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(var(--tp-l-ink-rgb, 230,232,235), .2); }
.tpt-dots i.on { width: 16px; background: var(--tp-green); }
.tpt-btns { display: flex; gap: .4rem; margin-left: auto; }
.tpt-btn { min-height: 40px; padding: .45rem .9rem; border-radius: 10px; cursor: pointer; font: 700 .85rem var(--font-ui);
    color: var(--tp-l-text, #E6E8EB); background: transparent; border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .18); }
.tpt-btn--quiet { border-color: transparent; color: var(--tp-l-text-2, #9AA0A6); }
.tpt-btn--pri { background: var(--c-fill); color: var(--c-on-fill); border-color: transparent; }
.tpt-btn[hidden] { display: none; }
.tpt-btn:focus-visible, .tpt-x:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tpt-spot { transition: none; } }

/* ═══ css/cabeceras.css ═══ */
/* Cabeceras de vista compactas (2026-10-12). El nombre de la vista ya está en el selector de arriba (#tpnSubnav):
   en Análisis queda una sola fila con el periodo, el glosario y el filtro de año; en Cuentas, nada visible.
   Antes: título grande + subtítulo + glosario + filtro apilados (unos 300 px en móvil).
   Gana a .view-header / .time-filter de componentes.css y responsive.css por especificidad (.view-header.view-bar). */
.view-header.view-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap;
    text-align: left; margin: 0 0 1.1rem; padding: 0 0 .85rem;
}
.view-bar .view-bar-period { margin: 0; flex: 1 1 auto; min-width: 0; font-size: .85rem; line-height: 1.35; text-align: left; }
.view-bar .view-bar-actions { display: flex; align-items: center; gap: .5rem; flex: none; margin-left: auto; }
.view-bar .time-filter { position: static; margin: 0; }
.view-bar .time-filter select { min-height: 36px; padding: .35rem .7rem; font-size: .88rem; }
.view-bar .tpx-glossbtn { margin: 0; min-height: 36px; }
@media (max-width: 480px) {
    .view-header.view-bar { margin-bottom: .9rem; padding-bottom: .7rem; }
    .view-bar .view-bar-period { font-size: .8rem; }
}

/* Legacy → Hall of Fame: misma idea, título más pequeño y menos aire (el selector ya dice Certificates) */
.hof-header { margin-bottom: 1.25rem; }
.hof-header h2 { font-size: 1.35rem; margin-bottom: .2rem; }
.hof-header p { font-size: .82rem; }
@media (max-width: 480px) { .hof-header h2 { font-size: 1.15rem; } }

/* ═══ css/linea-vida.css ═══ */
/* Cuentas → línea de vida (js/cuentas/linea-vida.js). Va entre el estado de las cuentas y «Mis cuentas». */
.tpl-card { margin-bottom: 1.5rem; }
.tpl-box { width: 100%; min-height: 180px; }
.tpl-dot-pay { border-radius: 50%; background: var(--tp-l-text, #E6E8EB); box-shadow: 0 0 0 1.5px var(--tp-l-card, #181B20); }
.tpl-more { display: block; }
/* Free: franja de «Datos de ejemplo» con el botón de planes */
.tpl-demo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 .8rem; padding: .65rem .8rem; border-radius: 10px;
    background: rgba(var(--tp-l-ink-rgb, 255,255,255), .04); border: 1px solid rgba(var(--tp-l-ink-rgb, 255,255,255), .08);
    font-size: .85rem; color: var(--tp-l-text-2, #9AA0A6); }
.tpl-demo .btn.tp-preview-btn { margin-left: auto; padding: .5rem 1rem; font-size: .85rem; }
.tpl-card .tpg-head h3 .user-menu-pro-badge { margin-left: .2rem; }
@media (max-width: 600px) {
    .tpl-demo .btn.tp-preview-btn { margin-left: 0; }
}

/* ═══ css/extras.css ═══ */
/* Cuentas: pregunta del reembolso del fee y del motivo de suspensión (js/cuentas/extras.js). Va abajo, encima de la
   barra inferior, y no bloquea la página. Colores solo de tokens (siguen al tema). */
.tpq-ask {
    position: fixed; z-index: var(--z-fab);
    right: 16px; bottom: calc(var(--tpn-offset, 0px) + 16px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 16px 16px 12px; border-radius: 16px;
    background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
    display: grid; gap: 8px;
    animation: tpqIn .22s ease-out;
}
body.light-mode .tpq-ask { box-shadow: 0 14px 36px rgba(10, 15, 18, .16); }
/* Con «Deshacer última acción» abajo (8 s después de guardar), la pregunta sube para no quedar tapada */
.tpq-ask { transition: bottom .2s ease; }
body:has(> #undoButton) .tpq-ask { bottom: max(calc(var(--tpn-offset, 0px) + 16px + env(safe-area-inset-bottom, 0px)), calc(96px + env(safe-area-inset-bottom, 0px))); }
@keyframes tpqIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tpq-ask { animation: none; } }
@media (max-width: 600px) { .tpq-ask { right: 16px; left: 16px; width: auto; } }

.tpq-x {
    position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none; border-radius: 10px;
    color: var(--c-muted); display: grid; place-items: center; cursor: pointer;
}
.tpq-x:hover { color: var(--c-text); }
.tpq-acc { font-size: .78rem; font-weight: 700; color: var(--c-muted); padding-right: 40px; }
.tpq-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; padding-right: 28px; }
.tpq-sub { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--c-muted); }
.tpq-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tpq-chip {
    min-height: 40px; padding: 0 14px; border-radius: var(--r-pill, 999px);
    border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text);
    font: 600 .85rem var(--font-ui, inherit); cursor: pointer;
}
.tpq-chip:hover { border-color: var(--c-green); }
.tpq-chip--yes { background: var(--c-fill); color: var(--c-on-fill); border-color: transparent; }
.tpq-chip--yes:hover { filter: brightness(1.06); }
.tpq-chip[aria-busy="true"] { opacity: .7; }
.tpq-other { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpq-label { font-size: .82rem; color: var(--c-muted); }
.tpq-amount { width: 130px; }
.tpq-foot { display: flex; justify-content: flex-end; }
.tpq-later { min-height: 40px; border: 0; background: none; color: var(--c-muted); font: 600 .82rem var(--font-ui, inherit); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tpq-later:hover { color: var(--c-text); }
.tpq-err { margin: 0; font-size: .8rem; color: var(--c-red); }
.tpq-x:focus-visible, .tpq-chip:focus-visible, .tpq-later:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }

/* Leyenda del cashflow: fees devueltos (verde claro, como su barra) */
.tpg-dot.tpq-dot-ref { background: var(--c-green); opacity: .45; }

/* ═══ css/firmas-propias.css ═══ */
/* Prop firms propias (js/firmas/propias.js): campo «Nombre de la prop firm» en Inicio → Nuevo challenge y
   «Cambiar nombre» en Prop firms. Colores: tokens o var(--tp-l-*, <oscuro>). */

.tpf-other[hidden] { display: none; }
.tpf-hint { margin: .4rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--tp-l-text-2, #9AA0A6); }
.tpf-err { margin: .4rem 0 0; font-size: .82rem; font-weight: 600; color: var(--c-red); }
.tpf-err[hidden] { display: none; }
#createPropFirmOther[aria-invalid="true"] { border-color: var(--c-red); }

.tpg-linkbtn.tpf-rename-btn { margin-top: 0; min-height: 36px; padding: .4rem .9rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    border: 1px solid rgba(var(--tp-l-ink-rgb, 230,232,235), .16); color: var(--tp-l-text, #E6E8EB); font-size: .8rem; }
.tpg-linkbtn.tpf-rename-btn:hover { border-color: rgba(var(--tp-l-ink-rgb, 230,232,235), .32); }
.tpg-linkbtn.tpf-rename-btn:focus-visible { outline: 2px solid var(--tp-l-focus, #4A9EFF); outline-offset: 2px; }

.tpf-rename { flex: 1 1 100%; display: grid; gap: .5rem; max-width: 420px; margin-top: .25rem; }
.tpf-rename label { font-size: .82rem; font-weight: 600; color: var(--tp-l-text-2, #9AA0A6); }
.tpa-input.tpf-input { padding-left: .7rem; text-align: left; }

/* ═══ css/acceso.css ═══ */
/* Acceso v1.0 (2026-10-16): pantalla de login y registro. js/acceso/acceso.js.
   Escritorio (≥ 900 px): el Inicio de ejemplo de fondo, en perspectiva, y el acceso delante como un cristal.
   Móvil: la esfera de la landing arriba y el formulario debajo, sin tarjeta.
   Solo #loginOverlay: la pantalla de planes y la de espera comparten .login-overlay y no cambian.
   Zona oscura en los dos temas (como el resto de .login-overlay). Va al final de la cascada. */

#loginOverlay.acc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(32px, .35fr);
    align-items: center;
    background: #070C0F;
    overflow-x: hidden;
}
#loginOverlay.acc #loginCursorCanvas { display: none; }

/* ── Fondo: el Inicio de ejemplo ──────────────────────────────────────────────────────────── */
#loginOverlay .acc-stage { position: absolute; inset: -10% -20% -10% -6%; perspective: 1600px; pointer-events: none; overflow: hidden; }
#loginOverlay .acc-shot {
    position: absolute; left: 0; top: 12%; width: min(1500px, 110vw); max-width: none; height: auto;
    border-radius: 18px; border: 1px solid rgba(232, 236, 240, .12);
    transform: rotateY(18deg) rotateX(8deg) rotateZ(-2deg); transform-origin: left center;
    opacity: .55; box-shadow: 0 60px 160px rgba(0, 0, 0, .7);
}
#loginOverlay .acc-fade {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,12,15,.2) 0%, rgba(7,12,15,.55) 45%, rgba(7,12,15,.92) 62%, #070C0F 80%),
        linear-gradient(0deg, #070C0F 0%, transparent 30%, transparent 70%, #070C0F 100%);
}

/* ── Barra de arriba ──────────────────────────────────────────────────────────────────────── */
#loginOverlay .acc-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(20px, env(safe-area-inset-top)) 32px 0 56px;
}
#loginOverlay .acc-logo { display: inline-flex; align-items: center; min-height: 44px; }
#loginOverlay .acc-bar-r { display: flex; align-items: center; gap: 12px; }
#loginOverlay .acc-back { color: rgba(232,236,240,.72); text-decoration: none; font-size: 14px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
#loginOverlay .acc-back:hover { color: #E8ECF0; }
#loginOverlay .acc-lang { display: inline-flex; border: 1px solid rgba(232,236,240,.14); border-radius: 999px; padding: 2px; background: rgba(7,12,15,.6); }
#loginOverlay .acc-lang button { font: 700 12px var(--font-ui); color: rgba(232,236,240,.62); background: none; border: 0; border-radius: 999px; min-width: 40px; min-height: 36px; cursor: pointer; }
#loginOverlay .acc-lang button[aria-pressed="true"] { background: rgba(232,236,240,.12); color: #E8ECF0; }

/* ── Texto de la izquierda (escritorio) ───────────────────────────────────────────────────── */
#loginOverlay .acc-pitch {
    grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2;
    display: grid; gap: 10px; max-width: 520px; padding: 0 24px 64px 56px;
}
#loginOverlay .acc-pitch b { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: #E8ECF0; }
#loginOverlay .acc-pitch span { font-size: 15px; line-height: 1.5; color: rgba(232,236,240,.72); }
#loginOverlay .acc-pitch small { font-size: 12px; font-weight: 700; color: rgba(232,236,240,.55); }

/* ── Franja de la esfera (móvil) ──────────────────────────────────────────────────────────── */
#loginOverlay .acc-band { display: none; }

/* ── El acceso: cristal ───────────────────────────────────────────────────────────────────── */
#loginOverlay .login-box {
    grid-column: 2; grid-row: 1; margin: 96px 0 40px; width: 100%; max-width: none;
    padding: 30px; border-radius: 22px;
    background: rgba(11, 20, 27, .74);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(232, 236, 240, .12);
    box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
#loginOverlay .acc-head { display: grid; gap: 6px; margin-bottom: 18px; }
#loginOverlay .acc-title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #E8ECF0; }
#loginOverlay .acc-sub { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(232,236,240,.68); }

#loginOverlay .auth-tabs { margin-bottom: 18px; padding: 4px; gap: 4px; border-radius: 12px; background: rgba(232,236,240,.06); }
#loginOverlay .auth-tab { min-height: 42px; border-radius: 9px; color: rgba(232,236,240,.72); font-size: 14px; font-weight: 700; }
#loginOverlay .auth-tab.active { background: #16212A; color: #E8ECF0; box-shadow: inset 0 1px 0 rgba(232,236,240,.08); }

#loginOverlay .google-btn { min-height: 48px; border-radius: 10px; font-size: 15px; font-weight: 700; color: #1F2328; border-color: #fff; }
#loginOverlay .google-btn:hover { transform: none; background: #F1F3F4; box-shadow: none; }
#loginOverlay .auth-divider { margin: 16px 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: rgba(232,236,240,.58); }
#loginOverlay .auth-divider::before, #loginOverlay .auth-divider::after { background: rgba(232,236,240,.1); }

#loginOverlay .login-form .form-group { margin-bottom: 14px; }
#loginOverlay .login-form label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: rgba(232,236,240,.78); margin-bottom: 7px; }
#loginOverlay .login-form input[type="email"],
#loginOverlay .login-form input[type="password"],
#loginOverlay .login-form input[type="text"] {
    min-height: 48px; padding: 0 14px; border-radius: 10px;
    background: rgba(7,12,15,.75); border: 1px solid rgba(232,236,240,.14); color: #E8ECF0; font-size: 16px;
}
#loginOverlay .login-form input::placeholder { color: rgba(232,236,240,.42); }
#loginOverlay .login-form input:focus { border-color: #3DDB7A; box-shadow: 0 0 0 3px rgba(61,219,122,.18); }

/* Ver contraseña (lo añade acceso.js) */
#loginOverlay .acc-pw { position: relative; display: block; }
#loginOverlay .acc-pw input { padding-right: 50px !important; }
#loginOverlay .acc-eye {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
    border: 0; background: none; border-radius: 8px; color: rgba(232,236,240,.62); display: grid; place-items: center; cursor: pointer;
}
#loginOverlay .acc-eye:hover { color: #E8ECF0; }
#loginOverlay .acc-eye .acc-eye-off { display: none; }
#loginOverlay .acc-eye[aria-pressed="true"] .acc-eye-on { display: none; }
#loginOverlay .acc-eye[aria-pressed="true"] .acc-eye-off { display: block; }

/* Mantener sesión (interruptor) y «¿Olvidaste…?» en la misma fila */
#loginOverlay .remember-me-row { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 16px; }
#loginOverlay .login-form .remember-me-label { display: inline-flex; align-items: center; width: auto; margin: 0; min-height: 44px; font-size: 14px; font-weight: 600; color: rgba(232,236,240,.82); text-transform: none; letter-spacing: 0; gap: 10px; }
#loginOverlay .remember-me-label input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 36px; height: 20px; margin: 0; padding: 0;
    border-radius: 999px; border: 0; background: rgba(232,236,240,.2); position: relative; cursor: pointer; transition: background .2s;
}
#loginOverlay .remember-me-label input[type="checkbox"]::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #E8ECF0; transition: transform .2s;
}
#loginOverlay .remember-me-label input[type="checkbox"]:checked { background: #3DDB7A; }
#loginOverlay .remember-me-label input[type="checkbox"]:checked::after { transform: translateX(16px); background: #070C0F; }
#loginOverlay .remember-me-label input[type="checkbox"]:focus-visible { outline: 2px solid #3DDB7A; outline-offset: 2px; }
#loginOverlay .acc-forgot {
    background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
    font: 600 14px var(--font-ui); color: rgba(232,236,240,.75); text-decoration: underline; text-underline-offset: 3px;
}
#loginOverlay .acc-forgot:hover { color: #E8ECF0; }

#loginOverlay .login-btn {
    min-height: 50px; padding: 0 16px; border-radius: 10px;
    background: #3DDB7A; color: #070C0F; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 800;
}
#loginOverlay .login-btn:hover { transform: none; background: #22B85A; box-shadow: none; }
#loginOverlay .login-error, #loginOverlay .login-success-msg { border-radius: 10px; }

#loginOverlay :is(.auth-tab, .google-btn, .login-btn, .acc-back, .acc-logo, .acc-lang button, .acc-eye, .acc-forgot):focus-visible { outline: 2px solid #3DDB7A; outline-offset: 2px; }

/* ── Móvil y ventanas estrechas: la A (esfera arriba) ─────────────────────────────────────── */
@media (max-width: 899px) {
    #loginOverlay.acc { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
    #loginOverlay .acc-stage, #loginOverlay .acc-fade, #loginOverlay .acc-pitch, #loginOverlay .acc-logo, #loginOverlay .acc-back { display: none; }
    #loginOverlay .acc-bar { padding: max(12px, env(safe-area-inset-top)) 16px 0; justify-content: flex-end; }
    #loginOverlay .acc-band {
        display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; position: relative; flex: 0 0 auto;
        min-height: 196px; padding: calc(max(12px, env(safe-area-inset-top)) + 52px) 20px 22px; overflow: hidden;
        border-bottom: 1px solid rgba(232,236,240,.06);
        background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(61,219,122,.08), transparent 70%);
    }
    #loginOverlay .acc-grav { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    #loginOverlay .acc-band-icon { position: relative; align-self: flex-start; border-radius: 14px; box-shadow: 0 0 0 1px rgba(61,219,122,.25), 0 0 50px rgba(61,219,122,.25); }
    #loginOverlay .acc-band-claim { position: relative; margin: 0; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #E8ECF0; }
    #loginOverlay .acc-band-claim em { font-style: normal; color: #3DDB7A; }
    #loginOverlay .login-box {
        margin: 0; width: 100%; max-width: 520px; align-self: center; padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
        background: transparent; border: 0; box-shadow: none; border-radius: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none; animation: none;
    }
    #loginOverlay .acc-title { font-size: 24px; }
    #loginOverlay .acc-sub { display: none; }
}
/* Pantallas de escritorio bajas: el acceso no se pega arriba */
@media (min-width: 900px) and (max-height: 760px) {
    #loginOverlay .login-box { margin: 84px 0 24px; padding: 24px; }
    #loginOverlay .acc-head { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #loginOverlay .login-box { animation: none; }
    #loginOverlay .remember-me-label input[type="checkbox"], #loginOverlay .remember-me-label input[type="checkbox"]::after { transition: none; }
}