/* ══════════════════════════════════════════════════════════════════════════
   PARIDAD con la Academia antigua, con la piel nueva   (23-sep-2026, Mathias)
   «El objetivo era cambiar la apariencia manteniendo todos los botones y
   todas las funciones.» Aquí va el aspecto nuevo de lo que se recupera de la
   antigua. Liviano: solo CSS, sin librerías (Chrome 70 / Safari 12).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · reacciones (mismo módulo que la antigua: tta-reactions.js) ── */
.acts-rx{position:relative}
.tta-react-group,.tta-react-btn,.tta-react-picker,.tta-react-opt{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tta-react-group{position:relative;display:inline-flex;align-items:center}
.tta-react-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;background:transparent;
  border:1px solid transparent;color:var(--v16-t3,#767D88);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.tta-react-btn:hover{background:var(--v16-e2,#171A20);color:var(--v16-t1,#F2F4F7)}
.tta-react-btn.is-active{color:var(--v16-oro,#D9B44A);border-color:rgba(217,180,74,.35);background:rgba(217,180,74,.06)}
.tta-react-btn .material-symbols-outlined{font-size:19px}
.tta-react-btn.is-active .material-symbols-outlined{font-variation-settings:'FILL' 1}
.tta-react-btn__n{font-variant-numeric:tabular-nums}
.tta-react-picker{position:absolute;bottom:calc(100% + 10px);left:0;z-index:60;display:none;gap:2px;padding:6px 8px;
  background:#1B1E25;border:1px solid var(--v16-ln2,rgba(255,255,255,.13));border-radius:999px;box-shadow:0 16px 40px -12px rgba(0,0,0,.85)}
.tta-react-group.is-open .tta-react-picker{display:flex;animation:v16RxPop .16s cubic-bezier(.16,1,.3,1) both}
@keyframes v16RxPop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
.tta-react-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;
  border-radius:50%;background:transparent;cursor:pointer;color:var(--v16-t2,#A9B0BA);transition:transform .12s,background .12s,color .12s}
.tta-react-opt .material-symbols-outlined{font-size:24px}
.tta-react-opt:hover{transform:translateY(-5px) scale(1.18);color:var(--v16-t1,#F2F4F7)}
.tta-react-opt.is-active{background:rgba(217,180,74,.16);color:var(--v16-oro,#D9B44A)}
.tta-react-opt__g{line-height:1;pointer-events:none}
.tta-react-opt__l{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:999px;
  background:#0E1014;border:1px solid var(--v16-ln2,rgba(255,255,255,.13));font-size:11.5px;font-weight:600;white-space:nowrap;
  color:var(--v16-t2,#A9B0BA);opacity:0;pointer-events:none;transition:opacity .12s}
.tta-react-opt:hover .tta-react-opt__l,.tta-react-opt:focus-visible .tta-react-opt__l{opacity:1}
/* comentario: botón chico y resumen pegado */
.tta-comment-reactions{display:flex;align-items:center;gap:6px;margin-top:6px;position:relative}
.tta-react-btn--sm{padding:3px 7px;font-size:12px;opacity:.6}
.tta-react-btn--sm:hover,.tta-react-btn--sm.is-active{opacity:1}
.tta-react-btn--sm .material-symbols-outlined{font-size:15px}
.tta-react-group--sm .tta-react-opt{width:32px;height:32px}
.tta-react-group--sm .tta-react-opt .material-symbols-outlined{font-size:19px}
.tta-react-summary{display:inline-flex;align-items:center;color:var(--v16-t3,#767D88);font-size:12px}
.tta-react-summary--sm{gap:1px;padding:2px 8px 2px 6px;border-radius:999px;background:var(--v16-e2,#171A20);border:1px solid var(--v16-ln1,rgba(255,255,255,.07))}
.tta-react-summary--sm b{margin-left:4px;font-weight:600}
.tta-react-summary .material-symbols-outlined{font-variation-settings:'FILL' 1}
/* celular: las nueve caben en horizontal, ancladas a la fila y no al botón */
@media(max-width:480px){
  .acts-rx>.tta-react-group,.tta-comment-reactions>.tta-react-group{position:static}
  .tta-react-picker{left:0;right:0;margin-left:auto;margin-right:auto;width:max-content;max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center;border-radius:22px;padding:5px;gap:0}
  .tta-react-opt{width:34px;height:34px}
  .tta-react-opt .material-symbols-outlined{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.tta-react-group.is-open .tta-react-picker{animation:none}.tta-react-opt:hover{transform:none}}
/* «Guardar» nunca se veía: .sv es también el visor de videos a pantalla
   completa (position:fixed; display:none) y le ganaba al botón. */
.acts .act.sv{position:static;display:inline-flex;top:auto;right:auto;bottom:auto;left:auto;z-index:auto;background:none;margin-left:0}
/* pie repartido como en la antigua: reacción a la izquierda, compartir a la derecha */
.acts.acts-rx{display:flex;align-items:center;justify-content:space-between}

/* ── 3 · compositor limpio (Mathias: «todo lo de adjuntar dentro de un +, y
   negrita y similares solo mientras escribes») ── */
.comp .tools .tool{display:none}
.comp.v16p-adj .tools .tool,.comp .tools .tool.on,.comp .tools .tool.v16p-fijo{display:inline-flex}
.comp .tools .v16p-mas{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--v16-ln2,rgba(255,255,255,.13));background:var(--v16-e2,#171A20);color:var(--v16-t1,#F2F4F7);
  cursor:pointer;flex:0 0 auto;transition:transform .2s cubic-bezier(.16,1,.3,1),background .15s,border-color .15s}
.comp .tools .v16p-mas:hover{background:var(--v16-e3,#1F232A);border-color:rgba(217,180,74,.45)}
.comp.v16p-adj .tools .v16p-mas{transform:rotate(45deg);border-color:rgba(217,180,74,.55)}
.comp .tools .v16p-mas svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.comp .tools>.b.p{margin-left:auto}
.comp.on:not(.v16p-escribe) .fmt{display:none!important}
@media(prefers-reduced-motion:reduce){.comp .tools .v16p-mas{transition:none}}

/* ── 2 y 4 · reglas y legales: solo al final del perfil, discretos ── */
body.v16s #panel-members .mem-reglas{display:none!important}
.v16p-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:28px 0 8px;padding:16px 4px 0;
  border-top:1px solid var(--v16-ln1,rgba(255,255,255,.07));font-size:12.5px}
.v16p-pie .v16p-reglas{background:none;border:0;padding:6px 0;color:var(--v16-t2,#A9B0BA);font:inherit;font-weight:600;cursor:pointer}
.v16p-pie .v16p-reglas:hover{color:var(--v16-t1,#F2F4F7);text-decoration:underline;text-underline-offset:3px}
.v16p-pie nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.v16p-pie nav a{color:var(--v16-t3,#767D88);text-decoration:none}
.v16p-pie nav a:hover{color:var(--v16-t2,#A9B0BA);text-decoration:underline;text-underline-offset:3px}
.v16p-rl{margin:4px 0 0;padding:0;list-style:none;counter-reset:r}
.v16p-rl li{counter-increment:r;position:relative;padding:12px 0 12px 34px;border-top:1px solid var(--v16-ln1,rgba(255,255,255,.07))}
.v16p-rl li:first-child{border-top:0}
.v16p-rl li:before{content:counter(r) ".";position:absolute;left:4px;top:12px;font-weight:700;color:var(--v16-oro,#D9B44A)}
.v16p-rl b{display:block;font-size:14.5px;color:var(--v16-t1,#F2F4F7)}
.v16p-rl span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--v16-t2,#A9B0BA)}
.v16p-sub{margin:16px 2px 8px;font-weight:600}
.v16p-lk{display:block;padding:10px 12px;margin-bottom:6px;border-radius:10px;background:var(--v16-e2,#171A20);color:var(--v16-t1,#F2F4F7);text-decoration:none}

/* ── 9 y 10 · la columna derecha de la nueva (Hoy, En vivo, Rachas, Mercado,
   Panel del máster) caía DEBAJO del menú en Señales, Diario, Ranking,
   Calendario y Miembros: esas pantallas son de dos columnas y la tercera se
   iba a una fila nueva. La antigua no la tenía ahí. ── */
body.v16s .app > aside.rail{display:none!important}
/* Ranking: los «Puesto libre» se salían por la derecha. «1fr 1fr» no deja
   encoger una columna por debajo de su texto más largo; minmax(0,1fr) sí. */
@media(min-width:761px){body.v16s .lb-v2 .lb-rest{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.v16s .lb-v2 .lb-rest .tta-lb-trow{min-width:0}

/* ── 7 · dueño/máster: sin lo que es del alumno ── */
body.v16p-master #lb-me-card > .lb-left{display:none!important}
body.v16p-master #lb-me-card > .lb-right{flex:1 1 auto;max-width:none;border-left:0;padding-left:0}
body.v16p-master #welcome{display:none!important}

/* ── racha de visitas en el menú (la tenía la antigua) ── */
.nav .v16p-racha{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:10px 11px 4px;padding:5px 12px;border-radius:999px;
  background:rgba(217,180,74,.10);border:1px solid rgba(217,180,74,.30);color:var(--v16-oro,#D9B44A);font-weight:700;font-size:12.5px;cursor:default}
.nav .v16p-racha svg{width:15px;height:15px;fill:currentColor;stroke:none;flex:0 0 auto}
.nav.ttaplg .v16p-racha{align-self:center;margin:10px auto 4px;padding:6px}
.nav.ttaplg .v16p-racha span{display:none}
@media(max-width:1180px){.nav .v16p-racha span{display:none}.nav .v16p-racha{align-self:center;padding:6px;margin:10px auto 4px}}
/* «Avisarme de los lives» dentro de «En vivo ahora» */
.v16p-avl{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--v16-ln2,rgba(255,255,255,.13));background:transparent;color:var(--v16-t2,#A9B0BA);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.v16p-avl:hover{color:var(--v16-t1,#F2F4F7);border-color:rgba(217,180,74,.45)}
.v16p-avl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* En celular, tta-one.css fuerza «display:inline-flex !important» en .btn,
   .btn-sm, chips y reacciones para igualar alturas. Eso también DESOCULTABA
   los botones que el código esconde con style="display:none": al alumno le
   salía «Crear evento» del máster en el Calendario (ya pasaba en la antigua).
   Lo oculto se queda oculto. */
.btn[style*="display:none"],.btn[style*="display: none"],.btn[hidden],
.tta-chip[style*="display:none"],.tta-chip[style*="display: none"],.tta-chip[hidden],
.tta-react-btn[style*="display:none"],.tta-react-btn[hidden],
.tta-post__action[style*="display:none"],.tta-post__action[hidden],
.tta-post__tallyc[style*="display:none"],.tta-post__tallyc[hidden]{display:none!important}
/* detalle de una señal: dos columnas también en la hoja del celular */
.sn-det{display:grid!important;grid-template-columns:1fr 1fr!important}
.sn-det>div{display:block!important;min-width:0}
#panel-senales .sn-op:hover{background:rgba(255,255,255,.025)}

/* ── 23-sep · Comunidad más limpia (Mathias) ── */
/* Radar + ideas del máster: una sola tarjeta, justo debajo de «¿Qué viste hoy?» */
.temas{margin:0 0 12px;border:1px solid var(--ln);border-radius:14px;background:linear-gradient(90deg,rgba(217,180,74,.07),transparent 60%),var(--s1);overflow:hidden}
.temas>.radar,.temas>.ideas{margin:0;border:0;border-radius:0;background:none}
.temas.dos>.ideas{border-top:1px solid var(--ln);padding:8px 14px}
.temas>.ideas .t{color:var(--t3)}
.temas>.ideas .b.p{background:none;color:var(--tx);border:1px solid var(--ln2);box-shadow:none}
/* la siguiente lección vive en la barra derecha: miniatura arriba, texto y un botón discreto; sin dorado */
.rail #rail-leccion{padding:12px}
.rail .cont2{display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;transform:none}
.rail .cont2:hover{background:none;box-shadow:none;transform:none}
.rail .cont2 .th{width:100%;margin-bottom:10px}
.rail .cont2 .tx .cap{color:var(--t3)}
.rail .cont2 .tx b{font-size:14px;line-height:1.3}
.rail .cont2 .tx .sub{font-size:12px}
.rail .cont2 .bar{max-width:none!important}
.rail .cont2 .b{width:100%;margin-top:10px}
/* en Comunidad la barra solo lleva lo de la comunidad */
body.v16-com #rail-hoy,body.v16-com #rail-mk{display:none!important}
/* cada publicación: corazón (abre las nueve emociones), comentar, repost y compartir */
.acts-rx>.tta-react-group .tta-react-btn:not(.is-active)>.tta-ico{font-size:0!important}
.acts-rx>.tta-react-group .tta-react-btn:not(.is-active)>.tta-ico::before{content:'favorite';font-size:19px}
