/* ═══════════════════════════════════════════════════════════════════
   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).
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   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: 18px;
    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: 22px;
}
.tta-course-locked__cta {
    font-size: 12px;
    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: 1.35rem;
}
#leaderboard-list .tta-lb-trow:nth-child(1) .tta-lb-name span:first-child {
    font-size: 1.05rem;
}
#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: 3rem;
    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. PESTAÑA "ACERCA" (#panel-about) — polish visual (auditoría: 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-about .tta-card {
    border-radius: 16px;
}

#panel-about 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: 1.06em;
}

/* 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-about .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: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold, #D4AF37);
}
#panel-about .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-about .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: 1.1em;
    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: 1.15rem;
}
.lb-v2 .lb-hero__d {
    grid-area: d;
    margin: 0;
    font-size: 13.5px;
    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: 12.5px;
    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: 18px;
    line-height: 1;
}
.lb-v2 .lb-podium__name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text, #D4D4D8);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-v2 .is-1 .lb-podium__name {
    font-size: 15.5px;
}
.lb-v2 .lb-podium__you {
    color: var(--gold, #D4AF37);
    font-size: 11px;
    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: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.lb-v2 .is-1 .lb-podium__pts {
    font-size: 1.5rem;
}
.lb-v2 .lb-podium__pts span {
    font-size: 0.62em;
    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: 1.25rem;
    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: 24px;
    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: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #D4AF37);
    margin-bottom: 3px;
}
.lb-v2 .lb-leader__name {
    font-size: 1.05rem;
    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: 1.55rem;
    font-weight: 800;
    line-height: 1;
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-leader__pts span {
    font-size: 0.5em;
    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: 1.6rem;
    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: 15px;
    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: 14px;
}
.lb-v2 .lb-prog__arrow {
    color: var(--gold, #D4AF37);
}
.lb-v2 .lb-prog__count {
    font-size: 13px;
    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: 13px;
    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: 18px;
    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: 10px;
    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: 13px;
    }
    .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: 12.5px;
    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: 1.05rem; 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: 1.2rem; }

/* 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: 1.1rem; }
.lb-v2 .is-1 .lb-podium__pts { font-size: 1.65rem; }

/* 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: 14px; font-weight: 600; }
.lb-v2 .rg-lvl__meta { font-size: 12px; 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.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: 15px;
    letter-spacing: 0.4px;
    margin-right: 0;
}
#panel-teleprompter .tp-emotion {
    font-size: 11px;
    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: 13px;
}
#panel-teleprompter .tp-reason {
    flex-basis: 100%;
    color: #D4D4D8;
    opacity: 0.75;
    font-size: 13px;
    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: 11px;
    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: 15px;
    font-weight: 700;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}
#panel-teleprompter .tp-block__dur {
    color: #A1A1AA;
    font-size: 13px;
    white-space: nowrap;
}
/* Badges de prioridad: ALTA = danger, MEDIA = warning, BAJA = neutro */
#panel-teleprompter .tp-energy {
    font-size: 10px;
    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: 14px;
    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: 12.5px;
    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: 13px;
}
#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: 16px; 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: 13px;
        line-height: 1.45;
    }
    body:not(.tta-anon) .tta-hero__meta .tta-bio-more { margin-top: 2px; font-size: 12.5px; }
    /* Stats (miembros · cursos) en la misma línea, compactos */
    body:not(.tta-anon) #hero-members,
    body:not(.tta-anon) #hero-courses { font-size: 12.5px; }
    /* 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: 12.5px;
        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: 15px;
    color: var(--text-primary, #F5F5F4);
}
#panel-feed .tta-post__meta {
    color: var(--text-muted);
    font-size: 13px; /* 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: 11px;
    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: 10px;
    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: 15px;
    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: 13px;
    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: 16px;
    color: var(--gold, #D4AF37);
}
#panel-feed .tta-feed-h__label {
    font-size: 12px;
    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: 18px;
    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: 11px;
    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: 16px;
}
#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: 24px;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.08);
}
#panel-feed .tta-empty__title {
    font-size: 16px;
}

/* ── 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: 11px;
    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: 16px;
    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: 13px;
    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: 10px;
    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: 26px;
    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: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #F4F4F5;
}
#panel-courses .tta-card__meta,
#panel-curso .tta-card__meta {
    font-size: 13px;
    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: 12px;
    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: 24px;
    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: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #F4F4F5;
}
#panel-courses .tta-level-group__count {
    margin-left: auto;
    font-size: 12px;
    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: 24px;
    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: 15px;
        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: 24px;
    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: 11px;
    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: 11px;
    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: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#panel-members .tta-mrow__handle {
    color: #A1A1AA;
    font-size: 13px;
    margin-top: 1px;
}
#panel-members .tta-mrow__bio {
    color: #D4D4D8;
    opacity: 0.72;
    font-size: 13px;
    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: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #D4AF37;
}
#panel-members .tta-mrow__pts {
    font-size: 13px;
    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: 12px;
    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: 13px;
}
#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: 11px;
    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: 11px;
    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: 11px;
    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: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
#panel-calendar .tta-evnext__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    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: 16px;
    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: 11px;
    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: 12px;
    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: 11px;
    color: #D4AF37;
    font-weight: 700;
    letter-spacing: 0.06em;
}
#panel-calendar .tta-evcard__day {
    display: block;
    font-size: 22px;
    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: 15px;
}
#panel-calendar .tta-evcard__meta {
    color: #A1A1AA;
    font-size: 13px;
    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: 13px;
    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: 12px;
}
#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: 15px;
    color: #F4F4F5;
    line-height: 1.3;
}
#panel-landing .tta-lped__sub {
    font-size: 13px;
    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: 12.5px;
    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: 12.5px;
    }
    #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: 10.5px;
    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: 14 tamaños → 4 ── */
    :root {
        --tta-text-2xs: 12px;
        --tta-text-xs:  12px;
        --tta-text-sm:  14px;
        --tta-text-base:14px;
        --tta-text-md:  17px;
        --tta-text-lg:  17px;
        --tta-text-xl:  20px;
        --tta-text-2xl: 20px;
        --tta-text-3xl: 24px;
        --tta-text-4xl: 24px;
    }
    body { font-size: 14px; }

    /* Inline styles huérfanos (no tokens). Los iconos quedan fuera. */
    [style*="font-size:10px"]:not(.material-symbols-outlined),
    [style*="font-size: 10px"]:not(.material-symbols-outlined),
    [style*="font-size:10.5px"]:not(.material-symbols-outlined),
    [style*="font-size:11px"]:not(.material-symbols-outlined),
    [style*="font-size: 11px"]:not(.material-symbols-outlined),
    [style*="font-size:11.5px"]:not(.material-symbols-outlined) {
        font-size: 12px !important;
    }
    [style*="font-size:13px"]:not(.material-symbols-outlined),
    [style*="font-size: 13px"]:not(.material-symbols-outlined),
    [style*="font-size:12.5px"]:not(.material-symbols-outlined),
    [style*="font-size:15px"]:not(.material-symbols-outlined),
    [style*="font-size: 15px"]:not(.material-symbols-outlined) {
        font-size: 14px !important;
    }
    [style*="font-size:18px"]:not(.material-symbols-outlined),
    [style*="font-size: 18px"]:not(.material-symbols-outlined),
    [style*="font-size:19px"]:not(.material-symbols-outlined) {
        font-size: 17px !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}
}
.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:13px;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:13px;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:15px}
  #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:16px;
    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:20px}
#tta-temas-x .tct-ph{flex:1;min-width:0;color:var(--text-secondary,#d8d8d8);
  font-size:14.5px;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:11px;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:12px}
  #panel-calendar .tta-cal-day{min-height:72px;display:flex;
    align-items:flex-start;justify-content:flex-end;padding:8px 10px;
    font-size:15px;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:11px;font-weight:800;
  letter-spacing:.08em;color:#ef4444}
#tta-live-banner .tlb-title{flex:1;min-width:0;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text-secondary,#d8d8d8)}
#tta-live-banner .tlb-go{flex:none;color:#ef4444;font-size:22px}
@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:11px;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:14px;
  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:15px;line-height:1.5;
  color:var(--text-primary,#f2f2f2)}
#tta-tema-panel .ttp-q{margin:12px 0 8px;font-size:11.5px;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:13.5px;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:12px;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:13px;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:13.5px;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)}