/* ══ tta-v16-piel.css — la PIEL de la demo v15 sobre las páginas heredadas (12-sep-2026) ══
   Las páginas que la demo no diseñó (Tu cuenta y la consola del máster, directo, certificado,
   curso completado, gráficos, Página registro, Live, puerta, landing, inicio, comunidades,
   legales, contraseña, errores) conservan su HTML y su JS; esta hoja traduce sus clases a los
   componentes de la demo (tta-demo.css): .card, .b/.b.p/.b.g, .tabs, .seg, .chip, .cap, .h1, .lead,
   inputs. Solo aplica dentro de la cáscara (body.v16s). Tokens: --s1 --s2 --s3 --ln --ln2 --ac --ac2
   --tx --t2 --t3 --r --sh (los pone tta-demo-shell.css). */

/* ── tipografía ── */
body.v16s #tta-main h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0 0 6px}
body.v16s #tta-main h2{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:22px 0 8px}
body.v16s #tta-main p{margin:0 0 10px}
body.v16s #tta-main h1+p{margin-bottom:18px}
body.v16s #tta-main h3{font-size:15px;font-weight:700;line-height:1.3}
body.v16s #tta-main h1+p,body.v16s #tta-main .tta-sub,body.v16s #tta-main .tta-page-sub,body.v16s #tta-main .tta-section-title__sub,body.v16s #tta-main .tta-done__lead{color:var(--t2);font-size:14px}
body.v16s #tta-main label,body.v16s #tta-main .tta-label,body.v16s #tta-main .tp-ctrl__label,body.v16s #tta-main .form-label,body.v16s #tta-main .tta-section-eyebrow,body.v16s #tta-main .tta-done__eyebrow,body.v16s #tta-main .ttah-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
body.v16s #tta-main label{display:block;margin-bottom:6px}
body.v16s #tta-main label:has(input[type=checkbox]),body.v16s #tta-main label:has(input[type=radio]){display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--tx)}
body.v16s #tta-main small,body.v16s #tta-main .tta-help,body.v16s #tta-main .form-hint,body.v16s #tta-main .muted{color:var(--t3);font-size:13px}
body.v16s #tta-main a:not(.b):not(.btn):not(.nv):not(.tta-tab-btn):not(.tta-chip){color:var(--ac2)}

/* ── tarjetas ── */
body.v16s #tta-main .tta-card,body.v16s #tta-main .chart-card,body.v16s #tta-main .tp-block,body.v16s #tta-main .tp-daybar,body.v16s #tta-main .tp-ctrl,body.v16s #tta-main .ttl__card,body.v16s #tta-main .tta-done,body.v16s #tta-main .tta-featured-card,body.v16s #tta-main .tta-course-scroll-card,body.v16s #tta-main .tta-done__next,body.v16s #tta-main .ttah-why__card,body.v16s #tta-main .ttah-step,body.v16s #tta-main .ttah-card-mock,body.v16s #tta-main .tta-lped__bar,body.v16s #tta-main .tta-cine__card,body.v16s #tta-main .tta-vid-card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh)}
body.v16s #tta-main .tta-card{padding:20px}
body.v16s #tta-main .tta-card .tta-card,body.v16s #tta-main .tp-block .tp-block{background:var(--s2);box-shadow:none}
body.v16s #tta-main .tta-lped__frame{border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh);background:var(--bg)}

/* ── botones ──
   Todas las variantes llevan el mismo :not(.tta-pagar-cripto) que la regla base:
   sin él, la base (más específica) les ganaba y los dorados salían transparentes
   y los pequeños a 40 px en todas las pantallas clásicas (23-sep-2026). */
body.v16s:not(.tta-pagar-cripto) #tta-main .btn,body.v16s #tta-main .ttah-btn,body.v16s #tta-main .ttl__submit,body.v16s #tta-main .tta-lped__save,body.v16s #tta-main .tta-cine__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14px;line-height:1;white-space:nowrap;border:1px solid transparent;background:transparent;color:var(--tx);cursor:pointer;transition:transform .12s var(--ease),background .15s,border-color .15s;text-decoration:none;box-shadow:none}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn:active,body.v16s #tta-main .ttah-btn:active{transform:scale(.98)}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-primary,body.v16s #tta-main .ttah-btn--primary,body.v16s #tta-main .ttl__submit,body.v16s #tta-main .tta-cine__cta,body.v16s:not(.tta-pagar-cripto) #tta-main .btn-gold{background:linear-gradient(180deg,var(--ac2),var(--ac));color:#1a1405;border-color:transparent;box-shadow:0 6px 18px -8px rgba(217,180,74,.7),0 1px 0 rgba(255,255,255,.35) inset}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-primary:hover,body.v16s #tta-main .ttah-btn--primary:hover{filter:brightness(1.05)}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-ghost,body.v16s:not(.tta-pagar-cripto) #tta-main .btn-secondary,body.v16s:not(.tta-pagar-cripto) #tta-main .btn-outline,body.v16s #tta-main .ttah-btn--ghost,body.v16s:not(.tta-pagar-cripto) #tta-main .btn-default{border-color:var(--ln2);background:rgba(255,255,255,.03);color:var(--tx)}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-ghost:hover,body.v16s:not(.tta-pagar-cripto) #tta-main .btn-secondary:hover{border-color:var(--ac);color:var(--ac2)}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-danger{border:1px solid rgba(248,113,113,.45)!important;color:#f87171!important;background:rgba(248,113,113,.12)!important}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-danger:hover{background:rgba(248,113,113,.22)!important;border-color:#f87171!important}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-sm{height:34px;padding:0 14px;font-size:13px}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-lg{height:46px;padding:0 24px;font-size:15px}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn-full{width:100%}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn .material-symbols-outlined,body.v16s #tta-main .ttah-btn .material-symbols-outlined{font-size:18px}
body.v16s:not(.tta-pagar-cripto) #tta-main .btn:disabled{opacity:.45;cursor:not-allowed}

/* ── pestañas: las de Tu cuenta y las del Live (Guion · Transmitir · Ajustes) ── */
body.v16s #tta-main .tta-tabs,body.v16s #tta-main .tp-subnav{display:flex;gap:2px;border-bottom:1px solid var(--ln);margin-bottom:16px;overflow-x:auto;scrollbar-width:none;background:none;padding:0;border-radius:0;box-shadow:none}
body.v16s #tta-main .tta-tabs::-webkit-scrollbar,body.v16s #tta-main .tp-subnav::-webkit-scrollbar{display:none}
body.v16s #tta-main .tta-tab-btn,body.v16s #tta-main .tp-subtab{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px!important;font-size:14px;font-weight:500;color:var(--t3)!important;background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;white-space:nowrap;box-shadow:none!important;margin:0}
body.v16s #tta-main .tta-tab-btn:hover,body.v16s #tta-main .tp-subtab:hover{color:var(--tx)}
body.v16s #tta-main .tta-tab-btn.is-active,body.v16s #tta-main .tta-tab-btn[aria-selected="true"],body.v16s #tta-main .tp-subtab.is-on,body.v16s #tta-main .tp-subtab.is-active{color:var(--ac2)!important;border-bottom-color:var(--ac)!important;font-weight:600;background:none!important}
body.v16s #tta-main .tta-tab-btn .material-symbols-outlined{font-size:18px}
body.v16s #tta-main .tp-subnav-wrap{padding:0;background:none;border:0}

/* ── chips: secciones de la consola del máster y filtros de Comunidades ── */
body.v16s #tta-main .tta-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px!important;border-radius:999px!important;border:1px solid var(--ln2)!important;background:none!important;font-size:14px;font-weight:500;color:var(--t2)!important;white-space:nowrap;transition:.15s;box-shadow:none!important;margin:0}
body.v16s #tta-main .tta-chip:hover{border-color:var(--ac);color:var(--tx)}
body.v16s #tta-main .tta-chip.is-active,body.v16s #tta-main .tta-chip[aria-pressed="true"],body.v16s #tta-main .tta-chip[aria-selected="true"],body.v16s #tta-main .tta-chip.on{background:var(--tx)!important;color:var(--bg)!important;border-color:var(--tx)!important}
body.v16s #tta-main .tta-chip .material-symbols-outlined{font-size:16px}
body.v16s #tta-main :is(div,nav):has(> .tta-chip){display:flex;flex-wrap:wrap;gap:8px;overflow:visible;margin-bottom:16px}

/* ── campos ── */
body.v16s #tta-main .form-control,body.v16s #tta-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),body.v16s #tta-main select,body.v16s #tta-main textarea{width:100%;background:var(--s2);border:1px solid var(--ln2);border-radius:12px;padding:0 14px;height:42px;font:inherit;font-size:14px;color:var(--tx);outline:none;box-shadow:none;transition:border-color .15s}
body.v16s #tta-main textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
body.v16s #tta-main select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
body.v16s #tta-main .form-control:focus,body.v16s #tta-main input:focus,body.v16s #tta-main select:focus,body.v16s #tta-main textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(217,180,74,.15)}
body.v16s #tta-main input::placeholder,body.v16s #tta-main textarea::placeholder{color:var(--t3)}
body.v16s #tta-main input[type=checkbox],body.v16s #tta-main input[type=radio]{accent-color:var(--ac);width:16px;height:16px;margin:0}
body.v16s #tta-main input[type=number]{width:auto;min-width:72px}
body.v16s #tta-main .form-group,body.v16s #tta-main .tta-field{margin-bottom:14px}

/* ── tablas ── */
body.v16s #tta-main table{width:100%;border-collapse:collapse;font-size:14px}
body.v16s #tta-main th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:10px 12px;border-bottom:1px solid var(--ln)}
body.v16s #tta-main td{padding:10px 12px;border-bottom:1px solid var(--ln);vertical-align:middle}
body.v16s #tta-main tr:hover td{background:rgba(255,255,255,.02)}

/* ── etiquetas y estados ── */
body.v16s #tta-main .tta-badge,body.v16s #tta-main .tta-badge-free,body.v16s #tta-main .tp-energy,body.v16s #tta-main .tta-done__next-tag,body.v16s #tta-main .ttl__badge,body.v16s #tta-main .tta-cine__badge,body.v16s #tta-main .tta-lped__badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--ln2);color:var(--t2);background:none}
body.v16s #tta-main .tp-energy--alta{border-color:rgba(248,113,113,.5);color:#f87171}
body.v16s #tta-main .tp-energy--media{border-color:rgba(217,180,74,.5);color:var(--ac2)}
body.v16s #tta-main .tp-energy--baja{border-color:var(--ln2);color:var(--t3)}
body.v16s #tta-main .tta-badge-free{border-color:rgba(74,222,128,.4);color:#4ade80}
body.v16s #tta-main hr{border:0;border-top:1px solid var(--ln);margin:18px 0}

/* ── páginas concretas ── */
/* Tu cuenta: cabecera + pestañas; consola del máster en tarjeta */
body.v16s #tta-main .tta-account-head,body.v16s #tta-main .account-head{margin-bottom:18px}
/* Live (teleprompter): cabecera del día y controles */
body.v16s #tta-main .tp-wrap{max-width:none}
body.v16s #tta-main .tp-daybar,body.v16s #tta-main .tp-ctrl{padding:16px 18px;margin-bottom:12px}
body.v16s #tta-main .tp-block{margin-bottom:10px}
body.v16s #tta-main .tp-block__head{padding:14px 16px}
body.v16s #tta-main .tp-block__title{font-size:14px;font-weight:700;letter-spacing:.02em}
body.v16s #tta-main .tp-seg{display:inline-flex;border:1px solid var(--ln);border-radius:999px;overflow:hidden}
body.v16s #tta-main .tp-seg button,body.v16s #tta-main .tp-seg .btn{height:34px;padding:0 14px;font-size:13px;color:var(--t3);border:0;border-radius:0;background:none;box-shadow:none}
body.v16s #tta-main .tp-seg button.is-on,body.v16s #tta-main .tp-seg .is-on,body.v16s #tta-main .tp-seg button[aria-pressed="true"]{background:var(--s3);color:var(--ac2)}
body.v16s #tta-main .tp-day{font-weight:700;letter-spacing:.02em}
body.v16s #tta-main .tp-emotion{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(217,180,74,.5);color:var(--ac2)}
body.v16s #tta-main .tp-date,body.v16s #tta-main .tp-reason{color:var(--t3)}
/* Página registro (editor): barra superior como tarjeta, marco de vista previa */
body.v16s #tta-main .tta-lped__bar{padding:14px 18px}
body.v16s #tta-main .tta-lped__title{font-size:16px;font-weight:700}
body.v16s #tta-main .tta-lped__sub{color:var(--t3);font-size:13px}
/* Puerta de acceso y contraseña: tarjeta centrada, sin fondo cinematográfico propio */
body.v16s #tta-main .ttl{min-height:auto;padding:40px 0}
body.v16s #tta-main .ttl__bg,body.v16s #tta-main .ttl__veil{display:none}
body.v16s #tta-main .ttl__card{padding:24px;max-width:420px;margin:0 auto}
body.v16s #tta-main .ttl__title{font-size:26px}
body.v16s #tta-main .ttl__sub{color:var(--t2)}
/* Curso completado */
body.v16s #tta-main .tta-done{padding:28px;max-width:720px;margin:0 auto}
body.v16s #tta-main .tta-done__title{font-size:26px;font-weight:700;letter-spacing:-.02em}
/* Gráficos */
body.v16s #tta-main .charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
body.v16s #tta-main .chart-card{padding:14px;overflow:hidden}
body.v16s #tta-main .chart-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700}
/* Directo */
body.v16s #tta-main .tta-player{border-radius:16px;overflow:hidden;border:1px solid var(--ln);box-shadow:var(--sh)}
/* Comunidades (visitante) */
body.v16s #tta-main .tta-discover-hero{padding:28px 0 18px}
body.v16s #tta-main .tta-search{max-width:520px}
body.v16s #tta-main .tta-section-title{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:22px 0 12px}
body.v16s #tta-main .tta-card__title{font-weight:700;font-size:15px}
body.v16s #tta-main .tta-card__meta{color:var(--t3);font-size:13px}
/* Inicio de la Academia (visitante): mismos botones y tarjetas; el resto es tipografía grande a propósito */
body.v16s #tta-main .ttah-section{padding:44px 0}
body.v16s #tta-main .ttah-section-title{font-size:30px;letter-spacing:-.02em}
body.v16s #tta-main .ttah-why__card,body.v16s #tta-main .ttah-step{padding:22px}
body.v16s #tta-main .ttah-step__num{color:var(--ac2)}
/* Legales y errores: columna legible y tarjeta centrada */
body.v16s #tta-main .tta-legal,body.v16s #tta-main .legal,body.v16s #tta-main article{max-width:760px}
body.v16s #tta-main .tta-legal h2,body.v16s #tta-main .legal h2{margin:26px 0 8px}
body.v16s #tta-main .tta-error,body.v16s #tta-main .error-page{max-width:520px;margin:60px auto;text-align:center;padding:32px;background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh)}
body.v16s #tta-main .tta-error .material-symbols-outlined{font-size:40px;color:var(--ac2)}

/* ── nada de fondos propios ni contenedores centrados a lo viejo dentro de la cáscara ── */
body.v16s #tta-main .tta-container,body.v16s #tta-main .container{max-width:none;padding:0}
body.v16s #tta-main .tta-bg,body.v16s #tta-main .tta-stars,body.v16s #tta-main .tta-particles{display:none}

/* ── auditoría 13-sep: sin `transition: all` (solo lo que se anima) y foco visible ── */
body.v16s #tta-main :is(a,button,.btn,.tta-card,.tta-chip,.tta-tab-btn,input,select,textarea,.tta-course-scroll-card,.tta-featured-card){transition-property:color,background-color,border-color,box-shadow,transform,opacity,filter}
body.v16s :where(button,a,[role=button],input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* celular: la barra del editor de la landing y el podio del ranking se apilan en vez de apretarse */
@media(max-width:760px){body.v16s #tta-main .tta-lped__bar{flex-direction:column;align-items:flex-start;gap:10px}body.v16s #tta-main .tta-lped__actions{flex-wrap:wrap}}

/* sin destello: mientras el JS elige la pestaña del hash, la pestaña por defecto no se pinta (la cáscara pone data-tab y lo quita a los 2,5 s por seguridad) */
html[data-tab]:not([data-tab="feed"]) body.v16s #panel-feed,html[data-tab]:not([data-tab="profile"]) body.v16s #tta-main #panel-profile{display:none!important}
html[data-tab] body.v16s .tta-panel.tta-slide-r,html[data-tab] body.v16s .tta-panel.tta-slide-l{animation:none!important}
/* ── Consola del máster («Mi comunidad» en /account): 13-sep, Mathias pidió que las páginas solo del KOL tengan el nivel del resto ── */
body.v16s #tta-main .nav .nv[href="/discover"],body.v16s .nav .nv[data-s="comunidades"]{display:none!important}
body.v16s #panel-community .material-symbols-outlined{display:none!important}
body.v16s #panel-community h3{font-size:17px!important;font-weight:650;letter-spacing:-.01em;margin:0 0 4px!important}
body.v16s #panel-community > div:first-child{margin-bottom:6px}
body.v16s #panel-community #csec-nav{display:inline-flex!important;flex-wrap:wrap;gap:4px!important;padding:4px!important;margin:14px 0 20px!important;max-width:100%;background:var(--s2);border:1px solid var(--ln2);border-radius:12px;overflow:visible!important}
body.v16s #panel-community #csec-nav .tta-chip{height:34px;padding:0 14px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:var(--t2)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important;transition:background .15s,color .15s}
body.v16s #panel-community #csec-nav .tta-chip:hover{color:var(--t1)!important}
body.v16s #panel-community #csec-nav .tta-chip.is-active,body.v16s #panel-community #csec-nav .tta-chip[aria-selected="true"]{background:var(--s1)!important;color:var(--ac)!important;font-weight:600!important;box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px var(--ln2)!important}
body.v16s #panel-community .tta-card{padding:24px 26px!important;border-radius:16px!important;background:linear-gradient(180deg,var(--s2),var(--s1))!important;border:1px solid var(--ln2)!important;box-shadow:var(--sh)!important}
body.v16s #panel-community .tta-card > div[style*="font-size:var(--text-xs)"][style*="font-weight:700"]{font-size:11px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)!important;margin-top:4px}
body.v16s #panel-community .form-control{min-height:40px;padding:9px 12px!important;border-radius:10px!important;font-size:14px!important;background:var(--s1)!important;border:1px solid var(--ln2)!important}
body.v16s #panel-community input.form-control[type=number]{width:84px!important;text-align:center}
body.v16s #panel-community textarea.form-control{min-height:96px;line-height:1.5}
body.v16s #panel-community label{font-size:13px!important;color:var(--t2)}
body.v16s #panel-community .btn{height:36px;padding:0 16px!important;border-radius:999px!important;font-size:13px!important}
body.v16s #panel-community .btn-primary{background:var(--ac)!important;color:#111!important;box-shadow:0 6px 18px rgba(212,175,55,.18)!important}
body.v16s #panel-community .btn-ghost{background:var(--s2)!important;border:1px solid var(--ln2)!important;color:var(--t1)!important}
body.v16s #panel-community [style*="border-top:1px"]{border-top-color:var(--ln2)!important;margin-top:22px!important;padding-top:18px!important}
body.v16s #panel-community a{color:var(--ac2)!important}
@media(max-width:760px){body.v16s #panel-community .tta-card{padding:18px 16px!important}body.v16s #panel-community #csec-nav{display:flex!important;flex-wrap:nowrap;overflow-x:auto!important;-webkit-overflow-scrolling:touch}body.v16s #panel-community #csec-nav .tta-chip{flex:0 0 auto}}