/* ══ tta-v16-rec.css — piezas recuperadas de la Academia clásica dentro del tema v16 (14-sep-2026, Mathias)
   Solo tokens y clases de la demo (tta-demo.css): un acento (--ac), esquinas de la demo, aire. Nada de colores nuevos. ══ */

/* ── compositor con varias líneas y formato ── */
.comp .top .txt{flex:1;min-height:24px;max-height:40dvh;overflow-y:auto;font-size:15px;line-height:1.5;color:var(--tx);outline:0;white-space:pre-wrap;word-break:break-word;padding:4px 0}
.comp .top .txt:empty::before{content:attr(data-ph);color:var(--t3)}
.comp .top .txt img{max-width:100%;border-radius:10px;display:block;margin:6px 0}
.comp .top .txt a{color:var(--ac2);text-decoration:underline}
.comp .top .txt code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--s2);padding:1px 5px;border-radius:6px}
.comp .top .txt ul,.comp .top .txt ol{padding-left:22px;margin:4px 0}
.comp .top .txt hr{border:0;border-top:1px solid var(--ln);margin:8px 0}
.comp .fmt{display:none;gap:2px;margin:6px 0 0 52px;flex-wrap:wrap}
.comp.on .fmt{display:flex}
.comp .fmt button{height:30px;min-width:30px;padding:0 8px;border-radius:8px;font-size:13px;color:var(--t3);border:1px solid transparent}
.comp .fmt button:hover{color:var(--tx);border-color:var(--ln2);background:var(--s2)}
.comp .fmt button b{font-weight:800}.comp .fmt button i{font-style:italic}
.comp .fmt .sp{flex:1}
.comp .lp{display:none;gap:12px;align-items:center;margin:10px 0 0 52px;padding:10px 12px;border:1px solid var(--ln);border-radius:12px;background:var(--s1)}
.comp .lp.on{display:flex}
.comp .lp img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.comp .lp b{display:block;font-size:14px;line-height:1.3}
.comp .lp span{display:block;font-size:12px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp .lp .x{margin-left:auto;color:var(--t3);cursor:pointer;padding:6px}
.comp .men{position:absolute;z-index:30;min-width:220px;max-height:220px;overflow-y:auto;background:var(--s1);border:1px solid var(--ln2);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px}
.comp .men div{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;font-size:13px;cursor:pointer}
.comp .men div.on,.comp .men div:hover{background:var(--s2);color:var(--tx)}
.comp .men .av{width:26px;height:26px;font-size:10px}
.comp .gif{margin:10px 0 0 52px;padding:12px;border:1px solid var(--ln);border-radius:14px;background:var(--s1)}
.comp .gif input{width:100%;margin-bottom:10px}
.comp .gif .g{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:260px;overflow-y:auto}
.comp .gif .g img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--s2)}
.comp .gif .g p{grid-column:1/-1}
.comp .prog,.comp .dif{margin:10px 0 0 52px;padding:12px 14px;border:1px solid var(--ln);border-radius:14px;background:var(--s1);font-size:13px;color:var(--t2)}
.comp .prog{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.comp .prog input[type=datetime-local]{background:var(--s2);border:1px solid var(--ln);border-radius:10px;padding:8px 10px;color:var(--tx);font-size:14px}
.comp .dif .r{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.comp .dif label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.comp .dif input[type=checkbox],.comp .dif input[type=radio]{accent-color:var(--ac)}
.comp .dif input[type=text]{flex:1;min-width:180px;background:var(--s2);border:1px solid var(--ln);border-radius:10px;padding:8px 10px;color:var(--tx);font-size:13px}
.comp .tool.on{color:var(--tx);border-color:var(--ac);background:rgba(217,180,74,.08)}
@media(max-width:760px){.comp .fmt,.comp .lp,.comp .gif,.comp .prog,.comp .dif{margin-left:0}}

/* ── ideas de qué publicar (máster) ── */
.ideas{display:flex;gap:8px;align-items:center;padding:10px 14px;margin:0 0 12px;border:1px solid var(--ln);border-radius:14px;background:var(--s1);font-size:13px;color:var(--t2)}
.ideas .i{color:var(--ac);flex:0 0 auto}
.ideas .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ideas .b{flex:0 0 auto}
.ideas .caja{display:flex;gap:6px;width:100%;margin-top:8px}
.ideas .caja input{flex:1;background:var(--s2);border:1px solid var(--ln);border-radius:10px;padding:8px 10px;color:var(--tx);font-size:13px}
@media(max-width:760px){.ideas{flex-wrap:wrap}.ideas .t{white-space:normal;flex-basis:100%}}

/* ── Radar Crypto: tema del día con voto ── */
.radar{display:flex;gap:12px;align-items:center;padding:12px 14px;margin:0 0 12px;border:1px solid var(--ln);border-radius:14px;background:linear-gradient(90deg,rgba(217,180,74,.09),transparent 60%),var(--s1)}
.radar .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--s2);color:var(--ac);flex:0 0 auto}
.radar .tx{flex:1;min-width:0}
.radar .tx .cap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:2px}
.radar .tx p{font-size:14px;line-height:1.4;color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.radar .vt{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.radar .vt button{height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--ln);font-size:12px;color:var(--t2);display:inline-flex;gap:4px;align-items:center}
.radar .vt button:hover{border-color:var(--ln2);color:var(--tx)}
.radar .vt button.toro{color:var(--up)}.radar .vt button.oso{color:var(--dn)}
.radar .vt button.on{border-color:var(--ac);background:rgba(217,180,74,.1)}
.radar .nx{color:var(--t3);cursor:pointer;padding:6px;flex:0 0 auto}
.radar .bar{display:flex;gap:10px;font-size:12px;color:var(--t3);margin-top:4px}
.radar .bar b{color:var(--tx);font-weight:600}
@media(max-width:760px){.radar{flex-wrap:wrap}.radar .vt{flex-basis:100%;justify-content:flex-start}}

/* ── chips de categoría y modo (Esta comunidad · Toda mi red) ── */
.chips2{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;margin-bottom:2px}
.chips2::-webkit-scrollbar{display:none}
.chips2 .chip{flex:0 0 auto}
.chips2 .chip.lk{opacity:.5;cursor:not-allowed}
.chips2 .chip .n{display:inline-block;min-width:16px;padding:0 5px;margin-left:5px;border-radius:999px;background:var(--ac);color:#111;font-size:11px;font-weight:700;line-height:16px;text-align:center}
.chips2 .sep{width:1px;background:var(--ln);margin:6px 4px;flex:0 0 auto}

/* ── encuestas con postura ── */
.opt button.toro{border-color:rgba(52,211,153,.5)}.opt button.toro span:first-child{color:var(--up)}
.opt button.oso{border-color:rgba(251,113,133,.5)}.opt button.oso span:first-child{color:var(--dn)}
.opt button.neutral{border-color:rgba(217,180,74,.5)}.opt button.neutral span:first-child{color:var(--ac2)}

/* ── reacciones: selector y resumen ── */
.post .acts{position:relative}
.rxp{position:absolute;left:0;bottom:calc(100% + 6px);z-index:20;display:none;gap:2px;padding:6px;border-radius:999px;background:var(--s1);border:1px solid var(--ln2);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.rxp.on{display:flex;animation:ap .18s var(--ease)}
.rxp button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--t2);transition:transform .15s var(--ease),background .15s}
.rxp button:hover{transform:scale(1.25);background:var(--s2);color:var(--tx)}
.rxp button.on{color:var(--ac)}
.rxp .material-symbols-outlined{font-size:20px}
.rxs{display:flex;gap:4px;align-items:center;font-size:12px;color:var(--t3);margin:0 0 8px 2px}
.rxs .material-symbols-outlined{font-size:15px;color:var(--t2)}
.rxs.mio .material-symbols-outlined:first-child{color:var(--ac)}

/* ── comentarios: hilo, acciones, reacciones ── */
.thread .c{position:relative}
.thread .c.hijo{margin-left:34px}
.thread .c .who{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.thread .c .when{font-size:11px;color:var(--t3);font-weight:400}
.thread .c .ops{display:none;gap:2px;margin-left:auto}
.thread .c:hover .ops,.thread .c:focus-within .ops{display:inline-flex}
@media(hover:none){.thread .c .ops{display:inline-flex}}
.thread .c .ops button{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--t3)}
.thread .c .ops button:hover{background:var(--s2);color:var(--tx)}
.thread .c .ops .material-symbols-outlined{font-size:16px}
.thread .c .ops button.on{color:var(--ac)}
.thread .c .rx{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.thread .c .rx button{height:24px;padding:0 8px;border-radius:999px;border:1px solid var(--ln);font-size:12px;color:var(--t3);display:inline-flex;gap:4px;align-items:center}
.thread .c .rx button.on{border-color:var(--ac);color:var(--ac)}
.thread .c .rx .material-symbols-outlined{font-size:14px}
.thread .c.dest{padding:8px 10px;border-radius:12px;background:rgba(217,180,74,.06);border:1px solid rgba(217,180,74,.28)}
.thread .c .ed{display:flex;gap:6px;width:100%}
.thread .c .ed input{flex:1;background:var(--s2);border:1px solid var(--ln);border-radius:10px;padding:6px 10px;color:var(--tx);font-size:13px}
.thread .re{font-size:12px;color:var(--t3);margin:-6px 0 8px 34px;display:flex;gap:8px;align-items:center}
.thread .re b{color:var(--tx);font-weight:600}
.thread .re .x{cursor:pointer}
.thread .in textarea{flex:1;min-height:38px;max-height:120px;resize:none;background:var(--s2);border:1px solid var(--ln);border-radius:12px;padding:9px 12px;color:var(--tx);font-size:14px;line-height:1.4;outline:0}

/* ── editar publicación en sitio ── */
.post .edit{margin:4px 0 10px}
.post .edit textarea{width:100%;min-height:90px;background:var(--s2);border:1px solid var(--ln);border-radius:12px;padding:10px 12px;color:var(--tx);font-size:15px;line-height:1.5;resize:vertical}
.post .edit .acts2{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.post .act.rp.on{color:var(--ac)}

/* ── misiones y racha de visitas (carril) ── */
.qst{display:flex;flex-direction:column;gap:10px}
.qst div.q{padding:10px 12px;border:1px solid var(--ln);border-radius:12px;background:var(--s2)}
.qst .q b{display:block;font-size:13px}
.qst .q span{display:block;font-size:12px;color:var(--t3);margin-top:2px}
.qst .q .bar{height:4px;border-radius:99px;background:var(--s3);margin-top:8px;overflow:hidden}
.qst .q .bar i{display:block;height:100%;background:var(--ac);width:var(--w,0)}
.qst .q.ok{opacity:.6}
.visita{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--t2)}
.visita b{color:var(--tx)}
.visita .material-symbols-outlined{font-size:15px;color:var(--ac)}

/* ── tour de bienvenida ── */
.tour-ov{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.58);backdrop-filter:blur(2px)}
.tour-tip{position:fixed;z-index:302;width:min(340px,calc(100vw - 32px));padding:18px 18px 14px;border-radius:16px;background:var(--s1);border:1px solid var(--ln2);box-shadow:0 30px 70px rgba(0,0,0,.55);animation:ap .2s var(--ease)}
.tour-tip .n{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ac);font-weight:700}
.tour-tip b{display:block;font-size:17px;margin:6px 0 4px}
.tour-tip p{font-size:14px;line-height:1.5;color:var(--t2)}
.tour-tip .bt{display:flex;gap:8px;align-items:center;margin-top:14px}
.tour-tip .bt .sk{color:var(--t3);cursor:pointer;font-size:13px;margin-right:auto}
.tour-ring{position:relative;z-index:301!important;box-shadow:0 0 0 3px var(--ac),0 0 0 8px rgba(217,180,74,.25)!important;border-radius:12px;background:var(--bg)!important}

/* ── hojas con formularios (diario completo, evento, miembro, categorías, candados) ── */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;margin-bottom:10px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--t3)}
.form label.w{grid-column:1/-1}
.form input,.form select,.form textarea{background:var(--s2);border:1px solid var(--ln);border-radius:10px;padding:9px 11px;color:var(--tx);font-size:14px;outline:0;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ln2)}
.form textarea{min-height:70px;resize:vertical}
.form input.leido{border-color:var(--ac);background:rgba(217,180,74,.07)}
.form .calc{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--t3);padding:8px 10px;border-radius:10px;background:var(--s2)}
.form .calc b{color:var(--tx);font-weight:600}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills button{height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--ln);font-size:12px;color:var(--t2)}
.pills button.on{border-color:var(--ac);background:rgba(217,180,74,.1);color:var(--tx)}
.pills button.dn.on{border-color:var(--dn);color:var(--dn);background:rgba(251,113,133,.08)}
.drop{grid-column:1/-1;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px dashed var(--ln2);border-radius:12px;font-size:13px;color:var(--t2);cursor:pointer}
.drop:hover{border-color:var(--ac)}
.drop img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.drop .material-symbols-outlined{color:var(--ac)}
.sheet .h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin:14px 0 8px;font-weight:700}
.sheet .fila2{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--ln);font-size:13px}
.sheet .fila2 span{color:var(--t3)}
.sheet .fila2 b{font-weight:600;text-align:right}
.sheet .acts3{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.sheet .row2{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ln)}
.sheet .row2 .tx{flex:1;min-width:0}
.sheet .row2 b{display:block;font-size:14px}
.sheet .row2 span{display:block;font-size:12px;color:var(--t3)}
.sheet .row2 .x{color:var(--t3);cursor:pointer;padding:6px}
.sheet .row2 .x:hover{color:var(--dn)}
.aviso{padding:10px 12px;border-radius:12px;background:rgba(217,180,74,.08);border:1px solid rgba(217,180,74,.25);font-size:13px;color:var(--t2);margin-bottom:10px}
.aviso.ko{background:rgba(251,113,133,.08);border-color:rgba(251,113,133,.3)}

/* ── miembros: buscador, orden y pestañas del máster ── */
.mbar2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mbar2 .search{flex:1;min-width:180px;height:40px}
.mbar2 select{height:40px;background:var(--s1);border:1px solid var(--ln);border-radius:999px;padding:0 12px;color:var(--t2);font-size:13px}
.mtabs{display:flex;gap:4px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.mtabs button{height:34px;padding:0 12px;border-radius:999px;font-size:13px;color:var(--t3);border:1px solid transparent;white-space:nowrap}
.mtabs button.on{color:var(--tx);border-color:var(--ln2);background:var(--s2)}
.mtabs button i{font-style:normal;color:var(--t3);margin-left:4px}
.est{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid}
.est.active{color:var(--up);border-color:rgba(52,211,153,.4)}
.est.cancelling{color:var(--ac2);border-color:rgba(217,180,74,.4)}
.est.churned{color:var(--t3);border-color:var(--ln2)}
.est.banned{color:var(--dn);border-color:rgba(251,113,133,.4)}
.inv{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--ln);border-radius:14px;background:var(--s1);margin-bottom:14px;flex-wrap:wrap}
.inv .tx{flex:1;min-width:200px}
.inv b{display:block;font-size:14px}
.inv span{display:block;font-size:12px;color:var(--t3);margin-top:2px}
.inv .n{display:flex;gap:14px;font-size:12px;color:var(--t3)}
.inv .n b{display:inline;font-size:14px;color:var(--tx);margin-right:3px}

/* ── acerca de la comunidad ── */
.about{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about .card{display:block;padding:16px 18px;cursor:default}
.about .card:hover{transform:none}
.about h3{font-size:14px;font-weight:700;margin-bottom:10px}
.about p{font-size:14px;line-height:1.6;color:var(--t2);white-space:pre-wrap}
.about .rl{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--ln);font-size:13px}
.about .rl i{font-style:normal;color:var(--ac);font-weight:700;min-width:20px}
.about .rl b{display:block;font-size:13px}
.about .rl span{display:block;font-size:12px;color:var(--t3);margin-top:2px}
.about .lk{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--ln);border-radius:12px;margin-bottom:8px;font-size:13px;color:var(--tx);text-decoration:none}
.about .lk:hover{border-color:var(--ln2)}
.about .lk .material-symbols-outlined{font-size:18px;color:var(--ac)}
.about .st4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.about .st4 div{text-align:center}
.about .st4 b{display:block;font-size:18px;color:var(--ac)}
.about .st4 span{font-size:11px;color:var(--t3)}
.about .eq{display:flex;gap:10px;align-items:center;padding:10px 0}
.about .eq b{display:block;font-size:13px}
.about .eq span{display:block;font-size:12px;color:var(--ac)}
.about .sub{margin-top:12px;padding:14px;border-radius:12px;background:rgba(217,180,74,.06);border:1px solid rgba(217,180,74,.2)}
.about .sub b{display:block;font-size:15px;margin-bottom:4px}
.about .sub p{font-size:13px;margin-bottom:10px}

/* ── ranking: periodos y desglose ── */
.per{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.lbm{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:13px}
.lbm div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--ln)}
.lbm div span{color:var(--t3)}
.lbm div b{font-weight:600}

/* ── calendario: eventos del máster y publicaciones programadas ── */
.list .card .own2{display:flex;gap:4px;margin-left:8px}
.list .card .own2 button{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--t3)}
.list .card .own2 button:hover{background:var(--s2);color:var(--tx)}
.list .card .own2 .material-symbols-outlined{font-size:16px}
.cal-acts{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}

/* ── tarjeta compartible del diario ── */
.tarj{display:flex;flex-direction:column;gap:10px;align-items:center}
.tarj canvas{max-width:100%;border-radius:14px;border:1px solid var(--ln)}

/* ── módulos del aula: mover ── */
.nrow .hd .mv{display:inline-flex;gap:2px;margin-left:6px}
.nrow .hd .mv button{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--t3)}
.nrow .hd .mv button:hover{background:var(--s2);color:var(--tx)}
body:not(.edit) .nrow .hd .mv{display:none}

/* ── botón salir y avisos de lives en el menú ── */
.nav .salir{margin-top:auto}
.nav .nv.lv-on{color:var(--ac)}

/* ── material symbols dentro de la demo: tamaño y alineación ── */
.material-symbols-outlined{font-size:18px;line-height:1;vertical-align:-3px;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20}
.material-symbols-outlined.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}

/* Dentro de una lección (body.aula) la demo esconde el grupo «Más» del menú (.mas.red): el botón quedaba muerto.
   Abierto, se muestra igual: desde la lección se llega a Ranking, Miembros, Perfil y Suscripciones. */
body.aula .nav .mas.red.on{display:flex}

/* Hoja de pago cripto: sin menú lateral, cabecera móvil ni barra inferior mientras se paga (la clásica las escondía) */
body.tta-pagar-cripto .app{display:block!important;grid-template-columns:none!important;padding:0!important;max-width:none!important;width:100%!important}
body.tta-pagar-cripto .app>.mtop,body.tta-pagar-cripto .app>nav.nav,body.tta-pagar-cripto nav.mbar,body.tta-pagar-cripto .rail{display:none!important}
body.tta-pagar-cripto .main{max-width:none!important;width:100%!important;border:0!important;padding:0!important}
body.tta-pagar-cripto .tta-main,body.tta-pagar-cripto #tta-main{padding:0!important;max-width:none!important;width:100%!important}
body.tta-pagar-cripto .btn,body.tta-pagar-cripto .btn-primary,body.tta-pagar-cripto .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid var(--ln);background:var(--s2);color:var(--tx);font-weight:600;cursor:pointer;text-decoration:none}
body.tta-pagar-cripto .btn-primary{background:var(--ac);color:#111;border-color:transparent}

.lc .t .mv-les{display:none;gap:4px;margin-left:auto}
body.edit .lc .t .mv-les{display:inline-flex}
.lc .t .mv-les button{width:22px;height:22px;border-radius:6px;background:var(--s2);color:var(--t2);border:none;font-size:12px;cursor:pointer;display:grid;place-items:center}
.lc .t .mv-les button:hover{background:var(--tx);color:#000}

/* ── postura de mercado (composer + badge) ── */
.badge-postura{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;margin-bottom:6px}
.badge-postura.toro{background:rgba(52,211,153,.12);color:var(--up,#34d399);border:1px solid rgba(52,211,153,.3)}
.badge-postura.oso{background:rgba(251,113,133,.12);color:var(--dn,#fb7185);border:1px solid rgba(251,113,133,.3)}
.badge-postura.neutral{background:rgba(217,180,74,.12);color:var(--ac2,#d9b44a);border:1px solid rgba(217,180,74,.3)}
.comp-postura{display:flex;gap:6px;align-items:center;padding:8px 12px;border-top:1px solid var(--ln);background:var(--s1);border-radius:10px;margin-top:6px}
.comp-postura span{font-size:12px;color:var(--t3);margin-right:4px}
.comp-postura button{padding:4px 10px;border-radius:999px;border:1px solid var(--ln);background:var(--bg);color:var(--t2);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s}
.comp-postura button.on{font-weight:600}
.comp-postura button.toro.on{border-color:var(--up,#34d399);color:var(--up,#34d399);background:rgba(52,211,153,.1)}
.comp-postura button.oso.on{border-color:var(--dn,#fb7185);color:var(--dn,#fb7185);background:rgba(251,113,133,.1)}
.comp-postura button.neutral.on{border-color:var(--ac2,#d9b44a);color:var(--ac2,#d9b44a);background:rgba(217,180,74,.1)}

/* ── selector de reacciones en comentarios ── */
.rxp-c{bottom:calc(100% + 4px);left:0;padding:4px;gap:2px}
.rxp-c button{width:28px;height:28px}
.thread .c .rx .act-emoji{border:none;background:transparent;color:var(--t3);cursor:pointer;padding:0 4px;font-size:14px;display:inline-grid;place-items:center}
.thread .c .rx .act-emoji:hover{color:var(--tx)}

/* ════════════════════════ FOOTER INSTITUCIONAL V16 ════════════════════════ */
.v16-footer {
  padding: 36px 20px 48px;
  margin-top: 48px;
  border-top: 1px solid var(--borde, rgba(255,255,255,.08));
  color: var(--t3, rgba(255,255,255,.5));
  font-size: 13px;
}
.v16-footer__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.v16-footer__brand {
  font-weight: 500;
  color: var(--t2, rgba(255,255,255,.7));
}
.v16-footer__links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.v16-footer__links a {
  color: var(--t3, rgba(255,255,255,.5));
  text-decoration: none;
  transition: color .15s ease;
}
.v16-footer__links a:hover {
  color: var(--ac2, #D4AF37);
}
.v16-footer__kol {
  color: var(--ac2, #D4AF37) !important;
  font-weight: 600;
}

/* ════════════════════════ PERFILES X-STYLE & BADGES ════════════════════════ */
.chip-legendary {
  background: rgba(212,175,55,.16) !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  color: #f5d77f !important;
  box-shadow: 0 0 10px rgba(212,175,55,.15);
}
.chip-epic {
  background: rgba(168,120,255,.14) !important;
  border: 1px solid rgba(168,120,255,.4) !important;
  color: #d8b4fe !important;
}
.chip-rare {
  background: rgba(80,160,255,.14) !important;
  border: 1px solid rgba(80,160,255,.4) !important;
  color: #93c5fd !important;
}
.chip-common {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--t2, rgba(255,255,255,.7)) !important;
}
.mp-goal-card {
  margin: 10px 0;
  padding: 9px 12px;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-cover {
  height: 110px;
  background-size: cover;
  background-position: center;
  border-radius: 14px 14px 0 0;
  margin: -16px -16px 14px;
  position: relative;
}

/* ════════════════════════ DMs CON ADJUNTOS ════════════════════════ */
.dm-adj-btn:hover {
  border-color: var(--ac2, #D4AF37) !important;
  color: var(--ac2, #D4AF37) !important;
}
.dm-adj-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 8px;
  font-size: 12px;
}

/* Enlaces legales (23-sep): Google y Meta exigen Privacidad visible; el pie anterior vivia dentro de
   <main> y descuadraba la leccion. Aqui van al pie del menu lateral y al final de la hoja «Más». */
.nav .legal,.legal-hoja{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 12px 2px;font-size:11.5px;line-height:1.4}
.nav .legal a,.legal-hoja a{color:var(--t3,#8b8b96);text-decoration:none;transition:color .15s}
.nav .legal a:hover,.legal-hoja a:hover{color:var(--t2,#c4c4cc)}
.legal-hoja{justify-content:center;padding:14px 8px 4px;border-top:1px solid rgba(255,255,255,.06);margin-top:10px}
.nav.ttaplg .legal{display:none}

/* Menú en tablet (761-1180 px, 23-sep): la columna de 76 px venía de la demo y no conocía la barra
   nueva: el buscador y «MÁSTER» se salían, el icono de Máster quedaba descuadrado, el avatar se
   ocultaba (el perfil era un botón invisible) y los legales desbordaban. Mismo trato que el modo
   contraído de escritorio, pero «Todo lo demás» se despliega como iconos: en tablet no hay ⌘K. */
@media (min-width:761px) and (max-width:1180px){
  body .nav .buscar span,body .nav .buscar .kk,body .nav .mcap,body .nav .nv .fl,body .nav .plegar{display:none!important}
  body .nav .logo{flex-direction:column;gap:4px;justify-content:center;padding-left:0;padding-right:0}
  body .nav .logo .camp{margin:0}
  body .nav .buscar,body .nav .me,body .nav .nv,body .nav .grupo .nv,body .nav .mgrp .nv{justify-content:center!important;padding-left:0!important;padding-right:0!important;width:100%;min-width:0}
  body .nav .me{display:flex!important;margin-top:auto}
  body .nav .me .av{display:flex!important;align-items:center;justify-content:center}
  body .nav .grupo.ab{max-height:none}
  body .nav .sepb{margin:10px 6px}
  body .nav .legal{flex-direction:column;align-items:center;gap:6px;padding:10px 2px 4px;font-size:10px;text-align:center}
}

/* «Todo lo demás» plegado (23-sep): max-height:0 lo ocultaba a la vista pero sus nueve entradas
   seguían en el recorrido del teclado. visibility:hidden las saca de ahí; al abrir vuelven al instante. */
.nav .grupo:not(.ab) .nv{visibility:hidden}
.nav .grupo.ab .nv{visibility:visible}

/* Marca de agua del directo (23-sep): el estilo vivia en tta-one.css, que la cascara v16 no carga,
   asi que el texto con el correo quedaba sin posicion ni legibilidad. */
:has(> .tta-player__watermark){position:relative}
.tta-player__watermark{position:absolute;bottom:8%;right:5%;z-index:5;color:rgba(255,255,255,.28);font:500 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;pointer-events:none;user-select:none;text-shadow:0 0 4px rgba(0,0,0,.9);white-space:nowrap;transition:all 1.2s cubic-bezier(.2,.8,.2,1)}

/* Responder a un comentario con boton (en celular Enter no siempre esta a mano) */
.thread .in{display:flex;gap:8px;align-items:center}
.thread .in input{flex:1;min-width:0}
.thread .in .env{flex:none;border:0;border-radius:10px;padding:8px 14px;font:600 13px/1 inherit;background:var(--ac,#D4AF37);color:#14120a;cursor:pointer;transition:filter .15s}
.thread .in .env:hover{filter:brightness(1.06)}

/* Hoja de cobro cripto: la accion principal se distingue de la secundaria */
body.tta-pagar-cripto .btn.p{background:var(--ac,#D4AF37);color:#14120a;border-color:transparent}