/* ═══════════════════════════════════════════════════════════════════
   TT Academy — Hoja ÚNICA (tta-one.css) · 1-sep-2026
   ───────────────────────────────────────────────────────────────────
   Reemplaza las TRES hojas que academy_base.html cargaba en este orden:
     1) /static/css/main.css            (hoja del PANEL admin; de ella solo
                                         se extrajo lo que la academia alcanza,
                                         ver css/_main-css-usado.md)
     2) /static/academy/css/tta.css     (completa, sin cambios)
     3) /static/academy/css/tta-redesign.css (completa, sin cambios)
   La cascada se conserva: mismo orden, mismas declaraciones. Todo cambio
   visual intencionado vive SOLO en el bloque final
   "Unificación 1-sep-2026" (al pie), reversible borrando ese bloque.

   Breakpoints encontrados en tta.css + tta-redesign.css (ocurrencias):
     max-width 768px ×13 · 640px ×10 · 560px ×5 · 480px ×5 · 900px ×2 ·
     760px ×2 · 1024px ×1 · min-width 981px ×2 · 761px ×2 · 860px ×1 ·
     1100px ×1 · 1440px ×1 · 769–1024px ×1 · hover:none ×1 ·
     display-mode standalone ×1 · prefers-reduced-motion ×6.
     (main.css extraído añade: 768 / 560 / 480 / hover:none+pointer:coarse / print)
     PROPUESTA (no aplicada, riesgo visual): 3 cortes = 640 / 980 / 1280.

   z-index encontrados (archivo:línea → valor), sin renumerar:
     tta.css:159→0 · 172→1 · 321→1 · 1444→2 · 3212→10 · 785→60 · 1496→60 ·
     372→90 · 190→100 · 1983→100 · 2142→100 · 1325→200 · 1511→300 ·
     1677→1000 · 2849→1000 · 3662→1000 · 2111→1200 · 2176→2000 · 2177→2001 ·
     2773→9990 · 2084→9999 · 1018→10100!important · 3635→10200 ·
     tta-redesign.css:2236→1 · 2255→1 · 2273→1 ·
     _skeleton_loader.html (inline): #tt-skeleton-overlay→99998 ·
     feed.js (inline en el menú del post)→10.
     Tokens propuestos en :root del bloque final: --z-sticky 10 ·
     --z-dropdown 100 · --z-overlay 1000 · --z-modal 1100 · --z-toast 1200 ·
     --z-topbar 99998.
   ═══════════════════════════════════════════════════════════════════ */

/* == main.css extraído == */
/* Reglas de /static/css/main.css que la academia realmente alcanza (cada una
   con su línea de origen). Ver css/_main-css-usado.md. */
/* main.css:14 */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/outfit-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* main.css:22 */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/outfit-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* main.css:30 */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/static/fonts/jetbrainsmono-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* main.css:38 */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/static/fonts/jetbrainsmono-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* main.css:48 */
:root {
    /* ─ Backgrounds ─ */
    --bg-base: #09090B;
    --bg-primary: #09090B;
    --bg-raised: #0F0F12;
    --bg-secondary: #0F0F12;
    --bg-surface: #16161A;
    --bg-tertiary: #16161A;
    --bg-elevated: #1C1C22;
    --bg-card: #0F0F12;
    --bg-card-hover: #16161A;
    --bg-sidebar: #0B0B0E;
    --bg-input: #131316;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* ─ Brand — Aurum Gold ─ */
    --gold: #D4AF37;
    --gold-light: #E8C84A;
    --gold-dim: #B8962F;
    --gold-bg: rgba(212, 175, 55, 0.08);
    --gold-bg-hover: rgba(212, 175, 55, 0.14);
    --gold-border: rgba(212, 175, 55, 0.2);
    --gold-glow: rgba(212, 175, 55, 0.06);

    /* ─ Accents (unified aliases) ─ */
    --accent-gold: var(--gold);
    --accent-gold-hover: var(--gold-light);
    --accent-gold-bg: var(--gold-bg);
    --accent-gold-border: var(--gold-border);
    --accent-primary: var(--gold);
    --accent-cyan: var(--gold);
    --accent-yellow: var(--gold);

    /* ─ Acento único de plataforma (contrato de tokens — Fase 0) ─
       Toda la UI usa var(--tt-accent). Para cambiar el acento de toda
       la plataforma, cambia SOLO --tt-accent aquí. --accent-lime mata el
       fallback lima del kit tt-ui. */
    --tt-accent: var(--gold);
    --tt-accent-hover: var(--gold-light);
    --tt-accent-active: var(--gold-dim);
    --tt-on-accent: #14120A;
    --tt-accent-dim: var(--gold-bg);
    --accent-lime: var(--gold);

    /* ─ Semantic Colors ─ */
    --green: #22C55E;
    --green-bg: rgba(34, 197, 94, 0.1);
    --green-border: rgba(34, 197, 94, 0.2);
    --accent-green: #22C55E;

    --red: #EF4444;
    --red-bg: rgba(239, 68, 68, 0.1);
    --red-border: rgba(239, 68, 68, 0.2);
    --accent-red: #EF4444;

    --orange: #F59E0B;
    --orange-bg: rgba(245, 158, 11, 0.1);
    --orange-border: rgba(245, 158, 11, 0.2);
    --accent-orange: #F59E0B;

    --blue: #3B82F6;
    --blue-bg: rgba(59, 130, 246, 0.1);
    --blue-border: rgba(59, 130, 246, 0.2);
    --accent-blue: #3B82F6;

    /* Alias semánticos (pasada visual 7-ago-2026). Varias pantallas ya
       escribían var(--success)/--warning/--danger/--info sin que existieran:
       los badges de Grupos salían sin color. Un solo verde, un solo rojo, un
       solo ámbar en todo el panel — los de marca (WA/TG/IG) no cuentan. */
    --success: var(--green);        --success-bg: var(--green-bg);
    --danger: var(--red);           --danger-bg: var(--red-bg);
    --warning: var(--orange);       --warning-bg: var(--orange-bg);
    --info: var(--blue);            --info-bg: var(--blue-bg);

    /* Tokens arcoíris NEUTRALIZADOS al oro/gris (Fase 0 — look monocromático).
       Se conservan los nombres para no romper templates que aún los referencian;
       ya no aportan color saturado. Borrar en Fase 9 cuando grep dé cero usos. */
    --purple: var(--gold);
    --purple-bg: var(--gold-bg);
    --purple-border: var(--gold-border);
    --accent-purple: var(--gold);

    --indigo: var(--gold);
    --accent-indigo: var(--gold);

    --teal: var(--gold);
    --teal-bg: var(--gold-bg);
    --accent-teal: var(--gold);

    --pink: var(--gold);
    --pink-bg: var(--gold-bg);
    --accent-pink: var(--gold);

    /* ─ Text ─ */
    --text-primary: #F5F5F4;
    --text-secondary: #C4C4CC;
    --text-muted: #8B8B96;
    --text-white: #FFFFFF;
    /* Contraste AA: era #71717A (3.96:1 sobre --bg-base); #8E8E99 ≈ 4.6:1 */
    --text-dim: #8E8E99;

    /* ─ Borders ─ */
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-active: var(--gold-border);
    --border-glow: rgba(212, 175, 55, 0.12);

    /* ─ Shadows (directional, consistent light source) ─ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 4px 24px rgba(212, 175, 55, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.06);
    --shadow-glow: 0 0 24px var(--gold-glow);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);

    /* ─ Layout ─ */
    --sidebar-width: 252px;
    --sidebar-collapsed: 72px;
    --header-height: 60px;
    --page-max-width: none;   /* full width — el contenido usa todo el ancho del monitor */
    --bottom-nav-height: 64px;

    /* ─ Border Radius ─ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 12px;   /* unificado con --radius-md: una tarjeta, un radio */
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ─ Spacing (4px scale) ─ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    /* Aliases for existing code */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ─ Typography Scale (bumped for readability) ─
       root html = 14px, así que rem chico rendía <12px (labels/tablas/kpis
       se veían a 9.8–10.9px). Piso legible: micro ~11.5px, label ~12.3px,
       body ~13.7px. Escala monótona, sin invertir. */
    --text-2xs: 0.82rem;
    /* ESCALA CANÓNICA (6-ago-2026). Seis pasos, en px: en rem dependían de
       `html{font-size:14px}` y cualquier `.8rem` suelto de una plantilla
       aterrizaba en 11,2 px. Medido en producción: 20 tamaños distintos en la
       pantalla de Personas, 14 de ellos por debajo de 12 px.
       Uso: xs = etiqueta en MAYÚSCULAS (cabecera de tabla, rótulo de KPI) ·
       sm = apoyo (segunda línea de celda, ayuda) · base = cuerpo y tabla ·
       lg = título de tarjeta · xl = título de pantalla · 3xl = cifra de KPI.
       No añadir pasos intermedios: si hace falta uno, sobra un nivel. */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;

    /* Alturas de control. TRES, no ocho: acción dentro de una fila, control
       normal, acción principal de la pantalla. 28 px es el suelo — por debajo
       el objetivo táctil deja de ser alcanzable con el dedo. */
    --ctl-h-sm: 28px;
    --ctl-h: 34px;
    --ctl-h-lg: 40px;

    /* ─ Font ─ */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-primary: var(--font-sans);

    /* ─ Font Weights ─ */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ─ Transitions (premium weight) ─ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.35s;
    --transition-fast: 0.12s var(--ease-out);
    --transition-normal: 0.2s var(--ease-out);
    --transition-slow: 0.35s var(--ease-out);
    --transition-spring: 0.4s var(--ease-spring);

    /* ─ Estado disabled unificado (antes variaba 0.30–0.45 por componente) ─ */
    --disabled-opacity: 0.45;

    /* ─ Z-Index Scale ─ */
    --z-noise: 1;          /* textura body::before: sobre el fondo, bajo el contenido */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 9999;
    --z-command: 10000;
    --z-skeleton: 99998;   /* overlay de carga inicial, por encima de todo */
}
@media (prefers-reduced-motion: reduce) {
  /* main.css:268 */
  *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* main.css:279 */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* main.css:285 */
html {
    font-size: 14px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    /* Esquema oscuro nativo: hace que Chrome/Safari/Firefox pinten los widgets
       del navegador (dropdown de <select>, calendar picker, scrollbars) en dark. */
    color-scheme: dark;
}
/* main.css:297 */
body {
    font-family: var(--font-sans);
    background:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(212,175,55,0.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 100% 100%, rgba(212,175,55,0.025) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 70% 0%, rgba(212,175,55,0.02) 0%, transparent 50%),
        var(--bg-base);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}
/* main.css:320 */
button, input, select, textarea { font-family: inherit; }
/* main.css:324 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.018;
    pointer-events: none;
    z-index: var(--z-noise);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
}
/* main.css:337 */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle 600px at 0% 30%, rgba(212,175,55,0.03) 0%, transparent 70%),
        radial-gradient(circle 500px at 100% 70%, rgba(212,175,55,0.025) 0%, transparent 70%),
        radial-gradient(circle 400px at 50% 100%, rgba(212,175,55,0.02) 0%, transparent 60%);
    animation: ambient-drift 20s ease-in-out infinite alternate;
}
@media (hover: none) {
  /* main.css:352 */
  body::after { animation: none; }
}
/* main.css:355 */
a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}
/* main.css:360 */
a:hover { color: var(--gold-light); }
/* main.css:362 */
img { max-width: 100%; display: block; }
/* main.css:364 */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: white;
}
/* main.css:371 */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(212,175,55,0.08);
}
/* main.css:378 */
::-webkit-scrollbar { width: 5px; height: 5px; }
/* main.css:379 */
::-webkit-scrollbar-track { background: transparent; }
/* main.css:380 */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
}
/* main.css:384 */
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
/* main.css:515 */
.form-group {
    margin-bottom: 18px;
}
/* main.css:524 */
.form-group label:not(.radio-option):not(.checkbox-option):not(.switch),
.form-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* main.css:535 */
.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
/* main.css:549 */
.form-control:focus {
    border-color: var(--gold);
    background: var(--bg-elevated);
    box-shadow:
        0 0 0 3px rgba(212,175,55,0.06),
        0 0 16px rgba(212,175,55,0.04),
        inset 0 1px 3px rgba(0,0,0,0.15);
}
/* main.css:558 */
.form-control::placeholder { color: var(--text-dim); }
/* main.css:561 */
textarea, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
select, .form-input {
    color: var(--text-primary) !important;
    caret-color: var(--gold);
}
/* main.css:568 */
textarea:focus, input:focus, select:focus, .form-input:focus {
    background: var(--bg-elevated) !important;
}
/* main.css:572 */
select.form-control {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A1A1AA' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
/* main.css:581 */
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}
/* main.css:587 */
input[type="date"],
input[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    padding: 8px 14px !important;
    font-size: var(--text-sm) !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    min-width: 150px;
}
/* main.css:602 */
input[type="date"]:hover,
input[type="datetime-local"]:hover {
    border-color: var(--gold-border) !important;
    background: var(--gold-bg) !important;
}
/* main.css:607 */
input[type="date"]:focus,
input[type="datetime-local"]:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08) !important;
}
/* main.css:613 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}
/* main.css:620 */
input[type="date"]:hover::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    background: var(--gold-bg);
}
/* main.css:625 */
::-webkit-datetime-edit { padding: 0; }
/* main.css:626 */
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
/* main.css:627 */
::-webkit-datetime-edit-text { color: rgba(255,255,255,0.25); padding: 0 2px; }
/* main.css:628 */
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field {
    color: var(--text-primary);
    padding: 1px 2px;
    border-radius: 3px;
}
/* main.css:637 */
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-year-field:focus {
    background: var(--gold-bg);
    color: var(--gold);
}
/* main.css:655 */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    padding: 8px 12px;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
/* main.css:680 */
select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
textarea:hover {
    border-color: var(--gold-border);
}
/* main.css:692 */
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus {
    border-color: var(--gold);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}
/* main.css:711 */
select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}
/* main.css:719 */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B8B96' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
/* main.css:731 */
select option,
select optgroup {
    background: var(--bg-raised);
    color: var(--text-primary);
}
/* main.css:778 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
/* main.css:788 */
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}
/* main.css:795 */
select:disabled,
input:disabled,
textarea:disabled,
.form-select:disabled,
.form-input:disabled {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    cursor: not-allowed;
    opacity: 0.6;
}
/* main.css:858 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast);
    line-height: 1.4;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* main.css:878 */
.btn .material-symbols-outlined { font-size: 17px; }
/* main.css:879 */
.btn:active { transform: scale(0.97); }
/* main.css:880 */
.btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; }
/* main.css:883 */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.08), transparent);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
/* main.css:892 */
.btn:hover::after { opacity: 1; }
/* main.css:893 */
.btn:disabled::after { display: none; }
/* main.css:895 */
.btn-primary {
    background: var(--tt-accent);
    color: var(--tt-on-accent);
    font-weight: var(--font-bold);
    box-shadow: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
/* main.css:902 */
.btn-primary:hover {
    background: var(--tt-accent-hover);
    transform: translateY(-1px);
    box-shadow: none;
}
/* main.css:911 */
.btn-secondary {
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* main.css:917 */
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.14);
}
/* main.css:923 */
.btn-success { background: var(--green); color: #0A0A0A; }
/* main.css:924 */
.btn-success:hover { background: color-mix(in srgb, var(--green), white 12%); }
/* main.css:926 */
.btn-danger { background: rgba(239, 68, 68, 0.12); color: var(--red); border: 1px solid var(--red-border); }
/* main.css:927 */
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }
/* main.css:929 */
.btn-ghost {
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* main.css:935 */
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(212,175,55,0.03);
}
/* main.css:942 */
.btn-full { width: 100%; }
/* main.css:943 */
.btn-icon {
    width: 36px; height: 36px; padding: 0;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-primary);
}
/* main.css:950 */
.btn-icon:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
/* main.css:951 */
.btn-icon .material-symbols-outlined { font-size: 20px; }
/* main.css:953 */
.btn-sm {
    padding: 6px 14px;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}
/* main.css:1734 */
.glass-card, .card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 24px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: none;
    position: relative;
    margin-bottom: 0;
}
/* main.css:1745 */
.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-sm);
}
/* main.css:1866 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
}
/* main.css:1986 */
.chart-wrap {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: 20px;
}
/* main.css:2046 */
.toast {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.35s var(--ease-out);
}
/* main.css:2058 */
.toast.success, .toast--success { border-left: 3px solid var(--green); }
/* main.css:2074 */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-modal);
    animation: fadeIn 0.15s ease;
}
/* main.css:2081 */
.modal-overlay[hidden] {
    display: none !important;
}
/* main.css:2084 */
.modal-overlay.open {
    display: flex;
}
/* main.css:2117 */
.modal-content {
    background: var(--bg-raised);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 28px; width: 100%; max-width: 680px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: fadeInUp 0.3s var(--ease-out);
}
/* main.css:2948 */
[data-tooltip] { position: relative; }
/* main.css:2949 */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 6px 12px; background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs); color: var(--text-secondary);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: all var(--transition-fast);
    z-index: var(--z-modal);
}
/* main.css:2961 */
[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }
@media (max-width: 768px) {
  /* main.css:3082 */
  .card, .glass-card { padding: 14px; }
  /* main.css:3089 */
  [style*="position:fixed"] > .glass-card,
    .modal-overlay > .glass-card,
    .modal-content {
        width: 95vw !important; max-width: 95vw !important;
        max-height: 90vh !important; overflow-y: auto;
    }
  /* main.css:3095 */
  [style*="position:fixed"] > div,
    [style*="position: fixed"] > div {
        width: 95vw !important; max-width: 95vw !important;
        max-height: 90vh !important; overflow-y: auto !important;
    }
  /* main.css:3105 */
  [style*="grid-template-columns"][style*="px"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  /* main.css:3110 */
  [style*="position:fixed"] [style*="grid-template-columns:1fr 1fr"],
    .modal-content [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
  /* main.css:3114 */
  [style*="position:fixed"] [style*="grid-template-columns:1fr 1fr 1fr"],
    .modal-content [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
  /* main.css:3118 */
  [style*="position:fixed"] input,
    [style*="position:fixed"] select,
    [style*="position:fixed"] textarea {
        min-width: 0 !important; max-width: 100% !important;
    }
}
@media (max-width: 480px) {
  /* main.css:3145 */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  /* main.css:3166 */
  .form-control, input, select, textarea { max-width: 100%; }
  /* main.css:3167 */
  code, pre { overflow-wrap: anywhere; word-break: break-word; }
  /* main.css:3168 */
  canvas { max-width: 100%; }
}
@media (hover: none) and (pointer: coarse) {
  /* main.css:3175 */
  .btn { min-height: 44px; }
  /* main.css:3176 */
  .btn-icon { width: 44px !important; height: 44px !important; }
  /* main.css:3180 */
  details summary { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
}
/* main.css:3224 */
[style*="color:var(--text-secondary)"],
[style*="color: var(--text-secondary)"] { color: var(--text-secondary) !important; }
/* main.css:3226 */
[style*="color:var(--text-muted)"],
[style*="color: var(--text-muted)"] { color: var(--text-muted) !important; }
/* main.css:3239 */
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border-primary);
}
/* main.css:3244 */
.modal-header h3 { font-size: 1.1rem; font-weight: var(--font-bold); color: var(--text-white); }
/* main.css:3386 */
.filter-btn,
[data-flang],
.ft-lang-btn {
    padding: 6px 16px; border-radius: var(--radius-full);
    font-size: 0.82rem; font-weight: var(--font-medium);
    border: 1px solid var(--border-primary); background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
/* main.css:3396 */
.filter-btn:hover, [data-flang]:hover, .ft-lang-btn:hover {
    background: rgba(255,255,255,0.04); color: var(--text-primary);
}
/* main.css:3399 */
.filter-btn.active, [data-flang].active, .ft-lang-btn.active {
    background: var(--gold-bg); color: var(--gold); border-color: var(--gold);
}
/* main.css:3466 */
.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-md);
}
/* main.css:3485 */
::-webkit-scrollbar-thumb:hover {
    background: rgba(212,175,55,0.2);
}
/* main.css:3549 */
[style*="border-radius:3px"][style*="transition:width"],
[style*="border-radius:4px"][style*="transition:width"] {
    box-shadow: 0 0 8px rgba(212,175,55,0.1);
}
@media print {
  /* main.css:3628 */
  body::before { display: none; }
}
/* main.css:3652 */
:root { --topbar-ctl: 36px; }
@media (max-width: 560px) {
  /* main.css:3690 */
  :root { --topbar-ctl: 34px; }
}
/* main.css:3785 */
:root{
  --tt-tipo-datos:#6E9BC5;   /* solo se mira */
  --tt-tipo-herr:#D4AF37;    /* se usa a mano */
  --tt-tipo-auto:#6FB58A;    /* corre solo */
  --tt-tipo-conf:#A98BC4;    /* conecta con algo de fuera */
}

/* keyframes de main.css referenciados */
/* main.css:391 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* main.css:398 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
/* main.css:403 */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
/* main.css:428 */
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* main.css:442 */
@keyframes ambient-drift {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(0.98); }
}


/* == tta.css == */
/* ═══════════════════════════════════════════════════════════════════
   TT Academy — Premium Design System v2
   Aurum 3.0 base + Skool-style polish (density, rhythm, depth, motion)
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Spacing scale (8pt grid) ──────────────────────────────── */
    --tta-s-1: 4px;
    --tta-s-2: 8px;
    --tta-s-3: 12px;
    --tta-s-4: 16px;
    --tta-s-5: 20px;
    --tta-s-6: 24px;
    --tta-s-8: 32px;
    --tta-s-10: 40px;
    --tta-s-12: 48px;
    --tta-s-16: 64px;
    --tta-s-20: 80px;
    --tta-s-24: 96px;

    /* ── ESCALA UNICA DE TEXTO (27-ago-2026) ──────────────────────
       Cuatro escalones, en px absolutos. Antes habia 45 tamanos y la
       escala estaba en rem: como html{font-size:14px}, 2xs caia a 9,6px
       y xs a 10,5px. De ahi la letra ilegible. En px no hay sorpresa.
       Movil (<=768) reescribe estos cinco valores y todo lo demas cae
       solo, porque los alias apuntan aqui.                            */
    --tta-text-meta:    13px;   /* chips, fechas, contadores, etiquetas */
    --tta-text-body:    15px;   /* cuerpo, botones, campos, navegacion  */
    --tta-text-title:   19px;   /* titulos de tarjeta y de seccion      */
    --tta-text-hero:    26px;   /* titulo de pagina (uno por pantalla)  */
    --tta-text-display: 34px;   /* solo portadas de marketing           */

    /* Alias heredados: los ~85 var() que ya existen caen en la escala. */
    --tta-text-2xs: var(--tta-text-meta);
    --tta-text-xs:  var(--tta-text-meta);
    --tta-text-sm:  var(--tta-text-meta);
    --tta-text-base:var(--tta-text-body);
    --tta-text-md:  var(--tta-text-body);
    --tta-text-lg:  var(--tta-text-title);
    --tta-text-xl:  var(--tta-text-title);
    --tta-text-2xl: var(--tta-text-hero);
    --tta-text-3xl: var(--tta-text-display);
    --tta-text-4xl: 52px;

    /* Portadas fluidas: 15 clamp() distintos colapsados a tres. Crecen
       con la pantalla pero siempre dentro de la escala.               */
    --tta-fluid-hero: clamp(24px, 5vw, 52px);   /* titular de portada  */
    --tta-fluid-sec:  clamp(17px, 2.6vw, 26px); /* titulo de seccion   */
    --tta-fluid-sub:  clamp(14px, 1.5vw, 19px); /* entradilla          */

    /* Puente con los tokens del panel (main.css). La academia los usa en
       715 sitios y --text-xs valia 11px: las etiquetas de formulario no
       se leian. Aqui pasan a la escala; el panel conserva los suyos
       porque no carga este archivo.                                    */
    --text-xs:   var(--tta-text-meta);
    --text-sm:   var(--tta-text-meta);
    --text-base: var(--tta-text-body);
    --text-lg:   var(--tta-text-body);
    --text-xl:   var(--tta-text-title);
    --text-2xl:  var(--tta-text-hero);
    --text-3xl:  var(--tta-text-hero);

    /* ── Radii ─────────────────────────────────────────────────── */
    --tta-r-xs: 6px;
    --tta-r-sm: 10px;
    --tta-r-md: 14px;
    --tta-r-lg: 18px;
    --tta-r-xl: 24px;

    /* ── Motion ────────────────────────────────────────────────── */
    --tta-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tta-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --tta-t-fast: 140ms;
    --tta-t-base: 220ms;
    --tta-t-slow: 360ms;

    /* ── Surface depths (layered darkness) ────────────────────── */
    --tta-surf-0: #08080A;        /* page background (deeper than main) */
    --tta-surf-1: #0E0E12;        /* raised card */
    --tta-surf-2: #141418;        /* elevated card (hover) */
    --tta-surf-3: #1B1B21;        /* popover, modal */
    --tta-surf-line: rgba(255, 255, 255, 0.06);
    --tta-surf-line-strong: rgba(255, 255, 255, 0.12);
    --tta-surf-line-gold: rgba(212, 175, 55, 0.22);

    /* ── Shadows (layered for real depth) ─────────────────────── */
    --tta-shadow-xs: 0 1px 2px rgba(0,0,0,.5);
    --tta-shadow-sm: 0 2px 6px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.45);
    --tta-shadow-md:
        0 10px 24px -8px rgba(0,0,0,.55),
        0 4px 10px -2px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.04);
    --tta-shadow-lg:
        0 24px 60px -16px rgba(0,0,0,.7),
        0 10px 20px -6px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.05);
    --tta-shadow-gold:
        0 12px 40px -8px rgba(212,175,55,.18),
        0 0 0 1px rgba(212,175,55,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
    --tta-shadow-glow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* ── ENCABEZADOS ──────────────────────────────────────────────────────
   Sin regla propia, h1..h6 usaban los tamanos por defecto del navegador
   (2em, 1.5em, 1.17em...), que se calculan sobre el cuerpo y se salian
   de la escala: "Tu cuenta" salia a 30px y "Perfil" a 17,55px. Selector
   de elemento a proposito: cualquier clase existente sigue mandando.  */
h1 { font-size: var(--tta-text-hero); }
h2 { font-size: var(--tta-text-title); }
h3 { font-size: var(--tta-text-title); }
h4, h5, h6 { font-size: var(--tta-text-body); }

/* El texto de ayuda que cuelga de una etiqueta heredaba su MAYUSCULA y su
   espaciado: una frase entera en versales cuesta de leer, y al subir el
   suelo de tamano se nota mas. La etiqueta sigue en versales; su
   explicacion, no. */
label span,
label small,
.form-hint {
    text-transform: none;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════════════
   Reset + base
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

.tta-body {
    background:
        radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212,175,55,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 10% 100%, rgba(212,175,55,0.025) 0%, transparent 60%),
        var(--tta-surf-0);
    color: var(--text-primary);
    font-family: var(--font-sans);
    /* 100dvh (no 100vh): en móvil 100vh incluye el área de la barra del
       navegador → el body queda más alto que lo visible y se podía hacer scroll
       a un vacío negro debajo del contenido. dvh = alto real visible. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

.tta-body::selection { background: var(--gold); color: #0A0A0A; }
.tta-body ::selection { background: var(--gold); color: #0A0A0A; }

/* Fondo dinámico de bajo peso (solo CSS, sutil): un "mesh" de degradados que
   flota lento sobre el color de fondo actual. Da vida sin recargar — opacidades
   muy bajas (0.02–0.05) para no competir con el contenido. */
.tta-body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(55% 45% at 15% 8%, rgba(212,175,55,0.05), transparent 60%),
        radial-gradient(45% 55% at 88% 22%, rgba(94,196,255,0.025), transparent 65%),
        radial-gradient(55% 45% at 72% 100%, rgba(212,175,55,0.045), transparent 70%);
    animation: ttaMeshFloat 34s ease-in-out infinite alternate;
}
@keyframes ttaMeshFloat {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-16px,-28px,0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .tta-body::before { animation: none; } }
/* El contenido va por encima del mesh. */
.tta-nav, .tta-main, .tta-footer, .tta-bottom-tabs, .tta-mobile-menu { position: relative; z-index: 1; }

/* Botón "Gráficos en vivo" del pie: SOLO visible cuando la Academia corre como
   PWA instalada (display-mode: standalone). En navegador normal queda oculto. */
/* Enlace "Gráficos en vivo" del pie: mismo estilo que Terms/Privacy/etc.
   (hereda .tta-footer__links a). Oculto por defecto; visible SOLO en PWA instalada. */
.tta-footer__pwa { display: none; }
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    .tta-footer__pwa { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════════
   Top navigation
   ═══════════════════════════════════════════════════════════════════ */

.tta-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: env(safe-area-inset-top); /* respeta el notch/Dynamic Island en PWA instalada */
    background: rgba(8, 8, 10, 0.72);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid var(--tta-surf-line);
    transition: border-color var(--tta-t-base) var(--tta-ease),
                background var(--tta-t-base) var(--tta-ease);
}
.tta-nav.is-scrolled { border-bottom-color: var(--tta-surf-line-strong); }

.tta-nav__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--tta-s-4) var(--tta-s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tta-s-4);
}

.tta-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--tta-s-3);
    font-weight: 700;
    color: var(--text-white);
    text-decoration: none;
    letter-spacing: -0.01em;
    font-size: var(--tta-text-md);
    transition: opacity var(--tta-t-fast) var(--tta-ease);
}
.tta-nav__brand:hover { opacity: 0.85; }
.tta-nav__brand img { height: 22px; width: auto; }
.tta-nav__brand span {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tta-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--tta-s-3);
}

.tta-nav__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--tta-text-sm);
    font-weight: 500;
    padding: var(--tta-s-2) var(--tta-s-3);
    border-radius: var(--tta-r-xs);
    transition: color var(--tta-t-fast) var(--tta-ease),
                background var(--tta-t-fast) var(--tta-ease);
}
.tta-nav__link:hover {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════════════════
   Layout
   ═══════════════════════════════════════════════════════════════════ */

.tta-main {
    flex: 1;
    max-width: 100%;
    margin: 0 auto;
    /* Padding lateral fluido (vw) → el contenido usa todo el ancho de la pantalla,
       con margen proporcional. Antes un cap fijo de 1240px dejaba huecos a los lados. */
    padding: var(--tta-s-10) clamp(16px, 3vw, 64px) var(--tta-s-16);
    width: 100%;
}

.tta-footer {
    border-top: 1px solid var(--tta-surf-line);
    padding: var(--tta-s-8) var(--tta-s-6);
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    margin-top: var(--tta-s-12);
}
.tta-footer__inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: var(--tta-s-4);
    flex-wrap: wrap;
}
.tta-footer__links { display: flex; gap: var(--tta-s-5); }
.tta-footer__links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--tta-t-fast) var(--tta-ease);
}
.tta-footer__links a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════════ */

.tta-hero {
    position: relative;
    min-height: 300px;
    border-radius: var(--tta-r-xl);
    overflow: hidden;
    margin-bottom: var(--tta-s-10);
    background: linear-gradient(135deg, #0F0F14, #1A1A20);
    border: 1px solid var(--tta-surf-line);
    box-shadow: var(--tta-shadow-lg);
    animation: ttaFadeInUp .6s var(--tta-ease) both;
}
.tta-hero__banner {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    filter: saturate(1.1);
}
.tta-hero__banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(8,8,10,0.55) 55%,
        rgba(8,8,10,0.95) 100%);
}
.tta-hero__content {
    position: relative;
    z-index: 1;
    padding: var(--tta-s-10);
    display: flex;
    gap: var(--tta-s-6);
    align-items: flex-end;
    min-height: 300px;
}
.tta-hero__avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: var(--tta-surf-2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5),
                0 0 0 4px rgba(212, 175, 55, 0.1);
    transition: transform var(--tta-t-slow) var(--tta-ease);
}
.tta-hero__avatar:hover { transform: scale(1.03); }
.tta-hero__meta { flex: 1; }
.tta-hero__meta h1 {
    margin: 0 0 var(--tta-s-2);
    font-size: var(--tta-fluid-sec);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.tta-hero__meta p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 62ch;
    line-height: 1.55;
    font-size: var(--tta-text-base);
}

/* ═══════════════════════════════════════════════════════════════════
   Tabs (Skool-style segmented control)
   ═══════════════════════════════════════════════════════════════════ */

.tta-tabs {
    display: flex;
    gap: var(--tta-s-1);
    padding: var(--tta-s-1);
    margin-bottom: var(--tta-s-8);
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-sm);
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: var(--tta-shadow-xs);
    position: sticky;
    top: var(--tta-nav-h, 56px); /* set by JS from actual nav height */
    z-index: 90;
}
.tta-tabs::-webkit-scrollbar { display: none; }

.tta-tab-btn {
    padding: var(--tta-s-3) var(--tta-s-5);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--tta-text-sm);
    cursor: pointer;
    border-radius: var(--tta-r-xs);
    transition: all var(--tta-t-fast) var(--tta-ease);
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.tta-tab-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.tta-tab-btn.is-active {
    color: var(--text-white);
    background: var(--tta-surf-3);
    box-shadow: var(--tta-shadow-xs), inset 0 1px 0 rgba(255,255,255,0.06);
    font-weight: 600;
}

/* ── Tab panels ──────────────────────────────────────────────────── */
.tta-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--tta-s-6) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Grids
   ═══════════════════════════════════════════════════════════════════ */

.tta-grid {
    display: grid;
    gap: var(--tta-s-6);
}
.tta-grid--courses { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tta-grid--lives { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ═══════════════════════════════════════════════════════════════════
   Cards — layered depth + hover
   ═══════════════════════════════════════════════════════════════════ */

.tta-card {
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform var(--tta-t-base) var(--tta-ease),
                border-color var(--tta-t-base) var(--tta-ease),
                box-shadow var(--tta-t-base) var(--tta-ease),
                background var(--tta-t-base) var(--tta-ease);
    box-shadow: var(--tta-shadow-xs);
}
.tta-card::before {
    /* Subtle top edge highlight */
    content: '';
    position: absolute;
    top: 0; left: var(--tta-s-4); right: var(--tta-s-4);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    opacity: 0;
    transition: opacity var(--tta-t-base);
}
.tta-card:hover {
    transform: translateY(-3px);
    border-color: var(--tta-surf-line-gold);
    background: var(--tta-surf-2);
    box-shadow: var(--tta-shadow-md);
}
.tta-card:hover::before { opacity: 1; }

.tta-card__cover {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: var(--tta-surf-2);
    position: relative;
    overflow: hidden;
}
.tta-card__cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4));
    opacity: 0;
    transition: opacity var(--tta-t-base);
}
.tta-card:hover .tta-card__cover::after { opacity: 1; }

.tta-card__body {
    padding: var(--tta-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--tta-s-3);
}
.tta-card__title {
    font-weight: 600;
    margin: 0;
    font-size: var(--tta-text-base);
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--text-white);

    /* Line clamp for long titles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tta-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    font-weight: 500;
}
.tta-card__price {
    color: var(--gold);
    font-weight: 700;
    font-size: var(--tta-text-md);
    letter-spacing: -0.015em;
}

/* ═══════════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════════ */

.tta-badge-live {
    display: inline-flex;
    align-items: center;
    gap: var(--tta-s-2);
    background: rgba(239,68,68,0.12);
    color: var(--red);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--tta-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid rgba(239,68,68,0.25);
}
.tta-badge-live::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: ttaPulse 1.4s infinite;
    box-shadow: 0 0 8px rgba(239,68,68,0.8);
}

.tta-badge-free {
    color: var(--green);
    background: rgba(34,197,94,0.12);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--tta-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid rgba(34,197,94,0.25);
}
.tta-badge-paid {
    color: var(--gold);
    background: var(--gold-bg);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--tta-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--gold-border);
}

/* ═══════════════════════════════════════════════════════════════════
   Player
   ═══════════════════════════════════════════════════════════════════ */

.tta-player {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--tta-r-lg);
    overflow: hidden;
    box-shadow: var(--tta-shadow-lg);
}
.tta-player iframe,
.tta-player video { width: 100%; height: 100%; border: 0; display: block; }
.tta-player__watermark {
    position: absolute;
    bottom: 8%;
    right: 5%;
    color: rgba(255,255,255,0.25);
    font-family: var(--font-mono);
    font-size: var(--tta-text-meta);
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
    transition: all 1.2s var(--tta-ease);
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════
   Post / Feed
   ═══════════════════════════════════════════════════════════════════ */

.tta-post {
    background: var(--tta-surf-1);
    /* Borde más visible + sombra sutil para que cada tarjeta de publicación se
       distinga del fondo (pedido de Mathias), manteniendo la estética oscura. */
    border: 1px solid var(--tta-surf-line-strong, rgba(255,255,255,0.12));
    border-radius: var(--tta-r-md);
    padding: var(--tta-s-6);
    margin-bottom: var(--tta-s-5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    transition: border-color var(--tta-t-base) var(--tta-ease), box-shadow var(--tta-t-base) var(--tta-ease);
    animation: ttaFadeInUp .35s var(--tta-ease) both;
}
.tta-post:hover { border-color: rgba(212,175,55,0.34); box-shadow: 0 4px 16px rgba(0,0,0,0.36); }
.tta-post__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--tta-s-3);
    font-size: var(--tta-text-sm);
}
.tta-post__actions {
    display: flex;
    gap: var(--tta-s-5);
    margin-top: var(--tta-s-4);
    color: var(--text-muted);
    font-size: var(--tta-text-sm);
    align-items: center;
}
.tta-post__action {
    display: inline-flex;
    align-items: center;
    gap: var(--tta-s-2);
    cursor: pointer;
    background: transparent;
    border: 0;
    color: inherit;
    padding: var(--tta-s-2) var(--tta-s-3);
    border-radius: var(--tta-r-xs);
    transition: all var(--tta-t-fast) var(--tta-ease);
    font-weight: 500;
}
.tta-post__action:hover { color: var(--gold); background: rgba(255,255,255,0.03); }
.tta-post__action.liked { color: var(--red); }
.tta-post__action.liked:hover { background: rgba(239,68,68,0.08); }

/* ── Post 3-dot menu (Skool-style) ──────────────────────────────── */
.tta-post-menu-trigger {
    opacity: 0; transition: opacity var(--tta-t-fast) ease;
}
.tta-post:hover .tta-post-menu-trigger { opacity: 1; }
.tta-post-menu button {
    display: block; width: 100%; text-align: left;
    padding: 10px 16px; border: none; background: none;
    color: var(--text-secondary); cursor: pointer;
    font-size: var(--tta-text-sm); transition: background var(--tta-t-fast) ease;
}
.tta-post-menu button:hover {
    background: rgba(255,255,255,0.04);
}
.tta-post-menu button:not(:last-child) {
    border-bottom: 1px solid var(--tta-surf-line);
}

/* ═══════════════════════════════════════════════════════════════════
   Reaction bar (6-emoji row)
   ═══════════════════════════════════════════════════════════════════ */
.tta-react-bar {
    display: flex; gap: 2px; flex-wrap: wrap;
}
.tta-react-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 8px; border-radius: 16px;
    background: var(--tta-surf-0); border: 1px solid var(--tta-surf-line);
    cursor: pointer; font-size: var(--tta-text-body); line-height: 1;
    transition: all .15s ease; color: var(--text-secondary);
}
.tta-react-btn:hover { border-color: var(--gold); background: rgba(212,175,55,0.06); }
.tta-react-btn.is-active { border-color: var(--gold); background: rgba(212,175,55,0.1); }
.tta-react-btn span { font-size: var(--tta-text-meta); font-weight: 600; }
/* Pie del post estilo Facebook: TRES anchos parejos. min-width:0 quita el
   piso min-content de los botones (si no, 'Comentar' bloquea el reparto). */
.tta-post__actions > * { flex: 1 1 0; min-width: 0; box-sizing: border-box; }
.tta-post__actions .tta-react-group { display: flex; }
.tta-post__actions .tta-react-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
/* Chrome reparte el flex ANTES de sumar el padding lateral: con paddings
   distintos (grupo 0, botones 12px) los anchos salen chuecos. Padding lateral
   fuera; el contenido ya va centrado. */
.tta-post__actions > .tta-post__action { padding-left: 0; padding-right: 0; }

.tta-react-btn--sm {
    padding: 2px 6px; font-size: var(--tta-text-meta); border-radius: 12px;
    background: transparent; border-color: transparent;
    opacity: 0.5; transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.tta-react-btn--sm:hover { opacity: 1; border-color: var(--tta-surf-line); background: var(--tta-surf-0); }
.tta-react-btn--sm.is-active { opacity: 1; border-color: var(--gold); background: rgba(212,175,55,0.1); }
.tta-comment-reactions { flex-wrap: wrap; }

/* ── Gestión de categorías del feed (solo el máster) ──────────────── */
.tta-chip--manage {
    border-style: dashed !important;
    color: var(--text-muted);
}
.tta-chip--manage:hover { color: var(--gold); border-color: var(--gold) !important; }
.fc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px;
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,.08));
    background: var(--tta-surf-0, #0a0a0a);
    margin-bottom: 6px;
}
.fc-row__emoji { flex: none; width: 20px; text-align: center; }
.fc-row__name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--tta-text-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-row__count { flex: none; font-size: var(--tta-text-meta); color: var(--text-muted); }
.fc-row__del {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 8px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.fc-row__del:hover { color: #e26d6d; background: rgba(226,109,109,.1); border-color: rgba(226,109,109,.35); }
.fc-row__del:disabled { opacity: .4; cursor: default; }

/* ── iOS: mantener el dedo en "Me gusta" abría el menú de COPIAR del
   sistema encima del selector de emociones (19-ago: "lo daña todo").
   El pie del post no es texto seleccionable. ── */
.tta-post__actions, .tta-post__action, .tta-react-group, .tta-react-btn,
.tta-react-picker, .tta-react-opt, .tta-post__tally {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Menús flotantes (compartir, adjuntar): la clase existía SIN CSS — los
   botones salían con el estilo pelón del navegador (links azules
   apelotonados). ── */
.tta-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 11px 14px; text-align: left;
    background: none; border: none; cursor: pointer;
    color: var(--text-primary); font: 500 14px/1.2 inherit;
    text-decoration: none;
    transition: background .12s ease;
}
.tta-menu-item:hover { background: var(--tta-surf-0, #0e0e11); }
.tta-menu-item + .tta-menu-item { border-top: 1px solid var(--tta-surf-line, rgba(255,255,255,.06)); }

/* ── Pie de la publicación, al estilo de cualquier red social ────────
   Fila 1 (recuento): burbujas de reacciones a la izquierda, "N comentarios"
   a la derecha. Fila 2 (acciones): tres botones planos del MISMO ancho —
   Me gusta · Comentar · Compartir. El selector de emociones sale al pasar
   el ratón (escritorio) o al dejar el dedo apretado (táctil); ya no hay un
   botón "+" al lado ensuciando la fila. */
.tta-post__tally {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 12px;
    font-size: var(--tta-text-meta); color: var(--text-muted);
}
.tta-post__tally.is-empty { display: none; }
.tta-post__tallyc {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: inherit; font: inherit;
}
.tta-post__tallyc:hover { color: var(--text-secondary); text-decoration: underline; }
.tta-post__tallyc.is-zero { display: none; }

.tta-post__actions > .tta-post__action,
.tta-post__actions > .tta-react-group { flex: 1 1 0; min-width: 0; }
.tta-post__actions > .tta-post__action { justify-content: center; font-weight: 600; font-size: var(--tta-text-meta); }
.tta-post__action-l { white-space: nowrap; }

.tta-react-group {
    position: relative;
    display: inline-flex; align-items: center;
}
.tta-react-group--sm { gap: 6px; }
/* Botón principal: plano y a todo el ancho de su tercio. */
.tta-react-group:not(.tta-react-group--sm) .tta-react-btn {
    width: 100%; justify-content: center; gap: 7px;
    padding: 7px 10px; border-radius: 8px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); font-size: var(--tta-text-meta); font-weight: 600;
}
.tta-react-group:not(.tta-react-group--sm) .tta-react-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: transparent; color: var(--text-secondary, #D4D4D8);
}
.tta-react-group:not(.tta-react-group--sm) .tta-react-btn.is-active {
    color: var(--gold, #D4AF37); background: transparent; border-color: transparent;
}
.tta-react-group:not(.tta-react-group--sm) .tta-react-btn.is-active:hover {
    background: rgba(212,175,55,0.08);
}
.tta-react-group .tta-react-btn__l {
    font-size: var(--tta-text-meta); font-weight: 600; letter-spacing: .01em;
    white-space: nowrap;
}
.tta-react-emoji { line-height: 1; font-style: normal; }

.tta-react-picker {
    position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 60;
    display: none; gap: 4px; padding: 6px 8px;
    background: var(--tta-surf-2, #1c1c22);
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,.1));
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.tta-react-group.is-open .tta-react-picker {
    display: flex;
    animation: ttaReactPop .16s var(--tta-ease, ease-out) both;
}
@keyframes ttaReactPop {
    from { opacity: 0; transform: translateY(8px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
.tta-react-opt {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    color: var(--text-secondary);
    transition: transform .12s ease, background .12s ease;
}
.tta-react-opt:hover { transform: translateY(-6px) scale(1.22); }
.tta-react-opt.is-active { background: rgba(212,175,55,0.16); }
.tta-react-opt__g { line-height: 1; pointer-events: none; }
/* La etiqueta solo aparece al pasar por encima, como globito. */
.tta-react-opt__l {
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px; border-radius: 999px;
    background: var(--tta-surf-0, #0a0a0a);
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,.1));
    font-size: var(--tta-text-meta); font-weight: 600; white-space: nowrap;
    color: var(--text-secondary);
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.tta-react-opt:hover .tta-react-opt__l,
.tta-react-opt:focus-visible .tta-react-opt__l { opacity: 1; }

/* Resumen: burbujas encadenadas + total, como el "19" de Facebook. */
.tta-react-summary {
    display: inline-flex; align-items: center;
    color: var(--text-muted); font-size: var(--tta-text-meta);
}
.tta-react-summary__b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--tta-surf-2, #141418);
    box-shadow: 0 0 0 2px var(--tta-surf-1, #0E0E12);
}
/* Sin colorines: el icono relleno se lee a 12 px y la burbuja queda neutra.
   La única marca de color es la reacción propia, que va en dorado. */
.tta-react-summary__b .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: var(--text-secondary, #D4D4D8);
}
.tta-react-summary__b:first-child .material-symbols-outlined {
    color: var(--gold, #D4AF37);
}
.tta-react-summary__b + .tta-react-summary__b { margin-left: -6px; }
.tta-react-summary b { margin-left: 7px; font-size: var(--tta-text-meta); font-weight: 600; }
/* En un comentario no hay fila de recuento: va pegado y plano. */
.tta-react-summary--sm {
    gap: 1px; padding: 2px 8px 2px 6px;
    border-radius: 999px; background: var(--tta-surf-0, #0a0a0a);
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,.08));
}
.tta-react-summary--sm b { font-size: var(--tta-text-meta); margin-left: 4px; }

/* En pantallas chicas los nueve emojis NO caben en el tercio del botón: el
   globo se ancla a la fila entera (la tarjeta) y se centra ahí. Sin transform,
   que ya lo usa la animación de apertura. Si aun así no cupiera, salta de
   renglón en vez de desbordarse. */
@media (max-width: 480px) {
    /* 19-ago (foto de Mathias: "las emociones se despliegan verticalmente"):
       el selector se medía contra el GRUPO (40px de ancho) y con flex-wrap
       caía en columna. Su marco de referencia es la fila entera de acciones,
       así las nueve caben en horizontal. */
    .tta-post__actions,
    .tta-post__xbar,
    .tta-comment-reactions { position: relative; }
    .tta-post__actions > .tta-react-group,
    .tta-post__xbar > .tta-react-group,
    .tta-comment-reactions > .tta-react-group { position: static; }
    .tta-react-picker {
        left: 0; right: 0; margin-inline: auto;
        width: max-content; max-width: min(100%, calc(100vw - 24px));
        flex-wrap: wrap; justify-content: center;
        border-radius: 22px;
        padding: 5px; gap: 2px;
    }
    .tta-react-opt { width: 30px; height: 30px; }
    /* Tres botones en 375px: menos aire para que las etiquetas quepan. */
    .tta-post__actions > .tta-post__action,
    .tta-react-group:not(.tta-react-group--sm) .tta-react-btn {
        padding: 7px 4px; gap: 5px; font-size: 12px;
    }
    .tta-react-group .tta-react-btn__l { font-size: 12px; }
}

/* ── Encuestas del feed: elegir tiene que sentirse instantáneo ────────
   19-ago: votar recargaba el feed entero (salto de scroll + parpadeo) y las
   barras no animaban — "trabado y raro". El voto ya se pinta en el momento;
   aquí va el movimiento que lo hace sentir suave. */
.tta-poll { margin-top: 12px; }
.tta-poll__q { font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.tta-poll__opts { display: flex; flex-direction: column; gap: 6px; }
.tta-poll-option {
    position: relative; display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 11px 14px; text-align: left; font: inherit;
    color: var(--text-primary); background: transparent;
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,.1));
    border-radius: 10px; cursor: pointer; overflow: hidden;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.tta-poll-option:hover {
    border-color: rgba(212,175,55,.45); background: rgba(255,255,255,.02);
}
.tta-poll-option:active { transform: scale(.99); }
.tta-poll-option:focus-visible { outline: 2px solid var(--gold,#D4AF37); outline-offset: 2px; }
/* La barra: lo único que se mueve, y se mueve con calma (no salta). */
.tta-poll-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: rgba(212,175,55,.13); pointer-events: none;
    transition: width .55s cubic-bezier(.22,.61,.36,1), background .2s ease;
    will-change: width;
}
.tta-poll-option.is-voted { border-color: rgba(212,175,55,.55); }
.tta-poll-option.is-voted .tta-poll-fill { background: rgba(212,175,55,.22); }
.tta-poll-label { position: relative; flex: 1 1 auto; min-width: 0; }
.tta-poll-check {
    position: relative; flex: none; font-size: var(--tta-text-title); color: var(--gold,#D4AF37);
    font-variation-settings: 'FILL' 1;
    opacity: 0; transform: scale(.5);
    transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.tta-poll-option.is-voted .tta-poll-check { opacity: 1; transform: none; }
.tta-poll-pct {
    position: relative; flex: none; min-width: 38px; text-align: right;
    font-size: var(--tta-text-xs); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}
.tta-poll-option.is-voted .tta-poll-pct { color: var(--gold,#D4AF37); font-weight: 700; }
.tta-poll__foot { color: var(--text-muted); font-size: var(--tta-text-xs); margin-top: 7px; }
/* Mientras el servidor confirma no se puede votar dos veces, pero tampoco se
   congela la pantalla: el cambio ya se ve. */
.tta-poll.is-sending .tta-poll-option { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
    .tta-poll-fill, .tta-poll-check, .tta-poll-option, .tta-poll-pct { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Chips (category pills, filter pills)
   ═══════════════════════════════════════════════════════════════════ */
.tta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: 20px;
    background: var(--tta-surf-1); border: 1px solid var(--tta-surf-line);
    color: var(--text-secondary); font-size: var(--tta-text-sm);
    font-weight: 500; cursor: pointer;
    transition: all .15s ease; white-space: nowrap;
}
.tta-chip:hover { border-color: var(--gold); color: var(--text-primary); }
.tta-chip.is-active {
    background: var(--gold); color: #0A0A0A;
    border-color: var(--gold); font-weight: 600;
}
.tta-chip--sm {
    padding: 4px 10px; font-size: var(--tta-text-meta); border-radius: 14px;
}
.tta-feed-sort-periods { display: flex; align-items: center; }

/* ═══════════════════════════════════════════════════════════════════
   Poll component
   ═══════════════════════════════════════════════════════════════════ */
.tta-poll-option { transition: border-color .15s ease; }
.tta-poll-option:hover { border-color: var(--gold) !important; }
.tta-poll-option.is-voted { border-color: var(--gold) !important; background: rgba(212,175,55,0.04); }

/* ═══════════════════════════════════════════════════════════════════
   Empty state component
   ═══════════════════════════════════════════════════════════════════ */
.tta-empty {
    text-align: center; padding: 48px 24px;
    color: var(--text-muted);
}
.tta-empty__icon { font-size: var(--tta-text-display); margin-bottom: 12px; }
.tta-empty__title {
    font-size: var(--tta-text-md); font-weight: 600;
    color: var(--text-primary); margin-bottom: 6px;
}
.tta-empty__desc {
    font-size: var(--tta-text-sm); max-width: 360px;
    margin-inline: auto; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   Skeleton loading blocks
   ═══════════════════════════════════════════════════════════════════ */
.tta-skeleton, .tta-skeleton-block {
    background: linear-gradient(90deg, var(--tta-surf-1) 25%, var(--tta-surf-2, #1a1a1f) 50%, var(--tta-surf-1) 75%);
    background-size: 200% 100%;
    animation: ttaShimmer 1.5s infinite;
    border-radius: var(--tta-r-sm);
}
.tta-skeleton-block { height: 120px; }
@keyframes ttaShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* (badge-free/live/paid defined above in Badges section) */

/* ═══════════════════════════════════════════════════════════════════
   Auth modal — must render as fixed overlay above everything
   ═══════════════════════════════════════════════════════════════════ */

#tta-auth-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* dvh: viewport real en Safari/Chrome móvil */
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Siempre flex; se oculta con opacity+visibility para animar al abrir Y cerrar. */
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10100 !important;
    padding: var(--tta-s-4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease, visibility 0s linear .26s;
}
#tta-auth-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .26s ease, visibility 0s;
}

.tta-auth-card {
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line-strong);
    border-radius: var(--tta-r-lg);
    padding: var(--tta-s-8);
    min-width: 380px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--tta-shadow-lg);
    /* Entra y sale: desliza+escala (no salta al cerrar). */
    transform: translateY(16px) scale(.98);
    opacity: 0;
    transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .26s ease;
}
#tta-auth-modal.open .tta-auth-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    #tta-auth-modal, .tta-auth-card { transition: none; }
}
.tta-auth-card h3 {
    margin: 0 0 var(--tta-s-5);
    font-size: var(--tta-text-xl);
    letter-spacing: -0.01em;
}
.tta-auth-providers {
    display: flex;
    flex-direction: column;
    gap: var(--tta-s-2);
    margin-bottom: var(--tta-s-5);
}
.tta-divider {
    display: flex;
    align-items: center;
    gap: var(--tta-s-3);
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    margin: var(--tta-s-5) 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tta-divider::before, .tta-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--tta-surf-line);
}

/* ── Activation screen (WhatsApp one-tap) ──────────────────────── */
.tta-activate-code {
    font-family: var(--font-mono);
    font-size: var(--tta-text-2xl);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
    background: var(--tta-surf-0);
    border: 1px solid var(--tta-surf-line-gold);
    border-radius: var(--tta-r-md);
    padding: var(--tta-s-4) var(--tta-s-5);
    user-select: all;
    word-break: break-all;
}
.tta-activate-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tta-s-2);
    color: var(--text-muted);
    font-size: var(--tta-text-sm);
}
.tta-activate-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--tta-surf-line-strong);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
.tta-activate-fallback {
    margin-top: var(--tta-s-5);
    padding-top: var(--tta-s-4);
    border-top: 1px solid var(--tta-surf-line);
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   Paywall
   ═══════════════════════════════════════════════════════════════════ */

.tta-paywall {
    text-align: center;
    padding: var(--tta-s-12) var(--tta-s-6);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.08) 0%, transparent 70%),
        var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line-gold);
    border-radius: var(--tta-r-lg);
    box-shadow: var(--tta-shadow-md);
}
.tta-paywall h2 {
    color: var(--gold);
    margin: 0 0 var(--tta-s-3);
    font-size: var(--tta-text-xl);
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   Forms tweaks
   ═══════════════════════════════════════════════════════════════════ */

.tta-body .form-control {
    padding: var(--tta-s-3) var(--tta-s-4);
    font-size: var(--tta-text-body); /* 16px fijo: evita el zoom automático de iOS al enfocar inputs */
    border-radius: var(--tta-r-sm);
    transition: border-color var(--tta-t-fast) var(--tta-ease),
                box-shadow var(--tta-t-fast) var(--tta-ease),
                background var(--tta-t-fast) var(--tta-ease);
}
.tta-body .form-control:focus {
    box-shadow: var(--tta-shadow-glow);
}

/* Buttons — tta override for extra polish */
.tta-body .btn {
    padding: var(--tta-s-3) var(--tta-s-5);
    font-size: var(--tta-text-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--tta-r-sm);
    transition: transform var(--tta-t-fast) var(--tta-ease),
                box-shadow var(--tta-t-fast) var(--tta-ease),
                background var(--tta-t-fast) var(--tta-ease),
                border-color var(--tta-t-fast) var(--tta-ease);
}
.tta-body .btn:hover { transform: translateY(-1px); }
.tta-body .btn:active { transform: translateY(0); }
.tta-body .btn-lg { padding: var(--tta-s-4) var(--tta-s-8); font-size: var(--tta-text-base); }

/* ═══════════════════════════════════════════════════════════════════
   Skeletons
   ═══════════════════════════════════════════════════════════════════ */

.tta-skeleton {
    background: linear-gradient(90deg,
        var(--tta-surf-1) 0%,
        var(--tta-surf-2) 50%,
        var(--tta-surf-1) 100%);
    background-size: 200% 100%;
    border-radius: var(--tta-r-sm);
    animation: ttaShimmer 1.4s infinite;
}
/* (ttaShimmer keyframes defined above in Skeleton section) */

/* (empty state defined above in Empty state component section) */

/* ═══════════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════════ */

@keyframes ttaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ttaFadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ttaSlideInUp {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ttaPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Stagger card entrance */
.tta-grid > *:nth-child(1) { animation-delay: 0s; }
.tta-grid > *:nth-child(2) { animation-delay: .04s; }
.tta-grid > *:nth-child(3) { animation-delay: .08s; }
.tta-grid > *:nth-child(4) { animation-delay: .12s; }
.tta-grid > *:nth-child(5) { animation-delay: .16s; }
.tta-grid > *:nth-child(6) { animation-delay: .2s; }
.tta-grid > * { animation: ttaFadeInUp .4s var(--tta-ease) both; }

/* ═══════════════════════════════════════════════════════════════════
   Discover hero (landing)
   ═══════════════════════════════════════════════════════════════════ */

.tta-discover-hero {
    text-align: center;
    padding: var(--tta-s-16) var(--tta-s-4) var(--tta-s-10);
    position: relative;
}
.tta-discover-hero h1 {
    font-size: var(--tta-fluid-hero);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 var(--tta-s-4);
}
.tta-discover-hero h1 .tta-accent {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.tta-discover-hero p {
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0 auto var(--tta-s-8);
    font-size: var(--tta-text-md);
    line-height: 1.55;
}
.tta-search {
    max-width: 580px;
    margin: 0 auto;
    position: relative;
}
.tta-search input {
    width: 100%;
    padding: var(--tta-s-4) var(--tta-s-5) var(--tta-s-4) var(--tta-s-10);
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: var(--tta-text-base);
    font-family: inherit;
    transition: all var(--tta-t-base) var(--tta-ease);
    outline: none;
    text-align: left;
}
.tta-search input::placeholder { color: var(--text-muted); }
.tta-search input:focus {
    border-color: var(--gold);
    background: var(--tta-surf-2);
    box-shadow: var(--tta-shadow-glow);
}
.tta-search::before {
    content: '';
    position: absolute;
    left: var(--tta-s-4);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8B96' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center;
}

/* ═══════════════════════════════════════════════════════════════════
   Section heading
   ═══════════════════════════════════════════════════════════════════ */

.tta-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: var(--tta-s-10) 0 var(--tta-s-5);
}
.tta-section-title h2 {
    margin: 0;
    font-size: var(--tta-text-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.tta-section-title__sub {
    color: var(--text-muted);
    font-size: var(--tta-text-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   Glass card (shared component)
   ═══════════════════════════════════════════════════════════════════ */
.glass-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-lg);
    padding: var(--tta-s-6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile hamburger menu
   ═══════════════════════════════════════════════════════════════════ */
.tta-nav__hamburger {
    display: none; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: var(--tta-s-2); line-height: 1;
}
.tta-nav__hamburger svg { width: 22px; height: 22px; fill: currentColor; }

/* Drawer del menú: siempre en el DOM; se muestra/oculta con opacity+visibility para
   poder animar al ABRIR y al CERRAR (display:none no se puede transicionar → cerrar
   se veía brusco). El panel se desliza con easing tipo iOS. */
.tta-mobile-menu {
    position: fixed; inset: 0; z-index: 200;
    display: flex; justify-content: flex-end;
    background: rgba(0,0,0,0);
    -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .34s ease, background .34s ease,
                -webkit-backdrop-filter .34s ease, backdrop-filter .34s ease,
                visibility 0s linear .34s;
}
.tta-mobile-menu.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: opacity .34s ease, background .34s ease,
                -webkit-backdrop-filter .34s ease, backdrop-filter .34s ease,
                visibility 0s;
}
.tta-mobile-menu__panel {
    width: 260px; max-width: 80vw; height: 100%;
    background: var(--tta-surf-0); border-left: 1px solid var(--tta-surf-line);
    padding: var(--tta-s-6); display: flex; flex-direction: column; gap: var(--tta-s-3);
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.32,.72,0,1);
    will-change: transform;
}
.tta-mobile-menu.open .tta-mobile-menu__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .tta-mobile-menu, .tta-mobile-menu__panel { transition: none; }
}
.tta-mobile-menu__close {
    align-self: flex-end; background: none; border: none;
    color: var(--text-secondary); cursor: pointer; font-size: var(--tta-text-hero); line-height: 1;
}
.tta-mobile-menu__link {
    display: block; padding: var(--tta-s-3) var(--tta-s-4);
    color: var(--text-primary); text-decoration: none;
    font-size: var(--tta-text-md); font-weight: 500;
    border-radius: var(--tta-r-sm); transition: background .15s;
}
.tta-mobile-menu__link:hover { background: rgba(255,255,255,0.04); }

/* ═══════════════════════════════════════════════════════════════════
   Course detail / learn responsive grids
   ═══════════════════════════════════════════════════════════════════ */
.tta-course-layout {
    display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start;
}
/* Tablet/móvil: el aside de compra (340px) apretaba la columna principal en el
   rango 769–900px. Colapsa a una columna y manda el aside (precio/CTA) debajo.
   !important: los <aside> de course_detail/bundle traen position:sticky inline,
   que de otro modo gana sobre la regla y deja el sidebar pegado al hacer scroll. */
@media (max-width: 900px) {
    .tta-course-layout { grid-template-columns: 1fr; }
    .tta-course-layout > aside { position: static !important; top: auto !important; }
}
/* Página de lección = app de pantalla completa: 3 columnas (temario | video | notas)
   dentro del viewport, SIN scroll de página. Rompe el cap de .tta-main, oculta el
   footer y usa el fondo de la web comercial. Cada columna gestiona su propio scroll. */
.tta-main:has(.tta-learn-layout) { max-width: none; padding: 0; }
.tta-body:has(.tta-learn-layout) .tta-footer { display: none; }
/* height:100% se resuelve contra .tta-main (flex:1 en el body) → llena el alto
   exacto sin asumir la altura del nav (que es ~76px, no 64). */
.tta-main:has(.tta-learn-layout) { min-height: 0; }
.tta-learn-layout {
    /* Patrón YouTube (pedido 19-ago): el VIDEO es el protagonista a la
       izquierda y el temario pasa a ser el rail derecho de "siguientes",
       como la lista de sugerencias de YouTube. El DOM no cambia (sidebar
       primero): el grid recoloca. */
    display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 0;
    height: 100%; min-height: 0; overflow: hidden;
    background:
        radial-gradient(70% 60% at 15% 5%, rgba(212,175,55,0.10), transparent 60%),
        radial-gradient(60% 70% at 90% 30%, rgba(94,196,255,0.04), transparent 65%),
        radial-gradient(70% 60% at 60% 100%, rgba(212,175,55,0.08), transparent 70%),
        #09090B;
}
.tta-learn-sidebar {
    overflow-y: auto; min-height: 0; border-left: 1px solid var(--tta-surf-line);
    padding: var(--tta-s-4); background: var(--tta-surf-0);
    grid-column: 2; grid-row: 1;
}
.tta-learn-main {
    display: flex; flex-direction: column; gap: var(--tta-s-3); min-height: 0;
    padding: var(--tta-s-5) var(--tta-s-6); min-width: 0; overflow-y: auto;
    grid-column: 1; grid-row: 1;
}
/* Orden YouTube dentro de la columna: video arriba, título DEBAJO, acciones,
   descripción y luego notas/comentarios. El DOM no se toca (flex order). */
.tta-learn-main > #lesson-player { order: 1; }
.tta-learn-main > .tta-learn-title { order: 2; font-size: var(--tta-text-xl); }
.tta-learn-main > .tta-learn-actionbar { order: 3; }
.tta-learn-main > #lesson-desc { order: 4; }
.tta-learn-main > * { order: 5; }
/* Título de la lección (sobre el reproductor). */
.tta-learn-title {
    flex: 0 0 auto; margin: 0;
    font-size: var(--tta-text-lg); font-weight: 700;
    letter-spacing: -0.015em; line-height: 1.25;
    color: var(--text-white);
}
#lesson-player {
    flex: 0 0 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
}
/* El video se ajusta al ancho Y al alto disponibles, manteniendo 16:9.
   Reserva ~260px (nav + título + barra de acción + paddings) para que el
   título de arriba y las notas de abajo queden alcanzables al hacer scroll. */
.tta-learn-main .tta-player {
    /* Teatro YouTube: a todo el ancho de la columna; el alto solo lo frena
       dejar visible el título (~190px de reserva, antes 260). */
    width: min(100%, calc((100dvh - 190px) * 16 / 9));
    aspect-ratio: 16 / 9; margin: 0 auto;
    border-radius: 12px; overflow: hidden;
}
/* Máscara superior del reproductor: tapa el título/canal que YouTube muestra
   arriba. pointer-events:none → los clics siguen llegando al video. Sólo cubre
   la franja de arriba (no toca los controles ni el botón de pantalla completa). */
.tta-learn-main .tta-player::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 64px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
}
.tta-learn-actionbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#lesson-desc { flex: 0 0 auto; }

/* ── Notas de esta clase (debajo del reproductor) ──────────────── */
.tta-learn-notes {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: var(--tta-s-3);
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    padding: var(--tta-s-4);
    margin-top: var(--tta-s-2);
}
.tta-learn-notes__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--tta-s-3);
}
.tta-learn-notes__add { display: flex; gap: var(--tta-s-2); align-items: center; }
.tta-learn-notes__add .btn { white-space: nowrap; flex: 0 0 auto; }
.tta-learn-notes__list { display: flex; flex-direction: column; gap: var(--tta-s-2); }
.tta-note-row {
    display: flex; align-items: flex-start; gap: var(--tta-s-2);
    padding: var(--tta-s-2) 0;
    border-top: 1px solid var(--tta-surf-line);
}
.tta-note-row:first-child { border-top: none; }
.tta-note-ts { flex: 0 0 auto; font-family: var(--font-mono); }
.tta-note-text {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--tta-text-sm); line-height: 1.5;
    color: var(--text-secondary); word-break: break-word;
}
.tta-note-del {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: var(--tta-text-md); line-height: 1;
    padding: 0 var(--tta-s-1); transition: color var(--tta-t-fast) var(--tta-ease);
}
.tta-note-del:hover { color: var(--red); }
/* Pantallas medianas/chicas: apilar en una columna y permitir scroll natural. */
@media (max-width: 1024px) {
    .tta-body:has(.tta-learn-layout) .tta-footer { display: block; }
    /* La lección "retiene" el scroll: overscroll-behavior:contain evita que el
       gesto se escape (pull-to-refresh / rebote que saca de la página), así el
       alumno se queda en su lección. 100dvh = alto real visible en móvil. */
    .tta-body:has(.tta-learn-layout) { overscroll-behavior-y: contain; }
    .tta-learn-layout { grid-template-columns: 1fr; height: auto; min-height: calc(100dvh - 64px); overflow: visible; }
    .tta-learn-sidebar { border-left: none; border-bottom: 1px solid var(--tta-surf-line); grid-column: 1; grid-row: auto; }
    .tta-learn-main { overflow: visible; padding: 0 0 var(--tta-s-4); grid-column: 1; }
    /* El video queda FIJO arriba mientras el alumno baja por notas y
       comentarios (la app de YouTube): sticky + borde a borde. */
    #lesson-player { display: block; position: sticky; top: 0; z-index: 60; background: #000; }
    .tta-learn-main .tta-player { width: 100%; border-radius: 0; }
    /* El video va a sangre; el resto del contenido recupera su aire. */
    .tta-learn-main > *:not(#lesson-player) { margin-inline: var(--tta-s-4); }
    /* En móvil/tablet, "Marcar como completada" y "Siguiente lección" van lado
       a lado en una sola fila (sin apilar a ancho completo). */
    .tta-guia-footer { flex-wrap: nowrap; }
    .tta-guia-footer #btn-complete,
    .tta-guia-footer #btn-next { flex: 1 1 0; margin-left: 0; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Auth modal overlay
   ═══════════════════════════════════════════════════════════════════ */
.tta-auth-overlay {
    display: none; position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    justify-content: center; align-items: center; padding: var(--tta-s-4);
}
.tta-auth-overlay.open { display: flex; }
.tta-auth-overlay .tta-auth-card {
    max-height: 90vh; overflow-y: auto; position: relative;
    animation: tta-fade-up .25s ease;
}
@keyframes tta-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive visibility utilities
   ═══════════════════════════════════════════════════════════════════ */
.hide-sm { display: inline; }
.hide-lg { display: none; }

@media (max-width: 768px) {
    /* Hero compacto en móvil: sin el piso de 300px (se veía enorme) + aire antes
       de las pestañas para que "respire". */
    .tta-hero { min-height: 0; margin-bottom: var(--tta-s-6); }
    .tta-hero__content {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--tta-s-5);
        gap: var(--tta-s-3);
        min-height: 0;
    }
    .tta-hero__avatar { width: 64px; height: 64px; }
    .tta-hero__meta h1 { font-size: var(--tta-text-xl); }
    .tta-main { padding: var(--tta-s-5) var(--tta-s-4) var(--tta-s-10); }
    /* MÓVIL: se elimina la barra superior entera (logo/Explorar/Mensajes/campana/
       hamburguesa). Todo vive abajo: Explorar·Aula·Ranking·Menú(☰), y el ☰ abre el
       panel con Perfil/Notificaciones/Mensajes/Mi cuenta. Más espacio vertical. */
    .tta-nav { display: none; }
    .tta-tabs { top: 0; }
    /* En móvil los botones de auth viven en el menú hamburguesa; ocultamos el slot
       de escritorio para que no se dupliquen (la página de registro lo re-muestra
       con `body.tta-anon`, regla más específica). */
    #tta-auth-slot { display: none; }
    .tta-discover-hero { padding: var(--tta-s-10) var(--tta-s-3) var(--tta-s-6); }
    .tta-grid { gap: var(--tta-s-4); }
    .tta-grid--courses { grid-template-columns: 1fr; }
    .tta-grid--lives { grid-template-columns: 1fr; }
    .tta-post { padding: var(--tta-s-4); }
    .tta-auth-card { min-width: auto; padding: var(--tta-s-6); }

    .tta-course-layout { grid-template-columns: 1fr; }
    .tta-course-layout > aside { position: static; }
    .tta-learn-layout { grid-template-columns: 1fr; }
    .tta-learn-sidebar {
        position: static; max-height: none; border-right: none;
        border-bottom: 1px solid var(--tta-surf-line);
    }

    .hide-sm { display: none !important; }
    .hide-lg { display: inline !important; }

    /* Touch-friendly targets (WCAG 44px minimum) */
    .btn { min-height: 44px; padding: 10px 20px; }
    .btn-sm { min-height: 40px; padding: 8px 16px; }
    .form-control, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"] {
        min-height: 44px;
        padding: 10px 16px;
        font-size: var(--tta-text-title); /* prevents iOS zoom on focus */
    }
    .tta-chip { min-height: 36px; padding: 8px 14px; }
}

/* ── Rich text composer ──────────────────────────────────────── */
.tta-composer-toolbar {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--tta-surf-line);
    background: var(--tta-surf-1);
    border-radius: var(--tta-r-md) var(--tta-r-md) 0 0;
    flex-wrap: wrap;
}
.tta-composer-toolbar button {
    background: none;
    border: none;
    color: var(--tta-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--tta-text-body);
    font-weight: 600;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.tta-composer-toolbar button:hover {
    background: rgba(255,255,255,0.08);
    color: var(--tta-text-primary);
}
.tta-composer-toolbar button.active {
    background: rgba(212,175,55,0.15);
    color: var(--gold);
}
.tta-composer-editor {
    min-height: 80px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 16px;
    outline: none;
    color: var(--tta-text-primary);
    font-size: var(--tta-text-body);
    line-height: 1.6;
    border: 1px solid var(--tta-surf-line);
    border-top: none;
    border-radius: 0 0 var(--tta-r-md) var(--tta-r-md);
    background: var(--tta-surf-1);
}
.tta-composer-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--tta-text-muted);
    pointer-events: none;
}
.tta-composer-editor:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.15);
}
.tta-composer-editor a { color: var(--gold); text-decoration: underline; }
.tta-composer-editor code {
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--tta-text-meta);
}
.tta-composer-editor blockquote {
    border-left: 3px solid var(--gold);
    margin: 8px 0;
    padding: 4px 12px;
    color: var(--tta-text-muted);
}
.tta-composer-editor ul, .tta-composer-editor ol {
    padding-left: 24px;
    margin: 4px 0;
}
.tta-composer-editor hr {
    border: none;
    border-top: 1px solid var(--tta-surf-line);
    margin: 12px 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════
   Mobile bottom tab bar (Skool-style)
   ═══════════════════════════════════════════════════════════════════ */
.tta-bottom-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tta-surf-1);
    border-top: 1px solid var(--tta-surf-line);
    z-index: 1000;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    justify-content: space-around;
}
@media (max-width: 768px) {
    .tta-bottom-tabs { display: flex; }
    /* La barra flota sobre el contenido: hay que reservarle su alto REAL
       (~70px) más el área segura del teléfono, o lo último de cada pestaña
       queda debajo para siempre. El pie va aparte de .tta-main: sin su propio
       hueco, los enlaces legales quedaban tapados y no se podían tocar. */
    .tta-main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .tta-footer { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}
.tta-bottom-tab {
    display: flex;
    flex: 1;                 /* 5 pestañas se reparten el ancho sin desbordar */
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--tta-text-meta);
    padding: 4px 2px;
    transition: color 0.15s;
    min-width: 0;
    white-space: nowrap;
}
.tta-bottom-tab .material-symbols-outlined { font-size: 22px; }
.tta-bottom-tab:hover, .tta-bottom-tab.active { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   Small phones (360-480px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Ojo: este atajo pisaba el hueco reservado arriba y dejaba 60px para una
       barra de 70 — en el iPhone, con el área segura, el corte se comía una
       tarjeta entera (capturas de Mathias, 20-ago-2026). */
    .tta-main { padding: 16px 12px calc(78px + env(safe-area-inset-bottom)); }
    .tta-hero__content { gap: 12px; }
    .tta-hero__avatar { width: 64px; height: 64px; }
    .tta-hero__info h1 { font-size: 1.25rem; }
    .tta-hero__stats { gap: 12px; }
    .tta-hero__stat span:first-child { font-size: 1.1rem; }
    .tta-tabs { gap: 0; }
    .tta-tabs button { padding: 10px 12px; font-size: var(--tta-text-meta); }
    .tta-post { padding: 14px; }
    .tta-composer-editor { min-height: 60px; font-size: 14px; }
    #tta-toasts { left: 8px; right: 8px; top: 8px; }
    .tta-toast { font-size: var(--tta-text-meta); padding: 10px 14px; }

    /* Leaderboard rows: tighter on small phones */
    .tta-lb-row { gap: 8px !important; padding: 10px !important; }
    .tta-lb-header { gap: 8px !important; padding: 6px 10px !important; }

    /* Calendar grid cells */
    .tta-cal-day { padding: 6px 2px; font-size: var(--tta-text-meta); }

    /* Composer avatar hide on very small */
    #composer-avatar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Tablets (769px-1024px)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .tta-main { padding: 24px 32px 48px; max-width: 100%; }
    .tta-grid--courses { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   Large desktop (1440px+)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
    /* Antes recapaba a 1200px (desperdiciaba la pantalla en monitores grandes).
       Ahora fluido: usa todo el ancho con padding lateral proporcional. */
    .tta-main { max-width: 100%; padding-inline: clamp(32px, 4vw, 96px); }
}

/* ═══════════════════════════════════════════════════════════════════
   Button variants + disabled state
   ═══════════════════════════════════════════════════════════════════ */

.btn-danger {
    background: #ef4444;
    color: #fff;
    border: 1px solid transparent;
}
.btn-danger:hover { background: #dc2626; transform: translateY(-1px); }

.btn-success {
    background: #22c55e;
    color: #fff;
    border: 1px solid transparent;
}
.btn-success:hover { background: #16a34a; transform: translateY(-1px); }

.btn-warning {
    background: #f59e0b;
    color: #000;
    border: 1px solid transparent;
}

.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Form labels + input states
   ═══════════════════════════════════════════════════════════════════ */

label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--tta-text-body);
    font-weight: 500;
    color: var(--tta-text-secondary);
}

.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--tta-surf-0);
}
.form-control::placeholder {
    /* --tta-text-muted no existe: sin este fallback el placeholder heredaba el
       color del texto (casi blanco) y parecía un título. Tenue + sin negrilla. */
    color: var(--text-dim, #71717A);
    font-weight: 400;
    opacity: 1; /* Firefox baja la opacidad del placeholder por defecto */
}

/* Custom checkbox styling */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--tta-surf-line);
    border-radius: 4px;
    background: var(--tta-surf-1);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    /* El relleno dorado es INSTANTÁNEO (background sin transición): el color
       aparece apenas se toca. Solo el borde y el "presionado" se animan.
       touch-action + tap-highlight matan el retardo de ~300ms del tap en móvil. */
    transition: border-color 0.12s, transform 0.06s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"]:active {
    transform: scale(0.88);
}
input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}
/* CAUSA RAÍZ del "checkbox que no se llena al hacer clic": main.css aplica
   `textarea:focus, input:focus, select:focus { background: var(--bg-elevated) !important }`
   (y en modo claro `html[data-theme="light"] input { background:#fff !important }`).
   Como un checkbox ES un <input>, al hacer clic queda enfocado y ese !important
   pisaba el relleno dorado del :checked: se veía un cuadro oscuro con anillo de foco
   dorado y el ✓ negro invisible, hasta que el control perdía el foco. Re-afirmamos el
   relleno dorado con !important y mayor especificidad: gana en modo claro y oscuro,
   con o sin foco. (--gold ya existe en ambos temas, por eso no hardcodeamos color.) */
input[type="checkbox"]:checked,
input[type="checkbox"]:checked:focus,
input[type="checkbox"]:checked:focus-visible {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}
input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: var(--tta-text-body);
    font-weight: 700;
}

/* ── Feedback táctil inmediato en TODA la academia ──────────────────────
   Sin touch-action, móvil/PWA espera ~300ms tras el tap (heurística de
   doble-tap) antes de marcar el control: el usuario tocaba y "a veces" no
   veía respuesta. `manipulation` conserva el pinch-zoom (accesibilidad) y
   solo elimina ese retardo. Aplica a todo control interactivo. */
button, a, label, select, textarea,
input[type="radio"], input[type="checkbox"],
.btn, [role="button"], .rc-switch, .rc-switch span {
    touch-action: manipulation;
}
/* Radios nativos: dorado de marca + sin tap-highlight = marcado al instante. */
input[type="radio"] {
    accent-color: var(--gold);
    -webkit-tap-highlight-color: transparent;
}
.rc-switch, .rc-switch span { -webkit-tap-highlight-color: transparent; }

/* Select dropdown */
select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--tta-surf-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 36px;
}

/* ═══════════════════════════════════════════════════════════════════
   Skool-feel polish
   ═══════════════════════════════════════════════════════════════════ */

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Calendar month grid
   ═══════════════════════════════════════════════════════════════════ */
.tta-calendar-grid {
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-lg);
    padding: 16px;
    margin-bottom: 20px;
}
.tta-calendar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.tta-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.tta-calendar-days .tta-cal-weekday {
    font-size: var(--tta-text-meta);
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px;
    text-transform: uppercase;
}
.tta-calendar-days .tta-cal-day {
    padding: 8px 4px;
    border-radius: 8px;
    font-size: var(--tta-text-body);
    cursor: pointer;
    position: relative;
    color: var(--text-secondary);
    transition: background 0.15s;
}
.tta-cal-day:hover { background: rgba(255,255,255,0.04); }
.tta-cal-day.today { color: var(--gold); font-weight: 700; }
.tta-cal-day.selected { background: var(--gold); color: #000; font-weight: 700; }
.tta-cal-day.other-month { opacity: 0.3; cursor: default; }
.tta-cal-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
}
.tta-cal-day.selected.has-event::after {
    background: #000;
}

/* ═══════════════════════════════════════════════════════════════════
   Leaderboard enhancements
   ═══════════════════════════════════════════════════════════════════ */
.tta-lb-row.tta-lb-me {
    border: 1px solid rgba(212,175,55,0.4);
    background: rgba(212,175,55,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   @mention autocomplete dropdown
   ═══════════════════════════════════════════════════════════════════ */
.tta-mention-dropdown {
    position: absolute;
    background: var(--tta-surf-2);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    box-shadow: var(--tta-shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    min-width: 200px;
}
.tta-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--tta-text-body);
    color: var(--tta-text-primary);
    transition: background 0.1s;
}
.tta-mention-item:hover, .tta-mention-item.active {
    background: rgba(212,175,55,0.1);
}
.tta-mention-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.tta-mention {
    color: var(--gold);
    font-weight: 600;
    background: rgba(212,175,55,0.1);
    padding: 1px 4px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Link preview card
   ═══════════════════════════════════════════════════════════════════ */
.tta-link-preview-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-top: 8px;
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    position: relative;
    overflow: hidden;
}
.tta-link-preview-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.tta-link-preview-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    color: var(--tta-text-muted);
    font-size: var(--tta-text-title);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   Trending hashtags
   ═══════════════════════════════════════════════════════════════════ */
.tta-trending-tags {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
}
.tta-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(212,175,55,0.08);
    color: var(--gold);
    font-size: var(--tta-text-meta);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.tta-tag-chip:hover { border-color: var(--gold); background: rgba(212,175,55,0.15); }
.tta-tag-chip .tta-tag-count { font-size: var(--tta-text-meta); color: var(--tta-text-muted); }
.tta-tag-chip.is-active { border-color: var(--gold); background: rgba(212,175,55,0.18); }

/* ═══════════════════════════════════════════════════════════════════
   Comment reply nesting
   ═══════════════════════════════════════════════════════════════════ */
.tta-comment-nested {
    margin-left: 32px;
    border-left: 2px solid var(--tta-surf-line);
    padding-left: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   Toast notifications (enhanced)
   ═══════════════════════════════════════════════════════════════════ */
#tta-toasts { position: fixed; top: 16px; right: 16px; z-index: 2147483000; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.tta-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--tta-r-md, 10px); color: #fff; font-size: var(--tta-text-body); box-shadow: var(--tta-shadow-lg, 0 8px 24px rgba(0,0,0,0.4)); transform: translateX(120%); transition: transform 0.3s ease; }
.tta-toast--visible { transform: translateX(0); }
.tta-toast__icon { font-size: var(--tta-text-title); flex: none; }
.tta-toast__msg { flex: 1; line-height: 1.4; }
.tta-toast--success { background: #16a34a; }
.tta-toast--error { background: #dc2626; }
.tta-toast--warning { background: #d97706; }
.tta-toast--info { background: #2563eb; }

/* ═══════════════════════════════════════════════════════════════════
   Auth modal form
   ═══════════════════════════════════════════════════════════════════ */
.tta-auth-form { max-width: 400px; margin: 0 auto; padding: 32px 24px; }
.tta-auth-form .form-control { margin-bottom: 12px; }
.tta-auth-form .btn { width: 100%; margin-bottom: 8px; }
.tta-auth-error { color: var(--red, #ef4444); font-size: var(--tta-text-meta); margin-bottom: 12px; text-align: center; }
.tta-auth-slot { display: flex; gap: 8px; align-items: center; }

/* Social login buttons */
.tta-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 16px; border-radius: var(--tta-r-md, 10px); border: 1px solid var(--tta-surf-line); background: var(--tta-surf-1); color: var(--tta-text-primary, var(--text-primary)); font-size: var(--tta-text-body); font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tta-social-btn:hover { border-color: var(--gold); background: var(--tta-surf-2); }
.tta-social-btn img, .tta-social-btn svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════════
   Notification drawer & items
   ═══════════════════════════════════════════════════════════════════ */
.tta-notif-drawer { position: fixed; top: 0; right: -380px; width: 380px; max-width: 100vw; height: 100vh; background: var(--tta-surf-0, #08080a); border-left: 1px solid var(--tta-surf-line); z-index: 1200; transition: right 0.25s ease; overflow-y: auto; display: flex; flex-direction: column; }
.tta-notif-drawer.is-open { right: 0; }
.tta-notif-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--tta-surf-line); }
.tta-notif-close { background: none; border: none; color: var(--text-muted); font-size: var(--tta-text-hero); cursor: pointer; padding: 4px; }
.tta-notif-close:hover { color: var(--text-primary); }
.tta-notif-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--tta-surf-line, rgba(255,255,255,0.06)); transition: background 0.12s; }
.tta-notif-item:hover { background: var(--tta-surf-1); }
.tta-notif-item.unread { background: rgba(212,175,55,0.04); }
.tta-notif-item.unread::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 6px; flex: none; }
.tta-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red, #ef4444); color: #fff; font-size: var(--tta-text-meta); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tta-notif-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--red, #ef4444); position: absolute; top: 2px; right: 2px; }
.tta-notif-btn { background: none; border: none; color: var(--gold); font-size: var(--tta-text-meta); cursor: pointer; padding: 4px 8px; }
.tta-notif-btn:hover { text-decoration: underline; }
.tta-notif-bell { position: relative; }

/* ═══════════════════════════════════════════════════════════════════
   Gamification: streaks, level-up, badges
   ═══════════════════════════════════════════════════════════════════ */
.tta-gamification { display: flex; align-items: center; gap: 8px; }
.tta-streak { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; background: rgba(239,68,68,0.1); color: #ef4444; font-size: var(--tta-text-meta); font-weight: 600; }
.tta-lvl-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--text-muted); font-size: var(--tta-text-hero); cursor: pointer; }
.tta-imp-banner { padding: 12px 16px; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.2); border-radius: var(--tta-r-md); text-align: center; }
.tta-imp-end { opacity: 0.5; pointer-events: none; }

/* Level badge (circular) */
.tta-level-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: var(--tta-text-meta); font-weight: 700; letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════════════════════════
   Post actions & menus
   ═══════════════════════════════════════════════════════════════════ */
.tta-post-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tta-post-menu { position: absolute; right: 0; top: 100%; min-width: 160px; background: var(--tta-surf-1); border: 1px solid var(--tta-surf-line); border-radius: var(--tta-r-md); box-shadow: var(--tta-shadow-lg); z-index: 100; overflow: hidden; }
.tta-post-menu button { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; color: var(--text-primary); font-size: var(--tta-text-body); cursor: pointer; }
.tta-post-menu button:hover { background: var(--tta-surf-2); }

/* ═══════════════════════════════════════════════════════════════════
   Member cards grid
   ═══════════════════════════════════════════════════════════════════ */
.tta-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tta-member-card { text-align: center; padding: 20px 16px; transition: border-color 0.15s; }
.tta-member-card:hover { border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   Leaderboard table
   ═══════════════════════════════════════════════════════════════════ */
.tta-lb-row { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 6px; transition: border-color 0.15s; }
.tta-lb-row:hover { border-color: rgba(212,175,55,0.2); }
.tta-lb-me { border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.06); }

/* ═══════════════════════════════════════════════════════════════════
   Course progress bar
   ═══════════════════════════════════════════════════════════════════ */
.tta-progress-bar { height: 6px; border-radius: 3px; background: var(--tta-surf-2); overflow: hidden; }
.tta-progress-bar__fill { height: 100%; border-radius: 3px; background: var(--gold); transition: width 0.4s ease; }

/* ═══════════════════════════════════════════════════════════════════
   Theme toggle
   ═══════════════════════════════════════════════════════════════════ */
.tta-theme-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 50%; transition: color 0.15s, background 0.15s; }
.tta-theme-toggle:hover { color: var(--gold); background: var(--tta-surf-1); }
.tta-theme-icon { font-size: 20px; }

/* ═══════════════════════════════════════════════════════════════════
   Tour overlay & tooltips
   ═══════════════════════════════════════════════════════════════════ */
.tta-tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; }
.tta-tour-tooltip { position: absolute; max-width: 320px; padding: 20px; background: var(--tta-surf-1); border: 1px solid var(--gold); border-radius: var(--tta-r-md); box-shadow: var(--tta-shadow-lg); z-index: 2001; color: var(--text-primary); font-size: var(--tta-text-body); line-height: 1.5; }
.tta-tour-tooltip::after { content: ''; position: absolute; bottom: -8px; left: 24px; width: 16px; height: 16px; background: var(--tta-surf-1); border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); }
.tta-tour-next, .tta-tour-prev, .tta-tour-skip { padding: 6px 14px; border-radius: var(--tta-r-sm); font-size: var(--tta-text-meta); cursor: pointer; border: none; }
.tta-tour-next { background: var(--gold); color: #0A0A0A; font-weight: 600; }
.tta-tour-prev { background: var(--tta-surf-2); color: var(--text-primary); }
.tta-tour-skip { background: none; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   Welcome video
   ═══════════════════════════════════════════════════════════════════ */
.tta-wv-close, .tta-wv-ok { background: none; border: none; cursor: pointer; padding: 8px; }
.tta-wv-close { position: absolute; top: 8px; right: 8px; color: var(--text-muted); font-size: var(--tta-text-hero); }
.tta-wv-ok { background: var(--gold); color: #0A0A0A; padding: 10px 24px; border-radius: var(--tta-r-md); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   FX hint & buy button
   ═══════════════════════════════════════════════════════════════════ */
.tta-fx-hint { font-size: var(--tta-text-meta); color: var(--text-muted); margin-top: 4px; }
.tta-buy { display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   QR picker (payment)
   ═══════════════════════════════════════════════════════════════════ */
.tta-qr-picker { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
.tta-qr-body { text-align: center; }
.tta-qr-body img { max-width: 200px; border-radius: var(--tta-r-md); }

/* ═══════════════════════════════════════════════════════════════════
   Language switcher & widgets
   ═══════════════════════════════════════════════════════════════════ */
.tta-lang-switcher { display: inline-flex; gap: 4px; }
.tta-lang-switcher button { padding: 4px 10px; border: 1px solid var(--tta-surf-line); border-radius: var(--tta-r-sm); background: var(--tta-surf-1); color: var(--text-secondary); font-size: var(--tta-text-meta); cursor: pointer; }
.tta-lang-switcher button.is-active { border-color: var(--gold); color: var(--gold); }
.tta-widgets { display: flex; flex-direction: column; gap: 12px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile toast positioning
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    #tta-toasts { top: auto; bottom: 72px; right: 8px; left: 8px; max-width: none; }
    .tta-notif-drawer { width: 100vw; right: -100vw; }
    .tta-tour-tooltip { max-width: calc(100vw - 32px); left: 16px !important; right: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Additional component styles
   ═══════════════════════════════════════════════════════════════════ */

/* Accent text (gradient highlight) */
.tta-accent {
    background: linear-gradient(135deg, var(--gold, #D4AF37) 0%, #f5d778 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Skeleton loading grid */
.tta-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Leaderboard header row */
.tta-lb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: var(--tta-text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Post body content */
.tta-post__body {
    margin-top: 12px;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.tta-post__body img { max-width: 100%; border-radius: var(--tta-r-sm, 10px); margin: 8px 0; }
.tta-post__body a { color: var(--gold, #D4AF37); text-decoration: underline; }

/* Post menu wrapper */
.tta-post-menu-wrap {
    position: relative;
    display: inline-block;
}

/* Link preview card text */
.tta-link-preview-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.tta-link-preview-text h4 {
    margin: 0 0 4px;
    font-size: var(--tta-text-sm, 0.875rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tta-link-preview-text p {
    margin: 0;
    font-size: var(--tta-text-xs, 0.75rem);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Poll component */
.tta-poll {
    margin-top: 12px;
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-sm, 10px);
    padding: 14px;
    background: var(--tta-surf-1, #0E0E12);
}
.tta-poll-option {
    position: relative;
    padding: 10px 14px;
    margin-bottom: 4px;
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-sm, 10px);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--tta-t-fast) var(--tta-ease);
}
.tta-poll-option:hover { border-color: var(--gold, #D4AF37); }
.tta-poll-option.is-voted { border-color: var(--gold, #D4AF37); background: rgba(212, 175, 55, 0.06); }

/* Comment action buttons (edit/delete) */
.tta-comment-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--tta-text-meta);
    padding: 2px 4px;
    border-radius: 4px;
    transition: background var(--tta-t-fast) var(--tta-ease);
}
.tta-comment-action:hover { background: var(--tta-surf-2, #141418); }

/* Calendar weekday header */
.tta-cal-weekday {
    text-align: center;
    font-size: var(--tta-text-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Countdown timer */
.tta-countdown {
    color: var(--gold, #D4AF37);
    font-weight: 600;
    font-size: var(--tta-text-xs, 0.75rem);
    white-space: nowrap;
}

/* Event attendees badge */
.tta-event-attendees {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--tta-text-xs, 0.75rem);
    color: var(--text-muted);
}

/* Trending tag count */
.tta-tag-count {
    font-size: var(--tta-text-2xs, 0.6875rem);
    color: var(--text-muted);
    margin-left: 2px;
}

/* Tag chip (trending hashtags) */
.tta-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--tta-surf-1, #0E0E12);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-xl, 24px);
    color: var(--text-primary);
    font-size: var(--tta-text-sm, 0.875rem);
    cursor: pointer;
    transition: border-color var(--tta-t-fast) var(--tta-ease), background var(--tta-t-fast) var(--tta-ease);
}
.tta-tag-chip:hover { border-color: var(--gold, #D4AF37); background: rgba(212, 175, 55, 0.06); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 0 — Foundation Components (Skool Parity Redesign)
   ═══════════════════════════════════════════════════════════════ */

/* ── Skeleton Pulse Animation ── */
@keyframes tta-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* ── Esqueleto de pestaña: lo que se pinta en <0.5 s mientras llegan los
   datos (regla 19-ago). Mismo lenguaje que las tarjetas reales para que el
   reemplazo no "salte". ── */
.tta-skel { display: flex; flex-direction: column; gap: 12px; }
.tta-skel-card {
    background: var(--tta-surf-1); border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md); padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.tta-skel-line {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%);
    background-size: 200% 100%;
    animation: ttaSkelShimmer 1.2s ease-in-out infinite;
}
@keyframes ttaSkelShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tta-skel-line { animation: none; } }

.tta-skeleton-pulse {
    background: linear-gradient(90deg,
        var(--tta-surf-1, #0E0E12) 25%,
        var(--tta-surf-2, #141418) 50%,
        var(--tta-surf-1, #0E0E12) 75%);
    background-size: 200% 100%;
    animation: tta-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--tta-r-sm, 6px);
}

/* ── Toast slide-in ── */
@keyframes tta-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ── Pagination Component ── */
.tta-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tta-text-sm, 0.875rem);
}
.tta-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--tta-r-sm, 6px);
    border: 1px solid var(--tta-surf-line, #1F1F25);
    background: transparent;
    color: var(--text-primary, #fff);
    cursor: pointer;
    transition: border-color var(--tta-t-fast) var(--tta-ease);
}
.tta-pagination__btn:hover:not(:disabled) { border-color: var(--gold, #D4AF37); }
.tta-pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tta-pagination__info { color: var(--text-muted); font-size: var(--tta-text-xs, 0.75rem); }

/* ── Data Table ── */
.tta-data-table-wrapper { width: 100%; }
.tta-data-table__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    flex-wrap: wrap;
}
.tta-data-table__search {
    display: flex;
    align-items: center;
    background: var(--tta-surf-1, #0E0E12);
    border: 1px solid var(--tta-surf-line, #1F1F25);
    border-radius: var(--tta-r-md, 10px);
    padding: 6px 12px;
    flex: 1;
    max-width: 300px;
}
.tta-data-table__search input { flex: 1; color: var(--text-primary); font-size: var(--tta-text-sm); }
.tta-data-table__bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--tta-r-md, 10px);
}
.tta-data-table__bulk-count { font-size: var(--tta-text-sm); color: var(--gold, #D4AF37); font-weight: 600; }
.tta-data-table__scroll { overflow-x: auto; }
.tta-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tta-text-sm, 0.875rem);
}
.tta-data-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--tta-text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--tta-surf-line, #1F1F25);
    white-space: nowrap;
    user-select: none;
}
.tta-data-table th.tta-sortable { cursor: pointer; }
.tta-data-table th.tta-sortable:hover { color: var(--gold, #D4AF37); }
.tta-sort-icon {
    font-size: 14px !important;
    vertical-align: middle;
    margin-left: 2px;
    opacity: 0.4;
    transition: opacity var(--tta-t-fast);
}
.tta-data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--tta-surf-line, #1F1F25);
    color: var(--text-primary);
    vertical-align: middle;
}
.tta-data-table tr:hover td { background: rgba(255,255,255,0.02); }
.tta-data-table__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
.tta-data-table__info { font-size: var(--tta-text-xs); color: var(--text-muted); }
.tta-data-table__per-page select {
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    color: var(--text-primary);
    border-radius: var(--tta-r-sm);
}

/* ── Drag Handle ── */
.tta-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: var(--tta-text-title) !important;
    opacity: 0.5;
    transition: opacity var(--tta-t-fast), color var(--tta-t-fast);
}
.tta-drag-handle:hover { opacity: 1; color: var(--gold, #D4AF37); }
.tta-drag-handle:active { cursor: grabbing; }
[draggable="true"] { transition: opacity var(--tta-t-fast); }
[draggable="true"].dragging { opacity: 0.4; }

/* ── Bulk Checkbox ── */
.tta-bulk-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--gold, #D4AF37);
    cursor: pointer;
}

/* ── Upload Progress ── */
.tta-upload-progress {
    width: 100%;
    height: 4px;
    background: var(--tta-surf-1, #0E0E12);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}
.tta-upload-progress__bar {
    height: 100%;
    background: var(--gold, #D4AF37);
    border-radius: 2px;
    transition: width 0.2s ease;
    width: 0%;
}

/* ── Full-page Editor Layout ── */
.tta-fullpage-editor {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .tta-fullpage-editor { grid-template-columns: 1fr; }
}

/* ── Quiz Builder ── */
.tta-quiz-builder { display: flex; flex-direction: column; gap: 12px; }
.tta-quiz-question {
    background: var(--tta-surf-1, #0E0E12);
    border: 1px solid var(--tta-surf-line, #1F1F25);
    border-radius: var(--tta-r-md, 10px);
    padding: 16px;
    position: relative;
}
.tta-quiz-question__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.tta-quiz-question__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold, #D4AF37);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tta-text-xs);
    font-weight: 700;
}
.tta-quiz-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--tta-surf-line, #1F1F25);
    border-radius: var(--tta-r-sm, 6px);
    margin-bottom: 6px;
    transition: border-color var(--tta-t-fast);
}
.tta-quiz-option:hover { border-color: var(--gold, #D4AF37); }
.tta-quiz-option.is-correct { border-color: var(--green, #16a34a); background: rgba(22,163,74,0.05); }
.tta-quiz-option input[type="radio"],
.tta-quiz-option input[type="checkbox"] { accent-color: var(--gold, #D4AF37); }

/* ── Rich Editor Toolbar ── */
.tta-rich-editor {
    border: 1px solid var(--tta-surf-line, #1F1F25);
    border-radius: var(--tta-r-md, 10px);
    overflow: hidden;
}
.tta-rich-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--tta-surf-1, #0E0E12);
    border-bottom: 1px solid var(--tta-surf-line, #1F1F25);
    flex-wrap: wrap;
}
.tta-rich-editor__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tta-r-sm, 6px);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--tta-t-fast), color var(--tta-t-fast);
}
.tta-rich-editor__btn:hover { background: var(--tta-surf-2); color: var(--text-primary); }
.tta-rich-editor__btn.is-active { background: rgba(212,175,55,0.1); color: var(--gold, #D4AF37); }
.tta-rich-editor__content {
    min-height: 120px;
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: var(--tta-text-base, 1rem);
    line-height: 1.6;
    outline: none;
}
.tta-rich-editor__content:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* ── KPI Card (Admin) ── */
.tta-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px !important;
}
.tta-kpi__header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tta-kpi__label { font-size: var(--tta-text-xs, 0.75rem); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.tta-kpi__value { font-size: var(--tta-text-hero); font-weight: 700; color: var(--text-primary); }
.tta-kpi__trend { font-size: var(--tta-text-xs); }

/* ── Trend Indicator ── */
.tta-trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--tta-text-xs); font-weight: 600; }
.tta-trend .material-symbols-outlined { font-size: 14px !important; }
.tta-trend--up { color: var(--green, #16a34a); }
.tta-trend--down { color: var(--red, #dc2626); }
.tta-trend--flat { color: var(--text-muted); }

/* ── Avatar Component ── */
.tta-avatar {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tta-surf-2, #141418);
    color: var(--gold, #D4AF37);
    font-weight: 700;
    flex-shrink: 0;
}
.tta-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Empty State ── */
.tta-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 12px;
}
.tta-empty-state__icon { font-size: 52px !important; color: var(--text-muted); opacity: 0.4; }
.tta-empty-state__title { font-size: var(--tta-text-base); color: var(--text-secondary); font-weight: 500; }
.tta-empty-state__desc { font-size: var(--tta-text-sm); color: var(--text-muted); max-width: 320px; }

/* ── Level Badge ── */
.tta-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--tta-r-xl, 24px);
    font-size: var(--tta-text-2xs, 0.6875rem);
    font-weight: 700;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold, #D4AF37);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* ── Stat Card ── */
.tta-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: var(--tta-surf-1, #0E0E12);
    border: 1px solid var(--tta-surf-line, #1F1F25);
    border-radius: var(--tta-r-md, 10px);
}
.tta-stat-card__icon { font-size: var(--tta-text-hero) !important; opacity: 0.6; }
.tta-stat-card__value { font-size: var(--tta-text-xl, 1.25rem); font-weight: 700; }
.tta-stat-card__label { font-size: var(--tta-text-xs, 0.75rem); color: var(--text-muted); }

/* ── Progress Bar on Cards ── */
.tta-card__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,0.1);
}
.tta-card__progress-fill {
    height: 100%;
    background: var(--gold, #D4AF37);
    border-radius: 0 2px 2px 0;
    transition: width 0.3s ease;
}

/* ── Modal (improved) ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9990;
    padding: 20px;
}
.modal-content {
    background: var(--tta-surf-0, #08080A);
    border: 1px solid var(--tta-surf-line, #1F1F25);
    border-radius: var(--tta-r-lg, 16px);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.modal-sm { max-width: 400px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 780px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tta-surf-line);
}
.modal-header h3 { margin: 0; font-size: var(--tta-text-lg, 1.125rem); }
.modal-body { padding: 24px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--tta-surf-line);
}

/* ── Responsive: tables scroll on mobile ── */
@media (max-width: 768px) {
    .tta-data-table__toolbar { flex-direction: column; align-items: stretch; }
    .tta-data-table__search { max-width: 100%; }
    .tta-data-table__footer { flex-direction: column; gap: 8px; align-items: center; }
}

/* ── Responsive: course detail layout ── */
@media (max-width: 768px) {
    .tta-course-layout { grid-template-columns: 1fr !important; }
    .tta-course-layout aside { position: static !important; }
}

/* ── Responsive: admin subnav horizontal scroll on mobile ── */
@media (max-width: 768px) {
    .tta-subnav__groups { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tta-subnav__groups::-webkit-scrollbar { display: none; }
    .tta-subnav__group { white-space: nowrap; flex-shrink: 0; }
    .tta-subnav__tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tta-subnav__tabs::-webkit-scrollbar { display: none; }
    .tta-subnav__tab { white-space: nowrap; flex-shrink: 0; }
}

/* ── Responsive: curriculum details on mobile ── */
@media (max-width: 480px) {
    .tta-curriculum-lessons li { font-size: 0.85rem; gap: 6px; }
    .tta-curriculum-module summary { padding: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   Notification Dropdown
   ═══════════════════════════════════════════════════════════════════ */

.tta-notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, calc(100vw - 24px));
    max-height: 420px;
    background: var(--tta-surf-1, #141428);
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,0.08));
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 1000;
    overflow: hidden;
}
.tta-notif-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tta-surf-line, rgba(255,255,255,0.06));
}
.tta-notif-dropdown__list {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.tta-notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    transition: background 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.tta-notif-item:hover { background: var(--tta-surf-2, #1a1a2e); }
.tta-notif-item.is-unread { background: rgba(212,175,55,0.04); }
.tta-notif-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tta-surf-2, #1a1a2e);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tta-notif-item__icon .material-symbols-outlined { font-size: 16px; color: var(--gold, #D4AF37); }
.tta-notif-item__body { flex: 1; min-width: 0; }
.tta-notif-item__text { font-size: var(--tta-text-meta); line-height: 1.4; font-weight: 600; color: var(--tta-text-primary, var(--text-primary, #fff)); }
.tta-notif-item__desc { font-size: var(--tta-text-meta); line-height: 1.35; color: var(--tta-text-secondary, var(--text-secondary)); margin-top: 2px; }
.tta-notif-item__time { font-size: var(--tta-text-meta); color: var(--tta-text-muted, var(--text-muted)); margin-top: 4px; }

@media (max-width: 480px) {
    .tta-notif-dropdown { width: calc(100vw - 24px); right: -8px; }
}


/* ═══════════════════════════════════════════════════════════════════
   DM / Messages UI
   ═══════════════════════════════════════════════════════════════════ */

/* Mensajes a pantalla completa: el compositor (cajón de escribir) debe quedar
   pegado abajo y SIEMPRE visible. .tta-main mete padding arriba/abajo que empujaba
   el cajón ~40px FUERA de la vista (se veía "escondido", sin saber dónde escribir),
   y el footer añade alto. Los neutralizamos SOLO en esta página — mismo patrón que
   el aula (.tta-learn-layout). */
.tta-main:has(.tta-dm-layout) { max-width: none; padding: 0; min-height: 0; }
body:has(.tta-dm-layout) .tta-footer { display: none; }

.tta-dm-layout {
    display: flex;
    height: calc(100vh - var(--tta-nav-h, 56px) - 1px);
    height: calc(100dvh - var(--tta-nav-h, 56px) - 1px); /* dvh: viewport real móvil */
    max-width: 1200px;
    margin: 0 auto;
    background: var(--tta-surf-0, #08080A);
}

/* ── Thread list panel ── */
.tta-dm-threads {
    width: 340px;
    min-width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--tta-surf-line, rgba(255,255,255,0.06));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tta-dm-threads__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
}
.tta-dm-thread-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ── Thread item ── */
.tta-dm-thread-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.tta-dm-thread-item:hover { background: var(--tta-surf-1, #141428); }
.tta-dm-thread-item.is-active { background: var(--tta-surf-2, #1a1a2e); }
.tta-dm-thread-item.has-unread .tta-dm-thread-item__name { font-weight: 700; color: var(--tta-text-primary, var(--text-primary)); }
.tta-dm-thread-item.has-unread .tta-dm-thread-item__preview { color: var(--tta-text-secondary, var(--text-secondary)); }

.tta-dm-thread-item__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gold), var(--gold-light, #e8c547));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--tta-text-body);
    color: #0A0A0A;
}
.tta-dm-thread-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tta-dm-thread-item__body {
    flex: 1;
    min-width: 0;
}
.tta-dm-thread-item__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.tta-dm-thread-item__name {
    font-size: var(--tta-text-body);
    font-weight: 500;
    color: var(--tta-text-primary, var(--text-primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tta-dm-thread-item__time {
    font-size: var(--tta-text-meta);
    color: var(--tta-text-muted, var(--text-muted));
    flex-shrink: 0;
}
.tta-dm-thread-item__preview {
    font-size: var(--tta-text-meta);
    color: var(--tta-text-muted, var(--text-muted));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.tta-dm-thread-item__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--gold, #D4AF37);
    color: #0A0A0A;
    font-size: var(--tta-text-meta);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Chat panel ── */
.tta-dm-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tta-dm-chat__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}
.tta-dm-chat__active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tta-dm-chat__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tta-surf-line, rgba(255,255,255,0.06));
    flex-shrink: 0;
}
.tta-dm-chat__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.tta-dm-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--tta-text-muted, var(--text-muted));
    cursor: pointer;
    padding: 4px;
}

/* ── Messages area ── */
.tta-dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
}

/* ── Fila de mensaje (avatar + burbuja), estilo IG/X con agrupación ── */
.tta-dm-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 82%;
    align-self: flex-start;
    margin-top: 12px;
}
.tta-dm-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.tta-dm-row.is-grouped { margin-top: 2px; }
.tta-dm-row__pfp {
    width: 30px; height: 30px; border-radius: 50%;
    flex-shrink: 0; overflow: hidden; align-self: flex-end;
    background: linear-gradient(135deg, var(--gold), var(--gold-light, #e8c547));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--tta-text-meta); color: #0A0A0A; text-decoration: none;
    transition: transform .12s ease;
}
.tta-dm-row__pfp:hover { transform: scale(1.08); }
.tta-dm-row__pfp img { width: 100%; height: 100%; object-fit: cover; }
.tta-dm-row.is-grouped .tta-dm-row__pfp { visibility: hidden; } /* espaciador: mantiene alineación */
.tta-dm-row__col { display: flex; flex-direction: column; min-width: 0; }
.tta-dm-row.is-mine .tta-dm-row__col { align-items: flex-end; }

.tta-dm-msg__sender {
    display: block; font-size: var(--tta-text-meta); font-weight: 600;
    color: var(--gold, #D4AF37); margin: 0 0 3px 8px;
}
.tta-dm-msg__text {
    width: fit-content; max-width: 100%;
    padding: 9px 13px;
    border-radius: 18px;
    background: var(--tta-surf-1, #141428);
    color: var(--tta-text-primary, var(--text-primary));
    font-size: var(--tta-text-body); line-height: 1.45; word-break: break-word;
}
.tta-dm-msg__text a { color: var(--gold, #D4AF37); text-decoration: underline; }
.tta-dm-row.is-mine .tta-dm-msg__text {
    background: linear-gradient(135deg, var(--gold, #D4AF37), var(--gold-light, #e8c547));
    color: #0A0A0A;
}
.tta-dm-row.is-mine .tta-dm-msg__text a { color: #0A0A0A; }
.tta-dm-msg__time {
    font-size: var(--tta-text-meta); color: var(--tta-text-muted, var(--text-muted));
    margin: 3px 8px 0; opacity: .75;
}
.tta-dm-row.is-mine .tta-dm-msg__time { text-align: right; }

/* Encabezado del chat: avatar + nombre clicables → perfil */
.tta-dm-chat__header [data-go-profile] { cursor: pointer; }
.tta-dm-chat__header #dm-chat-name:hover { text-decoration: underline; }
/* Separador de fecha entre días */
.tta-dm-daysep {
    align-self: center; margin: 14px 0 6px;
    font-size: var(--tta-text-meta); color: var(--tta-text-muted, var(--text-muted));
    background: var(--tta-surf-1, #141428); padding: 3px 12px; border-radius: 999px;
}
.tta-dm-msg__img {
    max-width: 240px;
    border-radius: 12px;
    margin-top: 4px;
    cursor: pointer;
}
.tta-dm-msg__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--tta-surf-2, #1a1a2e);
    border-radius: 8px;
    color: var(--gold, #D4AF37);
    text-decoration: none;
    font-size: var(--tta-text-meta);
    margin-top: 4px;
}

/* ── Input bar ── */
.tta-dm-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom)); /* no chocar con el home indicator */
    border-top: 1px solid var(--tta-surf-line, rgba(255,255,255,0.06));
    flex-shrink: 0;
}
.tta-dm-input textarea {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    font-size: var(--tta-text-body); /* 16px: evita el zoom automático de iOS al enfocar */
    padding: 10px 14px;
    background: var(--tta-surf-1, #141428);
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,0.06));
    border-radius: 20px;
    color: var(--tta-text-primary, var(--text-primary));
    line-height: 1.4;
}
.tta-dm-input textarea:focus {
    outline: none;
    border-color: var(--gold, #D4AF37);
}
.tta-dm-input .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tta-dm-input .btn:disabled { opacity: 0.4; }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .tta-dm-layout {
        /* Resta también la barra de pestañas inferior fija (≈64px + safe-area):
           si no, el input del chat queda DETRÁS de los tabs en el teléfono. */
        height: calc(100vh - var(--tta-nav-h, 56px) - 64px);
        height: calc(100dvh - var(--tta-nav-h, 56px) - 64px - env(safe-area-inset-bottom, 0px));
    }
    .tta-dm-threads {
        width: 100%;
        min-width: 0;
        border-right: none;
    }
    .tta-dm-chat {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--tta-surf-0, #08080A);
        z-index: 10;
        display: none;
    }
    .tta-dm-layout.chat-open .tta-dm-threads { display: none; }
    .tta-dm-layout.chat-open .tta-dm-chat { display: flex; }
    .tta-dm-back-btn { display: flex; }
    .tta-dm-layout { position: relative; }
    .tta-dm-msg { max-width: 85%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Guía del Flujo D — widget validador (UID / depósito), pie de lección,
   mapa de fases y página de felicitaciones.
   Estética sobria: tarjetas planas, borde fino, dorado con mesura.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Widget validador (paso de la guía) ──────────────────────────── */
.tta-guia-step {
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    padding: var(--tta-s-5);
    box-shadow: var(--tta-shadow-xs);
}
.tta-guia-step[data-state="done"] {
    border-color: rgba(34,197,94,0.32);
}
.tta-guia-step__head {
    display: flex;
    align-items: flex-start;
    gap: var(--tta-s-3);
    margin-bottom: var(--tta-s-4);
}
.tta-guia-step__num {
    flex: none;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gold-bg, rgba(212,175,55,0.1));
    border: 1px solid var(--tta-surf-line-gold);
    color: var(--gold);
    font-size: var(--tta-text-xs);
    font-weight: 700;
}
.tta-guia-step[data-state="done"] .tta-guia-step__num {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.32);
    color: var(--green);
}
.tta-guia-step__title {
    font-weight: 600;
    font-size: var(--tta-text-sm);
    color: var(--text-white);
    letter-spacing: -0.005em;
}
.tta-guia-step__sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    line-height: 1.5;
}
/* Enlace de ayuda bajo el sub-texto ("¿No sabes cómo? Mira el video") —
   dorado discreto, sin romper la estética del recuadro. */
.tta-guia-help {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--tta-s-2);
    width: fit-content;
    color: var(--gold);
    font-size: var(--tta-text-xs);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.tta-guia-help:hover {
    color: var(--gold-light, var(--gold));
    border-bottom-color: currentColor;
}
.tta-guia-help .material-symbols-outlined { font-size: 15px; }
.tta-guia-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--tta-s-4);
}
.tta-guia-label {
    display: block;
    margin-bottom: var(--tta-s-2);
    color: var(--text-secondary);
    font-size: var(--tta-text-xs);
    font-weight: 500;
}
.tta-guia-row {
    display: flex;
    gap: var(--tta-s-2);
    flex-wrap: wrap;
}
.tta-guia-row .form-control { flex: 1; min-width: 160px; }
.tta-guia-note {
    background: var(--tta-surf-0);
    border: 1px dashed var(--tta-surf-line-strong);
    border-radius: var(--tta-r-sm);
    padding: var(--tta-s-3) var(--tta-s-4);
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    margin-bottom: var(--tta-s-4);
    line-height: 1.5;
}
.tta-guia-msg {
    margin-top: var(--tta-s-3);
    font-size: var(--tta-text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    min-height: 1em;
}
.tta-guia-ok { color: var(--green); font-weight: 500; }
.tta-guia-err { color: var(--red); }
.tta-guia-pending { color: var(--text-secondary); }
.tta-guia-msg--ok    { color: var(--green); }
.tta-guia-msg--err   { color: var(--red); }
.tta-guia-msg--warn  { color: var(--text-secondary); }

/* Spinner inline del widget */
.tta-guia-spin {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid var(--tta-surf-line-strong);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}

/* Medidor de progreso de depósito (balance vs meta) */
.tta-guia-meter { margin-bottom: var(--tta-s-4); }
.tta-guia-meter__bar {
    height: 6px;
    background: var(--tta-surf-0);
    border: 1px solid var(--tta-surf-line);
    border-radius: 999px;
    overflow: hidden;
}
.tta-guia-meter__fill {
    height: 100%;
    width: 0%;
    background: var(--gold);
    border-radius: 999px;
    transition: width var(--tta-t-base) var(--tta-ease);
}
.tta-guia-meter__nums {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: var(--tta-text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.tta-guia-meter__goal { color: var(--text-muted); }

/* ── Pie de la lección (completar + siguiente) ───────────────────── */
.tta-guia-footer {
    display: flex;
    gap: var(--tta-s-3);
    flex-wrap: wrap;
    align-items: center;
}
.tta-guia-footer .btn { display: inline-flex; align-items: center; gap: 6px; }
.tta-guia-footer #btn-next,
.tta-guia-footer #btn-finish-guide { margin-left: auto; }
.tta-guia-foot-hint {
    margin-top: var(--tta-s-3);
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    line-height: 1.5;
}

/* ── Mapa de fases (Guía → Curso básico → Avanzados) ─────────────── */
.tta-guia-phases-head {
    font-size: var(--tta-text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
    margin-bottom: var(--tta-s-4);
}
.tta-guia-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tta-s-4);
}
.tta-guia-phase {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    padding: var(--tta-s-5);
    box-shadow: var(--tta-shadow-xs);
    transition: border-color var(--tta-t-base) var(--tta-ease),
                background var(--tta-t-base) var(--tta-ease);
}
.tta-guia-phase--active { border-color: var(--tta-surf-line-gold); }
.tta-guia-phase--available:hover {
    border-color: var(--tta-surf-line-gold);
    background: var(--tta-surf-2);
}
.tta-guia-phase--locked { opacity: 0.62; }
.tta-guia-phase__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tta-s-3);
}
.tta-guia-phase__step {
    font-size: var(--tta-text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tta-guia-phase__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tta-text-base);
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: -0.01em;
    margin-bottom: var(--tta-s-2);
}
.tta-guia-phase__icon { font-size: var(--tta-text-title); color: var(--text-muted); }
.tta-guia-phase--active .tta-guia-phase__icon,
.tta-guia-phase--available .tta-guia-phase__icon { color: var(--gold); }
.tta-guia-phase--done .tta-guia-phase__icon { color: var(--green); }
.tta-guia-phase__desc {
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    line-height: 1.55;
    margin-bottom: var(--tta-s-4);
}
.tta-guia-phase__foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tta-guia-phase__status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: var(--tta-text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--tta-surf-line);
    color: var(--text-muted);
}
.tta-guia-phase__status--active {
    color: var(--gold);
    border-color: var(--tta-surf-line-gold);
    background: var(--gold-bg, rgba(212,175,55,0.08));
}
.tta-guia-phase__status--done {
    color: var(--green);
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.1);
}
.tta-guia-phase__status--available {
    color: var(--gold);
    border-color: var(--tta-surf-line-gold);
}
.tta-guia-phase__hint {
    color: var(--text-muted);
    font-size: var(--tta-text-2xs);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .tta-guia-phases { grid-template-columns: 1fr; }
    /* "Marcar como completada" + "Siguiente lección" comparten la fila (mitad
       y mitad). "Finalizar el módulo" (sin siguiente) ocupa todo el ancho. */
    .tta-guia-footer { flex-wrap: nowrap; }
    .tta-guia-footer #btn-complete,
    .tta-guia-footer #btn-next { flex: 1 1 0; margin-left: 0; width: auto; justify-content: center; }
    .tta-guia-footer #btn-finish-guide { margin-left: 0; width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Página de felicitaciones (completaste la Guía)
   ═══════════════════════════════════════════════════════════════════ */
.tta-done {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--tta-s-12) 0 var(--tta-s-16);
    text-align: center;
    animation: ttaFadeInUp .5s var(--tta-ease) both;
}
.tta-done__badge {
    width: 72px; height: 72px;
    margin: 0 auto var(--tta-s-6);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gold-bg, rgba(212,175,55,0.1));
    border: 1px solid var(--tta-surf-line-gold);
}
.tta-done__badge .material-symbols-outlined {
    font-size: 38px;
    color: var(--gold);
}
.tta-done__eyebrow {
    font-size: var(--tta-text-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--tta-s-2);
}
.tta-done__title {
    margin: 0 0 var(--tta-s-4);
    font-size: var(--tta-fluid-sec);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-white);
}
.tta-done__lead {
    margin: 0 auto var(--tta-s-8);
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: var(--tta-text-base);
    line-height: 1.65;
}
.tta-done__next {
    text-align: left;
    background: var(--tta-surf-1);
    border: 1px solid var(--tta-surf-line);
    border-radius: var(--tta-r-md);
    padding: var(--tta-s-6);
    box-shadow: var(--tta-shadow-xs);
    margin-bottom: var(--tta-s-8);
}
.tta-done__next-head {
    display: flex;
    align-items: flex-start;
    gap: var(--tta-s-3);
    margin-bottom: var(--tta-s-3);
}
.tta-done__next-icon {
    font-size: 22px;
    color: var(--gold);
    flex: none;
    margin-top: 2px;
}
.tta-done__next-tag {
    display: flex;
    align-items: center;
    gap: var(--tta-s-2);
    margin-bottom: 4px;
}
.tta-done__next-label {
    font-size: var(--tta-text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tta-done__next-title {
    font-size: var(--tta-text-md);
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: -0.01em;
}
.tta-done__next-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--tta-text-sm);
    line-height: 1.6;
}
.tta-done__actions {
    display: flex;
    gap: var(--tta-s-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--tta-s-6);
}
.tta-done__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.tta-done__foot {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    line-height: 1.6;
    max-width: 46ch;
    margin-inline: auto;
}
@media (max-width: 768px) {
    .tta-done { padding: var(--tta-s-8) 0 var(--tta-s-12); }
    .tta-done__actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Accesibilidad (a11y)
   ═══════════════════════════════════════════════════════════════════ */

/* Foco visible por teclado en controles interactivos. La búsqueda fija
   outline:none en su estado base; aquí lo restituimos solo para el foco
   por teclado, sin afectar el aspecto al hacer clic con el ratón. */
.tta-search input:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold, #D4AF37);
    outline-offset: 2px;
}

/* Enlace para saltar al contenido: oculto fuera de pantalla por defecto,
   visible al recibir foco con el teclado. */
.tta-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    z-index: 10200;
    padding: var(--tta-s-2) var(--tta-s-4);
    background: var(--tta-surf-1);
    color: var(--text-white);
    border: 1px solid var(--tta-surf-line-strong);
    border-radius: var(--tta-r-sm);
    text-decoration: none;
    font-weight: 600;
}
.tta-skip-link:focus {
    left: 8px;
    top: 8px;
}

/* Objetivos táctiles: los chips pequeños deben tener al menos 44px de alto
   en móvil para tocarse cómodamente. */
@media (max-width: 640px) {
    .tta-chip--sm { min-height: 44px; }
}

/* Modal genérico (overlay + tarjeta centrada). Lo usan varias páginas
   (kol_profile: candado de nivel y editar comentario; messages: nuevo DM).
   Sin esta definición el modal se inserta SIN posición ni fondo al final del
   <body> y queda invisible — por eso DEBE vivir aquí, en el CSS compartido. */
.tta-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.66);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.tta-modal-card {
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow: auto;
    padding: 22px 22px 18px;
    background: var(--tta-surf-1, #0E0E12);
    border: 1px solid var(--tta-surf-line, rgba(255, 255, 255, 0.08));
    border-radius: var(--tta-r-lg, 18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Etiqueta de exchange en la tarjeta de curso (jul-26). Solo se muestra cuando
   el KOL tiene curso gratis en más de un exchange y hay que distinguirlos. */
.tta-ex-tag {
    display: inline-block; margin-left: 8px; vertical-align: middle;
    padding: 2px 8px; border-radius: 999px;
    font-size: var(--tta-text-meta); font-weight: 700; letter-spacing: .03em;
    background: rgba(212, 175, 55, .14); color: var(--gold, #D4AF37);
    border: 1px solid rgba(212, 175, 55, .32);
}

/* Esconder es esconder: el guard de iconos pone display:inline-flex !important
   sobre .btn/.tta-chip/.tta-react-btn… y le ganaba a un display:none puesto
   desde JS. Resultado (19-ago): botones sin destino y chips sin contenido
   quedaban a la vista. El atributo hidden manda sobre todo. */
[hidden][hidden] { display: none !important; }   /* doble para ganarle en especificidad al guard, que también es !important y se carga después */


/* == tta-redesign.css == */
/* ═══════════════════════════════════════════════════════════════════
   TT Academy — Capa de rediseño (overrides seguros, solo CSS)
   ───────────────────────────────────────────────────────────────────
   Propósito : Implementa las correcciones de la auditoría UI/UX
               (AUDITORIA-UI.md, 2026-07-23) sin tocar tta.css.
               Se carga DESPUÉS de tta.css, así que con la misma
               especificidad basta el orden de carga. Sin !important
               salvo que una regla original lo obligue (se comenta).
   Fecha     : 2026-07-23 · v2 (Fase 2: cambios visibles)
   Rollback  : 1) Quitar la línea <link tta-redesign.css> de
                 templates_academy/academy_base.html (restaurar el .bak).
              2) Borrar este archivo. No hay más efectos secundarios.
   Nota      : Los números "Fix #N" referencian los problemas de la
               auditoría (sección 2).
   ═══════════════════════════════════════════════════════════════════ */

/* ── CUERPO BASE (27-ago-2026) ────────────────────────────────────────
   Nadie fijaba el tamano del cuerpo, asi que heredaba el 14px de
   html{font-size:14px} —puesto para el panel, no para la academia—.
   Fijarlo aqui sube el suelo de lectura sin tocar el panel.          */
body { font-size: var(--tta-text-body); }



/* ───────────────────────────────────────────────────────────────────
   1. TOKENS — refinado de contraste y bordes (Fix #3 contraste, Fix #5
   consistencia). La paleta dorada NO se toca (#D4AF37/#E8C84A/#B8962F).
   ─────────────────────────────────────────────────────────────────── */
:root {
    /* Cuerpo de texto secundario: #C4C4CC → #D4D4D8 (mejor lectura 14–15px) */
    --text-secondary: #D4D4D8;

    /* Metadatos: #A3A3AD → #A1A1AA (gris neutro, AA sobre #09090B) */
    --text-muted: #A1A1AA;

    /* tta.css referencia var(--tta-text-muted) en ~8 reglas pero NUNCA la
       define (cae al fallback o hereda). Se define aquí una sola vez. */
    --tta-text-muted: #A1A1AA;

    /* Borde unificado de tarjetas: 0.08 → 0.06 (un solo valor en toda la UI) */
    --border-primary: rgba(255, 255, 255, 0.06);
}


/* ───────────────────────────────────────────────────────────────────
   2. RADIOS CONSISTENTES (Fix #5). Botones a 10px. Los chips se QUEDAN
   en píldora (lenguaje intencional estilo Skool); se unifica la
   variante pequeña para que no haya dos radios de chip distintos.
   ─────────────────────────────────────────────────────────────────── */
.btn {
    border-radius: 10px;
}

.tta-chip--sm {
    border-radius: 999px;
}


/* ───────────────────────────────────────────────────────────────────
   3. FOCO VISIBLE DORADO (Fix #11 accesibilidad). tta-theme.css define
   un :focus-visible pero ese archivo NO se carga en academy_base.html;
   esta es la única regla de foco que llega al usuario final.
   ─────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold, #D4AF37);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ───────────────────────────────────────────────────────────────────
   4. ELEVACIÓN EN HOVER (Fix #5 / polish). .tta-card ya tenía hover con
   translateY; los posts solo cambiaban borde.
   ─────────────────────────────────────────────────────────────────── */
.tta-post {
    transition: transform var(--tta-t-base, 220ms) var(--tta-ease, ease),
                border-color var(--tta-t-base, 220ms) var(--tta-ease, ease),
                box-shadow var(--tta-t-base, 220ms) var(--tta-ease, ease);
}
.tta-post:hover {
    transform: translateY(-1px);
}


/* ───────────────────────────────────────────────────────────────────
   5. COMPOSER: "Difundir también por" COLAPSADO (Fix #7 — la difusión
   multicanal ocupaba ~40% del composer siempre visible).
   El DOM queda intacto (el JS lee .bc-channel/.bc-audience/#bc-subject
   independientemente de la visibilidad); solo se oculta .bc-body hasta
   que el master pulsa la cabecera (toggle .bc-open en kol_profile.html).
   ─────────────────────────────────────────────────────────────────── */
#broadcast-toggles .bc-head {
    cursor: pointer;
    user-select: none;
    transition: background 150ms ease;
}
#broadcast-toggles .bc-head:hover {
    background: rgba(212, 175, 55, 0.05);
}
/* Chevron indicador del toggle (Material Symbols ya está cargada) */
#broadcast-toggles .bc-head::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-size: var(--tta-text-title);
    color: var(--text-muted);
    margin-left: 8px;
    transition: transform 180ms ease;
}
#broadcast-toggles.bc-open .bc-head::after {
    transform: rotate(180deg);
    color: var(--gold, #D4AF37);
}
#broadcast-toggles .bc-body {
    display: none;
}
#broadcast-toggles.bc-open .bc-body {
    display: block;
    animation: ttaBcIn 180ms ease;
}
@keyframes ttaBcIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}


/* ───────────────────────────────────────────────────────────────────
   6. AULA: TARJETAS BLOQUEADAS CON PREVIEW + CTA (Fix #4 — antes eran
   cajas oscuras con un candado y texto de 12px). El overlay lo genera
   courses.js (Fase 2) con estas clases; el blur se aplica con
   backdrop-filter sobre la portada, que sigue visible detrás → se
   intuye el contenido. Título y "N lecciones" quedan legibles en el
   cuerpo de la tarjeta; el motivo del bloqueo se presenta como CTA
   (píldora dorada cuando la acción es activar/validar acceso).
   ─────────────────────────────────────────────────────────────────── */
.tta-course-locked__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(8, 8, 10, 0.45);
    -webkit-backdrop-filter: blur(3px) saturate(0.7);
    backdrop-filter: blur(3px) saturate(0.7);
    border-radius: 12px 12px 0 0;
    color: #fff;
}
.tta-course-locked__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(0, 0, 0, 0.55);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-title);
}
.tta-course-locked__cta {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold, #D4AF37);
    background: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.01em;
}
.tta-course-locked__cta--gold {
    background: var(--gold, #D4AF37);
    border-color: var(--gold, #D4AF37);
    color: #0A0A0A;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
}
/* "Próximamente" (contenido programado): tono neutro, sin dorado */
.tta-course-locked__overlay--soon .tta-course-locked__icon {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}
.tta-course-locked__overlay--soon .tta-course-locked__cta {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}
/* La guía (curso_learn) sí tenía clase propia: algo más de legibilidad */
.tta-guia-phase--locked {
    opacity: 0.7;
}


/* ───────────────────────────────────────────────────────────────────
   7. AULA MÁS ANCHA (Fix #2 — la pestaña Aula heredaba el cap de 720px
   de .tta-panel y mostraba 2 cursos por fila con huecos enormes en
   monitores 1920px+; el grid ya es minmax(280px,1fr), solo faltaba
   ancho). Mismo patrón que ya usan #panel-leaderboard/#panel-teleprompter.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    #panel-courses:not([hidden]) {
        max-width: 1200px;
    }
}


/* ───────────────────────────────────────────────────────────────────
   8. RANKING: PODIO VISUAL TOP-3 (Fix #8 — las filas tenían la misma
   jerarquía; ya traen medallas 🥇🥈🥉 en el markup, faltaba peso visual).
   #leaderboard-list contiene SOLO filas (.tta-lb-trow); la cabecera es
   otro div fuera de la lista, así que nth-child es seguro.
   ─────────────────────────────────────────────────────────────────── */
#leaderboard-list .tta-lb-trow:nth-child(1) {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.03));
    border-left: 3px solid var(--gold, #D4AF37);
    padding-top: 14px;
    padding-bottom: 14px;
}
#leaderboard-list .tta-lb-trow:nth-child(1) .tta-lb-rank {
    font-size: var(--tta-text-title);
}
#leaderboard-list .tta-lb-trow:nth-child(1) .tta-lb-name span:first-child {
    font-size: var(--tta-text-body);
}
#leaderboard-list .tta-lb-trow:nth-child(2) {
    background: rgba(192, 192, 192, 0.06);
    border-left: 3px solid rgba(192, 192, 192, 0.5);
}
#leaderboard-list .tta-lb-trow:nth-child(3) {
    background: rgba(205, 127, 50, 0.07);
    border-left: 3px solid rgba(205, 127, 50, 0.55);
}
#leaderboard-list .tta-lb-trow:nth-child(-n+3) .tta-lb-pts {
    font-weight: 700;
    color: var(--gold, #D4AF37);
}
/* "Tu posición": el track/relleno llevan estilos inline (leaderboard.js);
   se añade glow al relleno (gradiente dorado) y marco dorado a la tarjeta. */
#leaderboard-progress > div {
    border-color: rgba(212, 175, 55, 0.35) !important; /* inline style en la tarjeta: sin !important no pisa al atributo style */
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.10);
}
#leaderboard-progress [style*="linear-gradient(90deg,var(--gold)"] {
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}


/* ───────────────────────────────────────────────────────────────────
   9. CALENDARIO: EMPTY STATE QUE INVITA (Fix #9 — antes una caja gris).
   El CTA "Crear evento" lo añade calendar.js SOLO si TTA_CAN_EDIT y
   reutiliza el botón/handler existente (#event-create-btn).
   ─────────────────────────────────────────────────────────────────── */
.tta-empty--invite {
    margin: 8px 0 16px;
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    background: rgba(212, 175, 55, 0.03);
}
.tta-empty--invite .tta-empty__icon {
    font-size: var(--tta-text-display);
    filter: drop-shadow(0 4px 14px rgba(212, 175, 55, 0.25));
}
.tta-empty--invite .tta-empty__cta {
    margin-top: 14px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}


/* ───────────────────────────────────────────────────────────────────
   10. TABS Y CHIPS: SCROLL CON FADE LATERAL + SNAP (Fix #10 — en móvil
   la tab bar cortaba "Calendario" y los chips se desbordaban sin
   indicador de scroll).
   ─────────────────────────────────────────────────────────────────── */
/* El desvanecido lateral es la pista de "hay más pestañas hacia allá". Cuando
   se aplicaba fijo a 24px, en escritorio (donde la barra NO se desborda) se
   comía el filo de la píldora activa: el borde izquierdo se disolvía en el
   fondo y parecía un degradado sucio. Ahora el ancho del fade lo pone
   tta-public.js por lado (--tta-fade-l/--tta-fade-r) y vale 0 mientras no
   haya nada oculto de ese lado, así que sin scroll la máscara es neutra. */
.tta-tabs,
#feed-categories,
.tta-subnav__tabs,
.tta-subnav__groups {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tta-fade-l, 0px), #000 calc(100% - var(--tta-fade-r, 0px)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--tta-fade-l, 0px), #000 calc(100% - var(--tta-fade-r, 0px)), transparent 100%);
}

.tta-tabs {
    scroll-snap-type: x proximity;
}
.tta-tabs .tta-tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0; /* evita que "Calendario" se comprima a "Calen…" */
}


/* ───────────────────────────────────────────────────────────────────
   11. HERO DE COMUNIDAD COMPACTO (Fix #1 — el banner se repite en cada
   pestaña). Fase 1 lo bajó 300→220px; Fase 2 lo deja en ~160px para que
   el contenido de cada pestaña se vea sin scroll a 1080p. La descripción
   ya tiene clamp de 2 líneas con "Ver más" (tta-bio-clamp) — intacto.
   La clase dedicada .tta-hero lo hace seguro: solo afecta a este banner.
   ─────────────────────────────────────────────────────────────────── */
.tta-hero {
    min-height: 160px;
}
.tta-hero__content {
    min-height: 160px;
    padding: 16px 24px;
    align-items: center;
}
.tta-hero__avatar {
    width: 72px;
    height: 72px;
}

@media (max-width: 640px) {
    .tta-hero,
    .tta-hero__content {
        min-height: 140px;
    }
    .tta-hero__avatar {
        width: 60px;
        height: 60px;
    }
}


/* ───────────────────────────────────────────────────────────────────
   12. "ACERCA DE LA COMUNIDAD" (hoy dentro de #panel-members) — polish
   visual. Las reglas apuntaban a #panel-about, una pestaña que ya no
   existe: eran CSS muerto y sus títulos salían como <h3> pelados
   (22-ago-2026). Auditoría original: la
   única vista sin pulir; era un muro de texto plano sin jerarquía).
   Solo presentación: las secciones display:none (Links / Rules / etc.,
   bloques editables por el admin) NO se tocan — se estilan para cuando
   el JS las muestre. Clases añadidas al template en esta fase:
   .tta-about-stats, .tta-about-stat (x4), .tta-about-founder.
   ─────────────────────────────────────────────────────────────────── */

/* Tarjeta contenedora: radio grande del sistema (16px) */
#panel-members .tta-card {
    border-radius: 16px;
}

#panel-members h2 {
    letter-spacing: -0.01em;
}

/* Texto principal: ritmo de lectura (65ch) y la primera línea (el hook,
   p.ej. "¿Por Qué Sigues Quemando Tu Cuenta?") como lead destacado.
   Nota: el texto es pre-wrap; ::first-line es la única vía CSS pura de
   darle peso sin tocar el contenido. */
#about-bio {
    max-width: 65ch;
}
#about-bio::first-line {
    color: var(--text-primary, #F5F5F4);
    font-weight: 600;
    font-size: var(--tta-text-body);
}

/* Fila de stats: mini-tarjetas con separadores hairline y hover sutil */
.tta-about-stat {
    position: relative;
    padding: 8px 16px;
    border-radius: 12px;
    transition: background 150ms ease;
}
.tta-about-stat:hover {
    background: rgba(255, 255, 255, 0.03);
}
/* Separador vertical entre stats (el gap inline es 32px → mitad = 16px) */
.tta-about-stat + .tta-about-stat::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 18%;
    height: 64%;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}
/* Etiqueta bajo el número: small-caps letterspaced */
.tta-about-stat > div:last-child {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 2px;
}

/* Encabezados de sección (Equipo, Links, Rules, Guidelines): barra de
   acento dorada + uppercase + divisor hairline que separa secciones */
#panel-members .tta-about-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold, #D4AF37);
}
#panel-members .tta-about-h::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--gold, #D4AF37);
    flex: none;
}

/* Fila del fundador: anillo dorado en el avatar + elevación en hover */
#about-founder-avatar {
    box-shadow: 0 0 0 2px var(--bg-base, #09090B),
                0 0 0 4px rgba(212, 175, 55, 0.55);
}
.tta-about-founder {
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.tta-about-founder:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 175, 55, 0.3) !important; /* el borde base viene inline en el template */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Filas de Links (sociales y custom, las genera core.js con estilos
   inline): hover con elevación y borde dorado. El !important en
   transition/border-radius es necesario porque esas propiedades vienen
   en el atributo style del markup generado por JS. */
#about-social-list a,
#about-custom-links-list a {
    border-radius: 12px !important;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease !important;
}
#about-social-list a:hover,
#about-custom-links-list a:hover {
    border-color: rgba(212, 175, 55, 0.35);
    background: var(--tta-surf-2, #141418);
    transform: translateY(-1px);
}

/* Community Rules: cada regla como tarjeta fila */
#about-rules-list > div {
    padding: 10px 14px;
    background: var(--tta-surf-1, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* Guidelines: mismo ritmo de lectura que la bio */
#about-guidelines {
    max-width: 65ch;
}

/* Móvil: stats en rejilla 2×2 (el contenedor trae display:flex inline,
   de ahí el !important) y sin separadores verticales */
@media (max-width: 640px) {
    .tta-about-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
    }
    .tta-about-stat {
        border: 1px solid rgba(255, 255, 255, 0.06);
        padding: 12px 8px;
    }
    .tta-about-stat + .tta-about-stat::before {
        display: none;
    }
    #panel-members .tta-about-h {
        margin-top: 22px;
        padding-top: 18px;
    }
}


/* ───────────────────────────────────────────────────────────────────
   13. ÍCONOS INLINE COMPARTIDOS (.tta-ico) — reemplazo de emojis
   pictográficos por Material Symbols Outlined dentro de texto corrido.
   Hereda tamaño (~1em) y color del contexto; alineado a la línea base.
   ─────────────────────────────────────────────────────────────────── */
.tta-ico {
    font-size: var(--tta-text-body);
    line-height: 1;
    vertical-align: -0.18em;
    color: inherit;
}
/* Los íconos grandes de los estados vacíos heredan el font-size del
   contenedor (.tta-empty__icon) — nada especial que hacer, pero se
   asegura que no crezcan de más si el contexto los marca. */
.tta-empty__icon .material-symbols-outlined {
    font-size: inherit;
    line-height: 1;
}


/* ───────────────────────────────────────────────────────────────────
   14. AULA: CONTROLES DE GESTIÓN TRAS EL TOGGLE "EDITAR" (Handoff #8 —
   la vista del master era idéntica a la del alumno + controles de admin
   SIEMPRE visibles: Editar / flechas de reorden / borrar en cada tarjeta,
   más las barras "Crear curso" y "Nuevo nivel"). Ahora todo el chrome de
   gestión (.tta-aula-admin en courses.js) nace OCULTO y solo aparece
   cuando el master activa el toggle "Editar" del toolbar del Aula
   (#aula-edit-toggle → body.tta-aula-editing). Con el toggle apagado la
   vista del master es pixel-idéntica a la del alumno. Nada se elimina:
   es puro show/hide (el JS y los endpoints quedan intactos).
   ─────────────────────────────────────────────────────────────────── */
.tta-aula-admin {
    display: none;
}
body.tta-aula-editing .tta-aula-admin {
    display: block;
}
body.tta-aula-editing .tta-aula-admin.tta-aula-admin--flex {
    display: flex;
}


/* ───────────────────────────────────────────────────────────────────
   15. RANKING V3 — REESTRUCTURA VISUAL COMPLETA. leaderboard.js reordena
   el DOM existente al cargar (ensureLbLayout → .lb-v2 en el panel) al
   recorrido pedido: ① hero con píldora de countdown + chips → ② "Así
   ganas puntos" (instrucciones) → ③ "Niveles y premios" → ④ "Tu posición"
   + tabla del torneo al final (PODIO top-3 + lista compacta 4+).
   Todo lo nuevo cuelga de .lb-v2 para no tocar otros contextos.
   Sin !important: gana por orden de carga + especificidad.
   ─────────────────────────────────────────────────────────────────── */

/* ── 15.1 Hero: filas claras — título+píldora / descripción / chips ── */
.lb-v2 .lb-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "t meta"
        "d d"
        "tf tf"
        "toggle toggle"
        "steps steps"
        "cta cta"
        "det det";
    align-items: center;
    gap: 10px 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.lb-v2 .lb-hero__t {
    grid-area: t;
    margin: 0;
    font-size: var(--tta-text-body);
}
.lb-v2 .lb-hero__d {
    grid-area: d;
    margin: 0;
    font-size: var(--tta-text-meta);
    color: var(--text-muted, #A1A1AA);
    max-width: 72ch;
}
.lb-v2 .lb-hero__d b {
    color: var(--text, #D4D4D8);
}
.lb-v2 .lb-hero__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.lb-v2 .lb-hero__toggle {
    grid-area: toggle;
    justify-self: start;
    margin: 0;
}
.lb-v2 .lb-hero__steps {
    grid-area: steps;
}
/* El JS del Ranking (leaderboard.js, ensureLbLayout) cuelga del hero dos hijos
   más que esta rejilla no nombra: el botón "Cómo ganar premios · Participar" y
   el panel que despliega. Sin área propia, el auto-placement los mandaba a la
   primera celda libre —la de la píldora, en la MISMA fila del título—: el botón
   se plantaba al lado del título, la columna del título se estrujaba a 36 px y
   "Torneo de la comunidad" se leía en tres renglones con el botón encima
   (reporte de Mathias, 20-ago-2026). Ahora cada uno tiene su área al final del
   hero: en la columna única del móvil no basta con darles la fila entera, ahí
   la celda libre es la de la píldora y el botón se colaba entre el título y la
   descripción. */
.lb-v2 .lb-hero > #lb-participate {
    grid-area: cta;
    justify-self: start;
}
.lb-v2 .lb-hero > #lb-details {
    grid-area: det;
}
/* Los chips de período van en su propia fila (el JS los saca de .lb-hero__meta);
   en pantallas angostas hacen scroll horizontal: nada se aprieta ni se corta. */
.lb-v2 #lb-timefilter {
    grid-area: tf;
    margin: 2px 0 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.lb-v2 #lb-timefilter::-webkit-scrollbar { display: none; }
.lb-v2 #lb-timefilter .tta-chip { flex: none; }
.lb-v2 #lb-season-tag {
    margin: 0;
}
/* Píldora "Temporada X · Termina en N días" */
.lb-v2 .lb-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-meta);
    font-weight: 600;
    white-space: nowrap;
}
.lb-v2 .lb-pill__days {
    color: var(--text, #D4D4D8);
    background: rgba(212, 175, 55, 0.16);
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lb-v2 .lb-note {
    margin: 0;
}

/* ── 15.2 Layout: recorrido vertical pedido ───────────────────────── */
/* Orden (lo garantiza ensureLbLayout): hero → "Así ganas puntos" (primero
   las instrucciones) → "Niveles y premios" → "Tu posición" → Tabla del
   torneo al final. Todo a todo el ancho, apilado igual en móvil y desktop. */
.lb-v2 .lb-grid {
    display: block;
    margin: 0;
}
.lb-v2 #ranking-guide-howto,
.lb-v2 #ranking-guide-levels,
.lb-v2 #lb-me-card {
    margin-bottom: 18px;
}
/* "Tu posición" y la tabla del torneo comparten tarjeta: una línea marca
   dónde empieza la tabla (sin partirla en dos cajas). */
.lb-v2 .lb-col-head--sep {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lb-v2 #lb-me-block .lb-col-head {
    margin-bottom: 12px;
}
/* Tarjetas con la superficie del sistema (antes degradado dorado plano) */
.lb-v2 .lb-col {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--tta-surf-1, #0F0F12);
    border-radius: 16px;
    padding: 18px 20px;
}
/* Desktop: las acciones en 2 columnas (la explicación "?" ocupa la fila)
   — se aprovecha el ancho sin romper el orden de lectura. La lista 4-10
   del ranking pasa a 2 columnas en 15.4 (tras el display:flex base). */
@media (min-width: 761px) {
    .lb-v2 .rg-rules {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        /* Filas de altura uniforme: la regla destacada trae subtítulo y chip,
           así que era mucho más alta que su vecina y la rejilla se veía
           desordenada (QA: "está amorfo"). */
        grid-auto-rows: 1fr;
        align-items: stretch;
    }
    .lb-v2 .rg-rules .rg-rule {
        height: 100%;
        align-items: center;
    }
    /* La regla que más importa (operar, sin tope) ocupa la fila entera en vez
       de dejar un hueco al lado. */
    .lb-v2 .rg-rules .rg-rule--hot {
        grid-column: 1 / -1;
    }
    .lb-v2 .rg-rules .rg-help {
        grid-column: 1 / -1;
        margin: 0;
    }
}

/* ── 15.3 Podio top-3 (la estrella) ───────────────────────────────── */
/* La cabecera de columnas de la tabla vieja ya no aplica (hay podio). */
.lb-v2 .lb-col-rank > .tta-lb-header {
    display: none;
}
.lb-v2 .lb-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 12px;
    align-items: end;
    margin: 4px auto 18px;
    max-width: 680px;   /* centrado: a todo el ancho quedaban huecos enormes */
}
.lb-v2 .lb-podium__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
}
.lb-v2 .lb-podium__col.tta-lb-clickable {
    border-radius: 12px;
    padding-top: 6px;
}
.lb-v2 .lb-podium__av {
    display: inline-flex;
    border-radius: 50%;
    line-height: 0;
}
.lb-v2 .is-1 .lb-podium__av {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.65), 0 0 26px rgba(212, 175, 55, 0.28);
}
.lb-v2 .is-2 .lb-podium__av {
    box-shadow: 0 0 0 2px rgba(192, 192, 200, 0.45);
}
.lb-v2 .is-3 .lb-podium__av {
    box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.50);
}
.lb-v2 .lb-podium__col.is-me .lb-podium__av {
    outline: 2px dashed rgba(212, 175, 55, 0.55);
    outline-offset: 4px;
}
.lb-v2 .lb-podium__av--ph {
    width: 52px;
    height: 52px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #A1A1AA);
    font-size: var(--tta-text-title);
    line-height: 1;
}
.lb-v2 .lb-podium__name {
    font-weight: 700;
    font-size: var(--tta-text-body);
    color: var(--text, #D4D4D8);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-v2 .is-1 .lb-podium__name {
    font-size: var(--tta-text-body);
}
.lb-v2 .lb-podium__you {
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-meta);
    font-weight: 600;
}
.lb-v2 .lb-podium__lvlchip {
    display: flex;
    justify-content: center;
    min-height: 20px;
}
.lb-v2 .lb-podium__pts {
    font-weight: 800;
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-body);
    font-variant-numeric: tabular-nums;
}
.lb-v2 .is-1 .lb-podium__pts {
    font-size: var(--tta-text-title);
}
.lb-v2 .lb-podium__pts span {
    font-size: var(--tta-text-meta);
    font-weight: 600;
    color: var(--text-muted, #A1A1AA);
}
/* Escalones del podio: la altura + el acento de tono hacen la jerarquía;
   plata y bronce van apagados para que el oro domine. */
.lb-v2 .lb-podium__base {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 12px;
    border-radius: 12px 12px 0 0;
    background: var(--tta-surf-2, #16161A);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
}
.lb-v2 .lb-podium__base .material-symbols-outlined {
    font-size: 22px;
}
.lb-v2 .lb-podium__rank {
    font-size: var(--tta-text-title);
    font-weight: 800;
    line-height: 1;
}
.lb-v2 .lb-podium__base--gold {
    min-height: 88px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.05));
    border-color: rgba(212, 175, 55, 0.45);
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-podium__base--silver {
    min-height: 68px;
    color: #C0C0C8;
}
.lb-v2 .lb-podium__base--bronze {
    min-height: 56px;
    color: #CD7F32;
}
.lb-v2 .lb-podium__col.is-empty {
    opacity: 0.45;
}
/* Suelo del podio: sin él los escalones (que no llevan borde inferior a
   propósito) parecían recortados por el filo de la tarjeta. */
.lb-v2 .lb-podium {
    position: relative;
    padding-bottom: 1px;
}
.lb-v2 .lb-podium::after {
    content: "";
    position: absolute;
    left: -6px; right: -6px; bottom: 0;
    height: 1px;
    background: linear-gradient(to right,
        rgba(212, 175, 55, 0) 0%,
        rgba(212, 175, 55, 0.45) 22%,
        rgba(212, 175, 55, 0.45) 78%,
        rgba(212, 175, 55, 0) 100%);
}

/* ── Líder a lo ancho (menos de tres con puntos) ──────────────────── */
.lb-v2 .lb-leader {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px auto 18px;
    max-width: 680px;
    padding: 18px 22px;
    border-radius: 16px;
    background:
        radial-gradient(120% 160% at 88% 0%, rgba(212, 175, 55, 0.18), transparent 60%),
        var(--tta-surf-2, #16161A);
    border: 1px solid rgba(212, 175, 55, 0.38);
}
.lb-v2 .lb-leader.tta-lb-clickable { cursor: pointer; }
.lb-v2 .lb-leader.is-me { border-color: rgba(212, 175, 55, 0.7); }
.lb-v2 .lb-leader__crown {
    position: absolute; top: 12px; right: 16px;
    font-size: var(--tta-text-hero);
    color: var(--gold, #D4AF37);
    opacity: 0.55;
}
.lb-v2 .lb-leader__av { display: inline-flex; flex: none; }
.lb-v2 .lb-leader__who { min-width: 0; flex: 1; }
.lb-v2 .lb-leader__tag {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #D4AF37);
    margin-bottom: 3px;
}
.lb-v2 .lb-leader__name {
    font-size: var(--tta-text-body);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-v2 .lb-leader__lvl { margin-top: 5px; }
.lb-v2 .lb-leader__pts {
    flex: none;
    font-size: var(--tta-text-title);
    font-weight: 800;
    line-height: 1;
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-leader__pts span {
    font-size: var(--tta-text-meta);
    font-weight: 600;
    color: var(--text-muted, #A1A1AA);
}
@media (max-width: 560px) {
    .lb-v2 .lb-leader { gap: 12px; padding: 14px 16px; }
    .lb-v2 .lb-leader__pts { font-size: 1.25rem; }
}

/* ── 15.4 Lista compacta (4° en adelante) ─────────────────────────── */
.lb-v2 .lb-rest {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Desktop: la lista 4-10 en 2 columnas (tras el flex base para ganar por orden) */
@media (min-width: 761px) {
    .lb-v2 .lb-rest {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 18px;
    }
}
/* Neutraliza el resaltado nth-child de la sección 8 (pensado para la
   tabla plana): dentro de .lb-rest las filas 1-3 son los rangos 4-6. */
.lb-v2 #leaderboard-list .lb-rest .tta-lb-trow:nth-child(-n+3) {
    background: none;
    border-left: none;
    padding-top: 8px;
    padding-bottom: 8px;
}
.lb-v2 #leaderboard-list .lb-rest .tta-lb-trow:nth-child(1) .tta-lb-rank {
    font-size: inherit;
}
.lb-v2 #leaderboard-list .lb-rest .tta-lb-trow:nth-child(1) .tta-lb-name span:first-child {
    font-size: inherit;
}
.lb-v2 #leaderboard-list .lb-rest .tta-lb-trow:nth-child(-n+3) .tta-lb-pts {
    font-weight: 600;
    color: inherit;
}
/* Medallas Material por si la fila top-3 aparece en lista (fallback) */
.lb-v2 .tta-lb-medal--1 { color: var(--gold, #D4AF37); }
.lb-v2 .tta-lb-medal--2 { color: #C0C0C8; }
.lb-v2 .tta-lb-medal--3 { color: #CD7F32; }

/* ── 15.5 "Tu posición": tarjeta a todo el ancho (el gancho personal) ─ */
/* Desktop: identidad (rank+avatar+nombre) a la izquierda, progreso al
   siguiente nivel a la derecha — se lee de un vistazo. Móvil: apilado. */
.lb-v2 .lb-mecard {
    border-color: rgba(212, 175, 55, 0.30);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0.015));
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.07);
}
/* El grid de 2 columnas (identidad | progreso) es del BLOQUE "Tu posición",
   no de la tarjeta: desde que la tarjeta también contiene la tabla del torneo,
   aplicarlo al contenedor metía cada sección de la tabla en una celda y los
   títulos se partían letra a letra. */
.lb-v2 #lb-me-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 6px 28px;
    align-items: center;
}
.lb-v2 #lb-me-block .lb-col-head {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}
@media (max-width: 760px) {
    .lb-v2 #lb-me-block {
        /* minmax(0,…) y no 1fr: el min-content del nombre (nowrap) inflaba la
           celda y la tarjeta entera se salía del viewport móvil */
        grid-template-columns: minmax(0, 1fr);
    }
}
.lb-v2 .lb-me__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lb-v2 .lb-me__rank {
    font-size: var(--tta-text-hero);
    font-weight: 800;
    color: var(--gold, #D4AF37);
    min-width: 52px;
    font-variant-numeric: tabular-nums;
}
.lb-v2 .lb-me__av {
    flex: none;
    display: inline-flex;
    border-radius: 50%;
    line-height: 0;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
}
.lb-v2 .lb-me__id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.lb-v2 .lb-me__id b {
    display: block;   /* inline no recorta: un nombre largo desbordaba la tarjeta en móvil */
    font-size: var(--tta-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-v2 .lb-me__pts {
    font-weight: 800;
    color: var(--gold, #D4AF37);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Progreso de nivel: barra grande con glow dorado. Dentro de .lb-mecard va
   en la columna derecha (desktop), sin margen; en móvil se apila con aire. */
.lb-v2 #leaderboard-progress {
    margin-top: 0;
}
@media (max-width: 760px) {
    .lb-v2 #leaderboard-progress {
        margin-top: 12px;
    }
}
/* El premio que desbloqueas al cruzar el umbral, en dorado */
.lb-v2 .lb-prog__prize {
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-prog__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.lb-v2 .lb-prog__lvl {
    font-weight: 700;
    font-size: var(--tta-text-body);
}
.lb-v2 .lb-prog__arrow {
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-prog__count {
    font-size: var(--tta-text-meta);
    color: var(--text-muted, #A1A1AA);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lb-v2 .lb-prog__bar {
    height: 12px;
    border-radius: 999px;
    background: var(--tta-surf-2, #16161A);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.lb-v2 .lb-prog__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8a6d1f, var(--gold, #D4AF37) 60%, #e8c547);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
    transition: width 0.35s;
}
.lb-v2 .lb-prog__left {
    margin-top: 8px;
    font-size: var(--tta-text-meta);
    color: var(--text-muted, #A1A1AA);
    text-align: center;
}
.lb-v2 .lb-prog__left b {
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-prog--max {
    text-align: center;
    color: var(--gold, #D4AF37);
    font-weight: 700;
    padding: 12px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    background: rgba(212, 175, 55, 0.06);
}

/* ── 15.6 Ladder "Niveles y premios" (full-width, stepped cards) ──── */
.lb-v2 .rg-levels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.lb-v2 .rg-lvl {
    position: relative;
    align-items: center;
}
.lb-v2 .rg-lvl__badge .material-symbols-outlined {
    font-size: 22px;
    color: var(--gold, #D4AF37);
}
.lb-v2 .rg-lvl__usdt {
    color: var(--gold, #D4AF37);
    font-weight: 800;
}
/* Estado alcanzado: check dorado + borde/acento */
.lb-v2 .rg-lvl__check {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: var(--tta-text-title);
    color: var(--gold, #D4AF37);
    opacity: 0;
    transition: opacity 0.15s;
}
.lb-v2 .rg-lvl.is-reached {
    border-color: rgba(212, 175, 55, 0.45);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0.02));
}
.lb-v2 .rg-lvl.is-reached .rg-lvl__check {
    opacity: 1;
}
/* Estado "Siguiente": el primer nivel pendiente se enciende (lo marca el JS
   con is-next) — conecta la aspiración con la acción inmediata. */
.lb-v2 .rg-lvl__next {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: var(--tta-text-meta);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0a0a0a;
    background: var(--gold, #D4AF37);
    padding: 2px 8px;
    border-radius: 999px;
    display: none;
}
.lb-v2 .rg-lvl.is-next {
    border-color: rgba(212, 175, 55, 0.55);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.10);
}
.lb-v2 .rg-lvl.is-next .rg-lvl__next {
    display: block;
}

/* ── 15.7 "Así ganas puntos": lista compacta, chips dorados ───────── */
.lb-v2 .rg-ico {
    color: var(--gold, #D4AF37);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lb-v2 .rg-ico .material-symbols-outlined {
    font-size: 18px;
}
.lb-v2 .rg-pts {
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 999px;
    padding: 3px 10px;
}
.lb-v2 .rg-sec-t .material-symbols-outlined {
    font-size: 15px;
    vertical-align: -3px;
    margin-right: 4px;
    color: var(--gold, #D4AF37);
}

/* ── 15.8 Responsive ──────────────────────────────────────────────── */
@media (max-width: 560px) {
    .lb-v2 .lb-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "t"
            "meta"
            "d"
            "tf"
            "toggle"
            "steps"
            "cta"
            "det";
        gap: 10px;
        padding: 16px;
    }
    .lb-v2 .lb-hero__meta {
        justify-content: flex-start;
    }
    .lb-v2 .lb-podium {
        gap: 8px;
    }
    .lb-v2 .lb-podium__name {
        font-size: 12px;
    }
    .lb-v2 .is-1 .lb-podium__name {
        font-size: var(--tta-text-meta);
    }
    .lb-v2 .lb-podium__pts {
        font-size: 0.95rem;
    }
    .lb-v2 .is-1 .lb-podium__pts {
        font-size: 1.2rem;
    }
    .lb-v2 .lb-podium__base--gold { min-height: 72px; }
    .lb-v2 .lb-podium__base--silver { min-height: 56px; }
    .lb-v2 .lb-podium__base--bronze { min-height: 46px; }
    .lb-v2 .rg-levels {
        grid-template-columns: 1fr;
    }
    .lb-v2 .lb-me__rank {
        font-size: 1.3rem;
        min-width: 44px;
    }
}


/* ───────────────────────────────────────────────────────────────────
   15.9 PULIDO ESTÉTICO — jerarquía, aire y acentos (pedido: "estético,
   legible, entendible", móvil y PC). Overrides al final de la sección 15:
   ganan por orden de carga con la misma especificidad.
   ─────────────────────────────────────────────────────────────────── */

/* Subtítulo guía bajo el título de cada bloque: orienta en una línea. */
.lb-v2 .lb-col-sub {
    font-size: var(--tta-text-meta);
    color: var(--text-muted, #A1A1AA);
    line-height: 1.45;
    margin: -6px 0 14px;
}

/* Títulos de bloque con más presencia y aire */
.lb-v2 .lb-col-head { margin-bottom: 10px; }
.lb-v2 .lb-col-t { font-size: var(--tta-text-body); letter-spacing: 0.01em; }

/* Hero: acento dorado lateral firma + título mayor */
.lb-v2 .lb-hero {
    border-left: 3px solid rgba(212, 175, 55, 0.65);
}
.lb-v2 .lb-hero__t { font-size: var(--tta-text-body); }

/* Podio: escalones con acento superior por tono y más presencia */
.lb-v2 .lb-podium { max-width: 720px; margin-top: 8px; }
.lb-v2 .lb-podium__base { border-top: 2px solid transparent; }
.lb-v2 .lb-podium__base--gold {
    min-height: 100px;
    border-top-color: var(--gold, #D4AF37);
    box-shadow: 0 -6px 24px rgba(212, 175, 55, 0.10);
}
.lb-v2 .lb-podium__base--silver { min-height: 76px; border-top-color: rgba(192, 192, 200, 0.55); }
.lb-v2 .lb-podium__base--bronze { min-height: 62px; border-top-color: rgba(205, 127, 50, 0.60); }
.lb-v2 .lb-podium__base .material-symbols-outlined { font-size: 24px; }
.lb-v2 .is-1 .lb-podium__av { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.75), 0 0 34px rgba(212, 175, 55, 0.40); }
.lb-v2 .lb-podium__pts { font-size: var(--tta-text-body); }
.lb-v2 .is-1 .lb-podium__pts { font-size: var(--tta-text-hero); }

/* Premios: tarjeta más legible — premio en 14px y chip de nivel */
.lb-v2 .rg-lvl { padding: 12px 14px; gap: 12px; }
.lb-v2 .rg-lvl__badge { width: 44px; height: 44px; }
.lb-v2 .rg-lvl__prize { font-size: var(--tta-text-body); font-weight: 600; }
.lb-v2 .rg-lvl__meta { font-size: var(--tta-text-meta); margin-top: 3px; }
.lb-v2 .rg-lvl__lvl {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 999px;
    padding: 1px 8px;
}
.lb-v2 .rg-lvl.is-reached { opacity: 0.82; }

/* Reglas: la acción recurrente con borde firma y filas con hover */
.lb-v2 .rg-rule { transition: background 0.15s, border-color 0.15s; }
.lb-v2 .rg-rule:hover { background: rgba(255, 255, 255, 0.05); }
.lb-v2 .rg-rule--hot { border-left: 3px solid var(--gold, #D4AF37); }

/* "Tu posición": acento lateral dorado */
.lb-v2 .lb-mecard { border-left: 3px solid var(--gold, #D4AF37); }

/* Lista 4-10: filas con más aire */
.lb-v2 .lb-rest .tta-lb-trow { padding-top: 9px; padding-bottom: 9px; border-radius: 10px; }

/* Móvil: ritmo compacto pero aireado */
@media (max-width: 560px) {
    .lb-v2 .lb-col-sub { font-size: 12px; margin-bottom: 12px; }
}


/* ───────────────────────────────────────────────────────────────────
   16. LIVE / "GUION DEL DÍA" — REESTRUCTURA VISUAL (Handoff: el dueño lo
   veía "cagado y complejo": texto suelto sin tarjetas, controles
   dispersos y el guion como una sola pared de texto). Ahora:
   1) Contexto del día en UNA tarjeta (.tp-daybar) con punto de estado
      en CSS (.tp-dot — reemplaza los emojis de color) + botón Regenerar.
   2) Controles del teleprompter en una sola barra-instrumento
      (.tp-toolbar): etiquetas en versalitas meta, grupos espaciados
      parejo y el CTA dorado "Modo teleprompter" anclado a la derecha.
   3) Cada sección del guion es su propia tarjeta (.tp-block) con
      encabezado (ícono Material + título + duración meta + badge de
      prioridad ALTA/MEDIA/BAJA) y cuerpo plegable (chevron con
      aria-expanded, abierto por defecto). Notas de dirección con borde
      dorado izquierdo + cursiva + dorado tenue (#B8962F).
   Todo cuelga de #panel-teleprompter: la especificidad del ID gana sobre
   el <style> inline del panel (que carga después en el body), ganando
   por especificidad (ID + clase) en vez de por fuerza. El overlay de lectura (#tp-overlay vive en <body>, fuera
   del panel) lleva sus propias reglas bajo su propio ID.
   ─────────────────────────────────────────────────────────────────── */

/* Punto de estado del día (reemplaza los emojis de color) */
.tp-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
    flex: none;
}

/* ── 16.0 Guiones anteriores ─────────────────────────────────────────
   Se guarda un guion por dia (tabla teleprompter_scripts). El panel cuelga
   de la barra del dia y solo se pinta al pedirlo. */
#panel-teleprompter .tp-hist {
    flex-basis: 100%;
    margin-top: 12px;
    background: #0B0B0E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
#panel-teleprompter .tp-hist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: var(--tta-text-meta);
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#panel-teleprompter .tp-hist__x {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    line-height: 1;
}
#panel-teleprompter .tp-hist__cargando {
    padding: 18px 14px;
    color: var(--text-muted);
    font-size: var(--tta-text-sm);
}
#panel-teleprompter .tp-hist__list {
    max-height: 340px;
    overflow-y: auto;
}
#panel-teleprompter .tp-hist__row {
    display: grid;
    grid-template-columns: 116px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    color: var(--text-primary, #F5F5F4);
    font-size: var(--tta-text-sm);
}
/* Apuntar sombrea; el guion que se esta leyendo va en dorado apagado. */
#panel-teleprompter .tp-hist__row:hover { background: rgba(255, 255, 255, 0.05); }
#panel-teleprompter .tp-hist__row.is-on { background: rgba(212, 175, 55, 0.10); }
#panel-teleprompter .tp-hist__fecha { color: var(--text-muted); white-space: nowrap; }
#panel-teleprompter .tp-hist__tit {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-teleprompter .tp-hist__tipo {
    color: var(--text-muted);
    font-size: var(--tta-text-xs);
    white-space: nowrap;
}
@media (max-width: 768px) {
    #panel-teleprompter .tp-hist__row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    #panel-teleprompter .tp-hist__tit { white-space: normal; }
}

/* ── 16.1 Barra de contexto del día ──────────────────────────────── */
#panel-teleprompter .tp-daybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #0F0F12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
#panel-teleprompter .tp-daybar__main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}
#panel-teleprompter .tp-day {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: var(--tta-text-body);
    letter-spacing: 0.4px;
    margin-right: 0;
}
#panel-teleprompter .tp-emotion {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.08);
    color: #D4AF37;
    border-radius: 6px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0;
    vertical-align: 0;
}
#panel-teleprompter .tp-date {
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
}
#panel-teleprompter .tp-reason {
    flex-basis: 100%;
    color: #D4D4D8;
    opacity: 0.75;
    font-size: var(--tta-text-meta);
    margin-top: 2px;
    max-width: none;
    line-height: 1.5;
}

/* ── 16.2 Barra de controles (un solo instrumento) ───────────────── */
#panel-teleprompter .tp-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #0F0F12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
#panel-teleprompter .tp-ctrl label {
    display: block;
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
#panel-teleprompter .tp-toolbar .tp-start {
    margin-left: auto;
}
#panel-teleprompter .tp-toolbar .tp-start .tta-ico {
    font-size: 17px;
    vertical-align: -3px;
}
@media (max-width: 640px) {
    #panel-teleprompter .tp-toolbar { gap: 12px; }
    #panel-teleprompter .tp-toolbar .tp-start { width: 100%; margin-left: 0; }
}

/* ── 16.3 Secciones del guion como tarjetas ──────────────────────── */
#panel-teleprompter .tp-block {
    background: #0F0F12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
#panel-teleprompter .tp-block:last-child { margin-bottom: 0; }
#panel-teleprompter .tp-block__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
#panel-teleprompter .tp-block__head > .tta-ico {
    color: #D4AF37;
    font-size: 20px;
    flex: none;
}
#panel-teleprompter .tp-block__title {
    margin: 0;
    font-size: var(--tta-text-body);
    font-weight: 700;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}
#panel-teleprompter .tp-block__dur {
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
    white-space: nowrap;
}
/* Badges de prioridad: ALTA = danger, MEDIA = warning, BAJA = neutro */
#panel-teleprompter .tp-energy {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #A1A1AA;
    white-space: nowrap;
}
#panel-teleprompter .tp-energy--alta {
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}
#panel-teleprompter .tp-energy--media {
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.1);
}
#panel-teleprompter .tp-energy--baja {
    color: #A1A1AA;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}
/* Chevron de pliegue por sección */
#panel-teleprompter .tp-block__fold {
    flex: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #A1A1AA;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
#panel-teleprompter .tp-block__fold:hover {
    border-color: #D4AF37;
    color: #D4AF37;
}
#panel-teleprompter .tp-block__fold .tta-ico {
    font-size: 18px;
    transition: transform 0.18s ease;
}
#panel-teleprompter .tp-block:not(.is-folded) .tp-block__fold .tta-ico {
    transform: rotate(180deg);
}
#panel-teleprompter .tp-block.is-folded .tp-block__body {
    display: none;
}
/* Cuerpo: bullets con aire + notas de dirección diferenciadas */
#panel-teleprompter .tp-block__body { margin-top: 12px; }
#panel-teleprompter .tp-block ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#panel-teleprompter .tp-block li {
    font-size: var(--tta-text-body);
    line-height: 1.65;
}
#panel-teleprompter .tp-improv {
    margin: 5px 0 0 6px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid rgba(212, 175, 55, 0.5);
    color: #B8962F;
    font-size: var(--tta-text-meta);
    font-style: italic;
    line-height: 1.5;
}
#panel-teleprompter .tp-chat,
#panel-teleprompter .tp-btcc {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 12px;
    font-size: var(--tta-text-meta);
}
#panel-teleprompter .tp-chat { color: #6DB3FF; }
#panel-teleprompter .tp-btcc { color: #D4AF37; font-weight: 600; }

/* ── 16.4 Overlay de lectura (vive en <body>, fuera del panel) ───── */
#tp-overlay .tpov-btn .tta-ico {
    font-size: 18px;
    vertical-align: -4px;
}
#tp-overlay .tp-block__head {
    display: flex;
    align-items: center;
    gap: 0.4em;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    padding-bottom: 0.3em;
    margin-bottom: 0.4em;
}
#tp-overlay .tp-block__head > .tta-ico { color: #D4AF37; flex: none; }
#tp-overlay.tp-theme-beige .tp-block__head > .tta-ico { color: #8A5A00; }
#tp-overlay .tp-block__title { flex: 1; min-width: 0; }
#tp-overlay .tp-block--big h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
}
#tp-overlay .tp-block__dur {
    font-size: 0.5em;
    opacity: 0.6;
    white-space: nowrap;
}
#tp-overlay .tp-energy { font-size: 0.32em; }
#tp-overlay .tp-block__body { margin-top: 0; }
#tp-overlay .tp-improv {
    border-left: 2px solid rgba(212, 175, 55, 0.45);
    padding-left: 0.5em;
    color: #B8962F;
    font-style: italic;
}
#tp-overlay.tp-theme-beige .tp-improv { color: #8A6D00; }
#tp-overlay .tp-chat,
#tp-overlay .tp-btcc {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}

/* ── 15.9 Podio: la cabecera de columnas (# MIEMBRO NIVEL PUNTOS) sobra con el
   podio visual — las filas 4+ ya llevan su propia alineación ────────────── */
.lb-v2 .lb-col-rank .tta-lb-header{display:none}

/* ── 16.5 Fix móvil daybar: el botón Regenerar (269px, nowrap) aplastaba
   .tp-daybar__main a 34px (flex-shrink ganaba al wrap) → texto en columna
   vertical. En ≤640px la fila principal y el botón van a ancho completo ── */
@media (max-width: 640px) {
    #panel-teleprompter .tp-daybar__main { flex: 1 1 100%; }
    #panel-teleprompter #tp-regen { width: 100%; margin-left: 0; justify-content: center; }
}

/* ── 17. Hero móvil COMPACTO (solo usuarios con sesión; el visitante anónimo
   conserva su hero cinematográfico de registro) ───────────────────────────
   Problema: el banner de comunidad ocupaba ~400px verticales en cada pestaña
   (avatar 64px + título + bio de 3 líneas + stats + botones apilados).
   Solución: una tira de ~110px — avatar 44px a la izquierda, título + stats
   en línea, bio recortada a 1 línea con "Ver más", acciones en fila abajo. */
@media (max-width: 640px) {
    body:not(.tta-anon) .tta-hero { margin-bottom: 14px; border-radius: 12px; }
    body:not(.tta-anon) .tta-hero__content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 14px;
        gap: 10px;
    }
    body:not(.tta-anon) .tta-hero__avatar {
        width: 44px;
        height: 44px;
        border-width: 2px;
        flex: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    }
    body:not(.tta-anon) .tta-hero__meta { flex: 1 1 60%; min-width: 0; }
    body:not(.tta-anon) .tta-hero__meta h1 { font-size: var(--tta-text-title); margin: 0 0 2px; }
    /* Bio: una sola línea; el toggle "Ver más" sigue expandiéndola */
    body:not(.tta-anon) .tta-hero__meta .tta-bio-clamp {
        -webkit-line-clamp: 1;
        font-size: var(--tta-text-meta);
        line-height: 1.45;
    }
    body:not(.tta-anon) .tta-hero__meta .tta-bio-more { margin-top: 2px; font-size: var(--tta-text-meta); }
    /* Stats (miembros · cursos) en la misma línea, compactos */
    body:not(.tta-anon) #hero-members,
    body:not(.tta-anon) #hero-courses { font-size: var(--tta-text-meta); }
    /* Acciones: fila a ancho completo debajo del meta, botones compactos */
    body:not(.tta-anon) .tta-hero-actions {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: 0;
    }
    body:not(.tta-anon) .tta-hero-actions .btn {
        padding: 7px 12px;
        font-size: var(--tta-text-meta);
        white-space: nowrap;
    }
    /* El lápiz de edición del máster no tapa el título en la tira compacta */
    body:not(.tta-anon) #hero-edit { top: 8px; right: 8px; width: 30px; height: 30px; }
}

/* ── 17.1 Fix: el min-height heredado de 140px (hero desktop compactado) con
   overflow:hidden recortaba la fila de acciones en móvil (botón "Avisarme"
   cortado a la mitad). En la tira móvil el alto lo manda el contenido ── */
@media (max-width: 640px) {
    body:not(.tta-anon) .tta-hero,
    body:not(.tta-anon) .tta-hero__content { min-height: 0; }
}

/* ───────────────────────────────────────────────────────────────────
   18. COMUNIDAD "WOW" — feed premium member-first (posts, composer,
   comentarios, cabeceras de sección, sidebar, empty states).
   Todo va scoped a #panel-feed (o a #feed-composer / .tta-feed-side que
   solo existen ahí) para no tocar las demás pestañas. Sin !important:
   gana por orden de carga + especificidad del ID. El markup nuevo lo
   genera feed.js (renderPost/comentarios) y kol_profile.html:
   .tta-post__head/.tta-post__who/.tta-post__namerow/.tta-post__name/
   .tta-post__meta/.tta-post__cat/.tta-post__pin/.tta-post__media/
   .tta-post__linkprev/.tta-comment/.tta-feed-h/.tta-side-label y las
   clases de estado .tta-post.is-pinned / .tta-post.is-gem.
   ─────────────────────────────────────────────────────────────────── */

/* ── 18.1 Tarjeta de post: hover más rápido (180ms ease-out) y sombra
   suave; el translateY(-1px) ya viene de la sección 4 ─────────────── */
#panel-feed .tta-post {
    transition: transform 180ms ease-out,
                border-color 180ms ease-out,
                box-shadow 180ms ease-out;
}
#panel-feed .tta-post:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

/* Fijado: barra dorada de 2px a la izquierda (inset → no mueve layout) */
#panel-feed .tta-post.is-pinned {
    box-shadow: inset 2px 0 0 var(--gold, #D4AF37),
                0 2px 8px rgba(0, 0, 0, 0.28);
}
#panel-feed .tta-post.is-pinned:hover {
    box-shadow: inset 2px 0 0 var(--gold, #D4AF37),
                0 10px 28px rgba(0, 0, 0, 0.42);
}

/* Destacado (gem): halo cyan — antes inline en feed.js */
#panel-feed .tta-post.is-gem {
    border-color: rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.08);
}

/* ── 18.2 Fila de autor: avatar 40px + nombre 600 + meta + chip de
   categoría + chip "Fijado" (antes todo eran divs con estilos inline) ─ */
#panel-feed .tta-post__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
#panel-feed .tta-post__who {
    flex: 1;
    min-width: 0;
}
#panel-feed .tta-post__namerow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap; /* el chip Fijado/En revisión no desborda en 375px */
}
#panel-feed .tta-post__name {
    font-weight: 600;
    font-size: var(--tta-text-body);
    color: var(--text-primary, #F5F5F4);
}
/* Nombre y foto llevan al perfil de quien publica. Apuntar SOLO subraya el
   nombre: nada crece ni cambia de tamano bajo el cursor. */
.tta-autor-link { cursor: pointer; }
.tta-autor-link:hover .tta-post__name,
.tta-post__name .tta-autor-link:hover { text-decoration: underline; }
.tta-autor-link:hover { text-decoration: underline; }
.tta-autor-link:hover img,
.tta-autor-link:hover .tta-avatar { filter: brightness(1.12); }
.tta-autor-link:focus-visible {
    outline: 2px solid var(--gold, #D4AF37);
    outline-offset: 2px;
    border-radius: 4px;
}
#panel-feed .tta-post__meta {
    color: var(--text-muted);
    font-size: var(--tta-text-meta); /* meta nunca por debajo de 13px */
    margin-top: 1px;
}
/* Chip de categoría: dorado tintado, pequeño, en la línea de meta */
#panel-feed .tta-post__cat {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-meta);
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 1px;
}
/* Chip "Fijado" con push_pin */
#panel-feed .tta-post__pin {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
#panel-feed .tta-post__pin .material-symbols-outlined {
    font-size: 13px;
}

/* ── 18.3 Cuerpo del post: 15px / 1.6 y media con radio 12px + borde ── */
#panel-feed .tta-post__body {
    margin-top: 12px;
    font-size: var(--tta-text-body);
    line-height: 1.6;
}
#panel-feed .tta-post__media {
    margin-top: 12px;
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    border: 1px solid var(--tta-surf-line, rgba(255, 255, 255, 0.06));
}
#panel-feed img.tta-post__media {
    object-fit: cover;
}
/* Link preview: el borde vive aquí (no inline) para poder iluminarlo */
#panel-feed .tta-post__linkprev {
    border: 1px solid var(--tta-surf-line, rgba(255, 255, 255, 0.06));
    transition: border-color 150ms ease, background 150ms ease;
}
#panel-feed .tta-post__linkprev:hover {
    border-color: rgba(212, 175, 55, 0.35);
}

/* ── 18.4 Fila de acciones: hairline arriba, pills de 8px en hover,
   reacciones con micro-elevación; el estado activo dorado ya viene de
   tta.css (.tta-react-btn.is-active) ───────────────────────────────── */
#panel-feed .tta-post__actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tta-surf-line, rgba(255, 255, 255, 0.06));
    gap: 8px;
}
#panel-feed .tta-post__action {
    border-radius: 8px;
    font-size: var(--tta-text-meta);
    transition: background 150ms ease, color 150ms ease;
}
#panel-feed .tta-post__action:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold, #D4AF37);
}
/* La micro-elevación es solo para la reacción chica del comentario: el
   "Me gusta" del post es un botón plano a todo el ancho y saltaba raro. */
#panel-feed .tta-react-btn--sm:hover {
    transform: translateY(-1px);
}
/* En táctil no hay hover: el menú ⋮ del post y las acciones de comentario
   deben quedar visibles (en desktop aparecen al pasar el ratón) */
@media (hover: none) {
    #panel-feed .tta-post-menu-trigger { opacity: 1; }
    #panel-feed .tta-comment .tta-comment-action { opacity: 0.55; }
}

/* ── 18.5 Composer: tarjeta enfocable con anillo dorado, toolbar con
   pills de 8px, select consistente y Publicar dorado fuerte ────────── */
#panel-feed #feed-composer {
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
/* Es una .tta-card pero NO es clickable: neutraliza el salto de hover
   heredado (translateY -3px + cambio de fondo de .tta-card:hover) */
#panel-feed #feed-composer:hover {
    transform: none;
    background: var(--tta-surf-1, #0E0E12);
    box-shadow: var(--tta-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.5));
}
#panel-feed #feed-composer:focus-within {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
#feed-composer .tta-composer-toolbar button {
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease;
}
#feed-composer .tta-composer-toolbar button:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold, #D4AF37);
}
#feed-composer .tta-composer-editor {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
#feed-composer .ca-icon,
#feed-composer .ca-attach {
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
#feed-composer .ca-icon:hover,
#feed-composer .ca-attach:hover {
    color: var(--gold, #D4AF37);
    border-color: rgba(212, 175, 55, 0.3);
}
#feed-composer .ca-cat {
    border-radius: 8px;
}
/* Publicar: dorado fuerte, hover más claro (#E8C84A) + glow, press real */
#feed-composer #btn-post {
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#feed-composer #btn-post:hover:not(:disabled) {
    background: linear-gradient(135deg, #E8C84A, #D4AF37);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28);
}
#feed-composer #btn-post:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}

/* ── 18.6 Cabeceras de sección: barra dorada + label uppercase 12px
   letterspaced + divisor hairline (mismo lenguaje que .tta-about-h de
   la sección 12). Las generan kol_profile.html (Misiones, Tendencias)
   con la clase .tta-feed-h ─────────────────────────────────────────── */
#panel-feed .tta-feed-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    user-select: none;
}
#panel-feed .tta-feed-h::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--gold, #D4AF37);
    flex: none;
}
#panel-feed .tta-feed-h__ico {
    font-size: var(--tta-text-body);
    color: var(--gold, #D4AF37);
}
#panel-feed .tta-feed-h__label {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 150ms ease;
}
#panel-feed .tta-feed-h:hover .tta-feed-h__label {
    color: var(--text-secondary, #D4D4D8);
}
#panel-feed .tta-feed-h__chev {
    margin-left: auto;
    font-size: var(--tta-text-title);
    color: var(--text-muted);
    transition: transform 180ms ease;
}
/* Chevron apunta a la derecha cuando la lista de misiones está plegada */
#panel-feed .tta-feed-h:has(+ #quests-list[hidden]) .tta-feed-h__chev {
    transform: rotate(-90deg);
}
/* Variante no clicable (Tendencias vive dentro de su propia tarjeta) */
#panel-feed .tta-feed-h--static {
    cursor: default;
}
#panel-feed .tta-trending-tags {
    border-radius: 14px;
}

/* ── 18.7 Sidebar: label "Sobre la comunidad" con el mismo tratamiento,
   tarjetas con hover suave y stats con etiquetas uppercase ─────────── */
#panel-feed .tta-feed-side .tta-side-card {
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out,
                transform 180ms ease-out;
}
#panel-feed .tta-feed-side .tta-side-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
#panel-feed .tta-side-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#panel-feed .tta-side-label::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--gold, #D4AF37);
    flex: none;
}
#panel-feed .tta-side-stats b {
    font-size: var(--tta-text-body);
}
#panel-feed .tta-side-stats span {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── 18.8 Comentarios: anidado con hairline, avatares 28px (ya vienen
   así del JS), acciones propias sutiles hasta el hover ─────────────── */
#panel-feed .comments-area {
    border-top: 1px solid var(--tta-surf-line, rgba(255, 255, 255, 0.06));
    margin-top: 14px;
    padding-top: 12px;
}
#panel-feed .tta-comment {
    display: flex;
    gap: 10px;
    padding: 8px 0;
}
#panel-feed .tta-comment-nested {
    margin-left: 14px; /* la hairline queda bajo el centro del avatar */
    padding-left: 12px;
    border-left: 1px solid var(--tta-surf-line, rgba(255, 255, 255, 0.06));
}
#panel-feed .tta-comment .tta-comment-action {
    opacity: 0;
    border-radius: 6px;
    transition: opacity 150ms ease;
}
#panel-feed .tta-comment:hover .tta-comment-action,
#panel-feed .tta-comment .tta-comment-action:focus-visible {
    opacity: 1;
}

/* ── 18.9 Empty states: patrón .tta-empty consistente — icono dentro de
   un círculo tintado dorado, título y descripción ──────────────────── */
#panel-feed .tta-empty {
    padding: 56px 24px;
}
#panel-feed .tta-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-hero);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.08);
}
#panel-feed .tta-empty__title {
    font-size: var(--tta-text-body);
}

/* ── 18.10 Buscador del feed: foco con anillo dorado acorde al composer ─ */
#panel-feed #feed-search {
    border-radius: 10px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
#panel-feed #feed-search:focus {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════════
   19. AULA "WOW" — PLATAFORMA DE CURSOS PREMIUM (member-first)
   Capa visual del rediseño del Aula: hero "Continúa donde lo dejaste",
   tarjetas de nivel premium (ícono en círculo dorado, degradado en la
   portada, chip EN CURSO, barra de progreso fina con glow), cabeceras
   de grupo por curso, toolbar con foco dorado y pulido de #panel-curso.
   El markup lo genera courses.js (levelCardHTML / resumeCardHTML /
   levelGroupsHTML); aquí SOLO hay presentación, scoping a
   #panel-courses / #panel-curso y sin !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 19.1 Hero "Continúa donde lo dejaste": tarjeta full-width con
   portada, barra de progreso dorada y CTA Continuar ───────────────── */
#panel-courses .tta-resume {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 8px;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background:
        radial-gradient(130% 170% at 94% 0%, rgba(212, 175, 55, 0.10), transparent 55%),
        #14141A;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}
#panel-courses .tta-resume__cover {
    flex: none;
    width: 124px;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background: linear-gradient(135deg, #16161B, #241F12);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
#panel-courses .tta-resume__cover-ico {
    font-size: 34px;
    color: var(--gold, #D4AF37);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}
#panel-courses .tta-resume__body {
    flex: 1;
    min-width: 0;
}
#panel-courses .tta-resume__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: var(--tta-text-meta);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold, #D4AF37);
}
#panel-courses .tta-resume__label .tta-ico {
    font-size: 15px;
}
#panel-courses .tta-resume__title {
    font-size: var(--tta-text-body);
    font-weight: 700;
    line-height: 1.35;
    color: #F4F4F5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#panel-courses .tta-resume__meta {
    margin-top: 3px;
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
}
#panel-courses .tta-resume__track {
    margin-top: 10px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
#panel-courses .tta-resume__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #B8962F, #D4AF37);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
    transition: width 400ms ease;
}
#panel-courses .tta-resume__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ── 19.2 Tarjetas de nivel premium: superficie elevada, hover con
   lift + borde dorado, portada con degradado e ícono en círculo ────── */
#panel-courses .tta-card,
#panel-curso .tta-card {
    background: #16161A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#panel-courses .tta-lvl .tta-card,
#panel-curso .tta-lvl .tta-card {
    height: 100%;
}
#panel-courses .tta-lvl:hover .tta-card,
#panel-curso .tta-lvl:hover .tta-card {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.32);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
/* La tarjeta EN CURSO lleva un anillo dorado permanente (más el lift al hover) */
#panel-courses .tta-lvl.is-progress .tta-card {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.16), 0 10px 26px rgba(212, 175, 55, 0.07);
}
#panel-courses .tta-lvl.is-progress:hover .tta-card {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.22), 0 14px 30px rgba(0, 0, 0, 0.5);
}
#panel-courses .tta-card__cover,
#panel-curso .tta-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
/* Degradado inferior de la portada: el ícono y el chip quedan legibles
   sobre cualquier imagen */
#panel-courses .tta-card__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 9, 11, 0) 42%, rgba(9, 9, 11, 0.66) 100%);
}
#panel-courses .tta-card__lvl-ico {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold, #D4AF37);
    background: rgba(12, 12, 14, 0.62);
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
#panel-courses .tta-card__chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--tta-text-meta);
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #0A0A0A;
    background: var(--gold, #D4AF37);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}
/* Estado completado: check verde con disco oscuro (reemplaza el inline
   que usaba antes levelCardHTML) */
#panel-courses .tta-card__done,
#panel-curso .tta-card__done {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    font-size: var(--tta-text-hero);
    color: #22C55E;
    background: rgba(9, 9, 11, 0.6);
    border-radius: 50%;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
#panel-courses .tta-card__body,
#panel-curso .tta-card__body {
    padding: 14px 16px 16px;
}
#panel-courses .tta-card__title,
#panel-curso .tta-card__title {
    margin: 0 0 6px;
    font-size: var(--tta-text-body);
    font-weight: 600;
    line-height: 1.35;
    color: #F4F4F5;
}
#panel-courses .tta-card__meta,
#panel-curso .tta-card__meta {
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
}
/* Barra de progreso fina (4px) dorada; glow cuando está en curso y
   verde success cuando el módulo se completó */
#panel-courses .tta-card-prog,
#panel-curso .tta-card-prog {
    margin-top: 12px;
}
#panel-courses .tta-card-prog__track,
#panel-curso .tta-card-prog__track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
#panel-courses .tta-card-prog__fill,
#panel-curso .tta-card-prog__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #B8962F, #D4AF37);
    transition: width 400ms ease;
}
#panel-courses .tta-card-prog--live .tta-card-prog__fill,
#panel-curso .tta-card-prog--live .tta-card-prog__fill {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
#panel-courses .tta-card-prog--done .tta-card-prog__fill,
#panel-curso .tta-card-prog--done .tta-card-prog__fill {
    background: #22C55E;
    box-shadow: none;
}
#panel-courses .tta-card-prog__lbl,
#panel-curso .tta-card-prog__lbl {
    margin-top: 5px;
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
}
/* Candados: mismo patrón blur de la sección 6, con un halo dorado
   sutil en el ícono para que se lea como "siguiente paso", no como error */
#panel-courses .tta-course-locked__icon,
#panel-curso .tta-course-locked__icon {
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.16);
}
#panel-courses .tta-course-locked__overlay--soon .tta-course-locked__icon,
#panel-curso .tta-course-locked__overlay--soon .tta-course-locked__icon {
    box-shadow: none;
}
/* Empty state del Aula con el mismo patrón de círculo dorado del feed (18.9) */
#panel-courses .tta-empty {
    padding: 56px 24px;
}
#panel-courses .tta-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-hero);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.08);
}

/* ── 19.3 Cabeceras de grupo por curso: barra dorada + label uppercase
   + conteo, con hairline divisoria (solo cuando hay más de un curso) ── */
#panel-courses .tta-level-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#panel-courses .tta-level-group:first-child,
#panel-courses .tta-resume + .tta-level-group {
    margin-top: 0;
}
#panel-courses .tta-level-group::before {
    content: "";
    flex: none;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--gold, #D4AF37);
}
#panel-courses .tta-level-group__label {
    font-size: var(--tta-text-meta);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #F4F4F5;
}
#panel-courses .tta-level-group__count {
    margin-left: auto;
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
}

/* ── 19.4 Toolbar del Aula: buscador con anillo dorado (mismo patrón
   que el feed, 18.10), select estilizado y toggle Editar con estado ON
   claro en dorado ──────────────────────────────────────────────────── */
#panel-courses #courses-search {
    border-radius: 10px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
#panel-courses #courses-search:focus {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}
#panel-courses #courses-sort {
    border-radius: 10px;
    background: #16161A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #D4D4D8;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
#panel-courses #courses-sort:focus {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}
#panel-courses #aula-edit-toggle {
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
#panel-courses #aula-edit-toggle.is-active {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.5);
    color: var(--gold, #D4AF37);
}

/* ── 19.5 #panel-curso: cabecera con el mismo tono editorial y sus
   tarjetas gamificadas con el acabado premium compartido (19.2) ────── */
#panel-curso h2 {
    letter-spacing: -0.01em;
}
#panel-curso .tta-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: var(--gold, #D4AF37);
    font-size: var(--tta-text-hero);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.08);
}

/* ── 19.6 Móvil (≤640px): hero en columna con CTA a todo el ancho,
   cabeceras de grupo que envuelven, sin overflow a 375px ───────────── */
@media (max-width: 640px) {
    #panel-courses .tta-resume {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px;
    }
    #panel-courses .tta-resume__cover {
        width: 100%;
        aspect-ratio: 16 / 8;
    }
    #panel-courses .tta-resume__title {
        white-space: normal;
    }
    #panel-courses .tta-resume__cta {
        width: 100%;
        justify-content: center;
    }
    #panel-courses .tta-level-group {
        flex-wrap: wrap;
    }
    #panel-courses .tta-level-group__count {
        margin-left: 0;
        width: 100%;
    }
}

/* ── 19.6b Modal "Editar módulo" en ESCRITORIO: dos columnas (contenido a la
   izquierda, acceso y aviso a la derecha). En móvil sigue apilado. Antes era
   una tira de 560px con todo en fila india y scroll eterno en PC. ──────── */
.mc-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 860px) {
    .mc-2col {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .mc-2col .mc-col {
        min-width: 0;
    }
    /* Con el doble de ancho, las condiciones entran de a 2 sin apretarse */
    .mc-2col .mc-col > div[style*="grid-template-columns:repeat(2,1fr)"] {
        gap: 10px;
    }
}

/* ── 19.7 Móvil (≤640px): la tarjeta grande con portada 16:9 se queda (es la
   que gusta); solo se aprieta el aire para que entren más niveles por
   pantalla. La variante "fila con miniatura" se probó y se veía peor. ──── */
@media (max-width: 640px) {
    #panel-courses .tta-card__body,
    #panel-curso .tta-card__body {
        padding: 11px 14px 13px;
    }
    #panel-courses .tta-card__title,
    #panel-curso .tta-card__title {
        font-size: var(--tta-text-body);
        margin-bottom: 3px;
    }
    #panel-courses .tta-card__meta,
    #panel-curso .tta-card__meta {
        font-size: 12px;
    }
    #panel-courses .tta-card-prog,
    #panel-curso .tta-card-prog {
        margin-top: 9px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   20. MIEMBROS + CALENDARIO "WOW" — member-first (Handoff: las dos
   pestañas que faltaban para igualar el nivel de feed/courses/ranking/
   live). Patrones firma: barra dorada + etiqueta uppercase 11-12px con
   letter-spacing, hairlines rgba(255,255,255,0.06), superficie #0F0F12,
   hover translateY(-1px) + borde que se ilumina, foco dorado en inputs,
   chips tintados rgba(212,175,55,0.08/0.2).
   El markup nuevo lo generan members.js (.tta-mstat/.tta-mrow/.tta-chip-vip/
   .tta-chip-life) y calendar.js (.tta-evnext/.tta-evcard); los contenedores
   viven en kol_profile.html (#panel-members / #panel-calendar). Todo va
   scoped al ID del panel; sin !important (gana por especificidad + orden).
   ─────────────────────────────────────────────────────────────────── */

/* ── 20.1 MIEMBROS · Stat cards de estado (4 col, 2×2 en ≤768px) ─────
   #members-tabs pasa de tabs subrayadas a tarjetas seleccionables:
   count 24px tabular + etiqueta uppercase; activa = borde/tinte/count
   dorados; inactivas sutiles con borde que se ilumina en hover. ─────── */
#panel-members .tta-mstats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
#panel-members .tta-mstat {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: #0F0F12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: transform 160ms ease-out,
                border-color 160ms ease-out,
                background 160ms ease-out;
}
#panel-members .tta-mstat:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}
#panel-members .tta-mstat.is-active {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.08);
}
#panel-members .tta-mstat__n {
    font-size: var(--tta-text-hero);
    font-weight: 800;
    line-height: 1.1;
    color: #F5F5F4;
    font-variant-numeric: tabular-nums;
}
#panel-members .tta-mstat.is-active .tta-mstat__n {
    color: #D4AF37;
}
#panel-members .tta-mstat__t {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A1A1AA;
}
@media (max-width: 768px) {
    #panel-members .tta-mstats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── 20.2 MIEMBROS · Toolbar: foco dorado en búsqueda/select ────────── */
#panel-members #members-search:focus,
#panel-members #members-sort:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

/* ── 20.3 MIEMBROS · Conteo como etiqueta de sección (barra dorada +
   uppercase 11px + hairline inferior), mismo patrón que .tta-side-label ─ */
#panel-members #members-count {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #A1A1AA;
}
#panel-members #members-count::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: #D4AF37;
    flex: none;
}

/* ── 20.4 MIEMBROS · Filas premium: avatar 40px + dot de presencia,
   nombre 15px/600, nivel/puntos a la derecha en tabular-nums, acciones
   ghost con pill de 8px en hover; fila hover = surface-2 ────────────── */
#panel-members .tta-mrows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#panel-members .tta-mrow {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #0F0F12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: transform 160ms ease-out,
                border-color 160ms ease-out,
                background 160ms ease-out;
}
#panel-members .tta-mrow:hover {
    background: #16161A;
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
#panel-members .tta-mrow__main {
    display: flex;
    align-items: center;
    gap: 12px;
}
#panel-members .tta-mrow__av {
    position: relative;
    flex: none;
    line-height: 0;
}
#panel-members .tta-mrow__dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22C55E;
    border: 2px solid #0F0F12;
}
#panel-members .tta-mrow:hover .tta-mrow__dot {
    border-color: #16161A; /* el anillo acompaña al fondo en hover */
}
#panel-members .tta-mrow__id {
    flex: 1;
    min-width: 0;
}
#panel-members .tta-mrow__name {
    font-size: var(--tta-text-body);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#panel-members .tta-mrow__handle {
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
    margin-top: 1px;
}
#panel-members .tta-mrow__bio {
    color: #D4D4D8;
    opacity: 0.72;
    font-size: var(--tta-text-meta);
    margin-top: 4px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#panel-members .tta-mrow__score {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}
#panel-members .tta-mrow__lvl {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #D4AF37;
}
#panel-members .tta-mrow__pts {
    font-size: var(--tta-text-meta);
    font-weight: 600;
    color: #D4D4D8;
}
#panel-members .tta-mrow__act {
    flex: none;
    display: flex;
    gap: 6px;
}
#panel-members .tta-mrow__act .btn {
    padding: 6px 12px;
    font-size: var(--tta-text-meta);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 140ms ease-out, border-color 140ms ease-out;
}
#panel-members .tta-mrow__act .btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}
#panel-members .tta-mrow__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
}
#panel-members .tta-mrow__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#panel-members .tta-mrow__meta .tta-ico {
    font-size: 15px;
}
#panel-members .tta-mrow__meta b {
    color: #D4D4D8;
    font-weight: 600;
}

/* Insignias: VIP = chip dorado con diamond; "Acceso de por vida" = neutro */
#panel-members .tta-chip-vip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: #D4AF37;
    font-size: var(--tta-text-meta);
    font-weight: 700;
    line-height: 1.6;
}
#panel-members .tta-chip-vip .tta-ico {
    font-size: 13px;
}
#panel-members .tta-chip-life {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
    font-weight: 600;
    line-height: 1.6;
}

/* Empty states: icono en círculo tintado dorado */
#panel-members .tta-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
#panel-members .tta-empty__icon .material-symbols-outlined {
    color: #D4AF37;
    font-size: 26px;
}

/* Móvil (≤560px): la fila envuelve sin overflow a 375px; acciones a
   todo el ancho, score alineado a la derecha del bloque de identidad ── */
@media (max-width: 560px) {
    #panel-members .tta-mrow__main {
        flex-wrap: wrap;
    }
    #panel-members .tta-mrow__score {
        margin-left: auto;
    }
    #panel-members .tta-mrow__act {
        width: 100%;
    }
    #panel-members .tta-mrow__act .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ── 20.5 CALENDARIO · Spotlight "Próximo evento": tarjeta con acento
   dorado, date badge, countdown relativo y RSVP (mismo botón/cableado
   que la lista; .tta-card para que el refresh del contador lo encuentre) ─ */
#panel-calendar .tta-evnext {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0.015)), #0F0F12;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.06);
}
#panel-calendar .tta-evnext__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #D4AF37;
}
#panel-calendar .tta-evnext__label::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: #D4AF37;
    flex: none;
}
#panel-calendar .tta-evnext__row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
#panel-calendar .tta-evnext__body {
    flex: 1;
    min-width: 180px;
}
#panel-calendar .tta-evnext__title {
    font-size: var(--tta-text-body);
    font-weight: 600;
    margin-bottom: 4px;
}
#panel-calendar .tta-evnext__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
}
#panel-calendar .tta-evnext__meta .tta-event-attendees {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#panel-calendar .tta-evnext__side {
    flex: none;
}

/* ── 20.6 CALENDARIO · Cabecera del mes: flechas ghost con pill de
   hover, "Hoy" outline dorado, título con peso ──────────────────────── */
#panel-calendar #cal-month-label {
    font-size: var(--tta-text-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: capitalize;
}
#panel-calendar #cal-prev,
#panel-calendar #cal-next {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease-out, border-color 140ms ease-out;
}
#panel-calendar #cal-prev:hover,
#panel-calendar #cal-next:hover {
    background: rgba(255, 255, 255, 0.07);
}
#panel-calendar #cal-today {
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    background: transparent;
    border-radius: 8px;
    transition: background 140ms ease-out, border-color 140ms ease-out;
}
#panel-calendar #cal-today:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.6);
}

/* ── 20.7 CALENDARIO · Grid del mes: weekday headers uppercase 11px,
   celdas 8px, hoy = anillo dorado, seleccionado = tinte dorado ──────── */
#panel-calendar .tta-cal-weekday {
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A1A1AA;
    text-align: center;
    padding: 4px 0 6px;
}
#panel-calendar #cal-days .tta-cal-day {
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease-out, box-shadow 120ms ease-out,
                border-color 120ms ease-out;
}
#panel-calendar #cal-days .tta-cal-day:not(.other-month):hover {
    background: #16161A;
}
#panel-calendar #cal-days .tta-cal-day.today {
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55);
}
#panel-calendar #cal-days .tta-cal-day.today .tta-cal-num {
    color: #D4AF37;
    font-weight: 800;
}
#panel-calendar #cal-days .tta-cal-day.selected {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.35);
}
#panel-calendar #cal-days .tta-cal-day.selected .tta-cal-num {
    color: #D4AF37;
    font-weight: 800;
}
/* Marcador de evento: chip dorado tintado (título visible en la celda) */
#panel-calendar .tta-cal-ev {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 5px;
}

/* ── 20.8 CALENDARIO · "Próximos eventos" como etiqueta de sección ──── */
#panel-calendar #events-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tta-text-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A1A1AA;
}
#panel-calendar #events-heading::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: #D4AF37;
    flex: none;
}

/* ── 20.9 CALENDARIO · Tarjetas de evento: date badge + título + meta
   con iconos + RSVP "Asistirás" en verde con check ──────────────────── */
#panel-calendar .tta-evcard {
    display: flex;
    gap: 16px;
    padding: 16px;
    margin-bottom: 8px;
    cursor: default;
    border-radius: 12px;
}
#panel-calendar .tta-evcard.is-past {
    opacity: 0.6;
}
#panel-calendar .tta-evcard__date {
    flex: none;
    align-self: flex-start;
    text-align: center;
    min-width: 52px;
    padding: 8px 4px;
    background: #16161A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
#panel-calendar .tta-evcard__mon {
    display: block;
    font-size: var(--tta-text-meta);
    color: #D4AF37;
    font-weight: 700;
    letter-spacing: 0.06em;
}
#panel-calendar .tta-evcard__day {
    display: block;
    font-size: var(--tta-text-title);
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
#panel-calendar .tta-evcard__body {
    flex: 1;
    min-width: 0;
}
#panel-calendar .tta-evcard__titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
#panel-calendar .tta-evcard__title {
    font-weight: 600;
    font-size: var(--tta-text-body);
}
#panel-calendar .tta-evcard__meta {
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
#panel-calendar .tta-evcard__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#panel-calendar .tta-evcard__meta .tta-ico {
    font-size: 15px;
}
#panel-calendar .tta-evcard__desc {
    margin-top: 8px;
    font-size: var(--tta-text-meta);
    color: #D4D4D8;
    opacity: 0.8;
    line-height: 1.6;
}
#panel-calendar .tta-evcard__side {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
#panel-calendar .tta-evcard__done {
    color: #A1A1AA;
    font-size: var(--tta-text-meta);
}
#panel-calendar .tta-evcard__admin {
    display: flex;
    gap: 4px;
}
#panel-calendar .tta-evcard__admin .btn {
    padding: 2px 6px;
    border-radius: 8px;
}
#panel-calendar .tta-evcard__del {
    color: #EF4444;
}
/* RSVP: icono alineado; estado "Asistirás" = verde success con check */
#panel-calendar [data-rsvp] .rsvp-ico {
    font-size: 15px;
    vertical-align: middle;
    margin-left: 5px;
}
#panel-calendar [data-rsvp].btn-success {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22C55E;
}
#panel-calendar .tta-countdown {
    color: #D4AF37;
}

/* Móvil (≤560px): la acción RSVP baja a su propia línea, sin overflow */
@media (max-width: 560px) {
    #panel-calendar .tta-evcard {
        flex-wrap: wrap;
        gap: 12px;
    }
    #panel-calendar .tta-evcard__side {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    #panel-calendar .tta-evnext__side {
        width: 100%;
    }
    #panel-calendar .tta-evnext__side .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ───────────────────────────────────────────────────────────────────
   21. EDITOR "PÁGINA REGISTRO" (#panel-landing) — chrome premium de la
   barra del editor embebido (iframe ?vista=registro&editar=1). Solo
   presentación: IDs/handlers intactos (core.js: lped-open/lped-copy/
   lped-frame). El layout full-bleed (80vw) sigue en el <style> inline
   del propio panel; aquí va la capa visual Oro Premium.
   ─────────────────────────────────────────────────────────────────── */
#panel-landing .tta-lped__bar {
    background: linear-gradient(180deg, #16161A, #101014);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}
/* Marca: icono en chip dorado + título/subtítulo */
#panel-landing .tta-lped__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 240px;
}
#panel-landing .tta-lped__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.30);
}
#panel-landing .tta-lped__badge .material-symbols-outlined {
    color: #D4AF37;
    font-size: 21px;
}
#panel-landing .tta-lped__titles {
    min-width: 0;
}
#panel-landing .tta-lped__title {
    font-weight: 700;
    font-size: var(--tta-text-body);
    color: #F4F4F5;
    line-height: 1.3;
}
#panel-landing .tta-lped__sub {
    font-size: var(--tta-text-meta);
    color: #A1A1AA;
    line-height: 1.45;
    margin-top: 2px;
}
/* Chip de autoguardado (el guardado real lo hace landing-editor.js
   dentro del iframe; este chip solo lo comunica). */
#panel-landing .tta-lped__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: var(--tta-text-meta);
    font-weight: 600;
    color: #B8962F;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}
#panel-landing .tta-lped__save .material-symbols-outlined {
    font-size: 16px;
    color: #D4AF37;
}
/* Acciones: ghost buttons limpios con icono Material */
#panel-landing .tta-lped__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
#panel-landing .tta-lped__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
#panel-landing .tta-lped__actions .btn:hover {
    border-color: rgba(212, 175, 55, 0.45);
}
#panel-landing .tta-lped__actions .btn:active {
    transform: scale(0.97);
}
#panel-landing .tta-lped__frame:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 3px;
}
/* Móvil: marca a ancho completo, acciones en fila de dos botones
   iguales — todo alcanzable con el pulgar a 375px, sin overflow. */
@media (max-width: 640px) {
    #panel-landing .tta-lped__bar {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 12px;
    }
    #panel-landing .tta-lped__brand {
        min-width: 0;
        width: 100%;
    }
    #panel-landing .tta-lped__sub {
        font-size: var(--tta-text-meta);
    }
    #panel-landing .tta-lped__save {
        order: 2;
    }
    #panel-landing .tta-lped__actions {
        width: 100%;
        order: 3;
    }
    #panel-landing .tta-lped__actions .btn {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   22. NAVEGACIÓN — salir del patrón Skool (QA Mathias, 28-jul-2026)
   "lo que se parece son los botones de aula/comunidad/ranking/calendario
   y los de abajo". Eran, literalmente, el gesto de Skool: una caja gris
   envolviendo las pestañas con la activa en relleno sólido, y una tab bar
   inferior de iconos con etiqueta. Aquí se reemplaza el TRATAMIENTO —
   colores de marca y funciones intactos.

   Pestañas: la caja desaparece; queda una línea de etiquetas en
   monoespaciada con la activa en píldora de lavado dorado. Al hacer
   scroll siguen fijas, pero sobre el fondo de la página con desenfoque
   en vez de una barra flotante.
   ═══════════════════════════════════════════════════════════════════ */
.tta-tabs {
    background: color-mix(in srgb, var(--tta-surf-0, #08080A) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    border-bottom: 1px solid var(--tta-surf-line, rgba(255, 255, 255, .07));
    border-radius: 0;
    box-shadow: none;
    padding: 6px 0;
    gap: 4px;
}
/* La tipografía se queda como siempre (la sans de la marca, en su tamaño y
   sin mayúsculas): la monoespaciada se probó y no gustó. Lo que cambia es
   la FORMA — píldora en vez de recuadro sólido — no la letra. */
.tta-tab-btn {
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--text-muted, #6B7280);
}
.tta-tab-btn:hover {
    background: transparent;
    color: var(--text-secondary);
}
.tta-tab-btn.is-active {
    color: var(--gold, #D4AF37);
    background: rgba(212, 175, 55, .10);
    box-shadow: none;
    font-weight: 600;
}
/* Los iconos que acompañan a algunas pestañas (el ojo de "oculta para
   alumnos") se quedan a escala del texto nuevo. */
.tta-tab-btn .material-symbols-outlined { font-size: 14px; }

/* Barra inferior (móvil): el activo deja de ser "icono en dorado" y pasa
   a llevar su propia pastilla, que es lo que la separa de la tab bar
   genérica de cualquier app de comunidad. */
.tta-bottom-tabs {
    background: color-mix(in srgb, var(--tta-surf-0, #08080A) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--tta-surf-line, rgba(255, 255, 255, .07));
    padding: 8px 4px max(8px, env(safe-area-inset-bottom));
}
.tta-bottom-tab {
    gap: 5px;
    padding: 2px;
}
.tta-bottom-tab .material-symbols-outlined {
    font-size: 20px;
    padding: 5px 16px;
    border-radius: 999px;
    transition: background .15s var(--tta-ease, ease), color .15s;
}
.tta-bottom-tab.active .material-symbols-outlined {
    background: rgba(212, 175, 55, .12);
    color: var(--gold, #D4AF37);
}
.tta-bottom-tab.active { color: var(--gold, #D4AF37); font-weight: 600; }

/* ── 23. Panel del máster: rejilla de acciones que no se recorta ─────
   Los 4 atajos iban en flex-wrap con `flex:1;min-width:120px` dentro de la
   columna lateral (~280px): no cabían dos por fila y el texto salía cortado
   ("visar pendientes"). Rejilla de 2 columnas iguales; el botón principal y
   "Editar Aula" ocupan la fila completa. ─────────────────────────────── */
.tta-master-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.tta-master-actions .btn {
    min-width: 0;
    width: 100%;
    justify-content: center;
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tta-master-actions .btn .material-symbols-outlined {
    font-size: 15px;
    flex: none;
}
.tta-master-actions__wide { grid-column: 1 / -1; }
/* Las cifras de arriba: etiqueta corta y sin partirse a media palabra */
#panel-feed .tta-side-stats span,
.tta-side-stats span {
    display: block;
    font-size: var(--tta-text-meta);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════
   16. MÓVIL: UNA SOLA ESCALA (regla de Mathias, 18-ago-2026).
   La auditoría midió 14 tamaños de letra (10→20px) y 12 alturas de
   botón (21→61px) conviviendo en una pantalla de 375px. En móvil TODO
   se colapsa a:
     · Letras: 12px (metas/chips) · 14px (cuerpo/botones) · 17px (títulos)
       (+20px solo el título del hero).
     · Botones: 32px (chips/segmentos) · 40px (acción normal e iconos)
       · 48px (CTA principal). Táctil mínimo real: 40px.
   Los iconos (Material Symbols) NO se tocan: su font-size es su tamaño
   de glifo. Se colapsan los TOKENS (todo lo que usa var() cae solo) y
   se remapean los inline-styles huérfanos por selector de atributo.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Tokens: basta reescribir los cinco primitivos; los alias
          heredados definidos en tta.css apuntan a ellos y caen solos. ── */
    :root {
        --tta-text-meta:    12px;
        --tta-text-body:    14px;
        --tta-text-title:   17px;
        --tta-text-hero:    20px;
        --tta-text-display: 24px;
        --tta-text-4xl:     24px;
    }
    body { font-size: 14px; }

    /* Inline styles huerfanos (no usan tokens). Tras la normalizacion
       del 27-ago solo quedan los cuatro escalones, asi que el remapeo
       es uno a uno con la escala movil. Los iconos quedan fuera: su
       font-size es el tamano del glifo, no del texto. */
    [style*="font-size:13px"]:not(.material-symbols-outlined),
    [style*="font-size: 13px"]:not(.material-symbols-outlined) {
        font-size: 12px !important;
    }
    [style*="font-size:15px"]:not(.material-symbols-outlined),
    [style*="font-size: 15px"]:not(.material-symbols-outlined) {
        font-size: 14px !important;
    }
    [style*="font-size:19px"]:not(.material-symbols-outlined),
    [style*="font-size: 19px"]:not(.material-symbols-outlined) {
        font-size: 17px !important;
    }
    [style*="font-size:26px"]:not(.material-symbols-outlined),
    [style*="font-size: 26px"]:not(.material-symbols-outlined) {
        font-size: 20px !important;
    }

    /* ── Botones: 12 alturas → 3 ── */
    .btn, button.btn {
        min-height: 40px;
        font-size: 14px;
    }
    .btn-sm { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
    /* Iconos de acción (subir foto/GIF/encuesta/reloj): táctil de 40px. */
    .ca-icon, .btn-sm.ca-icon { min-height: 40px; min-width: 40px; }
    /* CTA principal del composer. */
    #btn-post { min-height: 48px; flex: 1; font-size: 14px; }

    /* ── Composer: dos filas a medias → UNA fila viva ──
       .ca-tools (foto·GIF·encuesta·categoría) y .ca-publish (reloj·Publicar)
       eran dos filas con hueco muerto a la derecha. display:contents las
       funde en una sola parrilla que envuelve sin huecos. */
    #feed-composer div:has(> .ca-tools) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    #feed-composer .ca-tools, #feed-composer .ca-publish { display: contents; }
    #feed-composer .ca-cat { flex: 1 1 110px; max-width: 160px; min-height: 40px; }

    /* ── Encabezado del post: 3 filas → 2 ──
       Nombre + chip Dueño en la misma línea; debajo hora · categoría. */
    .tta-post__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .tta-post__name { font-size: 14px; }
    .tta-post__meta { font-size: 12px; }

    /* ── Barra inferior: mismas letras para los 5 destinos ── */
    .tta-bottom-tab span:not(.material-symbols-outlined),
    #tta-bottom-menu span:not(.material-symbols-outlined) {
        font-size: 12px !important;
        line-height: 1.2;
    }

    /* La fila "Difundir también por" no se parte en dos líneas. */
    #feed-composer .bc-title { font-size: 12px; white-space: nowrap; }
    #feed-composer .bc-priv { font-size: 12px; }

    /* Rezagados con px literales en clases (la auditoría los midió uno a
       uno): cuerpo y nombre del post a 14, metas/acciones/categorías a 12. */
    .tta-post__body, .tta-post__name,
    .tta-post__action, .tta-post__action-l,
    .tta-bio-clamp, .form-control { font-size: 14px !important; }
    .tta-post__meta, .tta-post__cat, .tta-post__tally, .tta-post__tallyc,
    .tta-react-summary, .tta-bio-more, .tta-bio-more__more,
    .tta-bottom-tab, .bc-priv { font-size: 12px !important; }
    h1 { font-size: 20px; }

    /* Botones fuera de las tres alturas (medidos uno a uno):
       acciones del post, chips, reacciones y disparadores → 32 o 40. */
    /* Altura EXACTA (no min): con min-height cada padding/borde daba un
       total distinto (33, 35, 36...). Caja cerrada y centrado por flex. */
    .tta-post__action, .tta-chip, .tta-react-btn, .btn-sm,
    .tta-post__tallyc {
        height: 32px !important; min-height: 0 !important;
        padding-top: 0 !important; padding-bottom: 0 !important;
        display: inline-flex !important; align-items: center !important;
        box-sizing: border-box;
    }
    .btn:not(.btn-sm), .tta-post-menu-trigger, .tta-mobile-menu__close,
    .ca-icon, .btn-sm.ca-icon, .tta-mobile-menu__link {
        height: 40px !important; min-height: 0 !important;
        padding-top: 0 !important; padding-bottom: 0 !important;
        display: inline-flex !important; align-items: center !important;
        box-sizing: border-box;
    }
    .tta-post-menu-trigger, .tta-mobile-menu__close { min-width: 40px !important; justify-content: center; }
    #btn-post { height: 48px !important; }

    /* Últimos casos con reglas propias más fuertes: se ganan por id/anidado. */
    .tta-post .tta-post-menu-trigger, .tta-post__head .tta-post-menu-trigger,
    button.tta-post-menu-trigger { height: 40px !important; width: 40px !important; }
    #tta-mobile-close { height: 40px !important; width: 40px !important; }
    #hero-edit { height: 40px !important; }
    #feed-composer .bc-head { min-height: 40px; height: auto !important; padding-top: 4px !important; padding-bottom: 4px !important; }
    a.tta-mobile-menu__link, button.tta-mobile-menu__link { height: 40px !important; }
    /* Excepción declarada: .tta-poll-option es contenido (fila de encuesta con
       barra de % dentro), no un botón del chrome — conserva su alto propio. */

    /* ── Títulos de sección uniformes ── */
    .tta-side-label, .tta-section-title, h2, h3 { font-size: 17px; }
    h2, h3 { line-height: 1.3; }
}


/* ══ 19-ago — Pie del post estilo X (pedido de Mathias) ══════════════════
   Una sola fila de iconos con número al lado: reaccionar (con su selector de
   emociones en mantener pulsado) · repost · comentar · guardar · compartir.
   Sin palabras, sin fila de recuentos arriba: compacto como X en el teléfono. */
.tta-post__xbar{display:flex;align-items:center;margin-top:10px;padding-top:8px;
  border-top:1px solid var(--tta-surf-line,rgba(255,255,255,.06))}
/* Reparto tipo X (19-ago, 2a vuelta): columnas iguales, primera al borde
   izquierdo y última al derecho. La CLAVE del "se ve feo" no era el reparto
   sino el ancho: la tarjeta de PC era el doble de ancha que la columna de X
   (~600px) — abajo se acota la columna del feed y esta fila hereda la
   proporción correcta. */
.tta-post__xbar > *{flex:1 1 0;display:flex;justify-content:center}
.tta-post__xbar > :first-child{justify-content:flex-start}
.tta-post__xbar > :last-child{justify-content:flex-end}
/* Columna del feed a proporción X en pantallas grandes: líneas de texto
   legibles y pie con gaps naturales. Solo la pestaña de feed; el resto de
   paneles (Aula, Ranking…) no se toca. */
@media (min-width:981px){
  .tta-feed-main > *{max-width:680px}
}
/* Nada que se inyecte por JS dentro del carril puede desalinearse del resto:
   en PC (>=1281px) el carril centra a sus hijos, y un `margin` en el atributo
   style gana por especificidad. Le pasaba a la tarjeta "Primeros pasos", que
   quedaba 63px a la izquierda del buscador y del composer (Mauricio, 8-sep).
   El JS ya no fija margen lateral; esta regla lo sostiene si alguien lo repone. */
@media (min-width:1281px){
  .tta-shell .tta-feed-main > #tta-onboarding{margin-left:auto!important;margin-right:auto!important}
}
.tta-post__xact{display:inline-flex;align-items:center;gap:5px;background:none;
  border:none;cursor:pointer;padding:6px 8px;border-radius:999px;
  color:var(--text-muted,#8a8a92);text-decoration:none;line-height:1;
  transition:color .12s ease,background .12s ease}
.tta-post__xact .material-symbols-outlined{font-size:20px}
.tta-post__xact-n{font-size:var(--tta-text-meta);font-variant-numeric:tabular-nums}
.tta-post__xact:active{transform:scale(.92)}
.tta-post__xact:hover{color:var(--text-secondary,#d8d8d8);
  background:var(--tta-surf-1,rgba(255,255,255,.05))}
.tta-post__xact.is-on{color:var(--gold,#D4AF37)}
/* El botón de reaccionar del kit, compacto dentro de la fila X. */
.tta-post__xbar .tta-react-group{display:inline-flex}
.tta-post__xbar .tta-react-btn{display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:999px;
  color:var(--text-muted,#8a8a92);line-height:1}
.tta-post__xbar .tta-react-btn:active{transform:scale(.92)}
.tta-post__xbar .tta-react-btn.is-active{color:var(--gold,#D4AF37)}
.tta-post__xbar .tta-react-btn__n{font-size:var(--tta-text-meta);font-variant-numeric:tabular-nums}


/* ══ 19-ago — Compositor del feed en el teléfono ═════════════════════════
   Fila discreta que propone de qué escribir; al tocarla el compositor se
   despliega EN SU SITIO (.is-open), con un box alto y sus herramientas a la
   vista. Nada de ventana aparte (pedido de Mathias). */
#tta-compose-trigger{display:none}
.tta-compose-head{display:none}
@media (max-width:768px){
  .tta-compose-mobile #feed-composer:not(.is-open){display:none!important}
  #tta-compose-trigger{display:flex;align-items:center;gap:10px;width:100%;
    padding:10px 14px;margin-bottom:14px;background:var(--tta-surf-1,#141418);
    border:1px solid var(--tta-surf-line,rgba(255,255,255,.08));
    border-radius:999px;cursor:pointer;text-align:left}
  #tta-compose-trigger .tct-av{flex:none;display:inline-flex}
  #tta-compose-trigger .tct-av img,#tta-compose-trigger .tct-av > *{width:32px;height:32px;border-radius:50%}
  #tta-compose-trigger .tct-ph{flex:1;color:var(--text-muted,#8a8a92);font-size:var(--tta-text-body)}
  #tta-compose-trigger .tct-pen{color:var(--gold,#D4AF37);font-size:20px}
  /* 19-ago (Mathias): NADA de ventana nueva. Al tocar la fila, el compositor
     se abre AHÍ MISMO, en el feed, con un box alto de verdad para escribir y
     todas sus herramientas a la vista. */
  #feed-composer.is-open{margin-bottom:16px}
  #feed-composer.is-open .tta-compose-head{display:flex;align-items:center;
    gap:10px;padding:0 0 10px;margin-bottom:2px;
    border-bottom:1px solid var(--tta-surf-line,rgba(255,255,255,.08))}
  #feed-composer.is-open .tch-cancel{background:none;border:none;
    color:var(--text-secondary,#d8d8d8);font-size:14px;padding:4px 2px;cursor:pointer}
  #feed-composer.is-open .tch-title{flex:1;text-align:center;font-weight:600;
    font-size:14px;color:var(--text-primary,#f3f3f5)}
  #feed-composer.is-open .tch-sp{width:56px}
  /* El box manda: alto cómodo desde el primer toque, sin tener que crecerlo. */
  #feed-composer.is-open .tta-composer-editor{min-height:132px;font-size:var(--tta-text-title);
    line-height:1.5}
  #feed-composer.is-open #btn-post{border-radius:999px;font-weight:700}
}


/* ══ 19-ago (tarde) — El Tema del día tiene su propia tira ═══════════════
   Vivía DENTRO de la fila de publicar: en el teléfono, donde el compositor
   está plegado, el único renglón visible hablaba de una noticia y nadie
   encontraba dónde escribir (máster y alumno, ojo de Mathias). Ahora la tira
   dorada es el tema —lleva al hilo, con su "N hablando de esto"— y la fila de
   abajo es para publicar. Ambas en teléfono y en escritorio. */
#tta-temas-x{display:none;align-items:center;gap:10px;width:100%;
  padding:10px 14px;margin-bottom:10px;cursor:pointer;text-align:left;
  border-radius:999px;
  background:linear-gradient(var(--tta-surf-1,#141418),var(--tta-surf-1,#141418)) padding-box,
    linear-gradient(120deg,rgba(212,175,55,.65),rgba(212,175,55,.12),rgba(212,175,55,.65)) border-box;
  border:1.5px solid transparent}
#tta-temas-x.is-on{display:flex}
#tta-temas-x .ttx-ico{flex:none;color:var(--gold,#D4AF37);font-size:20px}
#tta-temas-x .ttx-go{flex:none;color:var(--text-muted,#8a8a92);font-size:var(--tta-text-title)}
#tta-temas-x .tct-ph{flex:1;min-width:0;color:var(--text-secondary,#d8d8d8);
  font-size:var(--tta-text-body);line-height:1.4;transition:opacity .22s ease}
#tta-temas-x .tct-ph.is-out{opacity:0}
.tct-habla{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;
  font-size:var(--tta-text-meta);font-weight:700;color:var(--gold,#D4AF37);
  border:1px solid rgba(212,175,55,.4);white-space:nowrap}

/* ══ 19-ago (tarde) — La fila de publicar se lee como un campo ═══════════
   El dorado es del Tema del día (su tira, arriba). Si las dos brillan igual,
   vuelve el problema: no se distingue el sitio para escribir. Aquí manda el
   patrón de siempre — avatar, invitación y lápiz sobre superficie. */
@media (max-width:768px){
  #tta-compose-trigger{position:relative;
    background:var(--tta-surf-1,#141418);
    border:1px solid var(--tta-surf-line,rgba(255,255,255,.10))}
  #tta-compose-trigger .tct-ph{transition:opacity .22s ease}
  #tta-compose-trigger .tct-ph.is-out{opacity:0}
  #tta-compose-trigger .tct-pen{animation:tta-sug-glow 2.6s ease-in-out infinite}
  @keyframes tta-sug-glow{0%,100%{opacity:.75}50%{opacity:1;text-shadow:0 0 12px rgba(212,175,55,.8)}}
  /* La cabecera manda arriba aunque el chip de la IA sea el primer hijo. */
  #feed-composer.is-open{display:flex!important;flex-direction:column}
  #feed-composer.is-open .tta-compose-head{order:-1}
  #feed-composer.is-open #tta-sug{flex-wrap:wrap;row-gap:6px;margin:4px 0 10px}
}


/* ══ 19-ago — El Calendario ocupa su espacio como el Ranking ═════════════
   El mes era un mini-calendario (celdas de 34px) flotando en una columna de
   ~600px: aire muerto por todos lados (ojo de Mathias, capturas PC). En
   pantallas grandes las celdas pasan a cajas de calendario real: el número
   arriba-derecha, borde sutil, sitio para los chips de clase y el punto de
   evento. Solo la pestaña Calendario y solo escritorio. */
@media (min-width:981px){
  #panel-calendar .tta-calendar-grid{margin-bottom:0}
  #panel-calendar .tta-calendar-header{margin-bottom:16px}
  #panel-calendar .tta-calendar-days{gap:6px}
  #panel-calendar .tta-cal-weekday{padding:6px 4px;font-size:var(--tta-text-meta)}
  #panel-calendar .tta-cal-day{min-height:72px;display:flex;
    align-items:flex-start;justify-content:flex-end;padding:8px 10px;
    font-size:var(--tta-text-body);border:1px solid var(--tta-surf-line,rgba(255,255,255,.05));
    background:var(--tta-surf-0,rgba(255,255,255,.015))}
  #panel-calendar .tta-cal-day.other-month{border-color:transparent;background:none}
  #panel-calendar .tta-cal-day.has-event::after{width:7px;height:7px;
    bottom:8px;left:10px;transform:none}
}

/* ── Modo lite (html.tta-lite, detector en academy_base.html) ─────────────
   Fierro modesto: el vidrio esmerilado obliga a la GPU a re-desenfocar todo
   lo que pasa debajo en CADA frame de scroll — en una tablet 2020 eso es el
   scroll pegajoso medido el 20-ago. Sin blur quedan las mismas superficies
   con su rgba de siempre (legible); en aparatos capaces nada cambia. El
   !important es a propósito: debe ganarle a cualquier blur declarado en
   tta.css, aquí o en un <style> de página. */
html.tta-lite *, html.tta-lite *::before, html.tta-lite *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Las animaciones decorativas largas también cuestan cuadros en CPU vieja;
   las transiciones cortas (hover, abrir menú) se quedan. */
html.tta-lite .tta-anim-decor, html.tta-lite [class*="shimmer"] {
    animation: none !important;
}

/* ══ 20-ago — Radar Crypto: banner EN VIVO, temas y la postura en la ENCUESTA
   (pedido de Mathias). La postura NO se repite en los comentarios —ese intento
   fue redundante y se retiró el mismo día—: vive donde siempre debió verse,
   en la encuesta, ahora con color y movimiento. Verde = toro, rojo = oso,
   amarillo = neutral, en la tarjeta y en el hilo. */
#tta-live-banner{display:none;align-items:center;gap:10px;width:100%;
  padding:10px 14px;margin-bottom:10px;cursor:pointer;text-decoration:none;
  border-radius:999px;color:var(--text-primary,#f2f2f2);
  background:linear-gradient(var(--tta-surf-1,#141418),var(--tta-surf-1,#141418)) padding-box,
    linear-gradient(120deg,rgba(239,68,68,.85),rgba(239,68,68,.25),rgba(239,68,68,.85)) border-box;
  border:1.5px solid transparent}
#tta-live-banner.is-on{display:flex}
#tta-live-banner .tlb-dot{flex:none;width:10px;height:10px;border-radius:50%;
  background:#ef4444;animation:tta-live-pulse 1.4s ease-in-out infinite}
#tta-live-banner .tlb-tag{flex:none;font-size:var(--tta-text-meta);font-weight:800;
  letter-spacing:.08em;color:#ef4444}
#tta-live-banner .tlb-title{flex:1;min-width:0;font-size:var(--tta-text-body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text-secondary,#d8d8d8)}
#tta-live-banner .tlb-go{flex:none;color:#ef4444;font-size:var(--tta-text-title)}
@keyframes tta-live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}

#tta-temas-menu{margin:-4px 0 10px;padding:6px;border-radius:16px;
  background:var(--tta-surf-1,#141418);
  border:1px solid rgba(212,175,55,.35);box-shadow:0 10px 30px rgba(0,0,0,.45)}
#tta-temas-menu .ttm-head{display:flex;align-items:center;gap:6px;
  padding:6px 10px;font-size:var(--tta-text-meta);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold,#D4AF37)}
#tta-temas-menu .ttm-head .material-symbols-outlined{font-size:15px}
#tta-temas-menu .ttm-item{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:none;background:none;cursor:pointer;text-align:left;
  border-radius:10px;color:var(--text-secondary,#d8d8d8);font-size:var(--tta-text-body);
  line-height:1.4}
#tta-temas-menu .ttm-item:hover{background:rgba(212,175,55,.08)}
#tta-temas-menu .ttm-ico{flex:none;font-size:18px;color:var(--gold,#D4AF37)}
#tta-temas-menu .ttm-txt{flex:1;min-width:0;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* El panel del tema: se lee entero y se decide. Abrirlo NO publica nada; el
   hilo nace al votar o al comentar. */
#tta-tema-panel{margin:-4px 0 10px;padding:14px 16px;border-radius:16px;
  background:var(--tta-surf-1,#141418);
  border:1px solid rgba(212,175,55,.35);box-shadow:0 10px 30px rgba(0,0,0,.45);
  animation:tta-panel-in .22s ease}
@keyframes tta-panel-in{from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}}
#tta-tema-panel .ttp-txt{font-size:var(--tta-text-body);line-height:1.5;
  color:var(--text-primary,#f2f2f2)}
#tta-tema-panel .ttp-q{margin:12px 0 8px;font-size:var(--tta-text-meta);font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted,#8a8a92)}
#tta-tema-panel .ttp-votos{display:flex;gap:8px;flex-wrap:wrap}
#tta-tema-panel .ttp-votos.is-resuelto{display:block}
#tta-tema-panel .ttp-barra{position:relative;display:flex;align-items:center;
  gap:8px;padding:9px 12px;margin-bottom:6px;border-radius:10px;overflow:hidden;
  background:var(--tta-surf-0,#0e0e11);font-size:var(--tta-text-meta);font-weight:600}
#tta-tema-panel .ttp-fill{position:absolute;inset:0 auto 0 0;
  transition:width .6s cubic-bezier(.22,1,.36,1);background:rgba(255,255,255,.07)}
#tta-tema-panel .ttp-barra[data-i="0"] .ttp-fill{background:rgba(34,197,94,.28)}
#tta-tema-panel .ttp-barra[data-i="1"] .ttp-fill{background:rgba(239,68,68,.28)}
#tta-tema-panel .ttp-barra[data-i="2"] .ttp-fill{background:rgba(234,179,8,.28)}
#tta-tema-panel .ttp-barra.is-mia{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
#tta-tema-panel .ttp-et,#tta-tema-panel .ttp-pct{position:relative}
#tta-tema-panel .ttp-et{flex:1;min-width:0}
#tta-tema-panel .ttp-pie{display:flex;align-items:center;gap:10px;
  margin-top:12px;padding-top:10px;
  border-top:1px solid var(--tta-surf-line,rgba(255,255,255,.08))}
#tta-tema-panel .ttp-tot{font-size:var(--tta-text-meta);color:var(--text-muted,#8a8a92)}
#tta-tema-panel .ttp-com{display:inline-flex;align-items:center;gap:6px;
  margin-left:auto;padding:7px 14px;border-radius:999px;cursor:pointer;
  font-size:var(--tta-text-meta);font-weight:700;color:var(--gold,#D4AF37);
  background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.40)}
#tta-tema-panel .ttp-com .material-symbols-outlined{font-size:16px}
#tta-tema-panel .ttp-com:hover{background:rgba(212,175,55,.18)}

/* Los tres colores de la postura, en la tarjeta y en la encuesta del hilo. */
.tta-stance-chip{display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:999px;font-size:var(--tta-text-meta);font-weight:700;
  border:1.5px solid;background:transparent;cursor:pointer;line-height:1.4;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.tta-stance-chip.is-toro{color:#22c55e;border-color:rgba(34,197,94,.55);
  background:rgba(34,197,94,.10)}
.tta-stance-chip.is-oso{color:#ef4444;border-color:rgba(239,68,68,.55);
  background:rgba(239,68,68,.10)}
.tta-stance-chip.is-neutral{color:#eab308;border-color:rgba(234,179,8,.55);
  background:rgba(234,179,8,.10)}
.tta-stance-chip:hover{transform:translateY(-1px)}
.tta-stance-chip.is-sel.is-toro{background:rgba(34,197,94,.25);
  box-shadow:0 0 14px rgba(34,197,94,.35)}
.tta-stance-chip.is-sel.is-oso{background:rgba(239,68,68,.25);
  box-shadow:0 0 14px rgba(239,68,68,.35)}
.tta-stance-chip.is-sel.is-neutral{background:rgba(234,179,8,.25);
  box-shadow:0 0 14px rgba(234,179,8,.35)}
.tta-stance-chip.is-pop{animation:tta-stance-pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes tta-stance-pop{0%{transform:scale(.75)}55%{transform:scale(1.14)}
  100%{transform:scale(1)}}

/* La encuesta del hilo habla el mismo idioma: la barra se tiñe de su postura
   y la que votaste se marca. Sin esto eran tres barras grises iguales. */
.tta-poll-option.is-toro .tta-poll-fill{background:rgba(34,197,94,.30)}
.tta-poll-option.is-oso .tta-poll-fill{background:rgba(239,68,68,.30)}
.tta-poll-option.is-neutral .tta-poll-fill{background:rgba(234,179,8,.30)}
.tta-poll-option.is-toro .tta-poll-label{color:#22c55e}
.tta-poll-option.is-oso .tta-poll-label{color:#ef4444}
.tta-poll-option.is-neutral .tta-poll-label{color:#eab308}
.tta-poll-option.is-toro.is-voted{border-color:rgba(34,197,94,.65)}
.tta-poll-option.is-oso.is-voted{border-color:rgba(239,68,68,.65)}
.tta-poll-option.is-neutral.is-voted{border-color:rgba(234,179,8,.65)}
.tta-poll-option.is-voted{animation:tta-stance-pop .4s cubic-bezier(.34,1.56,.64,1)}

/* ── Unificación 1-sep-2026 ── */
/* Bloque reversible: borrarlo devuelve la hoja a "concatenación pura".      */

/* (a) Gris atenuado único. Antes convivían --text-muted #A1A1AA (redesign),
   --tta-text-muted #A1A1AA (redesign), --text-muted #8B8B96 (main.css),
   --muted #8B8B96 (tt-play.css) y --tta-text-dim #8a8a8f (tta-theme.css) /
   #5a5a5a (tta-skool.css, 2,3:1, falla AA). #9a9aa3 da 7,2:1 sobre #08080A
   y 6,8:1 sobre #111. Nota: #5a5a5a NO aparece como color de texto en
   ninguna de las tres hojas fusionadas (solo en tta-skool.css, que no se
   carga), así que no hubo sustituciones que hacer aquí.
   (e) Tokens z-index para uso futuro; nada se renumera. */
:root {
    --text-muted: #9a9aa3;
    --tta-text-muted: #9a9aa3;
    --muted: #9a9aa3;
    --tta-text-dim: #9a9aa3;

    --z-sticky: 10;
    --z-dropdown: 100;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
    --z-topbar: 99998;
}

/* (b) Táctil. .btn-sm medía 40px (tta.css:1575) y 32px (redesign:3406) en el
   mismo @media; gana el último. Aquí se fija 40px para todos los controles
   pequeños del teléfono; el padding vertical baja para que el texto no crezca. */
@media (max-width: 768px) {
    .btn-sm { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
    .tta-chip { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
    .tta-react-btn,
    .tta-post__xbar .tta-react-btn,
    .tta-post__xact { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
    .tta-post-menu-trigger { min-height: 40px; min-width: 40px; }
    .tta-bottom-tab { min-height: 40px; }
}
/* Escritorio: el "⋮" del post (feed.js pinta padding 4px 8px inline → ~27px)
   y la campana (#tta-notif-bell, padding 4px inline → ~30px) suben a 36px. */
.tta-post-menu-trigger,
#tta-notif-bell { min-height: 36px; min-width: 36px; }

/* (c) Movimiento reducido. tta.css:2213 ya frena TODO a 0.01ms; este bloque
   deja explícito lo que tta-redesign.css anima (no tenía ninguna regla) y
   apaga los transiciones del podio (.lb-*) y el shimmer del skeleton. */
@media (prefers-reduced-motion: reduce) {
    .lb-v2 *, .lb-v2 *::before, .lb-v2 *::after,
    .tta-lb-row { transition: none !important; animation: none !important; }
    [class*="shimmer"], .tta-skeleton, .tta-skeleton-pulse, .tta-skel-line,
    .tta-anim-decor { animation: none !important; }
    /* @keyframes de tta-redesign.css: ttaBcIn, tta-live-pulse, tta-panel-in,
       tta-stance-pop, tta-sug-glow */
    #broadcast-toggles.bc-open .bc-body,
    #tta-live-banner .tlb-dot,
    #tta-tema-panel,
    .tta-stance-chip.is-pop,
    .tta-poll-option.is-voted,
    #tta-compose-trigger .tct-pen { animation: none !important; }
}

/* (d) Foco visible. Los outline:none originales se quedan (tta.css:1259,
   1623, 2661, 3177; redesign:2083, 2407, 2419, 2597). tta.css:1904 ya es
   a:focus:not(:focus-visible) y no necesita nada. Al navegar con teclado
   estos controles muestran anillo dorado; con ratón, nada cambia. */
.tta-search input:focus-visible,
.tta-composer-editor:focus-visible,
.tta-rich-editor__content:focus-visible,
.tta-dm-input textarea:focus-visible,
#panel-feed #feed-search:focus-visible,
#panel-courses #courses-search:focus-visible,
#panel-courses #courses-sort:focus-visible,
#panel-members #members-sort:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--gold, #D4AF37);
}
/* Explorar: el hero de 300 px para una sola comunidad destacada era aire. */
.tta-discover-hero { padding-top: var(--tta-s-10); padding-bottom: var(--tta-s-6); }
/* Miembros: reglas plegadas; el chevron gira al abrir. */
.mem-reglas__details > summary::-webkit-details-marker { display: none; }
.mem-reglas__details[open] .mem-reglas__chev { transform: rotate(180deg); }
/* Menú móvil en UNA columna: redesign ponía los enlaces inline-flex y "Señales"
   y "Diario" quedaban lado a lado con "Miembros" solo en la fila siguiente. */
.tta-mobile-menu__panel .tta-mobile-menu__link,
#tta-menu-lugares .tta-mobile-menu__link { display: flex !important; width: 100%; }
/* Hero colapsado: sin la línea de 2 px que dejaba el borde. */
body.tta-hero-collapsed .tta-hero { border-width: 0; }
/* ── Fin Unificación 1-sep-2026 ── */


/* Compra sin cuenta: el correo se pide dentro de la propia hoja de pago. */
.tta-pay-mail { margin: 14px 0 4px; text-align: left; }
.tta-pay-mail label { display: block; font-size: var(--tta-text-xs, 12px); color: var(--text-muted); margin-bottom: 6px; }
.tta-pay-mail input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: var(--tta-r-md, 10px);
    background: var(--tta-surf-2, rgba(255,255,255,.04)); color: var(--text-primary, #fff);
    border: 1px solid var(--tta-surf-line, rgba(255,255,255,.12)); font-size: var(--tta-text-body, 14px); }
.tta-pay-mail input:focus { outline: none; border-color: var(--gold, #D4AF37); }
.tta-pay-mail small { display: block; margin-top: 6px; color: var(--text-muted); font-size: var(--tta-text-xs, 12px); }
.tta-pay-mail-err { margin-top: 6px; color: #e5484d; font-size: var(--tta-text-xs, 12px); }
.tta-pay-mail-link { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none;
    color: var(--text-secondary); font-size: var(--tta-text-xs, 12px); text-decoration: underline; cursor: pointer; }
.tta-pay-mail-link:hover { color: var(--text-primary, #fff); }