/* ══════════════════════════════════════════════════════════════════════════
   TTA-V16 — el tema nuevo de TT Academy (11-sep-2026, Mathias)

   Capa VISUAL que va DESPUÉS de tta-one.css en academy_base.html. No cambia
   ninguna función: pisa tokens, la cáscara (barra superior, barra lateral,
   barra inferior, menú del teléfono) y los componentes que ya existen
   (.btn, .tta-card, .tta-post, .tta-chip, .form-control, pestañas, modales…)
   con la escala de superficies, el dorado y el aire de la demo v16.

   Sistema de elevación (Apple HIG · Material · Linear · Raycast · Vercel):
   e0 lienzo #0B0B0E · e1 superficie #141417 · e2 elevada #1C1C20 ·
   e3 flotante #242429 · e4 modal #2D2D33 · hundido #08080A.
   Borde hairline blanco escalonado (.06 → .13), luz interior arriba-izquierda
   y sombra contacto + ambiente con el matiz de la base rgba(3,3,6,α).

   Revertir el tema entero = quitar el <link> de este archivo y el <aside
   class="tta-side"> de academy_base.html. Nada más depende de él.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. Tokens ───────────────────────── */
:root{
  --v16-e0:#0B0B0E; --v16-e1:#141417; --v16-e2:#1C1C20; --v16-e3:#242429; --v16-e4:#2D2D33; --v16-e5:#37373E; --v16-hundido:#08080A;
  --v16-ln1:rgba(255,255,255,.06); --v16-ln2:rgba(255,255,255,.10); --v16-ln3:rgba(255,255,255,.13); --v16-ln4:rgba(255,255,255,.16);
  --v16-hl1:inset 1px 1px 0 0 rgba(255,255,255,.04); --v16-hl2:inset 1px 1px 0 0 rgba(255,255,255,.06);
  --v16-hl3:inset 1px 1px 0 0 rgba(255,255,255,.08); --v16-hl4:inset 1px 1px 0 0 rgba(255,255,255,.11);
  --v16-sh1:var(--v16-hl1),0 1px 2px rgba(3,3,6,.4);
  --v16-sh2:var(--v16-hl2),0 1px 2px rgba(3,3,6,.45),0 4px 8px -2px rgba(3,3,6,.4);
  --v16-sh3:var(--v16-hl3),0 2px 4px rgba(3,3,6,.5),0 12px 24px -6px rgba(3,3,6,.55);
  --v16-sh4:var(--v16-hl4),0 4px 8px rgba(3,3,6,.55),0 24px 48px -12px rgba(3,3,6,.65);
  --v16-hund:inset 0 1px 2px rgba(3,3,6,.6),inset 0 0 0 1px rgba(255,255,255,.03);
  --v16-oro:#D9B44A; --v16-oro2:#F0D26B; --v16-oro-b:rgba(217,180,74,.55); --v16-oro-an:0 0 0 3px rgba(217,180,74,.28);
  --v16-verde:#34D399; --v16-rojo:#FB7185; --v16-azul:#60A5FA; --v16-mor:#A78BFA;
  --v16-ease:cubic-bezier(.2,.7,.2,1);
  --v16-side:248px; --v16-nav:56px;

  /* Tokens que ya usa toda la Academia: se redirigen al sistema nuevo. */
  --bg-base:var(--v16-e0); --bg-primary:var(--v16-e0); --bg-raised:var(--v16-e1); --bg-secondary:var(--v16-e1);
  --bg-surface:var(--v16-e2); --bg-tertiary:var(--v16-e2); --bg-elevated:var(--v16-e3); --bg-card:var(--v16-e1);
  --bg-card-hover:var(--v16-e2); --bg-sidebar:var(--v16-e1); --bg-input:var(--v16-hundido); --bg-overlay:rgba(3,3,6,.6);
  --tta-surf-0:var(--v16-e0); --tta-surf-1:var(--v16-e1); --tta-surf-2:var(--v16-e2); --tta-surf-3:var(--v16-e3);
  --tta-surf-line:var(--v16-ln1); --tta-surf-line-strong:var(--v16-ln2); --tta-surf-line-gold:rgba(217,180,74,.35);
  --gold:var(--v16-oro); --gold-light:var(--v16-oro2); --gold-dim:#B5943A;
  --gold-bg:rgba(217,180,74,.10); --gold-bg-hover:rgba(217,180,74,.16); --gold-border:rgba(217,180,74,.28); --gold-glow:rgba(217,180,74,.08);
  --tt-on-accent:#1A1405;
  --green:var(--v16-verde); --accent-green:var(--v16-verde); --green-bg:rgba(52,211,153,.12); --green-border:rgba(52,211,153,.28);
  --red:var(--v16-rojo); --accent-red:var(--v16-rojo); --red-bg:rgba(251,113,133,.12); --red-border:rgba(251,113,133,.28);
  --blue:var(--v16-azul); --accent-blue:var(--v16-azul); --blue-bg:rgba(96,165,250,.12); --blue-border:rgba(96,165,250,.28);
  --text-primary:#EBEBEC; --text-secondary:#C9CACF; --text-muted:#85878F; --text-dim:#85878F; --text-white:#F4F4F5;
  --tta-text-muted:#85878F; --tta-text-dim:#85878F; --muted:#85878F;
  --border-primary:var(--v16-ln1); --border-subtle:rgba(255,255,255,.05); --border-active:var(--gold-border);
  --shadow-xs:var(--v16-sh1); --shadow-sm:var(--v16-sh1); --shadow-md:var(--v16-sh2); --shadow-lg:var(--v16-sh3); --shadow-xl:var(--v16-sh4);
  --shadow-gold:0 6px 18px -8px rgba(217,180,74,.7),0 1px 0 rgba(255,255,255,.35) inset; --shadow-inner:var(--v16-hund);
  --tta-shadow-xs:var(--v16-sh1); --tta-shadow-sm:var(--v16-sh1); --tta-shadow-md:var(--v16-sh2); --tta-shadow-lg:var(--v16-sh3);
  --radius-sm:10px; --radius-md:14px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:24px;
  --tta-r-xs:8px; --tta-r-sm:12px; --tta-r-md:16px; --tta-r-lg:18px; --tta-r-xl:22px;
  --tta-ease:var(--v16-ease);
  --tta-nav-h:var(--v16-nav);
}

/* ───────────────────────── 2. Lienzo ───────────────────────── */
html{background:var(--v16-e0)}
.tta-body{background:radial-gradient(900px 500px at 15% -10%,rgba(217,180,74,.06),transparent 60%),var(--v16-e0);color:var(--text-primary)}
html.tt-fondo-on .tta-body{background:radial-gradient(900px 500px at 15% -10%,rgba(217,180,74,.06),transparent 60%)}
::selection{background:var(--v16-oro);color:#1A1405}
:focus-visible{outline:2px solid var(--v16-oro2);outline-offset:2px}
a{color:var(--v16-oro2)}
h1,h2,h3{letter-spacing:-.02em}

/* ───────────────────────── 3. Barra superior ───────────────────────── */
.tta-nav{background:rgba(20,20,23,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--v16-ln2)}
.tta-nav__inner{max-width:none;padding:0 20px;height:var(--v16-nav)}
.tta-nav__brand{font-size:16px;gap:10px}
.tta-nav__brand img{height:28px;width:28px;border-radius:9px;background:linear-gradient(135deg,var(--v16-oro2),#A8862A);padding:5px;box-shadow:0 4px 14px -6px rgba(217,180,74,.8)}
.tta-nav__brand span{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--text-primary);font-weight:700}
.tta-nav__actions{gap:6px}
.tta-nav__actions .btn{height:36px;padding:0 14px;border-radius:999px}
#tta-dm-bell{border-color:var(--v16-ln2)!important;background:var(--v16-e1)!important;color:var(--text-secondary)!important;height:36px;padding:0 14px!important;transition:background .15s,border-color .15s,color .15s}
#tta-dm-bell:hover{background:var(--v16-e2)!important;border-color:var(--v16-ln3)!important;color:var(--text-primary)!important}
#tta-dm-dot{background:var(--v16-oro)!important}
#tta-notif-bell{width:36px;height:36px;border-radius:50%!important;display:inline-flex!important;align-items:center;justify-content:center;color:var(--text-secondary)!important;transition:background .15s,color .15s;padding:0!important}
#tta-notif-bell:hover{background:var(--v16-e2);color:var(--text-primary)!important}
#tta-notif-dot{background:var(--v16-oro)!important;border:2px solid var(--v16-e1)}
#tta-user-btn{border-radius:999px!important;padding:3px 10px 3px 3px!important;transition:background .15s}
#tta-user-btn:hover{background:var(--v16-e2)}
#tta-user-btn>span:first-child{width:30px!important;height:30px!important;background:linear-gradient(135deg,#2E2F36,#1B1C21)!important;color:var(--text-secondary)!important;box-shadow:0 0 0 2px var(--v16-oro);font-size:12px!important}
.tta-nav__hamburger{color:var(--text-secondary);border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.tta-nav__hamburger svg{width:22px;height:22px;fill:currentColor}
.tta-nav__hamburger:hover{background:var(--v16-e2);color:var(--text-primary)}
/* e3 · flotantes: avisos y menú de usuario */
.tta-notif-dropdown,#tta-user-menu{background:var(--v16-e3)!important;border:1px solid var(--v16-ln3)!important;border-radius:16px!important;box-shadow:var(--v16-sh3)!important}
.tta-notif-dropdown__header{border-bottom:1px solid var(--v16-ln1)}
#tta-user-menu .tta-mobile-menu__link,.tta-notif-dropdown .tta-mobile-menu__link{border-radius:10px;padding:10px 12px;color:var(--text-primary);transition:background .12s}
#tta-user-menu .tta-mobile-menu__link:hover{background:var(--v16-e4)}

/* ───────────────────────── 4. Barra lateral (escritorio) ───────────────────────── */
.tta-app{flex:1;display:block;min-height:0}
.tta-side{display:none}
@media(min-width:1024px){
  .tta-app{display:grid;grid-template-columns:var(--v16-side) minmax(0,1fr);align-items:start}
  .tta-side{display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--v16-nav);height:calc(100vh - var(--v16-nav));height:calc(100dvh - var(--v16-nav));overflow-y:auto;scrollbar-width:none;padding:14px 10px 18px;background:var(--v16-e1);border-right:1px solid var(--v16-ln1);box-shadow:var(--v16-hl1)}
  .tta-side::-webkit-scrollbar{display:none}
  .tta-side>*{flex:0 0 auto}
  .tta-side .tta-side__cap{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:14px 14px 6px}
  .tta-side .tta-side__ln{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:background .15s,color .15s;cursor:pointer;background:none;border:0;width:100%;text-align:left;font-family:inherit}
  .tta-side .tta-side__ln .material-symbols-outlined{font-size:22px;opacity:.85;flex:none}
  .tta-side .tta-side__ln:hover{background:var(--v16-e2);color:var(--text-primary)}
  .tta-side .tta-side__ln.is-active{color:var(--v16-oro2);font-weight:700;background:linear-gradient(90deg,rgba(217,180,74,.14),transparent)}
  .tta-side .tta-side__ln.is-active .material-symbols-outlined{opacity:1;font-variation-settings:'FILL' 1,'wght' 500}
  .tta-side .tta-side__ln .tta-side__n{margin-left:auto;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .tta-side .tta-side__ln .tta-side__n.l{color:var(--v16-rojo)}
  .tta-side .tta-side__ln[hidden]{display:none}
  .tta-side .tta-side__sub .tta-side__ln{height:38px;font-size:14px;padding-left:24px}
  .tta-side .tta-side__sub{display:none;flex-direction:column;gap:2px}
  .tta-side .tta-side__sub.on{display:flex;animation:v16ap .2s var(--v16-ease)}
  .tta-side .tta-side__pub{margin:14px 10px 0;height:44px;border-radius:999px;font-weight:700;font-size:15px}
  .tta-side .tta-side__foot{margin-top:auto;padding:14px 8px 0;font-size:12px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap}
  .tta-side .tta-side__foot a{color:var(--text-muted);text-decoration:none}
  .tta-side .tta-side__foot a:hover{color:var(--text-secondary)}
  /* la barra superior deja de estar centrada a 1240px: el ancho entero es la app */
  .tta-main{padding:26px clamp(18px,2.4vw,40px) 64px}
  /* En escritorio el pie ya no necesita hueco para la barra inferior */
  .tta-footer{margin-left:var(--v16-side)}
}
@keyframes v16ap{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ───────────────────────── 5. Contenido y pie ───────────────────────── */
.tta-main{max-width:none}
.tta-footer{border-top:1px solid var(--v16-ln1);color:var(--text-muted);background:var(--v16-e0)}
.tta-footer a{color:var(--text-muted)}
.tta-footer a:hover{color:var(--text-secondary)}

/* ───────────────────────── 6. Barra inferior (teléfono) ───────────────────────── */
.tta-bottom-tabs{background:rgba(20,20,23,.94)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--v16-ln2)!important;box-shadow:0 -6px 20px -12px rgba(3,3,6,.9);padding:4px 6px max(4px,env(safe-area-inset-bottom))!important}
.tta-bottom-tab{color:var(--text-muted);font-size:10.5px!important;font-weight:500;letter-spacing:.01em;gap:3px!important;padding:4px 2px!important}
.tta-bottom-tab .material-symbols-outlined{font-size:24px!important;padding:3px 14px!important;border-radius:999px;transition:background .15s,color .15s}
.tta-bottom-tab:hover{color:var(--text-primary)}
.tta-bottom-tab.active{color:var(--text-primary)!important;font-weight:600}
.tta-bottom-tab.active .material-symbols-outlined{color:var(--v16-oro2)!important;background:rgba(217,180,74,.12)!important;font-variation-settings:'FILL' 1,'wght' 500}
#tta-bottom-dm-dot{background:var(--v16-oro)!important;border-color:var(--v16-e1)!important}

/* ───────────────────────── 7. Menú del teléfono → hoja inferior ───────────────────────── */
.tta-mobile-menu{align-items:flex-end;justify-content:stretch}
.tta-mobile-menu.open{background:rgba(3,3,6,.6)}
.tta-mobile-menu__panel{width:100%!important;max-width:none!important;height:auto!important;max-height:82dvh;border-left:0!important;border-top:1px solid var(--v16-ln3);border-radius:20px 20px 0 0;background:var(--v16-e3)!important;box-shadow:var(--v16-sh4);padding:10px 16px calc(20px + env(safe-area-inset-bottom))!important;gap:4px!important;overflow-y:auto;transform:translateY(105%)!important;transition:transform .32s var(--v16-ease)!important}
.tta-mobile-menu__panel::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--v16-ln4);margin:0 auto 10px}
.tta-mobile-menu.open .tta-mobile-menu__panel{transform:none!important}
.tta-mobile-menu__close{position:absolute;top:8px;right:12px;width:34px;height:34px;border-radius:50%;color:var(--text-muted);font-size:22px;line-height:1;display:grid;place-items:center}
.tta-mobile-menu__close:hover{background:var(--v16-e4);color:var(--text-primary)}
.tta-mobile-menu__link{display:flex!important;align-items:center;gap:12px;padding:12px 12px!important;border-radius:12px!important;font-size:15px!important;color:var(--text-primary)!important;background:var(--v16-e4);border:1px solid var(--v16-ln3);margin:0!important;transition:background .12s}
.tta-mobile-menu__link:hover{background:var(--v16-e5)!important}
.tta-mobile-menu__link .material-symbols-outlined{color:var(--v16-oro2);width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:20px!important;flex:none;margin:0!important;vertical-align:middle!important}
#tta-menu-lugares>div:first-child,#tta-mobile-auth hr{margin-top:6px}
#tta-mobile-auth hr{border-top-color:var(--v16-ln2)!important}
#tta-menu-lugares{display:flex;flex-direction:column;gap:6px}
#tta-mobile-auth{display:flex;flex-direction:column;gap:6px}

/* ───────────────────────── 8. Botones ───────────────────────── */
.btn{border-radius:999px;font-weight:600;font-size:14px;padding:0 16px;height:38px;line-height:38px;box-shadow:none;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s,filter .15s}
.btn::after{display:none}
.btn-sm{height:32px;line-height:32px;padding:0 13px;font-size:13px}
.btn-lg{height:46px;line-height:46px;padding:0 22px;font-size:15px}
.btn-primary{background:linear-gradient(180deg,var(--v16-oro2),var(--v16-oro));color:#1A1405;box-shadow:0 6px 18px -8px rgba(217,180,74,.7),0 1px 0 rgba(255,255,255,.35) inset}
.btn-primary:hover{background:linear-gradient(180deg,#F5DA7A,#E0BE58);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(217,180,74,.8),0 1px 0 rgba(255,255,255,.35) inset}
.btn-primary:active{transform:none;filter:brightness(.94);box-shadow:inset 0 1px 2px rgba(3,3,6,.35)}
.btn-ghost,.btn-secondary{background:rgba(255,255,255,.03);color:var(--text-primary);border:1px solid var(--v16-ln2);box-shadow:none}
.btn-ghost:hover,.btn-secondary:hover{background:var(--v16-e2);border-color:var(--v16-ln3);color:var(--text-primary)}
.btn-ghost:active,.btn-secondary:active{background:var(--v16-e1);box-shadow:inset 0 1px 2px rgba(3,3,6,.45);transform:none}
.btn-success{background:var(--v16-verde);color:#062A1C}
.btn-danger{background:rgba(251,113,133,.12);color:var(--v16-rojo);border:1px solid rgba(251,113,133,.28)}
.btn-danger:hover{background:rgba(251,113,133,.2)}
.btn-link{color:var(--v16-oro2)}
.btn-icon{border-radius:50%;width:38px;padding:0}

/* ───────────────────────── 9. Campos ───────────────────────── */
.form-control,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],input[type="tel"],input[type="date"],input[type="time"],input[type="datetime-local"],textarea,select{background:var(--v16-hundido);border:1px solid var(--v16-ln1);border-radius:12px;color:var(--text-primary);box-shadow:var(--v16-hund);transition:border-color .15s,box-shadow .15s,background .15s}
.form-control:hover,textarea:hover,select:hover{border-color:var(--v16-ln2)}
.form-control:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--v16-oro-b);box-shadow:var(--v16-oro-an)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input[type=checkbox],input[type=radio]{accent-color:var(--v16-oro)}

/* ───────────────────────── 10. Tarjetas y elevación ───────────────────────── */
.tta-card{background:linear-gradient(180deg,var(--v16-e2),var(--v16-e1));border:1px solid var(--v16-ln1);border-radius:16px;box-shadow:var(--v16-sh1)}
.tta-card::before{display:none}
.tta-card:hover{background:linear-gradient(180deg,var(--v16-e3),var(--v16-e2));border-color:var(--v16-ln2);box-shadow:var(--v16-sh2);transform:translateY(-2px)}
.tta-card__cover{background-color:var(--v16-e2)}
.tta-card__title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.tta-card__meta{color:var(--text-muted);font-size:13px}
.tta-card__chip{background:var(--v16-oro);color:#1A1405;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:.04em}
.tta-side-card{background:linear-gradient(180deg,var(--v16-e2),var(--v16-e1));border:1px solid var(--v16-ln1);border-radius:16px;box-shadow:var(--v16-sh1)}
.tta-side-card:hover{border-color:var(--v16-ln2);box-shadow:var(--v16-sh2)}
.tta-side-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center}
.tta-side-label::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--v16-oro);margin-right:10px}
.tta-side-stats b{color:var(--text-primary)}
.tta-myp-bar{background:var(--v16-hundido);border-radius:999px;overflow:hidden}
.tta-myp-bar__fill{background:linear-gradient(90deg,var(--v16-oro),var(--v16-oro2));border-radius:999px}
.tta-empty{background:var(--v16-e1);border:1px dashed var(--v16-ln2);border-radius:16px}
.tta-empty__icon{color:var(--v16-oro2);opacity:.9}
.tta-section-title h2{font-size:19px;font-weight:700}

/* ───────────────────────── 11. Publicaciones (feed) ───────────────────────── */
.tta-post{background:var(--v16-e1);border:1px solid var(--v16-ln1);border-radius:16px;box-shadow:var(--v16-sh1);padding:18px 18px 14px;transition:background .15s,border-color .15s,box-shadow .15s}
.tta-post:hover{background:#16161A;border-color:var(--v16-ln2);box-shadow:var(--v16-sh2)}
.tta-post__actions{gap:6px;border-top:1px solid var(--v16-ln1);padding-top:8px;margin-top:12px}
.tta-post__action{height:34px;padding:0 12px;border-radius:999px;color:var(--text-muted);font-size:13.5px;font-weight:500;transition:background .12s,color .12s}
.tta-post__action:hover{background:var(--v16-e2);color:var(--text-primary)}
.tta-post__action.is-on,.tta-post__action.liked,.tta-post__action[aria-pressed="true"]{color:var(--v16-oro2)}
#feed-composer{border-radius:16px;background:var(--v16-e1);border:1px solid var(--v16-ln1);box-shadow:var(--v16-sh1)}
#feed-composer:focus-within{border-color:var(--v16-ln2);box-shadow:var(--v16-sh2)}
#feed-composer textarea,#feed-composer .form-control{background:transparent;box-shadow:none;border-color:transparent;font-size:16px;padding-left:0}
#feed-composer textarea:focus{box-shadow:none;border-color:transparent}
.tta-composer-toolbar{background:transparent;border-bottom:0;border-top:1px solid var(--v16-ln1);border-radius:0;padding-top:8px}
.tta-composer-toolbar button{border-radius:999px;height:32px;padding:0 10px;color:var(--text-muted)}
.tta-composer-toolbar button:hover{background:var(--v16-e2);color:var(--text-primary)}
#feed-search{border-radius:999px;height:42px}
.tta-chip{background:var(--v16-e1);border:1px solid var(--v16-ln2);color:var(--text-secondary);height:34px;padding:0 14px;font-size:13.5px;font-weight:500;transition:background .15s,border-color .15s,color .15s}
.tta-chip:hover{background:var(--v16-e2);border-color:var(--v16-ln3);color:var(--text-primary)}
.tta-chip.is-active{background:linear-gradient(180deg,var(--v16-oro2),var(--v16-oro));color:#1A1405;border-color:transparent;font-weight:700}
.tta-chip--sm{height:28px;padding:0 10px;font-size:12px}
.tta-comment{border-radius:12px}
.tta-shell .tta-comment:hover{background:rgba(255,255,255,.03)}
.tta-shell .comment-form .form-control,.tta-shell .comments-area input[type=text]{background:var(--v16-hundido);border:1px solid var(--v16-ln1);box-shadow:var(--v16-hund)}
.tta-poll{border-radius:14px}

/* ───────────────────────── 12. Comunidad: cabecera y pestañas ───────────────────────── */
.tta-hero{background:radial-gradient(700px 300px at 80% 10%,rgba(217,180,74,.22),transparent 60%),linear-gradient(180deg,var(--v16-e2),var(--v16-e1));border:1px solid var(--v16-ln1);border-radius:20px;box-shadow:var(--v16-sh2)}
.tta-hero__avatar{box-shadow:0 0 0 3px var(--v16-e1),0 0 0 5px var(--v16-oro)}
.tta-hero-actions .btn{height:36px}
/* Las pestañas de la comunidad: chips en el teléfono y tableta… */
.tta-tabs{background:transparent!important;border:0!important;border-bottom:1px solid var(--v16-ln1)!important;padding:6px 0!important;gap:4px!important;box-shadow:none!important;border-radius:0!important}
.tta-tab-btn{border-radius:999px!important;padding:8px 14px!important;font-size:14px!important;color:var(--text-muted)!important;transition:background .15s,color .15s!important}
.tta-tab-btn:hover{background:var(--v16-e2)!important;color:var(--text-primary)!important}
.tta-tab-btn.is-active{background:rgba(217,180,74,.12)!important;color:var(--v16-oro2)!important;font-weight:700!important;box-shadow:none!important}
/* …y en escritorio la barra lateral las reemplaza: se esconden, salvo las
   herramientas del máster (Página registro · Live), que la barra lateral
   pinta en su propio bloque y aquí quedan como respaldo invisible. */
@media(min-width:1024px){
  .tta-shell .tta-tabs-wrap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;padding:0!important;border:0!important}
  .tta-shell{display:block!important}
  .tta-col-l{display:none!important}
  .tta-shell #panel-feed:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,24vw,340px);gap:24px;align-items:start}
  .tta-shell .tta-feed-main>*{margin-left:0;margin-right:0;max-width:none}
  .tta-shell .tta-feed-main{max-width:820px}
  .tta-shell #panel-feed .tta-feed-side{position:sticky;top:calc(var(--v16-nav) + 16px)}
}
@media(max-width:1023px){.tta-shell .tta-tabs-wrap{position:sticky;top:var(--v16-nav);z-index:20;background:rgba(11,11,14,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0!important;border:0!important;border-radius:0!important}}

/* ───────────────────────── 13. Aula, curso y reproductor ───────────────────────── */
.tta-grid--courses{gap:18px}
.tta-course-locked__overlay{background:rgba(11,11,14,.55);backdrop-filter:blur(2px)}
.tta-course-locked__cta{border-radius:999px;background:var(--v16-e3);border:1px solid var(--v16-ln3);color:var(--text-primary)}
.tta-course-locked__cta--gold{background:linear-gradient(180deg,var(--v16-oro2),var(--v16-oro));color:#1A1405;border-color:transparent}
.tta-learn-layout{background:var(--v16-e0)}
.tta-learn-sidebar{background:var(--v16-e1);border-left:1px solid var(--v16-ln1)}
.tta-learn-main{padding:20px 24px}
.tta-player{border-radius:16px;overflow:hidden;background:var(--v16-e1);border:1px solid var(--v16-ln1);box-shadow:var(--v16-sh2)}
.tta-learn-title{font-size:22px;font-weight:700;letter-spacing:-.02em}
.tta-lesson-topbar,.tta-learn-actionbar{border-radius:14px}
.tta-learn-notes{background:var(--v16-e1);border:1px solid var(--v16-ln1);border-radius:16px}
.tta-lesson-item,.tta-lesson-row{border-radius:12px}
.tta-lesson-item:hover{background:var(--v16-e2)}
#curriculum .tta-lesson-title{font-size:14px}
.tta-course-layout{gap:24px}

/* ───────────────────────── 14. Mensajes ───────────────────────── */
.tta-dm-layout{background:var(--v16-e0);max-width:none}
.tta-dm-threads{background:var(--v16-e1);border-right:1px solid var(--v16-ln1)}
.tta-dm-threads .form-control{border-radius:999px}
.tta-dm-thread-item{border-radius:12px;transition:background .12s}
.tta-dm-thread-item:hover{background:var(--v16-e2)}
.tta-dm-thread-item.is-active{background:linear-gradient(90deg,rgba(217,180,74,.14),transparent)}
.tta-dm-thread-item__badge{background:var(--v16-oro);color:#1A1405;border-radius:999px}
.tta-dm-msg__text{border-radius:16px}
.tta-dm-input{background:var(--v16-e1);border-top:1px solid var(--v16-ln1)}
.tta-dm-input textarea{background:var(--v16-hundido);border:1px solid var(--v16-ln1);border-radius:18px;box-shadow:var(--v16-hund)}
.tta-modal-card{background:var(--v16-e4)!important;border:1px solid var(--v16-ln4)!important;border-radius:20px!important;box-shadow:var(--v16-sh4)!important}
.tta-modal-overlay{background:rgba(3,3,6,.6)!important;backdrop-filter:blur(6px)}
/* Puerta de una comunidad (inicia sesión para entrar) */
.ttl__card{background:var(--v16-e2)!important;border:1px solid var(--v16-ln2)!important;border-radius:20px!important;box-shadow:var(--v16-sh3)!important}
.ttl__submit{border-radius:999px!important;background:linear-gradient(180deg,var(--v16-oro2),var(--v16-oro))!important;color:#1A1405!important;font-weight:700}
.ttl__form .form-control{border-radius:12px}
.ttl__join a,.ttl__forgot{color:var(--v16-oro2)}

/* ───────────────────────── 15. Explorar, perfil, cuenta ───────────────────────── */
.tta-discover-hero h1 .tta-accent{background:linear-gradient(135deg,var(--v16-oro),var(--v16-oro2));-webkit-background-clip:text;background-clip:text}
.tta-discover-hero .form-control,.tta-discover-search input{border-radius:999px;height:48px}
.tta-prof__tab{border-radius:999px}
.tta-prof__tab.is-active{background:rgba(217,180,74,.12);color:var(--v16-oro2)}
.tta-about-stat b{color:var(--text-primary)}
.badge,.bc-pill{border-radius:999px}

/* ───────────────────────── 16. Flotantes: modales, avisos, tostadas ───────────────────────── */
.modal-overlay{background:rgba(3,3,6,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal,.tta-modal,.modal-overlay>div:not(.tta-lock-card):not([class*="overlay"]){border-radius:20px}
.modal-overlay .modal,.modal-overlay .tta-modal,.tta-lock-card,#tta-perm-modal .modal{background:var(--v16-e4)!important;border:1px solid var(--v16-ln4)!important;box-shadow:var(--v16-sh4)!important}
.modal-overlay .form-control,.modal-overlay input,.modal-overlay textarea{background:var(--v16-hundido)}
.tta-toast{border-radius:14px!important;background:var(--v16-e3)!important;border:1px solid var(--v16-ln3);box-shadow:var(--v16-sh3)!important;color:var(--text-primary)!important}
.tta-toast--success{border-left:3px solid var(--v16-verde)!important}
.tta-toast--error{border-left:3px solid var(--v16-rojo)!important}
.tta-toast--warning{border-left:3px solid #F59E0B!important}
.tta-toast--info{border-left:3px solid var(--v16-azul)!important}
#tta-navbar-progress,#tta-nav-progress>div{background:linear-gradient(90deg,var(--v16-oro),var(--v16-oro2))!important}

/* ───────────────────────── 17. Primeros pasos (lista de bienvenida) ───────────────────────── */
#tta-onb,.tta-onb,[id^="tta-onb-"]{border-radius:16px}
#tta-onb-x{color:var(--text-muted)}

/* ───────────────────────── 18. Ajustes finos del teléfono ───────────────────────── */
@media(max-width:768px){
  .tta-nav{display:block!important;position:sticky}
  #tta-auth-slot{display:block!important}
  .tta-nav__inner{padding:0 12px 0 14px;height:52px}
  .tta-nav__brand span{display:none}
  .tta-nav__brand img{height:30px;width:30px}
  #tta-dm-bell{display:none!important}
  #tta-auth-slot .btn-ghost{display:none}
  #tta-auth-slot .hide-sm{display:none!important}
  .tta-nav__hamburger{display:none}
  .tta-main{padding:12px 12px calc(84px + env(safe-area-inset-bottom))}
  .tta-hero{border-radius:16px;min-height:120px}
  .tta-post{border-radius:14px;padding:14px 14px 10px}
  .tta-card{border-radius:14px}
  .tta-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}