/* HomeTofy · CSS servido por Node.
   Rendimiento: cero backdrop-filter, cero filter: blur(), cero mix-blend-mode.
   Una sola animación en bucle (el punto "en vivo"), solo opacidad. Cero JavaScript. */

/* Los colores son los de su hoja, escritos como él los escribió: oklch. La línea de delante
   con el hex es el rescate para navegadores sin CSS Color 4; los que sí lo entienden
   se quedan con el oklch exacto. */
:root {
  --red: #ff2540;
  --red: oklch(0.58 0.23 27);
  --red-d: #ed0b2c;
  --red-d: oklch(0.58 0.23 27);
  --red-7: #c90522;
  --red-7: oklch(0.35 0.15 20);
  --red-deep: #4a0311;
  --red-deep: oklch(0.3 0.08 27);
  --accent: oklch(0.3 0.08 27);
  --grad: linear-gradient(135deg, #ff2540, #7c1024);
  --grad: linear-gradient(135deg, oklch(0.58 0.23 27), oklch(0.35 0.15 20));

  --bg: #120e0f;
  --bg: oklch(0.13 0.005 20);
  --s1: #171214;
  --s1: oklch(0.18 0.01 20);
  --s2: #1d1719;
  --s2: oklch(0.22 0.01 20);
  --s3: #262022;
  --s3: oklch(0.23 0.015 20);
  --line: #322a2c;
  --line: oklch(0.28 0.02 20);
  --line-2: #403639;
  --line-2: oklch(0.34 0.02 20);
  --chrome: var(--bg);
  --txt: #ece5e6;
  --txt: oklch(0.97 0 0);
  --mut: #c3b6b8;
  --mut: oklch(0.68 0.02 20);
  --mut2: #a99b9d;
  --mut2: oklch(0.6 0.02 20);
  --mut3: #8b7c7e;
  --mut3: oklch(0.52 0.02 20);
  --wrap: 1200px;
  --feed-pad: 18px;

  /* La escala de radios suya: --radius 0.75rem y sus cuatro peldaños. */
  --r-4: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  /* Los dos peldaños mayores de su hoja de TofySocial: `rounded-xl` (20) en pastillas y entradas,
     `rounded-2xl` (24) en las tarjetas. Salen del mismo mando de la redondez que el resto. */
  --r-xl2: 20px;
  --r-2x: 24px;
  --r-pill: 9999px;

  --rojo-30: oklch(0.58 0.23 27 / 0.3);
  --rojo-45: oklch(0.58 0.23 27 / 0.45);
  --rojo-60: oklch(0.58 0.23 27 / 0.6);
  --rojo-80: oklch(0.58 0.23 27 / 0.8);
  --s1-60: oklch(0.18 0.01 20 / 0.6);
  --s1-50: oklch(0.18 0.01 20 / 0.5);

  /* Su fondo de luz y la sombra de sus pastillas: el mismo rojo de la casa, en la capa que él pintó
     arriba del todo (`gradient-glow`) y en el bote de `shadow-glow`. */
  --glow: radial-gradient(60% 50% at 50% 0%, rgb(255 37 64 / 0.18), transparent 70%);
  --glow: radial-gradient(60% 50% at 50% 0%, oklch(0.58 0.23 27 / 0.18), transparent 70%);
  --sombra: 0 10px 30px -10px rgb(255 37 64 / 0.55);
  --sombra: 0 10px 30px -10px oklch(0.58 0.23 27 / 0.55);

  /* Sistema de Movimiento y Animaciones de Alta Fidelidad (Emil Kowalski / Taste) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --ease-tactile: cubic-bezier(0.2, 0, 0, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-norm: 260ms;
  --dur-smooth: 380ms;
  --dur-cinematic: 550ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(50rem 30rem at 12% -6%, rgb(255 37 64 / .1), transparent 62%),
    var(--bg);
  color: var(--txt);
  font: 400 15px/1.62 Barlow, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .eyebrow, .brand-txt b, .btn-red, .h2 {
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.018em;
}
/* La tipografía grande de la casa: Bebas Neue, como en su diseño. Solo en titulares de portal. */
.display {
  font-family: 'Bebas Neue', Barlow, sans-serif;
  font-weight: 400; letter-spacing: .015em;
}
.glow-txt { text-shadow: 0 0 18px oklch(0.58 0.23 27 / 0.8); }
.glow-red { box-shadow: 0 0 0 1px oklch(0.58 0.23 27 / 0.6), 0 0 30px oklch(0.58 0.23 27 / 0.45); }
.grid-bg {
  background-image:
    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.dot-live, .dot-off {
  display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
}
.dot-live { background: var(--red); animation: pulse 1.2s infinite; }
.dot-off { background: var(--mut3); }

h1, .h2 { margin: 0; color: #fff; }
a { color: inherit; text-decoration: none; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
form { margin: 0; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; color: var(--mut); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.page .wrap > section { padding-block: 44px; }
section[id] { scroll-margin-top: 84px; }

.h1 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.1; }
.tube > .page-head .h1 {
  font-family: 'Bebas Neue', Barlow, sans-serif; font-size: clamp(38px, 5vw, 52px); line-height: .95; letter-spacing: .02em;
}
.page-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }

.red { color: var(--red); }
.sub { margin: 6px 0 0; font-size: 14px; color: var(--mut2); }
.sub a { color: var(--red); font-weight: 600; }
.sub b { color: var(--mut); }
.hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mut3); }

/* ---------------- header ---------------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--chrome); border-bottom: 1px solid var(--line); }
.top::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgb(237 11 44 / .65), transparent); }
.top-in {
  display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr;
  align-items: center; gap: 14px; height: 64px; padding-inline: 24px;
}
/* Entrar no lleva buscador ni puerta de perfiles: la barra pasa a dos columnas para que el logo
   quede a la izquierda y «Crear cuenta» pegada al borde derecho. */
.top-in.top-sin-buscador { grid-template-columns: 1fr auto; }

.top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { display: block; width: 36px; height: 36px; border-radius: 11px; object-fit: cover }
.brand-txt { display: none; flex-direction: column; line-height: 1; }
.brand-txt b { font-family: 'Bebas Neue', Barlow, sans-serif; font-size: 27px; letter-spacing: .05em; }
.brand-txt i { font-style: normal; margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--mut3); }

.search { display: flex; align-items: center; gap: 9px; grid-column: 2; width: 100%; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--s2); color: var(--mut3); transition: border-color .18s, background-color .18s; }
.search:focus-within { border-color: var(--red); background: var(--s3); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.search input:focus { outline: none; }
.search input::-webkit-search-cancel-button { appearance: none; }

.top-perfil {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--s2);
  font: 600 13px/1 Barlow, sans-serif; color: var(--mut); white-space: nowrap;
  transition: border-color .18s, color .18s, background-color .18s;
}
.top-perfil:hover { border-color: var(--red); background: var(--s3); color: #fff; }
.top-perfil.on { border-color: rgb(201 5 34 / .65); background: rgb(74 3 17 / .5); color: #ff9dab; }

.top-actions { display: flex; align-items: center; justify-self: end; gap: 8px; flex-shrink: 0; }
.inline { display: inline; }
a.hide-sm { display: none; }

/* menú de cuenta: <details> puro, sin JavaScript */
.menu { position: relative; }
.menu summary {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px 0 6px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--s2);
  list-style: none; cursor: pointer; color: var(--mut);
  transition: color .18s, border-color .18s, background-color .18s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu.on > summary { border-color: var(--red); background: var(--s3); color: #fff; }
.menu-n { max-width: 13ch; overflow: hidden; font-size: 13.5px; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.menu-c { flex-shrink: 0; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; }
.menu-p {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 40; min-width: 244px;
  padding: 8px; border: 1px solid var(--line-2); border-radius: 15px; background: var(--s3);
  box-shadow: 0 22px 44px -26px rgb(0 0 0 / .95);
}
.menu-id { margin: 4px 8px 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .04em; color: var(--mut3); }
.menu-p a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--txt); transition: color .16s, background-color .16s; }
.menu-p a:hover { background: var(--s2); color: #fff; }
.menu-p a small { flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--mut3); }
.menu-out { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.menu-out button {
  display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; text-align: left; font: 600 13.5px/1.4 Barlow, sans-serif; color: #ff9dab; cursor: pointer;
  transition: color .16s, background-color .16s;
}
.menu-out button:hover { background: rgb(74 3 17 / .55); color: #fff; }
.box[id] { scroll-margin-top: 84px; }

/* La campana, pegada a la izquierda de la píldora de cuenta: otro <details>, sin JavaScript.
   La altura es la de la píldora que tiene al lado en cada barra, así que las dos forman una fila. */
.cuenta-par { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.notif { position: relative; }
.notif summary {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--s2); color: var(--mut); list-style: none; cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s;
}
.notif summary::-webkit-details-marker { display: none; }
.notif summary:hover, .notif[open] > summary { border-color: var(--red); background: var(--s3); color: #fff; }
.notif.nuevos > summary { border-color: var(--red); color: #fff; }
.nf-num {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border: 1px solid var(--bg); border-radius: 999px; background: var(--red);
  font: 700 11px/17px Barlow, sans-serif; color: #fff; text-align: center;
}
.nf-panel {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 40; width: 330px; max-width: 92vw;
  padding: 8px; border: 1px solid var(--line-2); border-radius: 15px; background: var(--s3);
  box-shadow: 0 22px 44px -26px rgb(0 0 0 / .95);
}
.nf-t { margin: 4px 8px 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .04em; color: var(--mut3); }
.nf-lista { display: grid; gap: 2px; }
.nf-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--txt); transition: color .16s, background-color .16s; }
.nf-fila:hover { background: var(--s2); color: #fff; }
.nf-fila.nuevo { background: rgb(74 3 17 / .45); }
.nf-txt { display: grid; flex: 1; min-width: 0; gap: 1px; }
.nf-txt b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nf-txt small { overflow: hidden; font-size: 11.5px; color: var(--mut3); text-overflow: ellipsis; white-space: nowrap; }
.nf-h { flex-shrink: 0; font-size: 11px; color: var(--mut3); }
.nf-ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--s2); color: var(--mut); }
.nf-ic .ic { width: 14px; height: 14px; }
.nf-none { margin: 8px; font-size: 12.5px; line-height: 1.5; color: var(--mut2); }
.nf-todo { display: block; margin-top: 7px; padding: 9px 10px 4px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: #ff9dab; text-align: center; }
.nf-todo:hover { color: #fff; }
/* La hoja de /notificaciones: las mismas filas, sueltas y con su marco. */
.nf-hoja { display: grid; gap: 8px; margin-top: 18px; }
.nf-hoja .nf-fila { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); }
.nf-hoja .nf-fila:hover { border-color: var(--red); background: var(--s2); }
.nf-hoja .nf-txt b { font-size: 15px; }
.nf-hoja .nf-txt small { font-size: 12.5px; }
.nf-hoja .ava, .nf-hoja .nf-ic { width: 40px; height: 40px; font-size: 16px; }
.nf-hoja .nf-ic .ic { width: 20px; height: 20px; }
/* Las otras dos barras: la campana se viste con la pastilla de su puerta, misma altura que la cuenta. */
.pto-cuenta .notif summary {
  width: 42px; height: 42px; border-color: var(--line);
  background: oklch(0.21 0.012 20 / 0.6); color: var(--txt);
}
.pto-cuenta .notif summary:hover, .pto-cuenta .notif[open] > summary { border-color: var(--lv-r50); color: var(--txt) }
.pto-cuenta .notif.nuevos > summary { border-color: var(--lv-r50); color: var(--lv-r50) }
.home-top .notif summary { width: 38px; height: 38px; border-color: var(--red); background: transparent; color: #fff; }
.home-top .notif summary:hover { background: var(--red); color: #fff; }
@media (max-width: 480px) { .nf-panel { position: fixed; right: 8px; left: 8px; width: auto; max-width: none } }
/* TofyTube también tiene su campana, con la ropa de su barra: sin caja y apagada hasta el paso. */
.tube-top .notif summary {
  width: 40px; height: 40px; border-color: transparent; background: transparent; color: var(--mut2);
}
.tube-top .notif summary:hover, .tube-top .notif[open] > summary { background: var(--s3); border-color: transparent; color: #fff; }
.tube-top .notif.nuevos > summary { color: #fff; }
/* La hoja de /notificaciones, partida por apartados: el nombre de la puerta manda en cada bloque. */
.nf-grupo { margin-top: 30px; }
.nf-grupo:first-of-type { margin-top: 4px; }
.nf-g-t {
  display: flex; align-items: baseline; gap: 9px; margin: 0;
  font: 400 27px/1 'Bebas Neue', Barlow, sans-serif; letter-spacing: .04em; color: #fff;
}
.nf-g-t small { font: 600 12px/1 Barlow, sans-serif; color: var(--mut3); letter-spacing: 0; }
.nf-g-s { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--mut2); }
.nf-grupo > .nota { margin-top: 12px; }
/* En el teléfono las dos barras nuevas tampoco caben tal cual: la búsqueda de TofyTube pasa a su
   propia línea (como ya hace la de TofyLive), la campana se queda la última del hilerón para que su
   panel abra dentro de la pantalla, y en el inicio se aprieta el sello para que quepa con la píldora. */
@media (max-width: 767.98px) {
  .tube-top { flex-wrap: wrap; gap: 8px; height: auto; padding: 8px; row-gap: 8px; }
  .tube-menu { display: none; }
  .tube-buscar { order: 5; flex: 1 1 100%; margin-inline: 0; max-width: none; }
  .tube-casa { font-size: 11px; padding-inline: 9px; }
  .tube-top .notif { order: 4; }
}
@media (max-width: 479.98px) {
  .home-top { gap: 10px; padding: 16px 14px; }
  .home-marca { gap: 8px; font-size: 23px; letter-spacing: .04em; }
  .home-beta { padding: 2px 7px; font-size: 9.5px; letter-spacing: .1em; }
  .cuenta-par { gap: 6px; }
}

.ghost {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 11px; background: transparent;
  font: 600 14px/1 Barlow, sans-serif; color: var(--mut); cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s;
}
.ghost:hover { color: #fff; border-color: var(--mut3); background: var(--s3); }
.ghost.wide { width: 100%; }

.btn-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 0; border-radius: 11px;
  background: var(--grad);
  color: #fff; font: 700 14px/1 Barlow, sans-serif; cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.btn-red:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -14px rgb(237 11 44 / .9); }
.btn-red.lg { height: 52px; padding: 0 24px; font-size: 15px; }
.btn-red.full, .btn-red.wide { width: 100%; }

.glassbtn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 11px;
  background: var(--s2); color: #fff; font: 600 14px/1 Barlow, sans-serif;
  transition: border-color .18s, background-color .18s;
}
.glassbtn:hover { border-color: rgb(255 255 255 / .38); background: var(--s3); }
.glassbtn.lg { height: 52px; font-size: 15px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.h2 { font-size: clamp(22px, 3.4vw, 31px); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, var(--red-d), transparent); }

.flash {
  margin: 0 0 18px; padding: 12px 16px; border: 1px solid rgb(201 5 34 / .5);
  border-left: 3px solid var(--red); border-radius: 10px;
  background: rgb(74 3 17 / .35); font-size: 14px; font-weight: 600; color: #ffc6cd;
}

/* El anuncio de la casa, el que se escribe desde el panel. Va como una tira fina arriba de todo,
   sin animación y sin fondo nuevo: solo filete, color y el enlace a la derecha. */
.anuncio {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 0; padding: 9px 20px; border-bottom: 1px solid rgb(201 5 34 / .45);
  background: rgb(74 3 17 / .5); font-size: 13.5px; line-height: 1.45; color: #ffc6cd;
}
.anuncio b {
  font: 700 11px/1 Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); flex-shrink: 0;
}
.anuncio span { flex: 1 1 260px; min-width: 0 }
.anuncio a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600 }
.anuncio a:hover { color: var(--red) }
/* Dentro de la campana el anuncio pierde el filete de abajo: ya va encajado en el panel. */
.nf-anuncio { border-bottom: 0; border-radius: 8px; padding: 8px 10px; margin: 0 0 6px }

/* ---------------- shell de plataforma ---------------- */
.shell { display: grid; grid-template-columns: 1fr; margin: 0 0 54px; }
.feed { min-width: 0; padding: 22px var(--feed-pad) 8px; }
.pblock { max-width: 1500px; margin-inline: auto; }
.pblock > section { padding-block: 24px 6px; }
.pblock > section:first-child { padding-top: 4px; }

/* Panel de la casa: fijo de arriba a abajo; no se mueve por mucho que se baje. */
.rail { display: none; }
.rail-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; padding: 18px 12px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rail-t { margin: 0 0 10px; padding: 0 12px; font: 700 9.5px/1 Barlow, sans-serif; letter-spacing: .17em; text-transform: uppercase; color: var(--mut3); }
.rail-nav { display: grid; gap: 3px; flex: 0 0 auto; }
.rail-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; font-size: 13.5px; font-weight: 600; color: var(--mut2); transition: color .16s, background-color .16s; }
.rail-nav a:hover { color: #fff; background: var(--s3); }
.rail-nav a.on { color: #fff; background: rgb(201 5 34 / .17); }
.rail-nav a.on::after { content: ''; position: absolute; left: 3px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--red); }
.rail-ic { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: opacity .16s; }
.rail-nav a:hover .rail-ic, .rail-nav a.on .rail-ic { opacity: 1; }
.rail-nav a.on .rail-ic { stroke: #ff5468; }
.rail-ic.hot { stroke: var(--red); opacity: 1; }
.rail-n { margin-left: auto; padding: 2px 8px; border: 1px solid rgb(255 37 64 / .5); border-radius: 999px; background: rgb(201 5 34 / .22); font: 700 11px/1.5 Barlow, sans-serif; color: #ffdae0; }

/* lista de canales de la columna */
.rail-scroll { flex: 0 0 auto; margin-top: 22px; }
.rail-scroll > .rail-t:not(:first-child) { margin-top: 22px; }
.rail-list { display: grid; gap: 3px; }
.rail-c { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 13px; transition: background-color .16s; }
.rail-c:hover { background: var(--s3); }
.rail-c .ava { box-shadow: 0 0 0 1px var(--line-2); }
.rail-c.is-live .ava { box-shadow: 0 0 0 2px var(--red); }
.rail-c-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rail-c-id b, .rail-c-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-c-id b { font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff; }
.rail-c-id small { font-size: 11px; line-height: 1.3; color: var(--mut3); }
.rail-c-up { margin-left: auto; flex-shrink: 0; font: 600 10.5px/1 ui-monospace, Menlo, monospace; color: var(--red-7); }
.rail-none { margin: 0; padding: 4px 12px 8px; font-size: 11.5px; line-height: 1.5; color: var(--mut3); }

.rail-cta { display: block; flex: 0 0 auto; margin: auto 8px 0; padding: 12px 14px; border: 1px solid rgb(201 5 34 / .45); border-radius: 14px; background: rgb(74 3 17 / .4); font-size: 12.5px; font-weight: 600; color: #ff9dab; }
.rail-cta:hover { border-color: var(--red); color: #fff; }

.live-badge.big { left: 16px; top: 16px; gap: 7px; padding: 7px 12px; border-radius: 9px; font-size: 12px; }
.live-badge.big i { width: 8px; height: 8px; }

/* banda de contenido */
.band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 16px; }
.band-sub { margin: 0; font-size: 13px; color: var(--mut3); }
.grid-hollow {
  grid-column: 1 / -1; margin: 0; padding: 30px 20px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: 15px;
  background: rgb(16 12 14 / .5); font-size: 13.5px; line-height: 1.6; color: var(--mut3);
}

/* ---------------- parrilla ---------------- */
.grid-live { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); align-items: stretch; }
.card-live {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--s2); transition: border-color .2s, background-color .2s;
}
.card-live:hover { border-color: rgb(201 5 34 / .75); background: var(--s3); }
.card-art {
  display: flex; align-items: center; justify-content: center; position: relative;
  aspect-ratio: 16 / 9;
  background-image: linear-gradient(150deg, #1b0d11, #120e0f 70%);
}
.art-0 { background-image: radial-gradient(46% 50% at 26% 22%, rgb(255 37 64 / .4), transparent 68%), linear-gradient(150deg, #1b0d11, #120e0f 70%); }
.art-1 { background-image: radial-gradient(44% 48% at 72% 26%, rgb(255 99 121 / .34), transparent 68%), linear-gradient(210deg, #20090f, #120e0f 72%); }
.art-2 { background-image: radial-gradient(50% 44% at 50% 88%, rgb(201 5 34 / .42), transparent 70%), linear-gradient(160deg, #150a12, #120e0f 70%); }
.art-3 { background-image: radial-gradient(40% 46% at 18% 74%, rgb(255 37 64 / .32), transparent 66%), linear-gradient(120deg, #1a0e0d, #120e0f 74%); }
.art-4 { background-image: radial-gradient(48% 42% at 84% 70%, rgb(237 11 44 / .38), transparent 68%), linear-gradient(200deg, #170b10, #120e0f 70%); }
.art-5 { background-image: radial-gradient(42% 52% at 58% 16%, rgb(255 130 148 / .3), transparent 66%), linear-gradient(140deg, #1d0a0e, #120e0f 72%); }
.card-art-mark {
  font: 700 22px/1 Barlow, sans-serif; letter-spacing: -.03em;
  color: rgb(255 255 255 / .16); text-transform: lowercase;
}
.live-badge {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 7px; background: var(--red-d); color: #fff;
  font: 700 10px/1 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; padding: 14px 15px 15px; }
.card-body b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.35; min-height: 2.7em;
}
.card-who { overflow: hidden; font-size: 13px; color: var(--mut2); text-overflow: ellipsis; white-space: nowrap; }
.card-live:hover .card-who { color: var(--mut); }
.card-ava { position: absolute; left: 10px; bottom: 10px; line-height: 0; }
.card-ava .ava { box-shadow: 0 0 0 2px rgb(7 5 7 / .85), 0 6px 14px rgb(0 0 0 / .35); }
/* el triángulo aparece solo al pasar el ratón; en táctil la tarjeta entera ya es el enlace */
.card-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgb(255 37 64 / .9); opacity: 0; transition: opacity .18s;
}
.card-play::after {
  content: ''; position: absolute; left: 17px; top: 15px; width: 0; height: 0;
  border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.card-live:hover .card-play { opacity: 1; }
.ava { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg, var(--red), var(--red-7)); color: #fff; font: 700 11px/1 Barlow, sans-serif; font-style: normal; flex-shrink: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag { padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--s3); font-size: 11.5px; font-weight: 600; color: var(--mut); }
.tag.quiet { border-color: transparent; background: rgb(0 0 0 / .45); color: var(--mut3); }
.card-uptime { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / .72); color: #fff; font: 600 11px/1.4 ui-monospace, Menlo, monospace; }
/* ---------------- resultados de búsqueda ---------------- */
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin: 30px 0 14px; }
.h3 { margin: 0; font: 700 17px/1.2 Barlow, sans-serif; color: #fff; }
.grid-profile { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); align-items: stretch; }
.card-profile {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--s2);
  transition: border-color .2s, background-color .2s;
}
.card-profile:hover { border-color: rgb(201 5 34 / .75); background: var(--s3); }
.pf-cta { margin-top: 2px; font: 700 10.5px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--red); opacity: 0; transition: opacity .18s; }
.card-profile:hover .pf-cta { opacity: 1; }
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf-id b { overflow: hidden; font-size: 15px; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ava.lg { width: 44px; height: 44px; font-size: 18px; }
.ava.xl { width: 64px; height: 64px; font-size: 26px; }
img.ava { display: block; object-fit: cover; padding: 0; }
.ava-img { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.who-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who-line > div { min-width: 0; }
.vbadge {
  padding: 3px 8px; border-radius: 999px;
  font: 700 10px/1.4 Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.vbadge-y { border: 1px solid rgb(201 5 34 / .55); background: rgb(201 5 34 / .18); color: #ff9dab; }
.vbadge-d { border: 1px solid rgb(255 210 74 / .4); background: rgb(255 210 74 / .1); color: #ffd24a; }
.vbadge-w { border: 1px solid var(--line-2); background: var(--s3); color: var(--mut); }
/* El verde es el de Discord en línea (57f287): la marca habla del portal, no de la casa. */
.vbadge-of {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgb(87 242 135 / .45); background: rgb(87 242 135 / .14); color: #57f287;
}
.vbadge-of .ic { width: 12px; height: 12px; color: #57f287; opacity: 1; }

.well { padding: 40px 26px; border: 1px dashed var(--line-2); border-radius: 18px; background: rgb(16 12 14 / .55); }
.well h3 { margin: 0 0 6px; font: 700 18px/1.2 Barlow, sans-serif; color: #fff; }
.well p { margin: 0; font-size: 14px; color: var(--mut2); }

/* ---------------- inicio: cómo se entra ---------------- */
#como-funciona > .ghost { margin-top: 20px; }

/* ---------------- normas de la casa: verificación y términos ---------------- */
.rules { max-width: 780px; }
.rule { padding: 20px 22px; margin-bottom: 12px; border: 1px solid var(--line); border-left: 3px solid var(--red-7); border-radius: 14px; background: var(--s2); }
.rule b { display: block; margin-bottom: 6px; font-family: Barlow, sans-serif; font-size: 15.5px; color: #fff; }
.rule p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--mut2); }
.rule p + p { margin-top: 10px; }
.rule ul { margin: 10px 0 0 0; padding-left: 20px; list-style: disc; }
.rule li { margin: 5px 0; font-size: 14.5px; line-height: 1.6; color: var(--mut2); }
.rule li::marker { color: var(--red-7); }
.rule strong { color: var(--mut); font-weight: 700; }
.rule a { color: var(--red); }
.rule a:hover { text-decoration: underline; }
.rule .btn-red { margin-top: 16px; }
.rules-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.rules-nums div { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); }
.rules-nums b { font: 700 26px/1.1 Barlow, sans-serif; color: var(--red); }
.rules-nums span { font-size: 12px; color: var(--mut3); }

/* ---------------- ajustes ---------------- */
.panel { padding-top: 40px; }

.panel-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.box { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--s2); }
.box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 16px; color: #fff; }
.box.ok { border-color: rgb(201 5 34 / .55); background: linear-gradient(170deg, #170a0d, var(--s2) 60%); }
.box.no { border-color: var(--line-2); }
.box.on-demo { border-color: rgb(255 37 64 / .5); }
.verif-strip { gap: 10px; padding: 18px 20px; }
.verif-strip h3 { margin: 0; }
.verif-strip .kv-line:last-of-type { border-bottom: 0; }
.verif-strip .hint { margin: 0; }
.todo { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mut); }
.kv-line { display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mut3); }
.kv-line b { color: var(--mut); text-align: right; font-weight: 600; }
.clock { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 0; }
.clock b { font: 700 30px/1 Barlow, sans-serif; color: var(--red); }
.clock span { font-size: 12.5px; color: var(--mut2); }
.bar { display: block; height: 4px; margin: 10px 0 0; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-7)); }

.form-cols { display: grid; gap: 14px; align-items: end; }

/* ---------------- mesa de revisión ---------------- */
.rev-wrap { max-width: 860px; }
.rev { padding: 22px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--s2); }
.rev header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rev h3 { margin: 0; font-size: 17px; }
.rev h3 a:hover { color: var(--red); }
.state { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 700 10.5px/1 Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mut2); white-space: nowrap; }
.s-revision { border-color: rgb(255 196 0 / .4); color: #ffd24a; }
.s-demo { border-color: rgb(255 37 64 / .55); background: rgb(74 3 17 / .5); color: #ff9dab; }
.s-calificar { border-color: rgb(139 92 246 / .4); color: #c3a6ff; }
.s-prueba { border-color: rgb(72 190 255 / .45); background: rgb(6 34 48 / .5); color: #9adcff; }
.s-aprobado { border-color: rgb(201 5 34 / .6); background: rgb(74 3 17 / .5); color: #ffdae0; }
.s-rechazado { border-color: var(--line-2); background: var(--s3); color: var(--mut3); }
.rev-plan { margin: 16px 0 0; padding: 14px 16px; border-left: 2px solid var(--red-7); border-radius: 0 10px 10px 0; background: var(--s1); font-size: 14.5px; line-height: 1.65; color: var(--txt); white-space: pre-wrap; }
.rev-when { margin: 10px 0 0; font-size: 13px; color: var(--mut3); }
.rev-when b { color: var(--mut); }
.rev-note { margin: 8px 0 0; font-size: 13px; color: #ff9dab; }
.rev-demo { margin: 12px 0 0; font-size: 12.5px; color: var(--mut2); }
.rev-demo .bar { margin: 6px 0 10px; }
.rev-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rej { display: inline-flex; flex-direction: column; }
.rej summary { display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; font: 600 14px/1 Barlow, sans-serif; color: var(--mut); cursor: pointer; }
.rej summary:hover { color: #fff; border-color: var(--mut3); }
.rej[open] summary { margin-bottom: 10px; border-color: var(--red-7); color: #ff9dab; }
.rej form { width: min(420px, 88vw); }
/* La muestra de TofyTube: cuántos de los dos permitidos ya están publicados y qué son. */
.rev-tope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 0; font-size: 13px; color: var(--mut2); }
.rev-tope b { font-weight: 700; color: #fff; }
.rev-tope a { font-size: 12.5px; }
.rev-muestra { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.rev-muestra li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--s1); }
.rev-muestra li a { font-size: 14px; font-weight: 600; color: var(--txt); }
.rev-muestra li a:hover { color: var(--red); }
.rev-muestra li span { font-size: 12px; color: var(--mut3); }
.rev-muestra.vacio { font-size: 12.5px; color: var(--mut3); }
/* El contador que ve el propio canal: lo que ha subido de lo que puede subir. */
.cuota { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cuota span { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s1); font-size: 13px; color: var(--mut2); }
.cuota b { font: 700 15px/1 Barlow, sans-serif; color: #fff; }

/* ---------------- panel de administración ---------------- */
.adm { padding-top: 34px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 24px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); }
.adm-tabs a { padding: 9px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--mut2); transition: color .16s, background-color .16s; }
.adm-tabs a:hover { color: #fff; }
.adm-tabs a.on { background: var(--red-d); color: #fff; }
.adm-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 10px; }
.adm-card { display: flex; flex-direction: column; gap: 3px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--s2); }
.adm-card span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut3); }
.adm-card b { font: 700 27px/1.1 Barlow, sans-serif; color: #fff; }
.adm-card small { font-size: 12px; color: var(--mut3); }
.adm .band { padding-block: 26px 6px; }
.adm .rev-wrap { max-width: none; }
.sub-title { margin: 30px 0 14px; font: 700 12px/1.2 Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mut2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--s2); }
.adm-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { padding: 13px 14px; border-bottom: 1px solid var(--line-2); text-align: left; font: 700 10.5px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mut3); white-space: nowrap; }
.adm-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--mut); }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table td a { color: #fff; font-weight: 600; }
.adm-table td a:hover { color: var(--red); }
.adm-table td small { display: block; margin-top: 4px; font-size: 12px; color: var(--mut3); }
.adm-table .state { display: inline-block; margin-top: 6px; }
.role { display: inline-block; padding: 4px 9px; border-radius: 999px; font: 700 10.5px/1.4 Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.r-admin { border: 1px solid rgb(201 5 34 / .6); background: rgb(74 3 17 / .5); color: #ff9dab; }
.r-fundador { border: 1px solid rgb(255 37 64 / .8); background: linear-gradient(140deg, var(--red-7), #4a0311); color: #fff; }
/* El chip de creador es el rojo claro de «verificado»: el rol es la verificación puesta a mano. */
.r-creador { border: 1px solid rgb(255 37 64 / .45); background: rgb(255 37 64 / .12); color: #ffb3bd; }
.r-viewer { border: 1px solid var(--line-2); background: var(--s3); color: var(--mut3); }
.live-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font: 700 12.5px/1 ui-monospace, Menlo, monospace; }
.live-mini i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
.mut { color: var(--mut3); }
.row.tight { gap: 6px; }
.ghost.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }

/* La barra de hojas va pegada bajo la cabecera: con trece pestañas ninguna lista larga debe obligar
   a subir hasta arriba para saltar de una a otra. Los chips del panel dejan de pegarse porque si las
   dos barras quedaran en el mismo borde, la segunda taparía a la primera. */
.adm-tabs { position: sticky; top: 64px; z-index: 6; }
.adm .chips-fila { position: static; padding-block: 0; }
.adm-tabs a { display: inline-flex; align-items: center; gap: 7px; }
.adm-tabs a small { padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--s3); font: 700 10.5px/1.4 Barlow, sans-serif; color: var(--mut2); }
.adm-tabs a:hover small { border-color: var(--mut3); color: #fff; }
.adm-tabs a.on small { border-color: transparent; background: rgb(255 255 255 / .16); color: #fff; }

/* Lo que se pinta en la mesa de gestión: el cartel del vídeo o la foto del muro, dentro de la propia
   fila, para no tener que abrir la hoja de arriba. */
.adm-mini { flex: 0 0 auto; width: 80px; height: 45px; object-fit: cover; border: 1px solid var(--line-2); border-radius: 8px; background: var(--s1); }
.adm-mini-vacio { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 45px; border: 1px dashed var(--line-2); border-radius: 8px; font: 600 9.5px/1 Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mut3); }
.muro-cel { display: flex; align-items: flex-start; gap: 10px; min-width: 280px; max-width: 460px; }
.muro-cel .adm-mini { width: 54px; height: 54px; }
.muro-cel > span { min-width: 0; line-height: 1.5; color: var(--txt); }
.ask-res { margin: 0; font-size: 13px; line-height: 1.55; color: var(--txt); }

/* Mandos de página: ventana de cinco, con la primera y la última siempre a un clic. */
.adm-paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.adm-paginas small { margin-left: 6px; font-size: 12px; color: var(--mut3); }
.pag { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--s2); font: 600 13px/1 Barlow, sans-serif; color: var(--mut2); }
a.pag:hover { border-color: var(--mut3); color: #fff; }
.pag.on { border-color: transparent; background: var(--txt); color: var(--bg); font-weight: 700; }
.pag.mut { border-color: transparent; background: transparent; color: var(--mut3); }

/* ---------------- tickets de soporte ---------------- */
.sup { max-width: 880px; padding-top: 34px; }
.sup .box { margin-bottom: 8px; }
.tick-list { display: flex; flex-direction: column; gap: 14px; }
.tick { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--s2); }
.tick header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tick h3 { margin: 0; font-size: 16.5px; color: #fff; }
.tick .row { margin-top: 12px; }
.state.tk-abierto { border-color: rgb(201 5 34 / .6); background: rgb(74 3 17 / .45); color: #ff9dab; }
.state.tk-respondido { border-color: rgb(255 196 0 / .4); color: #ffd24a; }
.state.tk-cerrado { color: var(--mut3); }
.tick-answer { margin-top: 14px; padding: 14px 16px; border-left: 2px solid var(--red-7); border-radius: 0 10px 10px 0; background: var(--s1); }
.tick-answer b { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #ff9dab; }
.tick-answer p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--txt); white-space: pre-wrap; }

/* ---------------- sanciones y acciones delicadas del panel ---------------- */
.ask { margin-top: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(16 12 14 / .6); }
.ask > summary { padding: 11px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut2); cursor: pointer; list-style: none; }
.ask > summary::-webkit-details-marker { display: none; }
.ask > summary::before { content: '▸'; margin-right: 8px; color: var(--red); }
.ask > summary:hover { color: #fff; }
.ask[open] > summary { color: #fff; border-bottom: 1px solid var(--line); }
.ask[open] > summary::before { content: '▾'; }
.ask-in { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; }
.ask-in .field { max-width: 560px; }
.ask-in .field textarea { min-height: 68px; }
.adm-table .ask { min-width: 220px; }

/* La hoja de mandos: una fila por mando, con el valor de siempre escrito al lado para no tener que
   recordarlo. La fila se marca en rojo solo cuando alguien la tocó, así se ve de un barrido de ojo
   lo que ya no vale lo de la casa. Un mando por formulario: «guardar» y «al valor de siempre»
   nunca se pisan y no hace falta ni una línea de JavaScript. */
.aje-cab p { margin: 8px 0 0; font-size: 13px; color: var(--mut2); }
.aje-lista { display: grid; gap: 8px; }
.aje {
  display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 1fr) auto;
  gap: 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--s2);
}
.aje.tocado { border-color: rgb(201 5 34 / .55); background: rgb(74 3 17 / .3); }
.aje-t label { display: block; font-size: 13.5px; font-weight: 700; color: #fff; }
.aje-t small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mut3); }
.aje-t small b { color: var(--mut2); font-weight: 600; }
.aje input, .aje select, .aje textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--s1); color: #fff; font: inherit; font-size: 14px;
  transition: border-color .18s, background-color .18s;
}
.aje input, .aje select { height: 44px; padding-block: 0; }
.aje textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.aje input:focus, .aje select:focus, .aje textarea:focus { outline: none; border-color: var(--red); background: var(--s3); }
.aje select { cursor: pointer; }
.aje-num, .aje-color { display: flex; align-items: center; gap: 8px; }
.aje-num input { flex: 1; min-width: 0; }
.aje-u { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut3); white-space: nowrap; }
.aje input[type=color] { width: 52px; min-width: 52px; height: 40px; padding: 3px; border-radius: 10px; background: var(--s1); cursor: pointer; }
.aje-color small { font-size: 12px; color: var(--mut3); }
.aje-a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 900px) {
  .aje { grid-template-columns: 1fr; }
  .aje-a { justify-content: flex-start; }
}

/* El rol se cambia aquí mismo: el desplegable cerrado con sus tres nombres y su botón. Es el mismo
   control que el de los formularios, bajado a la altura de la tabla; va debajo de la chip del rol. */
.rol-cambio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rol-cambio small { margin-top: 0; }
.rol-lista {
  height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--s2); color: #fff; font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.rol-lista:focus { outline: none; border-color: var(--red); background: var(--s3); }
.rol-cambio [disabled] { opacity: .5; cursor: not-allowed; }

.field select {
  width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--s2); color: #fff; font: inherit; font-size: 14.5px; cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.field select:focus { outline: none; border-color: var(--red); background: var(--s3); }

.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mut2); cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--red); cursor: pointer; }

.ghost.danger:hover { color: #fff; border-color: rgb(201 5 34 / .7); background: rgb(74 3 17 / .6); }

.sanc {
  display: inline-block; padding: 4px 9px; border: 1px solid rgb(201 5 34 / .6); border-radius: 999px;
  background: rgb(74 3 17 / .5); font: 700 10.5px/1.4 Barlow, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #ff9dab; white-space: nowrap;
}

.sanc-page { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-inline: auto; }
.sanc-box > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sanc-box h2 { margin: 0; font-size: 18px; color: #fff; }
.sanc-box .rev-plan { margin: 0; }
.sanc-box.fin { border-color: var(--line-2); background: rgb(16 12 14 / .5); }
.sanc-data { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.sanc-data li { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sanc-data li:last-child { border-bottom: 0; }
.sanc-data span { color: var(--mut3); }
.sanc-data b { color: var(--txt); font-weight: 600; text-align: right; }
.sanc-strip { border-color: rgb(201 5 34 / .55); background: linear-gradient(170deg, #170a0d, var(--s2) 60%); }

/* ---------------- sala pública ---------------- */
.watch { padding-top: 34px; }
.player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-2);
  background-image:
    radial-gradient(48% 46% at 32% 22%, rgb(255 37 64 / .14), transparent 68%),
    linear-gradient(150deg, #170c10, #120e0f 72%);
  display: grid; place-items: center; text-align: center;
}
.player-live, .player-off { display: flex; flex-direction: column; gap: 8px; padding: 24px; max-width: 52ch; }
.player-live .live-badge { position: static; align-self: center; margin-bottom: 6px; }
.player p { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
.player small { font-size: 13px; color: var(--mut2); }
.player-off p { color: var(--mut); }
.watch-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 24px; }
.watch-head h1 { font-size: clamp(20px, 3.6vw, 30px); max-width: 30ch; }
.tagline { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.tagline.demo { color: #ffd24a; }
.player .row { justify-content: center; margin-top: 6px; }
.live-bio { margin-top: 20px; }

/* ---------------- chat del directo: dos marcos anidados, cero JavaScript ---------------- */
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.watch-main { min-width: 0; }
.chat-marco {
  display: block; width: 100%; height: 520px;
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--s1);
}
@media (min-width: 1080px) {
  .watch-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); align-items: start; gap: 24px; }
  .watch-chat { position: sticky; top: 82px; }
  .chat-marco { height: min(880px, calc(100vh - 104px)); }
}
@media (min-width: 1500px) {
  .watch-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 480px); }
}

/* La hoja de fuera sostiene la cabecera y los DOS marcos, y ella sola no se recarga nunca. */
.chat-marco-doc { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--s1); }
.chat-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-cab b { font: 700 12.5px/1 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.chat-cab small { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--mut3); }
.chat-lista-marco { display: block; flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: transparent; }
/* El pie es su propio marco y el que se recarga al escribir, así que la lista no se mueve. El alto
   es fijo y deja sitio de sobra para el chip de respuesta, que aparece y desaparece dentro del pie:
   con el contenido pegado abajo, el campo nunca sube ni baja y la lista no se recoloca. */
.chat-pie-marco {
  display: block; flex: 0 0 200px; width: 100%; border: 0; border-top: 1px solid var(--line);
  background: var(--s1);
}
.chat-pie-doc { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--s1); }
.chat-pie { margin-top: auto; padding: 12px 14px 14px; }
.chat-form { display: flex; flex-direction: column; gap: 8px; }

/* El chip de respuesta, igual que en Discord: dentro del propio campo de escribir, con el mote en
   su color, el arranque del mensaje citado y la × para volver a escribir normal. La × es la misma
   dirección del pie sin id, o sea como se entró la primera vez, y el campo oculto del id viaja aquí
   para que el POST del formulario lo lleve sin tocar nada de JavaScript. */
.chat-resp {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
  min-width: 0; padding: 5px 8px;
  border-left: 2px solid var(--red); border-radius: 0 8px 8px 0;
  background: var(--s2); color: var(--mut2); font-size: 12.5px; line-height: 1.35;
}
.chat-resp > svg {
  grid-area: 1 / 1 / 3 / 2; width: 15px; height: 15px;
  fill: none; stroke: var(--mut3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.chat-resp-tit { grid-area: 1 / 2 / 2 / 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-resp-tit b { font-weight: 700; }
.chat-resp-texto {
  grid-area: 2 / 2 / 3 / 3; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--mut3);
}
.chat-resp-x {
  grid-area: 1 / 3 / 3 / 4; padding: 0 4px; border: 0; border-radius: 6px; background: none;
  color: var(--mut2); font: 700 16px/1.2 Barlow, sans-serif; text-decoration: none; cursor: pointer;
}
.chat-resp-x:hover { background: var(--s3); color: #fff; }

/* Emotes rápidos: cada botón es un mensaje entero en sí. Sin JavaScript: el navegador manda
   su valor y la casa lo usa solo cuando no había nada escrito. */
.chat-emotes { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; }
.chat-emote {
  width: 30px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--txt); font: 400 14px/1 Barlow, sans-serif;
  cursor: pointer; transition: background-color .16s;
}
.chat-emote:hover { background: var(--s3); }

/* La caja de escritura: un solo borde por fuera, el botón metido dentro y el rojo al enfocar. */
.chat-caja {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--s2);
  transition: border-color .18s, background-color .18s;
}
.chat-caja:focus-within { border-color: var(--red); background: var(--s3); }
.chat-campo {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none;
  color: #fff; font: inherit; font-size: 15px;
}
.chat-campo:focus { outline: none; }
.chat-campo::placeholder { color: var(--mut3); }
.chat-enviar {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0;
  border-radius: 9px; background: var(--red-d); color: #fff;
  font: 700 13.5px/1 Barlow, sans-serif; cursor: pointer; transition: background-color .16s;
}
.chat-enviar:hover { background: var(--red); }
.chat-enviar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-pista, .chat-aviso { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut3); }
.chat-fallo { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--red); }
.chat-aviso { margin: 0; font-size: 13.5px; }
.chat-aviso a { color: var(--red); }

/* El marco de dentro es la lista, y es lo único que se recarga cada pocos segundos.
   Una fila por mensaje, mote en color propio y el texto detrás, como las salas de verdad. */
.chat-hilos {
  display: block; min-height: 0; background: transparent; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.chat-hilos::-webkit-scrollbar { width: 9px; }
.chat-hilos::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
/* Arriba del marco de dentro: cuántas cuentas registradas están viendo ahora mismo. Se pinta
   aquí porque es lo único que se recarga solo, y va fijada para que se vea con la lista abajo. */
.chat-viendo {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--s2);
  font-size: 12px; letter-spacing: .04em; color: var(--mut2);
}
.chat-viendo b { color: #fff; font-weight: 700; }
.chat-viendo svg { width: 15px; height: 15px; fill: none; stroke: var(--red-7); stroke-width: 2; }
.chat-lista { list-style: none; margin: 0; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.msg { position: relative; padding: 3px 58px 3px 8px; font-size: 14.5px; line-height: 1.5; border-radius: 9px; transition: background-color .16s; }
.msg:hover { background: rgb(255 255 255 / .04); }
.msg-cuerpo { margin: 0; overflow-wrap: anywhere; }
.msg-quien { white-space: nowrap; font-weight: 700; text-decoration: none; }
.msg-quien:hover { text-decoration: underline; }
.msg-dos { font-weight: 400; color: var(--mut3); }
.msg-texto { color: var(--txt); }

/* La cita de un mensaje respondido: letra más pequeña y un filete a la izquierda, para que se lea
   como lo que es —lo que dijo otro hace un momento— y no como otra fila del chat. La casa la copia
   al escribir el mensaje, así que se pinta sin volver a la base y sigue ahí aunque borren el
   original. Sin fondo propio dentro de una fila `msg-canal`, que ya trae el suyo. */
.msg-cita {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0 0 2px; padding: 2px 8px;
  border-left: 2px solid var(--line-2); border-radius: 0 7px 7px 0;
  color: var(--mut2); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere;
}
.msg-cita b { flex: 0 1 auto; color: var(--mut); font-weight: 700; }
.msg-cita span { flex: 0 1 auto; min-width: 0; }
.t0 { color: #ff6b81; }
.t1 { color: #ffb04a; }
.t2 { color: #6fe3a1; }
.t3 { color: #7fc8ff; }
.t4 { color: #c58cff; }
.t5 { color: #ff8fd0; }
.t6 { color: #b8e04a; }
.t7 { color: #8ce0d6; }
.t8 { color: #ff9466; }
.t9 { color: #d9d2ff; }
.msg-quien--fundador { color: #ffd24a; }
.msg-quien--admin { color: #7fb3ff; }
.msg-quien--verificado { color: #7fdcd0; }
.msg-canal { background: rgb(255 37 64 / .1); border-left: 2px solid var(--red); }
.msg-canal:hover { background: rgb(255 37 64 / .16); }
.msg-canal .msg-quien { color: #fff; }
.msg-mencion { background: rgb(255 37 64 / .07); border-left: 2px solid var(--red); }
.msg-mencion:hover { background: rgb(255 37 64 / .13); }

/* Insignias: recuadro de 18 con su icono dentro y el nombre en un globo que aparece al pasar
   el ratón. El globo es CSS puro; no cuesta ni una consulta ni una línea de JavaScript. */
.msg-insignias { display: inline-flex; gap: 2px; margin-right: 5px; vertical-align: -4px; }
.msg-insignia {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
}
.msg-insignia svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg-insignia--canal { border: 1px solid rgb(255 210 74 / .5); background: rgb(255 210 74 / .14); color: #ffd24a; }
.msg-insignia--canal svg { fill: currentColor; stroke: none; }
.msg-insignia--fundador { background-image: linear-gradient(110deg, #f0b429, #ffeaa6 48%, #e0a115); color: #2a1c00; }
.msg-insignia--admin { background: #4d8dff; color: #071430; }
.msg-insignia--verificado { background: #4dc3d6; color: #04212a; }
/* La verde es el verde de Discord en línea, y su marca va rellena: con `fill:none` no se leería. */
.msg-insignia--oficial { background: #57f287; color: #04240f; }
.msg-insignia--oficial svg { fill: currentColor; stroke: none; }
.msg-insignia--vip { background: linear-gradient(135deg, #e0055f, #ff2a85); color: #fff; }
.msg-insignia--vip svg { fill: currentColor; stroke: none; }
.msg-insignia--mod { background: linear-gradient(135deg, #00b06f, #00d68f); color: #fff; }
.msg-insignia--mod svg { fill: currentColor; stroke: none; }

.msg-globo {
  position: absolute; left: -2px; bottom: calc(100% + 4px); z-index: 20; padding: 4px 8px;
  border-radius: 6px; background: var(--s3); color: #fff;
  font: 500 11px/1.4 Barlow, sans-serif; white-space: nowrap;
  opacity: 0; pointer-events: none; box-shadow: 0 8px 20px -8px rgb(0 0 0 / .7);
  transition: opacity .15s;
}
.msg-insignia:hover .msg-globo { opacity: 1; }

/* El bulto de la derecha de la fila: el botón de responder y, si quien mira manda aquí, los tres
   puntos. Viven juntos en el mismo hueco para que sea un solo gesto: asoman al pasar el ratón por la
   fila (o al enfocar con el teclado) y se van cuando el ratón se va; en pantalla táctil, que no tiene
   ratón, están siempre. Los iconos son SVG de la casa, no el glifo «↩», que cada fuente lo pintaba
   torcido y más alto que el texto. */
.msg-acciones { position: absolute; top: 2px; right: 6px; display: flex; align-items: center; gap: 2px; }
.msg-btn,
.msg-acc > summary {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px; list-style: none; cursor: pointer;
  background: none; color: var(--mut2);
  opacity: 0; visibility: hidden; transition: opacity .14s, background-color .14s;
}
.msg-btn svg,
.msg-acc > summary svg { width: 15px; height: 15px; }
.msg-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg-acc > summary svg { fill: currentColor; stroke: none; }
.msg-acc > summary::-webkit-details-marker { display: none; }
.msg:hover .msg-btn, .msg-btn:focus-visible,
.msg:hover .msg-acc > summary, .msg-acc:focus-within > summary, .msg-acc[open] > summary {
  opacity: 1; visibility: visible;
}
.msg-btn:hover, .msg-acc > summary:hover { background: var(--s3); color: #fff; }
@media (hover: none) { .msg-btn, .msg-acc > summary { opacity: 1; visibility: visible; } }
/* El desplegable de los tiempos de silencio, pegado a su botón. */
.msg-acc { position: relative; }
.msg-menu {
  position: absolute; top: 28px; right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 3px; min-width: 178px; padding: 7px;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--s2);
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / .8);
}
.msg-menu form { margin: 0; }
.msg-menu .ghost { width: 100%; justify-content: flex-start; text-align: left; }
/* Las filas de abajo del marco no tienen sitio debajo: su menú sale hacia arriba, que es por donde
   cabe entero. Era el motivo de que los tres puntos «no salieran» al pulsar en el último mensaje. */
.chat-lista > .msg:nth-last-child(-n+6) .msg-menu { top: auto; bottom: 28px; }

/* El panel de callados, que solo ve quien manda en la sala: quién no puede escribir aquí, cuánto
   le queda y su botón de levantar antes de tiempo. */
.chat-silencios {
  margin: 10px 12px 0; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--s2); font-size: 12.5px;
}
.chat-silencios > summary { list-style: none; cursor: pointer; color: var(--mut2); }
.chat-silencios > summary::-webkit-details-marker { display: none; }
.chat-silencios > summary:hover { color: #fff; }
.chat-silencios ul { margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; list-style: none; }
.chat-silencios li { display: flex; align-items: center; gap: 8px; }
.chat-silencios b { color: #fff; font-weight: 600; }
.chat-silencios small { flex: 1 1 auto; color: var(--mut3); }

/* Lo que dice el hilo de vez en cuando: que la casa tarda, o que el directo se cerró. Se coloca
   encima de la lista y con el mismo ancho que el recuento de arriba. */
.chat-hilo-aviso { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--s2); font-size: 13px; color: var(--mut2); }
.chat-hilo-aviso.fin { color: var(--red); }
/* El aviso que deja la casa al callar a alguien va dentro del marco: el mismo sitio que el anterior. */
.chat-hilos > .chat-aviso { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--s2); }
.msg-vacio { padding: 4px 8px; font-size: 13.5px; color: var(--mut2); }
.chat-err { margin: 0; padding: 12px 16px 0; font-size: 13.5px; color: var(--red); }
.chat-nota { margin: 0; padding: 0 16px 12px; font-size: 12px; color: var(--mut3); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Con señal de verdad, la sala es negro y el vídeo lo ocupa; la píldora va encima. */
.player.on-air { background: #000; place-items: stretch; text-align: left; }
.player-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.player.on-air .live-badge { z-index: 2; }

/* ---------------- estudio del creador ---------------- */
.studio-state {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 18px 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--s1);
}
.studio-state p { margin: 0; font-size: 15px; color: #fff; }
.studio-state small { font-size: 12.5px; color: var(--mut3); }
.studio-state.live {
  border-color: rgb(201 5 34 / .55);
  background-image: linear-gradient(150deg, #180a0e, var(--s1) 62%);
}
.studio-state.live .live-badge { position: static; align-self: flex-start; margin: 0; }
.studio-state .state-off {
  padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 7px;
  font: 700 10px/1 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mut3);
}
.studio .panel-grid { margin-top: 16px; }
.kv-line small { display: block; flex-basis: 100%; font-size: 12px; color: var(--mut3); }
.kv-line b.ok { color: #7ee2a0; }
.kv-line b.bad { color: #ff9dab; }

/* La clave de emisión: se puede seleccionar y copiar, nunca se esconde tras un campo. */
/* Servidor y clave de emisión, cada uno en su campo con su botón de copiar. La clave sale con
   puntos de serie (input password) para que en un compartir pantalla no se lea nada. */
.clave { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--s3); }
.clave > span { font: 700 10.5px/1.6 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mut3); }
.clave-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.clave-valor {
  flex: 1 1 180px; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--s1);
  color: #fff; font: 500 13.5px/1.4 ui-monospace, 'DejaVu Sans Mono', monospace; cursor: text;
  transition: border-color .18s;
}
.clave-valor:focus { outline: none; border-color: var(--red); }
.clave-valor[type='password'] { letter-spacing: .22em; }
.clave-copiar { flex: 0 0 auto; height: 40px; padding: 0 14px; font-size: 13px; }
.clave-copiar .c-hecho { display: none; }
.clave-copiar[data-ok] { color: #fff; border-color: var(--red); }
.clave-copiar[data-ok] .c-pedir { display: none; }
.clave-copiar[data-ok] .c-hecho { display: inline; }
.mux-bad { margin-top: 6px; border-color: rgb(201 5 34 / .5); background: var(--s3); }
.mux-bad h3 { margin: 0 0 4px; font-size: 14px; color: #ff9dab; }
.mux-bad p { margin: 0; font-size: 13.5px; color: var(--mut2); }

/* Los puntos de canal: el apartado del Studio va debajo de los datos de emisión y a lo ancho, con
   sus tres cosas separadas por un filete —lo que se decide, la foto y la gente que los tiene—. */
.ptos { gap: 14px; margin-top: 16px; }
.ptos > .mut { margin: 0; font-size: 14px; line-height: 1.6; }
.ptos h4 {
  margin: 0; font: 700 12px/1.4 Barlow, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mut2);
}
.ptos-datos { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.ptos-datos > .row { grid-column: 1 / -1; }
.ptos-insignia, .ptos-gente {
  display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line);
}
.ptos-muestra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ptos-muestra img {
  width: 72px; height: 72px; object-fit: contain;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--s1);
}
.ptos-demo {
  flex-shrink: 0; width: 72px; height: 72px;
  border: 1px dashed var(--line-2); border-radius: 14px; background: var(--s1);
}
.ptos-muestra p { margin: 0; font-size: 13px; }
.ptos-cuenta { margin: 0; font-size: 13px; }
.ptos-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ptos-lista li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ptos-lista li:last-child { border-bottom: 0; }
.ptos-quien { display: flex; flex: 1 1 200px; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.ptos-quien > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ptos-quien b { font-size: 14.5px; color: #fff; overflow-wrap: anywhere; }
.ptos-quien small { font-size: 12px; color: var(--mut3); overflow-wrap: anywhere; }
a.ptos-quien:hover b { color: var(--red); }
.ptos-saldo { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; }
.ptos-saldo b { font: 700 20px/1 Barlow, sans-serif; color: var(--red); }
.ptos-saldo small { max-width: 140px; font-size: 11px; text-align: right; color: var(--mut3); overflow-wrap: anywhere; }
.ptos-regalo { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.ptos-regalo input {
  width: 96px; height: 38px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--s1);
  color: #fff; font: 600 14px/1 Barlow, sans-serif;
}
.ptos-regalo input:focus { outline: none; border-color: var(--red); background: var(--s3); }
.ptos-regalo .ghost { height: 38px; }
.ptos-paginas { margin: 4px 0 0; }
@media (min-width: 768px) { .ptos-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 639.98px) {
  .ptos-quien { flex: 1 1 120px; }
  .ptos-saldo { align-items: flex-start; }
  .ptos-regalo { flex: 1 1 100%; }
  .ptos-regalo input { flex: 1 1 auto; width: auto; }
}

/* ---------------- perfil público: las tres puertas ---------------- */
.perfil-page { display: flex; flex-direction: column; gap: 18px; padding-top: 34px; }
/* Lo único que queda del perfil viejo: el mango de la dirección, que el sistema nuevo reutiliza,
   y el hilo de «Volver». El resto se lo lleva `ht-` abajo. */
.pf-handle { margin: 2px 0 0; font-size: 13px; color: var(--mut2); overflow-wrap: anywhere; }
.bio { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--txt); white-space: pre-line; overflow-wrap: anywhere; }
.bio.none { color: var(--mut3); font-style: italic; }
/* El perfil va solo, sin panel: arriba lleva el hilo para volver a la página de la que se entró. */
.pf-volver-fila { margin: 0 0 16px; }
.pf-volver {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--mut); font: 600 13px/1 Barlow, sans-serif; transition: color .16s, border-color .16s;
}
.pf-volver:hover { color: #fff; border-color: var(--red); }
.pf-volver .ic { width: 16px; height: 16px; opacity: 1; }
.btn-red .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }

/* ==================================================================
   El perfil de la casa con su hoja de encima (hometofy-perfil.zip)
   Es el mismo en las tres puertas —/<slug> en TofyLive, /videos/canal
   y /social/canal— y por eso todo lleva `ht-`. De los `.pf-*` viejos
   solo quedan los que siguen pintando: el mango, el «Volver» y la
   tarjeta de canal del carril.
   Los colores son los de su hoja, escritos como él los dejó: el
   primario oklch(0.62 0.22 18) con su brillo oklch(0.72 0.2 35), el
   oro del fundador (0.86 0.15 88)→(0.68 0.17 62) y el azul del
   verificado (0.74 0.18 248)→(0.6 0.16 272).
   Dos cosas suyas se domestican contra el cabecero de esta hoja: el
   `glass` (backdrop-filter) sale en superficie sólida y el
   `drop-shadow` de sus iconos se quita —el resplandor lo lleva la
   caja del gafete—. Quedan dos bucles, el banner y el anillo, y el
   bloque global de `prefers-reduced-motion` los apaga.
   ================================================================== */
.ht-perfil {
  --ht-p: oklch(0.62 0.22 18); --ht-glow: oklch(0.72 0.2 35);
  /* La tipográfica de la puerta. Dentro de TofyLive y de TofyTube ya se carga Barlow Condensed; el
     muro no la pide —la suya es Bebas Neue— y por eso se la baja propia, en vez de traer una letra
     nueva por la cara para una sola hoja. */
  --ht-display: 'Barlow Condensed', Barlow, sans-serif;
  gap: 22px;
}
.p-social .ht-perfil { --ht-display: 'Bebas Neue', Barlow, sans-serif }
.ht-card {
  position: relative; overflow: hidden; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-2x);
  background: var(--s1); box-shadow: 0 30px 70px -45px rgb(0 0 0 / .95);
}

/* El banner: su degradado de cuatro paradas moviéndose en 14 segundos, y encima el velo que lo
   funde con la tarjeta para que la letra de abajo se lea siempre. */
.ht-banner { position: relative; height: 200px; }
.ht-banner-fondo {
  position: absolute; inset: 0;
  background-image: linear-gradient(120deg, oklch(0.3 0.12 15), oklch(0.18 0.06 340), oklch(0.35 0.15 30), oklch(0.15 0.04 20));
  background-size: 300% 300%; animation: ht-banner 14s ease infinite;
}
.ht-banner-velo {
  position: absolute; inset: 0;
  background-image: linear-gradient(to top, var(--s1), oklch(0.18 0.01 20 / .25) 55%, transparent);
}
/* El suyo: la foto llena la franja y se recorta por arriba y por abajo, igual que en su maqueta. */
.ht-banner-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; background: var(--s2);
}
@keyframes ht-banner { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.ht-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: 0 26px 24px; }
.ht-avatar { position: relative; flex: 0 0 auto; width: 120px; height: 120px; margin-top: -52px; }
.ht-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background-image: conic-gradient(from 0deg, var(--ht-p), var(--ht-glow), var(--ht-p));
  animation: ht-giro 6s linear infinite;
}
@keyframes ht-giro { to { transform: rotate(360deg); } }
.ht-avatar-in {
  position: absolute; inset: 4px; display: grid; place-items: center;
  overflow: hidden; border-radius: 50%; background: var(--s2);
}
.ht-avatar-in .ava { width: 100%; height: 100%; border-radius: 50%; font-size: 40px; }
.ht-estado { position: absolute; box-sizing: content-box; width: 18px; height: 18px; border: 4px solid var(--s1); right: 6px; bottom: 6px; }
/* El punto de las puertas sin directo: rojo fijo, sin el latido de «ahora mismo al aire», que solo
   vale dentro de TofyLive. Aquí dice que esta puerta ya tiene cosas de él. */
.ht-estado--activo { background: var(--red); }

.ht-id { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.ht-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ht-nombre .h1 {
  font-family: var(--ht-display); font-size: clamp(30px, 4.6vw, 44px); font-weight: 800; letter-spacing: .01em;
}
.ht-bio { margin: 8px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--txt); white-space: pre-line; overflow-wrap: anywhere; }
.ht-bio-vacio { color: var(--mut3); font-style: italic; }
.ht-bio-vacio a { color: var(--red); font-weight: 600; }
.ht-gafetes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.ht-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ht-pil {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s2);
  font-size: 14px; color: var(--mut2);
}
.ht-pil b { color: #fff; font-weight: 700; }
.ht-pil .ic { width: 17px; height: 17px; color: var(--red); }
.ht-icono {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s2);
  color: var(--mut); transition: color .16s, border-color .16s;
}
.ht-icono:hover { color: var(--red); border-color: var(--red); }
.ht-icono .ic { width: 19px; height: 19px; }

/* Sus cuatro tarjetas de número: icono arriba, la etiqueta en versalitas y el valor en la
   tipográfica de la puerta. En tableta van de dos en dos, como en su hoja. `minmax(0, …)`: con
   `1fr` a secas una cifra larga o un nombre sin huecos ensancha su columna sobre las demás. */
.ht-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) { .ht-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ht-stat {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl2); background: var(--s1);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ht-stat:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 16px 34px -24px oklch(0.6 0.24 25 / .95); }
.ht-stat .ic { width: 22px; height: 22px; color: var(--red); }
.ht-stat p { margin: 0; font: 700 11px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mut3); }
.ht-stat b { font-family: var(--ht-display); font-size: 27px; font-weight: 800; line-height: 1.05; color: #fff; }

.ht-log-card { padding: 22px 26px 26px; }
.ht-log-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ht-log-t h3 { margin: 0; font-family: var(--ht-display); font-size: 21px; font-weight: 700; color: #fff; }
.ht-chip {
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s2);
  font: 700 10.5px/1 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut2); white-space: nowrap;
}
.ht-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ht-log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 12px; border-radius: var(--r-sm); transition: background-color .16s; }
.ht-log li:hover { background: var(--s2); }
.ht-marc { flex: 0 0 auto; align-self: center; width: 8px; height: 8px; border-radius: 50%; background-image: linear-gradient(135deg, var(--ht-p), var(--ht-glow)); }
.ht-log span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--mut); }
.ht-log b { font-family: var(--ht-display); font-size: 16px; font-weight: 700; color: #fff; }
.ht-log small { width: 132px; text-align: right; font-size: 12.5px; color: var(--mut3); }
.ht-vacio { margin: 0; font-size: 14.5px; color: var(--mut3); font-style: italic; }
/* En TofyTube y en el muro el registro enlaza lo que lista —un vídeo, un mensaje—, así que el texto
   se aclara al pasar por encima. El enlace hereda el color de la fila, no le pone el de la casa. */
.ht-log a:hover { color: #fff }

/* El gafete: su marco es el degradado (el fondo va por dentro del borde, el degradado por fuera),
   la tinta saca el color del propio marco y el brillo barre de izquierda a derecha al pasar.
   El globo va fuera de la pastilla —la pastilla va recortada por donde entra el brillo—. */
.ht-gafete-c { position: relative; display: inline-flex; }
.ht-gafete {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 8px; border: 1px solid transparent; border-radius: var(--r-pill);
  overflow: hidden; white-space: nowrap; background-color: var(--s2);
  font: 600 13px/1.35 Barlow, sans-serif; letter-spacing: .02em; color: var(--tinta);
  background-image: linear-gradient(160deg, var(--ll1), var(--ll2)), linear-gradient(120deg, var(--b1), var(--b2));
  background-origin: padding-box, border-box; background-clip: padding-box, border-box;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.ht-gafete::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(105deg, transparent 32%, var(--brillo) 46%, transparent 62%);
  transform: translateX(-130%);
}
.ht-gafete-c:hover .ht-gafete, .ht-gafete-c:focus-within .ht-gafete { transform: translateY(-2px); box-shadow: 0 8px 24px -10px var(--luz); }
.ht-gafete-c:hover .ht-gafete::after { animation: ht-barra .9s ease; }
@keyframes ht-barra { to { transform: translateX(130%); } }
.ht-gafete .ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--tinta); }
.ht-gafete b { font-weight: 600; color: var(--tinta); }
.ht-gafete-ic { padding: 7px; gap: 0; }
.ht-gafete-ic .ic { width: 18px; height: 18px; }

.ht-gafete--founder {
  --b1: oklch(0.86 0.15 88); --b2: oklch(0.68 0.17 62);
  --ll1: oklch(0.3 0.03 78); --ll2: oklch(0.257 0.023 62);
  --tinta: oklch(0.91 0.089 88); --brillo: oklch(0.86 0.15 88 / .42); --luz: oklch(0.86 0.15 88 / .75);
  box-shadow: 0 0 20px -8px oklch(0.86 0.15 88 / .8);
}
.ht-gafete--staff {
  --b1: var(--ht-p); --b2: var(--ht-glow);
  --ll1: oklch(0.303 0.037 18); --ll2: oklch(0.26 0.025 35);
  --tinta: oklch(0.767 0.13 18); --brillo: oklch(0.62 0.22 18 / .42); --luz: oklch(0.62 0.22 18 / .75);
}
.ht-gafete--verificado {
  --b1: oklch(0.74 0.18 248); --b2: oklch(0.6 0.16 272);
  --ll1: oklch(0.288 0.032 248); --ll2: oklch(0.25 0.022 272);
  --tinta: oklch(0.84 0.107 248); --brillo: oklch(0.74 0.18 248 / .42); --luz: oklch(0.74 0.18 248 / .75);
}
/* El verde es el de Discord en línea (57f287 / 23a55a), no un verde de la casa: la marca dice
   «portal de Discord», así que se pinta con su color. El logo va relleno y sin bajarle el brío. */
.ht-gafete--oficial {
  --b1: oklch(0.855 0.197 150); --b2: oklch(0.637 0.155 152);
  --ll1: oklch(0.3 0.035 150); --ll2: oklch(0.257 0.025 152);
  --tinta: oklch(0.876 0.15 150); --brillo: oklch(0.855 0.197 150 / .42); --luz: oklch(0.855 0.197 150 / .75);
  box-shadow: 0 0 20px -8px oklch(0.855 0.197 150 / .8);
}
.ht-gafete--oficial .ic { opacity: 1 }

.ht-globo {
  position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 20;
  width: max-content; max-width: 230px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl2); background: var(--s2);
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / .9);
  font: 500 12.5px/1.35 Barlow, sans-serif; text-align: center; color: var(--txt);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.ht-gafete-c:hover .ht-globo, .ht-gafete-c:focus-within .ht-globo { opacity: 1; transform: translate(-50%, 0); }

/* La entrada escalonada de su hoja. Con `backwards` en lugar de `both`: si no, el último
   fotograma se quedaría pegado y el `translateY` del hover no podría mover la tarjeta. */
.ht-entra { animation: ht-entra .6s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes ht-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 767.98px) {
  .ht-banner { height: 150px; }
  .ht-cab { padding: 0 18px 20px; gap: 14px; }
  .ht-avatar { width: 96px; height: 96px; margin-top: -42px; }
  .ht-avatar-in .ava { font-size: 32px; }
  .ht-log-card { padding: 18px; }
  .ht-log small { width: auto; text-align: left; flex: 1 1 100%; }
}

/* La sala ya está cerrada: la URL deja de existir, y lo decimos. */
.closed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.closed-head h1 { font-size: clamp(20px, 3.4vw, 28px); }
.closed-head .sub { margin: 4px 0 0; }
.player-off code { font-size: 12.5px; color: var(--mut); }

/* ---------------- formularios ---------------- */
.auth { display: grid; place-items: center; padding-block: 62px; }
.auth-card {
  width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 16px;
  padding: 32px 26px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--s1);
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / .95);
}
.auth-card h1 { font-size: 26px; }
.wide-auth .auth-card { max-width: 620px; }
.note { margin: 0; font-size: 14px; color: var(--mut2); }
.auth-card .note a { color: var(--red); font-weight: 600; }
.auth-card .note a:hover { text-decoration: underline; }

/* El botón de Discord: la medida y la redondez de los botones de siempre, con su color de arriba.
   No añade ningún bucle ni ningún filtro — es un enlace normal y corriente, sin JavaScript. */
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px;
  padding: 0 24px; border: 0; border-radius: 11px; background: #5865f2;
  font: 600 15px/1 Barlow, sans-serif; color: #fff; text-decoration: none;
  transition: background-color 0.18s, transform 0.18s;
}
.btn-discord:hover { background: #4752c4; transform: translateY(-1px); }
.btn-discord:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* La raya con la palabra en medio que separa las dos puertas de la misma tarjeta. */
.divide {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 600 12px/1 Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mut3);
}
.divide::before, .divide::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* El anuncio de una puerta con cuenta atrás (el lanzamiento de TofySocial): el número grande en Bebas,
   todo por el mismo borde de la tarjeta. La barra se mide en `width` desde la hoja —una vez por
   segundo—, porque el bloque global de `prefers-reduced-motion` apaga las animaciones y con keyframes
   se quedaría tiesa en la pantalla de quien lo tenga puesto. */
.ht-eyebrow {
  margin: 0; font: 700 13px/1.2 Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mut2);
}
.ht-num {
  margin: 0; font-family: 'Bebas Neue', Barlow, sans-serif; font-size: clamp(66px, 15vw, 108px);
  line-height: .86; letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums;
}
.ht-barra { height: 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--s3); overflow: hidden }
.ht-barra > span { display: block; width: 100%; height: 100%; background: var(--grad) }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); }
.field input, .field textarea {
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--s2); color: #fff; font: inherit; font-size: 15px; width: 100%;
  transition: border-color .18s, background-color .18s;
}
.field input { height: 46px; padding-block: 0; }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--mut3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); background: var(--s3); }
.field small { font-size: 12px; color: var(--mut3); }
.field.bad input, .field.bad textarea, .field.bad select { border-color: var(--red); }
.field input[type=file] {
  height: auto; padding: 10px 12px; border-style: dashed; font-size: 14px; color: var(--mut);
  cursor: pointer;
}
.field input[type=file]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--s3); color: var(--txt); font: 700 12.5px Barlow, sans-serif; cursor: pointer;
}
.field input[type=file]:focus { border-color: var(--red); background: var(--s2); }
.perfil { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.perfil-ava { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 128px; flex-shrink: 0; text-align: center; }
.perfil-ava .mut { font-size: 12px; line-height: 1.4; }
.perfil form { flex: 1 1 280px; min-width: 0; }
.perfil .row { flex-wrap: wrap; }
.perfil-form { display: flex; flex-direction: column; gap: 16px; }

/* La franja del perfil dentro de Ajustes: primero se enseña cómo queda y debajo se cambia. La
   muestra sin banner repite el degradado de la cabecera, para que lo que se vea sea lo que hay. */
.perfil-banner { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.perfil-banner h4 { margin: 0; font: 700 12.5px/1.2 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mut2); }
.perfil-banner form { display: flex; flex-direction: column; gap: 14px; }
.perfil-banner .row { flex-wrap: wrap; }
.pb-muestra {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--s2);
}
.pb-demo {
  display: block; width: 100%; height: 96px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background-image: linear-gradient(120deg, oklch(0.3 0.12 15), oklch(0.18 0.06 340), oklch(0.35 0.15 30), oklch(0.15 0.04 20));
  background-size: 300% 300%; animation: ht-banner 14s ease infinite;
}
.pb-note { margin: 0; font-size: 12.5px; line-height: 1.5; }
.err { font-size: 12.5px; font-weight: 600; color: #ff9dab; }
.form-err { margin: 0; padding: 10px 12px; border-radius: 9px; background: rgb(74 3 17 / .5); }
.alt { margin: 4px 0 0; font-size: 14px; text-align: center; color: var(--mut2); }
.alt a { color: var(--red); font-weight: 600; }
.alt a:hover { text-decoration: underline; }

/* ---------------- iconos de línea del Tube y del muro ---------------- */
.ic {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.ic-fill { fill: currentColor; stroke: none }
.eyebrow .ic { width: 15px; height: 15px }
.boton-accion .ic, .muro-nav .ic, .adjuntar .ic { width: 17px; height: 17px; opacity: 1 }

/* teclas comunes: las cuentas van en números tabulares para que el muro no baile */
.pequeno { height: 32px; padding: 0 11px; border-radius: 9px; font-size: 12px }
.nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mut3) }
.aviso {
  margin: 0; padding: 11px 14px; border: 1px solid rgb(201 5 34 / .5); border-radius: 12px;
  background: rgb(74 3 17 / .5); font-size: 13.5px; color: #ffdae0;
}

/* ---------------- inicio: el portal de la casa ---------------- */
/* ---------------- el inicio: su portada, sus tres puertas y sus tres carriles ---------------- */
body.p-home { background: var(--bg) }
.home-top {
  position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 20px 24px;
}
/* El sello de la casa, tal cual lo puso: recorte en cuadro y esquinas de su escala. */
.marca-logo { display: block; flex-shrink: 0; border-radius: var(--r-md); object-fit: cover }
.home-marca { display: inline-flex; align-items: center; gap: 12px; font-size: 30px; line-height: 1; letter-spacing: .06em; color: #fff }
/* El aviso de beta va pegado al sello: pequeño, con su filo rojo para que se vea sin robar la palabra. */
.home-beta {
  padding: 3px 9px; border: 1px solid var(--red); border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .42); color: #fff;
  font: 700 11px/1.4 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.home-entrar {
  padding: 8px 20px; border: 1px solid var(--red); border-radius: var(--r-pill);
  font: 600 14px/1.4 Barlow, sans-serif; color: #fff; transition: background-color .18s, color .18s;
}
.home-entrar:hover { background: var(--red); color: #fff }
/* La misma píldora de su cabecera, pero con el desplegable de cuenta dentro. */
.home-top .menu summary {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(22, 17, 19, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  height: 38px;
  color: #fff;
  transition: border-color var(--dur-norm) ease, background-color var(--dur-norm) ease;
}
.home-top .menu summary:hover,
.home-top .menu[open] > summary {
  border-color: var(--red);
  background: var(--s3);
  color: #fff;
}
.home-top .notif summary {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(22, 17, 19, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 38px;
  height: 38px;
  color: var(--mut);
  transition: border-color var(--dur-norm) ease, background-color var(--dur-norm) ease;
}
.home-top .notif summary:hover,
.home-top .notif[open] > summary {
  border-color: var(--red);
  background: var(--s3);
  color: #fff;
}

.hero {
  position: relative; display: flex; align-items: flex-end; min-height: var(--hero-alto, 85vh);
  margin: 0; overflow: hidden; background: var(--bg);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 2%, oklch(0.13 0.005 20 / .4) 42%, transparent 92%);
}
.hero-in { position: relative; padding: 0 24px 64px }
.hero-vivos {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font: 700 14px/1.4 Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.hero-vivos i { width: 8px; height: 8px }
.hero-titulo { margin: 0; font-size: 72px; line-height: .85; color: #fff; }
/* La misma beta contada del todo, en tamaño de nota y pegada al título. */
.hero-beta { margin: 16px 0 0; max-width: 660px; font-size: 13.5px; line-height: 1.55; color: var(--mut2) }
.hero .flash { margin-bottom: 14px }

/* ---------------- las tres puertas ---------------- */
.portales {
  display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--line); border-top: 1px solid var(--line);
}
.portal {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; padding: 32px; background: var(--bg); overflow: hidden;
}
/* Sus tres banners son oscuros de por sí (luminancia media 12-19 de 255), así que entran a plena
   opacidad y es el velo el que baja el tono para que se lea el texto. */
.portal-art { position: absolute; inset: 0; }
.portal-velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 8%, oklch(0.13 0.005 20 / .55) 55%, transparent);
  transition: opacity .5s;
}
.portal:hover .portal-velo { opacity: .55 }
/* el banner cubre la puerta entera; el recorte 306x420 cae sobre el centro del dibujo */
.portal-foto { width: 100%; height: 100%; object-fit: cover }
.portal-c { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start }
.portal-ic { display: flex; margin-bottom: 16px; color: var(--red) }
.portal-ic .ic { width: 40px; height: 40px; opacity: 1 }
.portal-n { font-size: 48px; line-height: .95; color: #fff }
.portal-txt { margin: 8px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--mut2) }
.portal-stat { margin-top: 16px; font: 600 14px/1.5 Barlow, sans-serif; color: var(--red) }
.portal-ir {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font: 700 14px/1 Barlow, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  transition: gap .25s;
}
.portal-ir .ic { width: 20px; height: 20px; opacity: 1 }
.portal:hover { background: var(--s1) }
.portal:hover .portal-ir { gap: 16px }

.tres { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding: 64px 24px }
.tres-col { display: flex; flex-direction: column; min-width: 0 }
.tres-col > .h2 { margin: 0 0 16px; font-size: 30px; line-height: 1; letter-spacing: .04em }

.home-r {
  display: flex; align-items: center; gap: 12px; padding-block: 12px;
  border-bottom: 1px solid var(--line); transition: color .16s;
}
.home-r:hover { color: var(--red) }
.home-r .ava { box-shadow: 0 0 0 2px var(--red) }
.home-r-id { flex: 1 1 auto; min-width: 0 }
.home-r-id b, .home-r > b {
  display: block; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.4;
  color: #fff; text-overflow: ellipsis; white-space: nowrap;
}
.home-r:hover > b { color: var(--red) }
.home-r-id small, .home-r > small {
  display: block; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--mut2);
  text-overflow: ellipsis; white-space: nowrap;
}
.home-r > small { max-width: 100% }
.home-r-post { flex-direction: column; align-items: flex-start; gap: 2px }
.home-r-post b span { font-weight: 400; color: var(--mut2) }
.home-r-num { flex-shrink: 0; font-size: 13px; color: var(--mut) }
.home-r-mini {
  position: relative; display: block; flex-shrink: 0; width: 80px; height: 48px;
  overflow: hidden; border-radius: var(--r-4); background-image: linear-gradient(150deg, #1b0d11, #120e0f 70%);
}
.home-r-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.home-foot {
  margin-top: auto; padding: 24px; border-top: 1px solid var(--line);
  text-align: center; font-size: 13px; color: var(--mut2);
}
.home-foot a { color: var(--red); }
.home-foot a:hover { text-decoration: underline; }

.band-head .h2 { font-size: 30px; line-height: 1; letter-spacing: .02em }

.card-viendo {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 7px; background: rgb(0 0 0 / .72); color: #fff;
  font: 600 11px/1.4 Barlow, sans-serif;
}
.card-viendo .ic { width: 13px; height: 13px; opacity: 1 }
.rail-c-ver {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font: 600 11px/1 ui-monospace, Menlo, monospace; color: #ff9dab;
}
.rail-c-ver .ic { width: 12px; height: 12px; opacity: 1 }
.rail-c-ver + .rail-c-up { margin-left: 8px }

/* El catálogo de categorías: son más de mil, así que se busca o se entra por letra. */
.cat-buscar { max-width: 480px; margin: 0 0 16px }
.pto-live .cat-buscar { margin: 28px 0 0 }
/* El índice por letra, en teselas: la letra display grande, cuántos nombres hay debajo y el primer
   nombre de la letra alcanzando a leerse. Son 29 montones, no un chip por letra que no se entera uno. */
.cat-teclero {
  display: grid; gap: 10px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.cat-tecla {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: oklch(0.17 0.01 20 / 0.4); transition: border-color .16s, background-color .16s;
}
.cat-tecla:hover { border-color: var(--lv-r50); background: var(--lv-r10) }
.cat-tecla.on { border-color: var(--red); background: var(--lv-r10) }
.cat-tecla-l {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--lv-display); font-size: 28px; font-weight: 800; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; color: var(--txt);
}
.cat-tecla:hover .cat-tecla-l, .cat-tecla.on .cat-tecla-l { color: var(--red) }
.cat-tecla-l small { font: 600 11.5px/1 ui-monospace, Menlo, monospace; color: var(--mut3) }
.cat-tecla-p {
  overflow: hidden; font-size: 11.5px; line-height: 1.35; color: var(--mut);
  text-overflow: ellipsis; white-space: nowrap;
}
.cat-lista { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)) }
.cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s1);
  transition: border-color .16s, background-color .16s;
}
.cat-item b { overflow: hidden; font-size: 14px; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap }
.cat-item small {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--mut3);
}
.cat-item:hover { border-color: rgb(201 5 34 / .8); background: var(--s3) }
.cat-recorte { margin: 14px 0 0; font-size: 13px }
.pto-live .cat-lista { margin-top: 20px }
/* El recuento del título de sección no se pone en display: va en mono, como el resto de los números. */
.lv-h2 small { font: 600 13px/1 ui-monospace, Menlo, monospace; letter-spacing: .02em; color: var(--mut3) }
/* Entrar por una letra relaja la página: el anclaje deja la pantalla encima de los nombres. */
#nombres { scroll-margin-top: 80px }

.chips-fila {
  position: sticky; top: 66px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
  margin-inline: calc(var(--feed-pad) * -1); padding: 10px var(--feed-pad);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 15px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--s2);
  font: 600 13px/1 Barlow, sans-serif; color: var(--mut2);
  transition: color .16s, border-color .16s, background-color .16s;
}
.chip small { font-size: 11px; color: var(--mut3) }
.chip:hover { color: #fff; border-color: rgb(201 5 34 / .7); background: var(--s3) }
.chip.on { border-color: transparent; background: var(--txt); color: var(--bg); font-weight: 700 }
.chip.on small { color: var(--s3) }

/* ---------------- TofyTube: rejilla, shorts y ficha ---------------- */
.tube { display: flex; flex-direction: column; gap: 24px }
.grid-videos { display: grid; gap: 38px 16px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); align-items: start }
.card-video { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.video-art {
  position: relative; display: flex; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background-image: linear-gradient(150deg, #1b0d11, #120e0f 70%);
}
.video-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.video-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px;
  background: rgb(0 0 0 / .78); color: #fff; font: 600 11px/1.4 ui-monospace, Menlo, monospace;
}
.video-play {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgb(255 37 64 / .9); opacity: 0; transition: opacity .18s;
}
.video-play::after {
  content: ''; position: absolute; left: 17px; top: 14px; width: 0; height: 0;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.card-video:hover .video-play, .short:hover .video-play { opacity: 1 }
.video-body { display: flex; align-items: flex-start; gap: 11px; min-width: 0 }
.video-id { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.video-id b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff;
}
.video-id small { overflow: hidden; font-size: 12px; line-height: 1.4; color: var(--mut2); text-overflow: ellipsis; white-space: nowrap }
.video-id small + small { color: var(--mut3); font-size: 11.5px }
.card-video:hover .video-id small { color: var(--mut) }

.card-video.es-fila { flex-direction: row; gap: 10px; padding: 6px; border-radius: 12px; transition: background-color .16s }
.card-video.es-fila:hover { background: var(--s3) }
.card-video.es-fila .video-art { width: 116px; flex-shrink: 0 }
.card-video.es-fila .video-body { flex: 1 1 auto }
.card-video.es-fila .video-id b { font-size: 12.8px; line-height: 1.3 }
.card-video.es-fila .video-dur { right: 5px; bottom: 5px; padding: 2px 5px; font-size: 10px }

.shorts {
  display: flex; flex-direction: column; gap: 16px; margin-top: 10px;
  padding-block: 24px; border-block: 1px solid var(--line);
}
.shorts > .h2 { display: flex; align-items: center; gap: 10px; font-size: 30px; line-height: 1 }
.shorts > .h2 .ic { width: 24px; height: 24px }
.shorts-fila {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
.short { flex: 0 0 auto; display: flex; width: 176px; flex-direction: column; gap: 6px; min-width: 0 }
.short-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 9 / 16; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background-image: linear-gradient(160deg, #1b0d11, #120e0f 72%);
}
.short-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.short b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #fff;
}
.short small { font-size: 11.5px; color: var(--mut3) }
.short:hover .short-art { border-color: rgb(201 5 34 / .75) }

.ver { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 34px }
.ver-main { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.repro {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--line); border-radius: 16px;
}
.ver-titulo { margin: 0; font: 700 clamp(19px, 2.7vw, 26px)/1.22 Barlow, sans-serif; color: #fff }
.ver-quien {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ver-id { display: flex; flex-direction: column; gap: 2px; margin-right: auto }
.ver-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 2px }
.ver-id a { font-size: 15px; font-weight: 700; color: #fff }
.ver-id a:hover { color: var(--red) }
.ver-id small { font-size: 12px; color: var(--mut3) }
.ver-acciones { display: flex; align-items: center; gap: 8px }
.ver-acciones.derecha { margin-left: auto }
.ver-desc {
  display: flex; flex-direction: column; gap: 9px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--s2);
}
.ver-cifras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--mut3) }
.ver-texto { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--mut); white-space: pre-line; overflow-wrap: anywhere }
.ver-texto.quiet { color: var(--mut3) }
.ver-coms { margin-top: 4px; font-size: 16px }
.ver-lateral { display: flex; flex-direction: column; gap: 8px; min-width: 0 }

/* Las cuatro teclas de la tarjeta van peladas, como en su muro: letra apagada de 14, icono de 16
   y solo el color cambia al pasar por encima. El relleno y la caja desaparecieron. */
.boton-accion {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent;
  font: 500 14px/1.4 Barlow, sans-serif; color: var(--mut2); cursor: pointer;
  transition: color .16s;
}
.boton-accion .ic { width: 16px; height: 16px }
.boton-accion b { font-weight: 700; color: inherit; font-variant-numeric: tabular-nums }
.boton-accion:hover { color: #fff }
.boton-accion.on { color: var(--red) }
.boton-accion.on:hover { color: #ff5468 }
.boton-accion:disabled { color: var(--mut3); cursor: not-allowed }
.boton-accion:disabled:hover { color: var(--mut3) }
.btn-red.al-reves { background: var(--s3); border: 1px solid var(--line-2); color: var(--mut) }

.com-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px }
.com-form input {
  flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--s1);
  color: #fff; font: inherit; font-size: 14px;
}
.com-form input:focus { outline: none; border-color: var(--red); background: var(--s3) }
.com-lista { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding: 0 }
.com {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--s2);
}
.com-quien { font-size: 13.5px; font-weight: 700; color: #fff }
.com-quien:hover { color: var(--red) }
.com > small { font-size: 11.5px; color: var(--mut3) }
.com p { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.6; color: var(--txt); overflow-wrap: anywhere }

/* ---------------- TofySocial: el muro ----------------
   Sus números, medidos de su hoja: pantalla de 1280 como mucho, carril de 240 y columna derecha de
   300 con huecos de 24; todo van dentro de su capa `card` con radio 24 y la raya de la casa. La
   barra de pestañas va opaca: su diseño la pinta con desenfocado, y aquí eso se paga en cada
   refresco del carril, así que se queda en el mismo color de tarjeta sin `backdrop-filter`. */
body.p-social { background: var(--glow), var(--bg) }
.muro {
  display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr);
  width: 100%; max-width: 1280px; min-height: 100vh; margin-inline: auto; padding: 24px 16px;
}
.muro-izq { display: none }
.muro-centro { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.muro-der { display: none; gap: 16px; align-content: start; min-width: 0 }

/* el wordmark es su letra display, en rojo y sin logo delante */
.muro-marca-fila { margin: 0; padding-inline: 8px }
.muro-marca {
  display: inline-block;
  font-family: 'Bebas Neue', Barlow, sans-serif; font-size: 30px; line-height: 1.15; letter-spacing: .025em;
  color: var(--red);
}
.muro-nav { display: grid; gap: 4px }
.muro-nav a {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--r-xl2);
  font-size: 16px; font-weight: 500; color: var(--mut2);
  transition: color .16s, background-color .16s;
}
.muro-nav a:hover { color: #fff; background: var(--s3) }
.muro-nav a.on { color: var(--txt); background: var(--s3) }
.muro-nav a.on .ic { color: var(--red) }
.muro-nav .ic { width: 20px; height: 20px; opacity: 1 }
/* el número de avisos sin leer, en la punta derecha de su fila */
.muro-num {
  margin-left: auto; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--red); font: 700 12px/1.5 Barlow, sans-serif; color: #fff;
}
.muro-publicar {
  display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 0;
  border-radius: var(--r-pill); background-image: var(--grad); box-shadow: var(--sombra);
  font: 600 16px/24px Barlow, sans-serif; color: #fff;
  transition: box-shadow .18s;
}
.muro-publicar:hover { box-shadow: 0 14px 34px -12px oklch(0.58 0.23 27 / .75) }
.muro-volver {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: var(--r-xl2);
  font-size: 14px; color: var(--mut2);
  transition: color .16s, background-color .16s;
}
.muro-volver:hover { color: #fff; background: var(--s3) }
.muro-volver .ic { width: 20px; height: 20px; opacity: 1 }

/* las pestañas van dentro de su propia pastilla grande y la activa lleva el degradado puesto */
.pestannas {
  position: sticky; top: 0; z-index: 6; display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--r-2x); background: var(--s1);
}
.pestanna {
  flex: 1 1 0; padding: 10px 0; border-radius: var(--r-xl2); text-align: center;
  font: 600 14px/1.4 Barlow, sans-serif; color: var(--mut2);
  transition: color .16s, background-color .16s;
}
.pestanna:hover { color: var(--txt) }
.pestanna.on {
  background-image: var(--grad); box-shadow: var(--sombra);
  color: #fff;
}

.escribir {
  display: flex; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r-2x); background: var(--s1);
  scroll-margin-top: 72px;
}
/* La pastilla «Publicar» del carril trae hasta aquí con el ancla: el contorno rojo es lo que avisa
   de que la caja ya está abierta, porque sin JavaScript ninguna hoja mueve el foco por sí sola. */
.escribir:target { border-color: var(--red); box-shadow: 0 0 0 1px var(--rojo-45) }
.escribir > .ava { width: 44px; height: 44px; font-size: 18px }
.escribir-c { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0 }
.escribir textarea {
  width: 100%; min-height: 72px; padding: 4px 0; border: 0; background: transparent;
  color: #fff; font: inherit; font-size: 18px; line-height: 1.55; resize: vertical;
}
.escribir textarea:focus { outline: none; background: transparent }
.escribir textarea::placeholder { color: var(--mut3) }
/* El campo con su desplegable de menciones pegado debajo. La casa pinta la lista de registrados
   entera y escondida; el guion solo enseña las que empiezan por lo tecleado, así que el `hidden`
   tiene que mandar: son botones, y un botón con su propio `display` se comería el atributo.
   La respuesta del hilo va en fila —ahí el que se estira es el campo, no el input suelto—. */
.muro-campo { position: relative; min-width: 0 }
.muro-pop[hidden], .muro-op[hidden] { display: none }
.muro-pop {
  position: absolute; z-index: 6; top: calc(100% + 2px); left: 0; width: min(340px, 100%);
  max-height: 252px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--s2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5); scrollbar-width: thin;
}
.muro-op {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border: 0; border-radius: 11px; background: transparent; color: #fff;
  font: inherit; text-align: left; cursor: pointer; transition: background-color .16s;
}
.muro-op:hover { background: var(--s3) }
.muro-op span { display: flex; flex-direction: column; min-width: 0 }
.muro-op b, .muro-op small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.muro-op b { font-size: 14.5px; font-weight: 700 }
.muro-op small { font-size: 12.5px; color: var(--mut2) }
.muro-pop-vacio { margin: 0; padding: 8px; font-size: 13px; color: var(--mut2) }
.com-form .muro-campo { flex: 1 1 220px }
.com-form .muro-campo input { width: 100% }
.escribir-p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px;
  border-top: 1px solid var(--line); color: var(--red);
}
.escribir-p .btn-red {
  margin-left: auto; padding: 9px 20px; border: 0; border-radius: var(--r-pill);
  background-image: var(--grad); box-shadow: var(--sombra);
  font: 700 14px/1 Barlow, sans-serif; color: #fff;
}
.adjuntar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--red); cursor: pointer;
}
.adjuntar:hover { color: #ff9dab }
/* dentro del muro la foto se ofrece como su pastilla redonda */
.escribir-p .adjuntar {
  padding: 6px 12px; border-radius: var(--r-pill); font-size: 14px;
  transition: color .16s, background-color .16s;
}
.escribir-p .adjuntar:hover { background: var(--s3); color: #ff9dab }
.adjuntar input[type='file'] {
  max-width: 100%; font: 400 12px/1.4 Barlow, sans-serif; color: var(--mut3);
}
.adjuntar input[type='file']::file-selector-button {
  margin-right: 8px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--s3); color: var(--txt); font: 700 11.5px Barlow, sans-serif; cursor: pointer;
}

.post {
  display: flex; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r-2x); background: var(--s1);
  transition: border-color .16s;
}
.post:hover { border-color: var(--rojo-45) }
.post > .ava { width: 44px; height: 44px; font-size: 18px }
.post-cuerpo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0 }
.post-repost { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--mut3) }
.post-repost .ic { width: 14px; height: 14px }
.post-repost a { font-weight: 600; color: var(--mut2) }
.post-repost a:hover { color: #fff }
.post-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 14px }
.post-quien a { color: #fff; font-weight: 600 }
.post-quien a:hover { color: var(--red) }
.post-handle { font-size: 14px; color: var(--mut2) }
.post-texto { margin: 4px 0 0; font-size: 16px; line-height: 1.625; color: var(--txt); white-space: pre-line; overflow-wrap: anywhere }
.post-img {
  width: 100%; max-height: 420px; margin-top: 12px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r-xl);
}
/* sus cuatro acciones en fila, con el guardado empujado a la punta derecha */
.post-boton { display: flex; align-items: center; gap: 24px; margin-top: 12px; font-size: 14px; color: var(--mut2) }
.post-boton .ic { width: 16px; height: 16px }
.post-accion { display: inline-flex }
.post-guardar { margin-left: auto }
.post-tag, .post-mencion { color: var(--red); font-weight: 600 }
.post-tag:hover, .post-mencion:hover { text-decoration: underline }

/* La tecla de más y su menú. Los tres puntos van pelados, como las otras cuatro, y el desplegable
   cae pegado a la tecla: sin posición absoluta se llevaría la fila de acciones entera y la tarjeta
   empezaría a saltar. Son dos formularios de siempre dentro de un <details>, así que abrirlo no
   cuesta ni un script. */
/* La tarjeta la abre un lazo estirado, no un `<a>` que envuelva lo escrito: dentro del texto puede
   haber enlaces de mención y de etiqueta, y un `<a>` dentro de otro `<a>` no es HTML válido —el
   navegador cierra el de fuera, reanida la tarjeta y la línea queda en dos niveles, que es el
   desnivel que se veía—. El lazo es el hueco entero del mensaje y de la foto, y los enlaces de
   dentro se elevan por encima para que seguir a alguien no abra el mensaje. */
.post-abre { position: relative; display: block; color: inherit }
.post-abre:hover .post-texto { color: #fff }
.post-lazo { position: absolute; inset: 0; border-radius: var(--r-xl) }
.post-lazo:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }
.post-texto .post-tag, .post-texto .post-mencion { position: relative; z-index: 1 }
.post-fijado {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border: 1px solid var(--rojo-45); border-radius: var(--r-pill); background: var(--s2);
  font: 600 12px/1.4 Barlow, sans-serif; color: var(--red);
}
.post-fijado .ic { width: 13px; height: 13px }
.post.fijado { border-color: var(--rojo-45) }
.post-mas { position: relative; margin-left: 12px }
.post-mas > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent;
  font: 500 14px/1.4 Barlow, sans-serif; color: var(--mut2); cursor: pointer; list-style: none;
  transition: color .16s;
}
.post-mas > summary .ic { width: 16px; height: 16px }
.post-mas > summary::-webkit-details-marker { display: none }
.post-mas > summary:hover { color: #fff }
.post-mas[open] > summary { color: var(--red) }
.post-mas-dentro {
  position: absolute; z-index: 3; top: calc(100% + 8px); right: 0;
  display: flex; flex-direction: column; gap: 8px;
  width: 260px; max-width: calc(100vw - 48px); padding: 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--s2);
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / .8);
}
.post-mas-dentro .nota { margin: 0 }
.post-mas-dentro .on { color: var(--red); border-color: var(--red) }

/* La hoja de un mensaje: lo escrito arriba en letra grande y las respuestas debajo, con su caja de
   escritura y su tecla de borrar en cada una. Misma carcasa del muro, sin carril derecho. */
.hilo-volver {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 600 14px/1.4 Barlow, sans-serif; color: var(--mut2);
}
.hilo-volver .ic { width: 16px; height: 16px }
.hilo-volver:hover { color: var(--red) }
.hilo-cima { padding: 20px }
.post-texto.grande { margin-top: 8px; font-size: 20px; line-height: 1.55 }
.hilo-fecha { margin: 10px 0 0; font-size: 13px; color: var(--mut3) }
.hilo-escribir { margin: 0 0 16px }
.com-borra { margin-left: auto }
.res-borrar {
  padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: transparent; font: 600 11.5px/1.4 Barlow, sans-serif; color: var(--mut3); cursor: pointer;
  transition: color .16s, border-color .16s;
}
.res-borrar:hover { color: #fff; border-color: rgb(201 5 34 / .7) }

/* El carril derecho: la caja de buscar en píldora con su raya, y las dos cajas de tarjeta con
   título en letra display. Todo dentro de su capa `card` (radio 24) tal como lo pintó él. */
.muro-buscar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--s1); color: var(--mut3);
  transition: border-color .18s;
}
.muro-buscar:focus-within { border-color: var(--red) }
.muro-buscar .ic { width: 16px; height: 16px; flex-shrink: 0 }
.muro-buscar input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px }
.muro-buscar input:focus { outline: none }
.muro-buscar input::placeholder { color: var(--mut3) }
.muro-caja { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-2x); background: var(--s1) }
/* Va por descendencia y no por hijo directo: en comunidades el título vive dentro de su fila de
   cabecera, pegado a la pastilla de crear, y el cuadradito sigue siendo el mismo de siempre. */
.muro-caja .rail-t {
  margin: 0; padding: 0;
  font-family: 'Bebas Neue', Barlow, sans-serif; font-size: 24px; line-height: 1.2;
  letter-spacing: .025em; text-transform: none; font-weight: 400; color: #fff;
}
.muro-caja > .nota { margin: 12px 0 0 }
/* la etiqueta primero, en rojo, y debajo su recuento apagado: dos líneas, como las suyas */
.tend { display: block; padding: 0; font-size: 14px }
.tend + .tend { margin-top: 12px }
.tend b { display: block; font-size: 14px; font-weight: 600; color: var(--red) }
.tend:hover b { color: #ff5468 }
.tend span { display: block; margin-top: 2px; font-size: 12px; color: var(--mut2) }
.sug { display: flex; align-items: center; gap: 12px; padding: 0 }
.sug + .sug { margin-top: 12px }
.sug > a:first-child { flex-shrink: 0 }
.sug .ava { width: 36px; height: 36px; font-size: 15px }
.sug-q { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; margin: 0; min-width: 0; font-size: 14px }
.sug-q a { overflow: hidden; font-size: 14px; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap }
.sug-q a:hover { color: var(--red) }
.sug-q span { font-size: 14px; color: var(--mut2) }
/* seguir es su píldora outlined en rojo: se rellena al pasar por encima */
.sug .ghost.pequeno {
  padding: 5px 12px; border: 1px solid var(--red); border-radius: var(--r-pill);
  background: transparent; color: var(--red); font: 600 12px/1.4 Barlow, sans-serif;
  transition: background-color .16s, color .16s;
}
.sug .ghost.pequeno:hover { background: var(--red); color: #fff }

/* Comunidades: la caja es la misma tarjeta del carril (radio 24, fondo card) y dentro van las
   suyas, que en el diseño son `rounded-xl` sobre secondary al 40%. La pastilla de entrar se rellena
   al pasar por encima y, cuando ya estás dentro, pasa a chip de secundario: es su pareja de botones. */
.comunidad-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.comunidad-s { margin: 2px 0 0; font: 400 14px/20px Barlow, sans-serif; color: var(--mut2) }
.comunidad-grid { display: grid; gap: 12px; margin-top: 16px }
.comunidad { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-xl2); background: var(--s2) }
.comunidad:hover { border-color: var(--rojo-45) }
.comunidad-fila { display: flex; align-items: center; gap: 12px }
.comunidad-ico {
  display: grid; flex: 0 0 auto; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-xl2); background: var(--bg); font-size: 20px;
}
.comunidad-q { flex: 1 1 auto; min-width: 0 }
.comunidad-n { display: block; margin: 0; overflow: hidden; font: 600 14px/20px Barlow, sans-serif; color: #fff; text-overflow: ellipsis; white-space: nowrap }
.comunidad-m { display: block; margin: 0; font: 400 12px/16px Barlow, sans-serif; color: var(--mut2) }
.comunidad-d { margin: 8px 0 0; font: 400 14px/20px Barlow, sans-serif; color: var(--mut2) }
.comunidad-pill {
  padding: 4px 12px; border: 1px solid var(--red); border-radius: var(--r-pill);
  background: transparent; color: var(--red); font: 600 12px/16px Barlow, sans-serif; cursor: pointer;
  transition: background-color .16s, color .16s;
}
.comunidad-pill:hover { background: var(--red); color: #fff }
.comunidad-pill.on { border-color: transparent; background: var(--s3); color: var(--txt) }
.comunidad-pill.on:hover { background: var(--red); color: #fff }
.comunidad-vacio { margin: 16px 0 0; font: 400 14px/20px Barlow, sans-serif; color: var(--mut2) }

/* Entrar en una comunidad: el icono y su nombre son el salto a dentro del grupo. La pastilla de
   unirse sigue siendo el único botón de la fila, así que la tarjeta no se duplica. El pie rojo es
   la salida clara para quien ya está dentro y busca dónde escribir. */
.comunidad-entrar { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0 }
.comunidad-entrar:hover .comunidad-n { color: var(--red) }
.comunidad-pie { margin: 10px 0 0; font: 600 13px/18px Barlow, sans-serif; color: var(--red) }
.comunidad-pie:hover { text-decoration: underline }

/* La hoja de dentro de una comunidad: la misma caja de la lista, con su icono grande, sus números de
   verdad y el botón de unirse o salir a la derecha. Tipografía del perfil del muro para que las dos
   hojas hermanas pesen igual. */
.comunidad-top { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-xl2); background: var(--s2) }
.comunidad-ico.grande { width: 56px; height: 56px; font-size: 26px }
.comunidad-cta { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px }
.comunidad-volver { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/16px Barlow, sans-serif; color: var(--mut2) }
.comunidad-volver:hover { color: #fff }
.comunidad-volver .ic { width: 16px; height: 16px }
.comunidad-d.none { color: var(--mut3); font-style: italic }
.p-social .comunidad-top .h1 { font-family: 'Bebas Neue', Barlow, sans-serif; font-size: 34px; letter-spacing: .02em; line-height: 1.1 }
@media (max-width: 640px) {
  .comunidad-top .comunidad-fila { flex-wrap: wrap }
  .comunidad-cta { width: 100%; justify-content: flex-start }
}

/* Crear se abre con <details>: su pastilla es el resumen y el formulario, la caja del modal suyo,
   que aquí va debajo porque el carril ya tiene su ancho. Los iconos son radios puros y corrientes. */
.comunidad-alta > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--r-pill); background-image: var(--grad); box-shadow: var(--sombra);
  font: 600 14px/20px Barlow, sans-serif; color: #fff; list-style: none; cursor: pointer;
}
.comunidad-alta > summary::-webkit-details-marker { display: none }
.comunidad-alta > summary .ic { width: 16px; height: 16px }
.comunidad-alta[open] > summary { background-image: none; background-color: var(--s3); box-shadow: none; color: var(--txt) }
.comunidad-form {
  display: grid; gap: 16px; margin-top: 16px; padding: 20px; width: 100%; max-width: 448px;
  border: 1px solid var(--line); border-radius: var(--r-2x); background: var(--bg); box-shadow: var(--sombra);
}
.comunidad-campo { display: block; margin: 0; padding: 0; border: 0 }
.comunidad-campo > span, .comunidad-campo > legend {
  display: block; padding: 0; font: 600 12px/16px Barlow, sans-serif;
  text-transform: uppercase; letter-spacing: .05em; color: var(--mut2);
}
.comunidad-campo input[name="nombre"], .comunidad-campo textarea {
  width: 100%; margin-top: 4px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-xl2); background: var(--bg); color: var(--txt);
  font: 400 14px/20px Barlow, sans-serif;
}
.comunidad-campo textarea { margin-top: 4px; resize: none }
.comunidad-campo input:focus, .comunidad-campo textarea:focus { border-color: var(--red); outline: none }
.comunidad-emojis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.comunidad-emojis label { position: relative; display: grid }
.comunidad-emojis input { position: absolute; inset: 0; opacity: 0 }
.comunidad-emojis span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: var(--r-xl2); font-size: 18px; cursor: pointer;
}
.comunidad-emojis label:hover span { border-color: var(--rojo-45) }
.comunidad-emojis input:checked + span { border-color: var(--red); background: var(--s3) }
.comunidad-emojis input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px }
.comunidad-crear {
  justify-self: end; padding: 8px 20px; border: 0; border-radius: var(--r-pill);
  background-color: var(--red); background-image: var(--grad); box-shadow: var(--sombra);
  font: 600 14px/20px Barlow, sans-serif; color: #fff; cursor: pointer;
}
@media (min-width: 640px) { .comunidad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* El perfil del muro comparte la tarjeta de `ht-`, solo que sin el aire de arriba: el cuadradito
   del muro ya trae su propio padding. */
.p-social .perfil-page { gap: 16px; padding-top: 0 }
.p-social .sub-head { margin: 8px 0 0; padding-inline: 4px }

/* ---------------- Studio de TofyTube: subida de vídeo y ficha propia ---------------- */
/* La columna de subida se limita: en el carril ancho de TofyTube el formulario solo quedaría
   estirado de parte a parte. */
.pto-tube .panel { max-width: 860px; padding-top: 18px }
.studio-video { gap: 12px }
.vid-lista { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0 }
.vid-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.vid-fila:last-child { border-bottom: 0 }
.vid-fila a { flex: 1 1 200px; min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; color: #fff; text-overflow: ellipsis; white-space: nowrap }
.vid-fila a:hover { color: var(--red) }
.vid-fila span { margin-left: auto; font-size: 11.5px; color: var(--mut3) }

/* ---------------- contadores de gente en la sala y el perfil ---------------- */
.watch-ver {
  display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0;
  font-size: 13px; font-weight: 600; color: #ff9dab;
}
.watch-ver .ic { width: 15px; height: 15px; opacity: 1 }
.pf-ver {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12.5px; font-weight: 600; color: var(--mut2);
}
.pf-ver .ic { width: 14px; height: 14px; opacity: 1 }

/* ---------------- footer ---------------- */
.foot { margin-top: auto; border-top: 1px solid var(--line); background: var(--bg); }
.foot .wrap { max-width: 1560px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-block: 18px 30px; font-size: 12px; color: var(--mut3); }
.foot-bottom.only { padding-top: 22px; }
.foot-bottom a { color: var(--mut3); }
.foot-bottom a:hover { color: var(--mut); }
.foot-enlaces { display: inline-flex; flex-wrap: wrap; gap: 16px; }

/* ================= las dos carcasas de portal =================
   Medidas sacadas de su diseño: cabecera h-14 (56), carril w-64 (256) en directo
   y w-60 (240) en TofyTube, relleno del contenido p-6 (24). */
.pto { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.pto-cuerpo { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 0; min-width: 0; }
/* La main se estira ella sola: el carril ya se sujeta con su align-self y así el cuerpo de TofyLive
   pinta su rejilla en todo el hueco de la pantalla, no solo hasta donde llega el contenido. Sin esto,
   en Studio, Verificación y Soporte el fondo se cortaba a mitad y quedaba una banda lisa debajo. */
.pto-main { flex: 1 1 auto; min-width: 0; align-self: stretch; padding: 24px; }

/* ---------- TofyLive: sus tokens, copiados de su styles.css ----------
   Van escritos en oklch, como él los dejó, y mandan solo dentro de .pto-live: el resto de la casa
   sigue con sus colores de siempre hasta que él diga. Las medidas son las de su hoja de Tailwind
   traducidas a píxeles (h-16 = 64, w-64 = 256, rounded-xl = 16, text-5xl = 48, gap-4 = 16). */
.pto-live {
  --bg: oklch(0.13 0.008 20);
  --s1: oklch(0.17 0.01 20);
  --s2: oklch(0.21 0.012 20);
  --s3: oklch(0.24 0.02 20);
  --line: oklch(1 0 0 / 0.08);
  --line-2: oklch(1 0 0 / 0.1);
  --txt: oklch(0.97 0.005 20);
  --mut: oklch(0.65 0.015 20);
  --mut2: oklch(0.65 0.015 20);
  --mut3: oklch(0.6 0.015 20);
  --red: oklch(0.6 0.24 25);
  --red-d: oklch(0.6 0.24 25);
  --red-7: oklch(0.7 0.22 28);
  --grad: linear-gradient(135deg, oklch(0.6 0.24 25), oklch(0.7 0.22 28));
  --lv-canal: oklch(0.15 0.009 20);
  --lv-r10: oklch(0.6 0.24 25 / 0.1);
  --lv-r25: oklch(0.6 0.24 25 / 0.25);
  --lv-r30: oklch(0.6 0.24 25 / 0.3);
  --lv-r40: oklch(0.6 0.24 25 / 0.4);
  --lv-r50: oklch(0.6 0.24 25 / 0.5);
  --lv-r60: oklch(0.6 0.24 25 / 0.6);
  --lv-brillo: 0 10px 40px -10px oklch(0.6 0.24 25 / 0.6);
  --lv-sombra: 0 20px 50px -20px oklch(0 0 0 / 0.8);
  --lv-lado: linear-gradient(to right, var(--bg) 0%, oklch(0.13 0.008 20 / 0.7) 40%, transparent 75%);
  --lv-corte: linear-gradient(to top, var(--bg) 0%, oklch(0.13 0.008 20 / 0.6) 45%, transparent 100%);
  --lv-display: 'Barlow Condensed', Barlow, sans-serif;
}
.pto-live .display { font-family: var(--lv-display); font-weight: 700; letter-spacing: .012em }
.pto-live .glow-txt { text-shadow: none }

/* Su rejilla de 48 px, solo en el cuerpo: la barra y el carril van limpios. */
.pto-live .pto-main {
  padding: 24px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.pto-live .pto-main.pto-pleno { padding: 0 }

/* La barra de 64 px: volver, el sello, los cinco apartados, la búsqueda y la cuenta. */
.pto-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  height: 64px; padding-inline: 16px; border-bottom: 1px solid var(--line); background: var(--bg);
}
@media (min-width: 1024px) { .pto-top { padding-inline: 24px } }
.pto-volver {
  display: grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-lg); color: var(--mut); transition: background-color .16s, color .16s;
}
.pto-volver:hover { background: var(--s2); color: var(--txt) }
.pto-volver .ic { width: 16px; height: 16px; opacity: 1 }
.pto-live .pto-marca {
  display: flex; flex-shrink: 0; align-items: center; gap: 8px;
  font-family: var(--lv-display); font-size: 24px; font-weight: 800; line-height: 1;
  letter-spacing: .025em; color: var(--txt);
}
/* La marca de la barra: su logo pelado, sin caja de degradado detrás y sin su resplandor. */
.pto-logo { display: block; flex-shrink: 0; width: 36px; height: 36px; object-fit: contain }
.pto-nav { display: flex; align-items: center; gap: 4px; margin-left: 16px }
.pto-nav a {
  position: relative; padding: 8px 14px; border-radius: var(--r-lg);
  font: 600 14px/20px Barlow, sans-serif; color: var(--mut);
  transition: background-color .16s, color .16s;
}
.pto-nav a:hover { background: var(--s2); color: var(--txt) }
.pto-nav a.on { color: var(--txt) }
.pto-nav a.on::after {
  content: ''; position: absolute; inset-inline: 12px; bottom: -13px; height: 2px;
  border-radius: var(--r-pill); background: var(--grad);
}
.pto-buscar {
  display: none; align-items: center; gap: 8px; flex: 0 0 288px; height: 40px; margin-left: auto;
  padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: oklch(0.21 0.012 20 / 0.6); transition: border-color .16s;
}
@media (min-width: 1024px) { .pto-buscar { display: flex } }
.pto-buscar:focus-within { border-color: var(--red) }
.pto-buscar input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none;
  color: var(--txt); font: 400 14px/1 Barlow, sans-serif;
}
.pto-buscar input:focus { outline: none }
.pto-buscar input::placeholder { color: var(--mut) }
.pto-buscar .ic { width: 16px; height: 16px; color: var(--mut); opacity: 1 }
/* La cuenta de la barra: la misma píldora de <details> de la casa, vestida con su pastilla
   (38 px de alto, foto de 32 redonda, el @ y la chevron). Si no has entrado, sale el rojo de ir. */
.pto-cuenta { display: flex; flex-shrink: 0; align-items: center; margin-left: auto }
.pto-cuenta .menu summary {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: oklch(0.21 0.012 20 / 0.6); color: var(--txt);
  font: 600 14px/1 Barlow, sans-serif; transition: border-color .16s;
}
.pto-cuenta .menu summary:hover, .pto-cuenta .menu.on > summary { border-color: var(--lv-r50); background: oklch(0.21 0.012 20 / 0.6); color: var(--txt) }
.pto-cuenta .ava { width: 32px; height: 32px; font: 700 14px/1 var(--lv-display); color: #fff }
.pto-cuenta .menu-n { color: var(--txt); font: 600 14px/1 Barlow, sans-serif }
.pto-cuenta .menu-c { color: var(--mut) }
/* Su grupo de la derecha: buscador y cuenta pegados, con la cuenta sola cuando no cabe la píldora. */
@media (min-width: 1024px) { .pto-cuenta { margin-left: 0 } }
.pto-entrar {
  display: inline-flex; flex-shrink: 0; align-items: center; height: 40px; padding-inline: 20px;
  border-radius: var(--r-pill); background: var(--grad); color: #fff; box-shadow: var(--lv-brillo);
  font: 700 14px/1 Barlow, sans-serif; letter-spacing: .02em;
}
.pto-entrar:hover { background: linear-gradient(135deg, oklch(0.68 0.24 26), oklch(0.55 0.22 25)) }

/* Lo que hay dentro de la puerta: los apartados van pegados al carril, sin los 40 px de la casa. */
.pto-live .page-head { margin-bottom: 20px }
.pto-live .panel, .pto-live .rules { max-width: 1120px; padding-top: 10px }
.pto-live .sup { padding-top: 8px }
.pto-live .panel-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) }
.pto-live .auth { display: block; justify-items: start; padding-block: 6px }
.pto-live .auth-card { margin-inline: 0 }

/* El carril de 256 px: panel entero, de la barra al pie, con sus dos apartados dentro. */
.pto-rail {
  position: sticky; top: 64px; align-self: flex-start; flex: 0 0 256px; width: 256px;
  height: calc(100vh - 64px); display: flex; flex-direction: column; gap: 22px;
  padding: 20px; overflow-y: auto; border-right: 1px solid var(--line);
  background: var(--lv-canal); scrollbar-width: thin;
}
.pto-bloque { display: block; min-width: 0 }
.pto-rail-t {
  margin: 0; font: 700 11px/1.4 Barlow, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mut);
}
.pto-rail-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 20px }
.pto-fila {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-lg);
  transition: background-color .16s;
}
.pto-fila:hover { background: var(--s2) }
.pto-fila .ava { width: 32px; height: 32px; font-size: 13px }
.pto-fila-id { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0 }
.pto-fila-id b {
  overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--txt);
  text-overflow: ellipsis; white-space: nowrap;
}
.pto-fila-id small {
  overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--mut);
  text-overflow: ellipsis; white-space: nowrap;
}
.pto-fila-ver {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; margin-left: auto;
  font: 600 11.5px/1 ui-monospace, Menlo, monospace; color: var(--red);
}
/* El seguido que no emite: apagado hasta que pase el ratón, con su punto gris en vez del conteo. */
.pto-fila-fuera { opacity: 0.68; transition: background-color .16s, opacity .16s }
.pto-fila-fuera:hover { opacity: 1 }
.pto-fila-fuera .pto-fila-id small { color: var(--mut3) }
.pto-fila-punto { flex-shrink: 0; margin-left: auto }
/* El pie del carril, pegado al final del panel: la salida a las más de mil categorías. */
.pto-rail-pata {
  display: flex; margin: auto -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--line); font: 600 12.5px/1.4 Barlow, sans-serif;
}
.pto-rail-pata a { color: var(--mut); transition: color .16s }
.pto-rail-pata a:hover { color: var(--red) }
/* Los chips de la parrilla cambian de filtro con el anclaje puesto: la pantalla se queda donde
   estaba, en vez de volver arriba al recargar. */
#canales { scroll-margin-top: 80px }

/* La caja punteada de su diseño: la del carril (chica) y la del listado (grande). */
.lv-caja {
  margin-top: 20px; padding: 16px; border: 1px dashed var(--line);
  border-radius: var(--r-xl); text-align: center;
}
.lv-caja-ic {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto;
  border-radius: 50%; background: var(--lv-r10); color: var(--red);
}
.lv-caja-ic .ic { width: 20px; height: 20px; opacity: 1 }
.lv-caja-t { margin: 12px 0 0; font: 600 14px/1.4 Barlow, sans-serif; color: var(--txt) }
.lv-caja-p { margin: 4px 0 0; font-size: 12px; line-height: 1.62; color: var(--mut) }
.lv-caja-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-top: 24px; padding: 64px 24px; border-radius: 20px; background: oklch(0.17 0.01 20 / 0.4);
}
.lv-caja-grande .lv-caja-ic {
  width: 56px; height: 56px; border: 1px solid var(--lv-r30); background: var(--lv-r10);
}
.lv-caja-grande .lv-caja-ic .ic { width: 24px; height: 24px }
.lv-caja-grande .lv-caja-t {
  margin-top: 20px; font-family: var(--lv-display); font-size: 30px; font-weight: 700;
  line-height: 1.05; letter-spacing: .015em; text-transform: uppercase; color: var(--txt);
}
.lv-caja-grande .lv-caja-p { margin-top: 8px; max-width: 448px; font-size: 14px }

/* ---------- el hero de la parrilla, a sangre hasta el borde ---------- */
.lv-aviso { margin: 24px 24px 0 }
.lv-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line) }
.lv-hero-foto, .lv-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.lv-hero-side, .lv-hero-fade { position: absolute; inset: 0 }
.lv-hero-side { background: var(--lv-lado) }
.lv-hero-fade { background: var(--lv-corte) }
.lv-hero-in { position: relative; padding: 80px 24px }
@media (min-width: 1024px) { .lv-hero-in { padding: 112px 48px } }
.lv-senal {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px;
  border: 1px solid var(--lv-r40); border-radius: var(--r-pill); background: var(--lv-r10);
  color: var(--red); font: 700 12px/1.4 Barlow, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.lv-punto {
  display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); animation: pulse 1.4s ease-in-out infinite;
}
.lv-punto.gordo { width: 12px; height: 12px }
.pto-live .lv-hero-t {
  margin: 20px 0 0; max-width: 672px; font-family: var(--lv-display);
  font-size: 48px; font-weight: 800; line-height: .95;
  letter-spacing: .005em; text-transform: uppercase; color: var(--txt);
  text-wrap: balance;
}
@media (min-width: 1024px) { .pto-live .lv-hero-t { font-size: 72px } }
.lv-hero-p { margin: 20px 0 0; max-width: 576px; font-size: 16px; color: var(--mut) }
@media (min-width: 1024px) { .lv-hero-p { font-size: 18px } }
.lv-hero-p a { color: var(--txt); font-weight: 600 }
.lv-hero-p a:hover { color: var(--red) }
.lv-hero-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px }
.lv-btn-lume {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
  border-radius: var(--r-xl); background: var(--grad); box-shadow: var(--lv-brillo);
  color: #fff; font: 700 14px/1.3 Barlow, sans-serif;
  transition: transform .16s ease, box-shadow .16s ease;
}
.lv-btn-lume:hover { transform: scale(1.03); box-shadow: 0 14px 44px -10px oklch(0.6 0.24 25 / 0.75) }
.lv-btn-lume .ic { width: 16px; height: 16px; opacity: 1 }
.lv-btn-borde {
  padding: 12px 24px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: oklch(0.13 0.008 20 / 0.55); color: var(--txt);
  font: 600 14px/1.3 Barlow, sans-serif; transition: border-color .16s;
}
.lv-btn-borde:hover { border-color: oklch(0.97 0.005 20 / 0.4) }
/* El destacado lo cambia la URL: la fila de miniaturas de abajo es puro enlace. */
.lv-otros { margin-top: 40px }
.lv-otros-t {
  margin: 0 0 10px; font: 700 11px/1.4 Barlow, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mut);
}
.lv-mini { display: flex; flex-wrap: wrap; gap: 10px }
.lv-mini a {
  display: block; width: 96px; overflow: hidden; border: 2px solid transparent;
  border-radius: var(--r-lg); transition: border-color .16s;
}
.lv-mini a:hover { border-color: var(--lv-r60) }
.lv-mini a.on { border-color: var(--red) }
.lv-mini-art { display: block; aspect-ratio: 16 / 10 }

/* ---------- el cuerpo: 64 px entre secciones, como él ---------- */
.lv-cuerpo {
  display: flex; flex-direction: column; gap: 64px; padding: 48px 24px; min-width: 0;
}
@media (min-width: 1024px) { .lv-cuerpo { padding: 48px } }
.lv-sec { display: flex; flex-direction: column; min-width: 0 }
.lv-sec-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px }
.lv-h2 {
  display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--lv-display);
  font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  color: var(--txt);
}
.lv-ver-todas { font: 600 14px/1.4 Barlow, sans-serif; color: var(--mut); transition: color .16s }
.lv-ver-todas:hover { color: var(--red) }
.lv-sec-filtros { align-items: center }
.lv-filtros { display: flex; flex-wrap: wrap; gap: 8px }
.lv-chip {
  padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: oklch(0.21 0.012 20 / 0.6); color: var(--mut);
  font: 600 14px/1.4 Barlow, sans-serif; transition: color .16s, background-color .16s, border-color .16s;
}
.lv-chip:hover { color: var(--txt); border-color: var(--line-2) }
.lv-chip.on { border-color: transparent; background: var(--txt); color: var(--bg); font-weight: 700 }

/* Las categorías: píldoras pequeñas, sin fondo, solo el hilo alrededor. Se encajan en filas
   que se rompen solas, así que valen igual en el monitor ancho y en el teléfono. */
.lv-cat-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px }
.lv-cat {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 7px 13px 7px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--mut); transition: border-color .16s, color .16s;
}
.lv-cat:hover { border-color: var(--lv-r50) }
.lv-cat.on { border-color: var(--red) }
.lv-cat-agua { display: grid; flex-shrink: 0; place-items: center; color: var(--red) }
.lv-cat-agua .ic { width: 16px; height: 16px; stroke-width: 1.75; opacity: 1 }
.lv-cat-n {
  overflow: hidden; min-width: 0; color: var(--txt);
  font: 600 14px/1.3 Barlow, sans-serif; text-overflow: ellipsis; white-space: nowrap;
}
.lv-cat:hover .lv-cat-n { color: var(--red) }
.lv-cat-c {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; color: var(--mut);
  font: 600 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .02em;
}
.lv-cat.on .lv-cat-c { color: var(--red) }
/* Lo que se lee cuando no hay ni una sala abierta: una línea, no un cartel. */
.lv-cat-vacio { margin: 14px 0 0; max-width: 620px; font-size: 13px; line-height: 1.6; color: var(--mut) }

/* Los directos, con su mismo cartón pero en horizontal. */
.pto-live .grid-live { gap: 20px; margin-top: 24px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) }
.pto-live .tile-live-art { border-radius: 16px; box-shadow: var(--lv-sombra) }
.pto-live .tile-live:hover .tile-live-art { border-color: var(--lv-r60); box-shadow: var(--lv-brillo) }
.pto-live .tile-live-id b { color: var(--txt) }

/* ---------- TofyTube: cabecera, carril ---------- */
.tube-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  height: 56px; padding-inline: 12px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.tube-menu { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--mut) }
.tube-menu .ic { width: 20px; height: 20px; opacity: 1 }
.tube-marca { display: flex; align-items: center; gap: 8px; font: 400 21px/1 'Bebas Neue', Barlow, sans-serif; letter-spacing: .04em; color: #fff }
.tube-buscar {
  display: flex; align-items: center; flex: 1 1 576px; height: 40px; max-width: 576px;
  margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--s1);
}
.tube-buscar:focus-within { border-color: var(--red) }
.tube-buscar input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding-inline: 16px;
  border: 0; background: none; color: var(--txt); font: 400 13.5px/1 Barlow, sans-serif;
}
.tube-buscar input:focus { outline: none }
.tube-buscar input::placeholder { color: var(--mut3) }
.tube-buscar button, .tube-micro {
  display: grid; place-items: center; width: 42px; height: 40px; color: var(--mut2);
  background: none; border: 0; cursor: pointer;
}
.tube-buscar button:hover, .tube-micro:hover { color: #fff }
.tube-buscar .ic, .tube-micro .ic { width: 18px; height: 18px; opacity: 1 }
.tube-ic {
  display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: var(--mut2); transition: background-color .16s, color .16s;
}
.tube-ic:hover { background: var(--s3); color: #fff }
.tube-ic .ic { width: 19px; height: 19px; opacity: 1 }
.tube-casa {
  display: inline-flex; flex-shrink: 0; align-items: center; height: 34px; padding-inline: 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font: 600 11.5px/1 Barlow, sans-serif; color: var(--mut2);
}
.tube-casa:hover { border-color: var(--red); color: #fff }

.tube-rail {
  flex: 0 0 240px; width: 240px; align-self: flex-start; max-height: calc(100vh - 56px);
  padding: 10px 8px; overflow-y: auto; border-right: 1px solid var(--line);
  position: sticky; top: 56px; scrollbar-width: thin;
}
.tube-rail nav { display: flex; flex-direction: column; gap: 2px }
.tube-fila {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: var(--mut); transition: background-color .16s, color .16s;
}
.tube-fila .ic { width: 20px; height: 20px; opacity: 1 }
.tube-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tube-fila:hover { background: var(--s3); color: #fff }
.tube-fila.on { background: var(--s3); color: #fff; font-weight: 700 }
.tube-rail hr { margin: 10px 12px; border: 0; border-top: 1px solid var(--line) }
.tube-sus-t {
  margin: 0 0 4px; padding-inline: 12px; font: 700 11px/1.4 Barlow, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mut3);
}
.tube-sus {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md);
  font-size: 13px; color: var(--mut); transition: background-color .16s, color .16s;
}
.tube-sus:hover { background: var(--s3); color: #fff }
.tube-sus span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---------- la parrilla de directos ---------- */

.tile-live { display: flex; flex-direction: column; gap: 11px; min-width: 0 }
.tile-live-art {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--r-xl); transition: border-color .18s;
}
.tile-live:hover .tile-live-art { border-color: rgb(255 37 64 / .7) }
/* Lo que se está viendo de verdad: el fotograma que la casa guarda de la señal de cada sala abierta.
   Se tumba encima de su marca de agua, que sigue poniendo el fondo hasta que llega la foto. */
.tile-live-foto, .card-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.lv-mini-art { position: relative; overflow: hidden }
.lv-mini-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.tile-live-vivo {
  position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 6px;
  background: var(--red-d); color: #fff; font: 700 10.5px/1.3 Barlow, sans-serif; letter-spacing: .1em;
}
.tile-live-ver {
  position: absolute; bottom: 10px; left: 10px; padding: 4px 9px; border-radius: 6px;
  background: rgb(0 0 0 / .74); color: #fff; font: 600 11.5px/1.3 Barlow, sans-serif;
}
.tile-live-marca {
  position: absolute; right: 10px; bottom: 10px; font: 600 11.5px/1.3 Barlow, sans-serif;
  color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .8);
}
.tile-live-pie { display: flex; align-items: flex-start; gap: 12px; min-width: 0 }
.tile-live-id { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.tile-live-id b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff;
}
.l1 { overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--mut2); text-overflow: ellipsis; white-space: nowrap }
.tile-live:hover .l1 { color: var(--mut) }
.tile-live-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.tile-live-tags span {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--s2);
  font: 600 11px/1.3 Barlow, sans-serif; color: var(--mut2);
}

/* ---------- la sala de directo ---------- */
.sala { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start }
/* Con el chat cerrado desde el panel, la sala pasa a una sola columna: no se deja un hueco vacío. */
.sala.sin-chat { grid-template-columns: minmax(0, 1fr) }
.sala-cuerpo { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.sala-video {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: #000;
}
/* Sin señal no hay marco 16:9 que recortar: el aviso ocupa lo que necesite. */
.sala-video.lisa { aspect-ratio: auto; overflow: visible; border: 0; background: none }
.sala-vivo {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 6px; background: var(--red-d); color: #fff;
  font: 700 10.5px/1.3 Barlow, sans-serif; letter-spacing: .12em;
}
.sala-senal {
  display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 56px 26px 34px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--s1); text-align: center;
}
.sala-senal p { margin: 0; font-size: 16px; color: var(--txt) }
.sala-senal p b { color: #fff }
.sala-senal small { font-size: 12.5px; line-height: 1.5; color: var(--mut3) }
.sala-senal .row { margin-top: 12px }
.sala-info { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px }
.sala-ava { flex-shrink: 0 }
.sala-id { display: flex; flex: 1 1 240px; flex-direction: column; gap: 3px; min-width: 0 }
.sala-id h1 { margin: 0; font: 700 21px/1.2 Barlow, sans-serif; color: #fff }
.sala-id .t { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mut) }
.sala-id .j { margin: 0; font-size: 12.5px; color: var(--mut3) }
.sala-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.sala-ver {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 13px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--s1);
  font: 600 12.5px/1 Barlow, sans-serif; color: var(--mut2);
}
.sala-ver .ic { width: 15px; height: 15px; opacity: 1 }
.sala-seguir {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 17px;
  border: 0; border-radius: var(--r-pill); background: var(--grad); cursor: pointer;
  font: 700 12.5px/1 Barlow, sans-serif; color: #fff;
}
.sala-seguir:hover { background: linear-gradient(135deg, #ff4358, #8d1530) }
.sala-seguir .ic { width: 16px; height: 16px; opacity: 1 }
.sala-seguir.on { border: 1px solid var(--line-2); background: var(--s3); color: var(--mut) }
.sala-seguir.on:hover { border-color: var(--red); color: #fff }
/* El saldo de los puntos del canal, al lado del botón de seguir. Solo se pinta en la sala: la
   insignia la pone el streamer y la cifra es la de verdad, escrita por el servidor. */
.sala-puntos {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s1);
  font: 600 12.5px/1 Barlow, sans-serif; color: var(--mut2);
}
.sala-puntos img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px }
.sala-puntos b { font: 700 14.5px/1 Barlow, sans-serif; color: #fff }
.sala-bio {
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s1);
}
.sala-bio p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mut); overflow-wrap: anywhere }
.sala-chat {
  position: sticky; top: 72px; display: flex; flex: 0 0 320px; flex-direction: column; gap: 10px;
  width: 320px; max-height: calc(100vh - 96px);
}
.sala-chat-t {
  margin: 0; text-align: center; font: 700 11px/1.4 Barlow, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mut3);
}
.sala-chat .chat-marco { flex: 1 1 auto; min-height: 0; height: calc(100vh - 140px) }

/* ---------- TofyTube: chips, rejilla y ficha ---------- */
.tube-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px }
.tube-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s2);
  font: 600 12.5px/1 Barlow, sans-serif; color: var(--mut2); transition: color .16s, background-color .16s, border-color .16s;
}
.tube-chip small { font-size: 11px; color: var(--mut3) }
.tube-chip:hover { border-color: var(--red); color: #fff }
.tube-chip.on { border-color: transparent; background: var(--txt); color: var(--bg); font-weight: 700 }
.tube-chip.on small { color: var(--s3) }
.tube-cuerpo { display: flex; flex-direction: column; gap: 26px; min-width: 0 }

.p-tube .grid-videos { gap: 30px 16px }
.p-tube .video-art, .p-tube .short-art { border-radius: var(--r-lg) }
.p-tube .card-video:hover .video-art { border-color: rgb(255 37 64 / .6) }

.ver { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; padding-top: 0 }
.ver-player {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: #000;
}
.ver-player .repro { border: 0; border-radius: 0 }
.ver-ava { flex-shrink: 0 }
.ver-seguir {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 17px;
  border: 0; border-radius: var(--r-pill); background: var(--grad); cursor: pointer;
  font: 700 12.5px/1 Barlow, sans-serif; color: #fff;
}
.ver-seguir:hover { background: linear-gradient(135deg, #ff4358, #8d1530) }
.ver-seguir.on { border: 1px solid var(--line-2); background: var(--s3); color: var(--mut) }
.ver-der { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto }
.ver-voto { display: flex; align-items: center; gap: 8px }
.voto, .ver-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s2);
  font: 600 12.5px/1 Barlow, sans-serif; color: var(--mut2); cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s;
}
.voto:hover:not([disabled]), .ver-pill:hover { border-color: var(--red); background: var(--s3); color: #fff }
.voto.on { border-color: var(--red); color: #ff9dab }
.voto[disabled] { opacity: .5; cursor: not-allowed }
.voto .ic, .ver-pill .ic { width: 16px; height: 16px; opacity: 1 }
.ver-coms { margin-top: 10px }
.com-c { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0 }
.com-c p { margin: 0 }
.com-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px }
.com-quien small { font-size: 11.5px; font-weight: 400; color: var(--mut3) }
.ver-lateral { gap: 14px }

/* ---------- responsive de los portales ---------- */
@media (max-width: 1279.98px) {
  .sala { grid-template-columns: minmax(0, 1fr) 288px }
  .sala-chat { flex-basis: 288px; width: 288px }
  .ver { grid-template-columns: minmax(0, 1fr) 336px }
}

@media (max-width: 1023.98px) {
  /* Su hoja esconde el carril y la píldora de búsqueda por debajo de lg: se hace igual aquí. */
  .pto-rail, .pto-buscar { display: none }
  .pto-cuenta .menu-n { display: none }
  .pto-cuenta .menu summary { padding: 4px }
  .tube-rail { flex-basis: 76px; width: 76px; padding-inline: 6px }
  .tube-fila { justify-content: center; gap: 0; padding-block: 12px }
  .tube-fila span { position: static; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .tube-sus, .tube-sus-t, .tube-rail hr { display: none }
  .sala { grid-template-columns: minmax(0, 1fr) }
  .sala-chat { position: static; width: auto; max-height: none }
  .sala-chat .chat-marco { height: 520px }
  .ver { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 767.98px) {
  /* debajo de md su barra ya no lleva los apartados: aquí pasan a una tira deslizante debajo,
     para que la puerta siga teniendo navegación en el teléfono */
  .pto-top { position: static; flex-wrap: wrap; height: auto; row-gap: 8px; padding-block: 9px }
  .pto-nav { order: 5; flex: 1 1 100%; gap: 6px; margin: 2px 0 0; overflow-x: auto; scrollbar-width: none }
  .pto-nav a { flex: 0 0 auto; padding: 7px 11px }
  .pto-nav a.on::after { bottom: -9px }
  .pto-cuerpo { flex-direction: column }
  .pto-main { padding: 16px }
  .pto-main.pto-pleno { padding: 0 }
  .lv-aviso { margin: 16px 16px 0 }
}

/* ---------------- responsive ---------------- */
@media (max-width: 899.98px) {
  .top-in { display: flex; flex-wrap: wrap; height: auto; gap: 10px; padding-block: 10px; }
  .top-left { flex: 1 1 auto; min-width: 0; }
  .top-actions { margin-left: auto; }
  .search { order: 3; flex: 1 1 100%; height: 40px; }
  /* La cabecera aquí ocupa dos alturas: la barra de hojas se suelta para no quedar tapada. */
  .adm-tabs { position: static; }
}

@media (min-width: 900px) and (max-width: 999.98px) {
  .top-in { grid-template-columns: 1fr minmax(0, 480px) 1fr; }
}

@media (max-width: 639.98px) {
  .closed-head .btn-red { width: 100%; }
}

@media (min-width: 640px) {
  :root { --feed-pad: 24px; }
  .brand-txt { display: flex; }
  .top-in { padding-inline: 24px; }
  .wrap { padding-inline: 26px; }
  .feed { padding: 24px var(--feed-pad) 10px; }
  .panel-grid { grid-template-columns: 1fr 1fr; }
  .span2 { grid-column: span 2; }
  .form-cols { grid-template-columns: 2fr 1fr auto; }
}

@media (min-width: 900px) {
  :root { --rail-w: 268px; }
  .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .rail { display: flex; position: fixed; z-index: 5; top: 66px; left: 0; bottom: 0; width: var(--rail-w); overflow: hidden; border-right: 1px solid var(--line); background: var(--chrome); }
  /* el panel sale del flujo al fijarse; la columna se la queda igual el contenido */
  .feed { grid-column: 2; }
}

@media (min-width: 1240px) {
  :root { --rail-w: 296px; }
  .grid-live, .grid-profile { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
}

@media (min-width: 1700px) {
  :root { --rail-w: 312px; }
  .top-in { padding-inline: 26px; }
  .rail-t { padding: 0 14px }
  .rail-nav a, .rail-c { padding-inline: 14px }
}

/* responsive del inicio: su md (768) abre las puertas y agranda el titular; su lg (1024) pone los
   tres carriles en columna. */
@media (min-width: 768px) {
  .home-top { padding-inline: 48px }
  .hero-in { padding-inline: 48px }
  .hero-titulo { font-size: 160px }
  .portales { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .tres { padding-inline: 48px }
}

@media (max-width: 639.98px) {
  .ver-acciones.derecha { margin-left: 0; }
  .ver-quien { gap: 10px; }
}

/* Sus dos cortes: a 768 entra el carril de 220 y a 1024 el de la derecha con sus 300. Los dos se
   pegan arriba a 24 y acompañan el desplazamiento sin recortar altura. */
@media (min-width: 768px) {
  .muro { grid-template-columns: 220px minmax(0, 1fr) }
  .muro-izq {
    display: flex; align-self: start; position: sticky; top: 24px;
    flex-direction: column; gap: 24px;
  }
}

@media (min-width: 1024px) {
  .muro { grid-template-columns: 240px minmax(0, 1fr) 300px }
  .muro.muro-dos { grid-template-columns: 240px minmax(0, 1fr) }
  .muro-der { display: grid; gap: 16px; align-self: start; position: sticky; top: 24px; align-content: start }
}

@media (min-width: 1024px) {
  .tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .ver-lateral { max-height: calc(100vh - 112px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
}

@media (min-width: 1240px) {
  .grid-videos { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
  .grid-cat { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); }
}

/* 29 teselas en móvil a dos columnas son casi 1300 px de índice: aquí se aprietan, no se ocultan. */
@media (max-width: 639.98px) {
  .cat-teclero { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)) }
  .cat-tecla { gap: 3px; padding: 9px 10px }
  .cat-tecla-l { font-size: 21px }
  .cat-tecla-p { font-size: 10.5px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==================================================================
   TofyTube con la hoja de su diseño dentro (tofytube.zip)
   La estructura es la suya —radios 10/12/14/18/22/24, titulares en
   Barlow Condensed a 700, superficies escalonadas y resplandor arriba
   a la izquierda— pero con la tinta que él pidió el 2026-11-05:
   «el tofytube quiero de colores de rojo negro en vez de naranja».
   Se fue el ámbar (primario 0.72 0.18 50, brillo 0.8 0.16 75, fondo
   0.14 0.008 40) y entró el rojo de la casa sobre negro. Los radios,
   la letra y las medidas no se tocan.
   Como en el resto de la casa: cero backdrop-filter y cero transform
   en el hover — el anillo de la tarjeta y el resplandor salen con
   color y con caja.
   ================================================================== */
.p-tube {
  --tb-p: oklch(0.64 0.23 27);
  --tb-pfg: #fff;
  /* El relleno va con el rojo de la casa (0.58 → 0.35), no con el acento: letra blanca sobre el .58
     marca 4,8 y sobre el .62 ya se cae a 4,1. El acento —el .64, más vivo— manda solo como TEXTO e
     icono sobre las superficies oscuras, que es donde rinde (4,6 sobre la tarjeta más clara). */
  /* Y cuando el degradado ES la letra (`.tb-red` y los números de «En llamas», recortados sin fondo
     detrás) no vale el de relleno: su cola .35 queda a 1,7 de la barra y no se ve. Ahí va
     `--tb-marca`, el perfil de su zip —primario vivo y glow más claro— pero en rojo: 5,8 → 8,6. */
  --tb-marca: linear-gradient(135deg, oklch(0.66 0.23 27), oklch(0.78 0.17 20));
  --tb-grad: linear-gradient(135deg, oklch(0.58 0.23 27), oklch(0.35 0.15 20));
  --tb-sombra: 0 10px 40px -10px oklch(0.62 0.23 27 / .5);
  --tb-2xl: 22px;
  --tb-3xl: 24px;

  --red: oklch(0.62 0.23 27);
  --red-d: oklch(0.58 0.23 27);
  --red-7: oklch(0.4 0.16 22);
  --red-deep: oklch(0.3 0.09 27);
  --grad: linear-gradient(135deg, oklch(0.58 0.23 27), oklch(0.35 0.15 20));

  --bg: oklch(0.13 0.005 20);
  --s1: oklch(0.18 0.01 20);
  --s2: oklch(0.22 0.01 20);
  --s3: oklch(0.25 0.014 20);
  --line: oklch(1 0 0 / .08);
  --line-2: oklch(1 0 0 / .1);
  --chrome: oklch(0.13 0.005 20);
  --txt: oklch(0.97 0 0);
  --mut: oklch(0.68 0.015 20);
  --mut2: oklch(0.62 0.015 20);
  --mut3: oklch(0.53 0.015 20);

  --r-sm: 10px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px;

  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, oklch(0.62 0.23 27 / .14), transparent 70%),
    var(--bg);
}
.p-tube h1, .p-tube h2, .p-tube h3, .p-tube .display {
  font-family: 'Barlow Condensed', Barlow, ui-sans-serif, sans-serif;
  font-weight: 700; letter-spacing: .01em;
}

/* ---------- su barra: 64 px, logo pelado y buscador centrado ---------- */
.p-tube .tube-top { height: 64px; gap: 16px; padding-inline: 16px; background: var(--bg) }
.p-tube .tube-marca { gap: 10px }
/* Su logo, más grande que el de las otras puertas: la barra de arriba mide 64 px y el recuadro
   pelado (sin caja de degradado) se lee mejor a 44. */
.p-tube .tube-logo { width: 44px; height: 44px }
.p-tube .tube-wordmark { font: 700 24px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .03em; color: #fff }
.p-tube .tb-red {
  background: var(--tb-marca); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-tube .tube-buscar {
  height: 40px; max-width: 576px; border: 1px solid var(--line-2); border-radius: var(--tb-2xl); background: var(--s2);
}
.p-tube .tube-buscar .ic { width: 16px; height: 16px; margin-left: 14px; color: var(--mut3); opacity: 1 }
.p-tube .tube-buscar input { padding-inline: 10px; font-size: 14px }
.p-tube .tube-buscar button {
  width: auto; padding-inline: 14px; border: 0; background: none; cursor: pointer;
  font: 600 12.5px/1 Barlow, sans-serif; color: var(--mut2);
}
.p-tube .tube-buscar button:hover { color: #fff }
.p-tube .tube-buscar:focus-within { border-color: var(--tb-p); box-shadow: 0 0 0 2px oklch(0.62 0.23 27 / .35) }
.p-tube .tube-ic { border-radius: var(--r-xl) }
.p-tube .tube-ic:hover { background: var(--s3) }
.p-tube .tube-casa { height: 36px; border-radius: var(--r-xl); background: var(--s2); border-color: transparent; color: var(--txt) }
.p-tube .tube-casa:hover { background: var(--s3); border-color: transparent; color: #fff }
.p-tube .tube-top .notif summary:hover, .p-tube .tube-top .notif[open] > summary { background: var(--s3) }

/* ---------- su carril: pastillas y la activa con su degradado ---------- */
.p-tube .tube-rail { top: 64px; max-height: calc(100vh - 64px); padding: 12px }
.p-tube .tube-rail nav { gap: 4px }
.p-tube .tube-fila { padding: 10px 12px; border-radius: var(--r-xl); font: 600 14px/1 Barlow, sans-serif; color: var(--mut) }
.p-tube .tube-fila:hover { background: var(--s3); color: #fff }
.p-tube .tube-fila.on { background: var(--tb-grad); color: var(--tb-pfg); box-shadow: var(--tb-sombra) }
.p-tube .tube-sus-t { font: 600 12px/1.4 Barlow, sans-serif; letter-spacing: .1em; color: var(--mut) }
.p-tube .tube-sus { border-radius: var(--r-xl); font-size: 14px }
.p-tube .tube-sus:hover { background: var(--s3) }
/* Su ficha de canal: tesela de 26 con esquinas 18, la inicial en la tipografía de display y
   el color hondo de siempre; la foto real conserva el marco cuadrado. */
.p-tube .tube-sus .ava {
  width: 26px; height: 26px; border-radius: var(--r-xl);
  font: 700 12px/1 'Barlow Condensed', Barlow, sans-serif; color: var(--tb-pfg);
}
.p-tube .tube-sus img.ava { border-radius: var(--r-xl) }

/* ---------- sus tarjetas: esquinas 22, anillo al pasar y marca abajo a la izquierda ---------- */
.p-tube .tube-cuerpo { gap: 32px }
.p-tube .grid-videos { gap: 32px 20px; grid-template-columns: 1fr }
@media (min-width: 640px) { .p-tube .grid-videos { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .p-tube .grid-videos { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (min-width: 1536px) { .p-tube .grid-videos { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.p-tube .video-art, .p-tube .short-art {
  border: 1px solid var(--line); border-radius: var(--tb-2xl);
  box-shadow: inset 0 0 0 1px transparent; transition: border-color .18s, box-shadow .18s;
}
.p-tube .card-video:hover .video-art, .p-tube .short:hover .short-art {
  border-color: oklch(0.62 0.23 27 / .7); box-shadow: inset 0 0 0 2px oklch(0.62 0.23 27 / .8);
}
.p-tube .video-id b { font-size: 16px; line-height: 1.3 }
.p-tube .card-video:hover .video-id b { color: var(--tb-p) }
.p-tube .video-id small { font-size: 13.5px }
.p-tube .video-id small + small { font-size: 12px }
/* Su avatar de tarjeta: tesela de 36 con la inicial en display, no la circuncisión de fuera. */
.p-tube .card-video .ava {
  width: 36px; height: 36px; border-radius: var(--r-xl);
  font: 700 16px/1 'Barlow Condensed', Barlow, sans-serif; color: var(--tb-pfg);
}
.p-tube .card-video img.ava { border-radius: var(--r-xl) }
/* Sus seis teselas de avatar, ahora dentro del rojo: distintos entre sí por matiz y por luz, pero
   ninguno ámbar (matiz 8 a 32) y ninguna sube de L 0.5 para que la inicial en blanco saque al
   menos 4 de contraste. La 0.62 que usa el resto de la puerta sería ilegible encima. */
.p-tube .ava-c0 { background: oklch(0.5 0.21 27) }
.p-tube .ava-c1 { background: oklch(0.45 0.19 20) }
.p-tube .ava-c2 { background: oklch(0.46 0.18 12) }
.p-tube .ava-c3 { background: oklch(0.42 0.16 25) }
.p-tube .ava-c4 { background: oklch(0.5 0.2 8) }
.p-tube .ava-c5 { background: oklch(0.44 0.17 32) }
.p-tube .video-dur {
  right: auto; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: var(--r-md);
  background: oklch(0.1 0.005 20 / .82); font: 600 12px/1.4 Barlow, sans-serif;
}
.p-tube .card-video.es-fila .video-art { width: 160px }
.p-tube .card-video.es-fila:hover { background: var(--s2) }
.p-tube .card-video.es-fila .video-id b { font-size: 14px }
.p-tube .card-video.es-fila .video-id small { font-size: 12.5px }

/* ---------- su héroe «Destacado» ---------- */
.p-tube .tube-hero {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--tb-3xl); background: var(--s1);
}
.p-tube .tube-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5 }
.p-tube .tube-hero-vela {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg), oklch(0.14 0.005 20 / .72) 55%, transparent);
}
.p-tube .tube-hero-c { position: relative; max-width: 576px; padding: 32px }
@media (min-width: 768px) { .p-tube .tube-hero-c { padding: 48px } }
.p-tube .tube-hero-pill {
  display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); background: var(--tb-grad);
  color: var(--tb-pfg); font: 700 12px/1.4 Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.p-tube .tube-hero-t { margin: 16px 0 0; font-size: 36px; line-height: 1; color: #fff }
@media (min-width: 768px) { .p-tube .tube-hero-t { font-size: 60px } }
.p-tube .tube-hero p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--mut) }
.p-tube .tube-hero-btn {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; height: 48px; padding-inline: 24px;
  border-radius: var(--r-xl); background: var(--tb-grad); box-shadow: var(--tb-sombra);
  color: var(--tb-pfg); font: 700 15px/1 Barlow, sans-serif;
}
.p-tube .tube-hero-btn .ic { width: 16px; height: 16px }

/* ---------- sus recortables: píldora y degradado cuando está activa ---------- */
.p-tube .tube-chips { gap: 8px; margin-bottom: 26px }
.p-tube .tube-chip {
  padding: 7px 16px; border: 1px solid var(--line-2); background: var(--s2);
  font: 500 14px/1 Barlow, sans-serif; color: var(--txt);
}
.p-tube .tube-chip small { font-size: 12px; color: var(--mut3) }
.p-tube .tube-chip:hover { border-color: var(--line-2); background: var(--s3); color: #fff }
.p-tube .tube-chip.on { border-color: transparent; background: var(--tb-grad); color: var(--tb-pfg); font-weight: 600 }
.p-tube .tube-chip.on small { color: oklch(0.97 0 0 / .75) }

/* ---------- «En llamas»: lista numerada con el puesto en su tipografía ---------- */
.p-tube .tube-h1 { margin: 0; font-size: 40px; line-height: 1; color: #fff }
@media (min-width: 640px) { .p-tube .tube-h1 { font-size: 48px } }
.p-tube .tube-sub { margin: 8px 0 0; font-size: 14px; color: var(--mut) }
.p-tube .llama-lista { display: flex; flex-direction: column; gap: 16px; max-width: 1024px; margin: 0 }
/* Sus dos tablas: cinco vídeos y cinco shorts. Una debajo de otra mientras el cuerpo no dé sitio de
   sobra para un cartel de 224 y su título, y en dos columnas a partir de 1440 (con el carril de
   TofyTube quitado, cada columna saca unos 570 px). Ambas arrancan en el borde izquierdo del contenido. */
.p-tube .llama-dos { display: grid; gap: 34px; align-items: start; margin-top: 22px }
@media (min-width: 1440px) { .p-tube .llama-dos { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.p-tube .llama-bloque { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.p-tube .llama-bloque > .h2 {
  margin: 0; font-family: 'Barlow Condensed', Barlow, sans-serif; font-weight: 700;
  font-size: 28px; line-height: 1; color: #fff;
}
.p-tube .llama-vacio {
  margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--tb-2xl);
  background: var(--s1); font-size: 14px; line-height: 1.5; color: var(--mut);
}
.p-tube .llama-id b { font-family: 'Barlow Condensed', Barlow, ui-sans-serif, sans-serif; font-weight: 600 }
.p-tube .llama-fila {
  display: flex; align-items: center; gap: 20px; padding: 12px;
  border-radius: var(--tb-2xl); transition: background-color .16s;
}
.p-tube .llama-fila:hover { background: var(--s2) }
.p-tube .llama-n {
  flex: 0 0 48px; text-align: center; font: 700 44px/1 'Barlow Condensed', Barlow, sans-serif;
  background: var(--tb-marca); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-tube .llama-art {
  position: relative; flex: 0 0 224px; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl);
}
.p-tube .llama-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* 71 px de ancho por 9:16 dan 126 de alto: el mismo cartel que el de un vídeo largo, así las dos
   tablas quedan fila con fila sin que un short levante la suya. El recorte lo hace el `object-fit`. */
.p-tube .llama-art.corto { flex: 0 0 71px; aspect-ratio: 9 / 16 }
.p-tube .llama-id { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.p-tube .llama-id b { font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff }
.p-tube .llama-fila:hover .llama-id b { color: var(--tb-p) }
.p-tube .llama-id small { overflow: hidden; font-size: 13.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap }
.p-tube .llama-id .llama-desc { font-size: 13px; color: var(--mut3) }

/* ---------- «Siguiendo»: un bloque por canal ---------- */
.p-tube .tube-grupo { display: flex; flex-direction: column; gap: 16px }
.p-tube .tube-grupo-cab { display: flex; align-items: center; gap: 12px }
.p-tube .tube-grupo-n { font: 700 24px/1.15 'Barlow Condensed', Barlow, sans-serif; color: #fff }
.p-tube .tube-grupo-n:hover { color: var(--tb-p) }
.p-tube .tube-grupo-cab small { display: block; font-size: 12px; color: var(--mut3) }

/* ---------- su ficha: reproductor encajado y brillando, caja secundaria debajo ---------- */
.p-tube .ver { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px }
@media (max-width: 1279.98px) { .p-tube .ver { grid-template-columns: minmax(0, 1fr) 336px } }
@media (max-width: 1023.98px) { .p-tube .ver { grid-template-columns: minmax(0, 1fr) } }
.p-tube .ver-player {
  border: 1px solid var(--line); border-radius: var(--tb-3xl); background: var(--s1); box-shadow: var(--tb-sombra);
}
/* Su ficha: columna entera abajo de xl y 380 px de lado a partir de xl, con 32 de aire. */
.p-tube .ver { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); padding-top: 0 }
@media (min-width: 1280px) { .p-tube .ver { grid-template-columns: minmax(0, 1fr) 380px } }
.p-tube .ver-titulo { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15 }
.p-tube .ver-quien { padding: 14px 0; border-block: 0 }
.p-tube .ver-id a { font-size: 16px }
.p-tube .ver-id a:hover { color: var(--tb-p) }
.p-tube .ver-seguir {
  height: 40px; padding-inline: 20px; border-radius: var(--r-xl);
  background: var(--tb-grad); box-shadow: var(--tb-sombra); color: var(--tb-pfg); font: 700 14px/1 Barlow, sans-serif;
}
.p-tube .ver-seguir:hover { background: linear-gradient(135deg, oklch(0.58 0.23 27), oklch(0.44 0.19 22)) }
.p-tube .ver-seguir.on { background: var(--s2); border: 0; box-shadow: none; color: var(--mut) }
.p-tube .voto, .p-tube .ver-pill {
  height: 40px; padding-inline: 16px; border: 0; border-radius: var(--r-xl); background: var(--s2);
  font: 500 14px/1 Barlow, sans-serif; color: var(--txt);
}
.p-tube .ver-ava .ava {
  width: 36px; height: 36px; border-radius: var(--r-xl);
  font: 700 16px/1 'Barlow Condensed', Barlow, sans-serif; color: var(--tb-pfg);
}
.p-tube .voto:hover:not([disabled]), .p-tube .ver-pill:hover { border: 0; background: var(--s3); color: #fff }
.p-tube .voto.on { background: var(--s2); color: var(--tb-p) }
.p-tube .ver-desc { padding: 16px; border: 0; border-radius: var(--tb-2xl); background: var(--s2) }
.p-tube .ver-cifras { font: 600 13.5px/1.45 Barlow, sans-serif; color: var(--txt) }
.p-tube .ver-texto { color: var(--mut) }
.p-tube .ver-lateral-t { margin: 0 0 4px; font-size: 20px; color: #fff }
.p-tube .btn-red { border-radius: var(--r-xl); color: var(--tb-pfg); box-shadow: var(--tb-sombra) }
.p-tube .well { border-color: var(--line-2); background: oklch(0.18 0.01 20 / .6) }
.p-tube .shorts { border-color: var(--line) }
.p-tube .shorts > .h2 { font-family: 'Barlow Condensed', Barlow, sans-serif; font-weight: 700; font-size: 28px }
.p-tube .short b { font-size: 14px }

/* ---------- sus aguas de repostería, ahora de rojo sobre negro ---------- */
.p-tube .video-art, .p-tube .short-art, .p-tube .llama-art, .p-tube .tube-hero {
  background-image: linear-gradient(150deg, oklch(0.2 0.012 20), var(--bg) 70%);
}
.p-tube .art-0 { background-image: radial-gradient(46% 50% at 26% 22%, oklch(0.62 0.23 27 / .3), transparent 68%), linear-gradient(150deg, oklch(0.2 0.012 20), var(--bg) 70%) }
.p-tube .art-1 { background-image: radial-gradient(44% 48% at 74% 26%, oklch(0.7 0.18 15 / .26), transparent 68%), linear-gradient(210deg, oklch(0.19 0.014 22), var(--bg) 72%) }
.p-tube .art-2 { background-image: radial-gradient(50% 44% at 50% 88%, oklch(0.55 0.21 25 / .34), transparent 70%), linear-gradient(160deg, oklch(0.21 0.01 18), var(--bg) 70%) }
.p-tube .art-3 { background-image: radial-gradient(40% 46% at 18% 74%, oklch(0.66 0.2 32 / .28), transparent 66%), linear-gradient(120deg, oklch(0.2 0.012 25), var(--bg) 74%) }
.p-tube .art-4 { background-image: radial-gradient(48% 42% at 84% 70%, oklch(0.58 0.22 8 / .3), transparent 68%), linear-gradient(200deg, oklch(0.19 0.012 20), var(--bg) 70%) }
.p-tube .art-5 { background-image: radial-gradient(42% 52% at 58% 16%, oklch(0.72 0.16 28 / .26), transparent 66%), linear-gradient(140deg, oklch(0.21 0.012 15), var(--bg) 72%) }

/* ---------- su verificación, pedida desde dentro de TofyTube ---------- */
/* Las mismas piezas de la hoja de normas de TofyLive (regla, cifra y formulario) en una columna más
   ancha: el panel de la puerta de vídeos es muy ancho y los 780 px de `.rules` se quedarían solos.
   Al poner el tope en el padre, todos los bloques comparten el borde izquierdo y el derecho; dentro
   de cada bloque la prosa y los campos llevan su propio tope para que la línea siga siendo legible. */
.p-tube .tube-verif { max-width: 1240px }
.p-tube .tube-verif .sub { max-width: 860px }
.p-tube .tube-verif .rule p, .p-tube .tube-verif .box .mut { max-width: 900px; font-size: 15.5px }
.p-tube .tube-verif .rules-nums b { font-size: 34px }
.p-tube .tube-verif .well .field { max-width: 720px }
.p-tube .tube-verif .box, .p-tube .tube-verif .well { margin-bottom: 14px }
.p-tube .tube-verif .well > * + * { margin-top: 12px }
/* La cuota dentro de TofyTube: píldoras más grandes, radio de la puerta y su dorado. */
.p-tube .cuota { margin-top: 16px }
.p-tube .cuota span { padding: 10px 14px; border-radius: var(--tb-2xl); background: var(--s2); font-size: 14px }
.p-tube .cuota b { font-size: 17px; color: var(--tb-p) }
.p-tube .tube-verif .state { padding: 7px 12px; font-size: 11.5px; letter-spacing: .08em }
@media (max-width: 639.98px) { .p-tube .tube-verif .rules-nums { grid-template-columns: 1fr } }

/* ---------- su responsive: en tableta el carril se hace tira y la barra se desmonta ---------- */
@media (max-width: 1023.98px) {
  .p-tube .tube-rail { width: 76px; flex-basis: 76px; padding-inline: 6px }
  .p-tube .tube-fila { justify-content: center; gap: 0; padding-block: 12px }
  .p-tube .tube-fila span { position: static; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .p-tube .tube-sus, .p-tube .tube-sus-t, .p-tube .tube-rail hr { display: none }
}
@media (max-width: 767.98px) {
  .p-tube .tube-top { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px; row-gap: 8px }
  .p-tube .tube-menu { display: none }
  .p-tube .tube-buscar { order: 5; flex: 1 1 100%; max-width: none; margin-inline: 0 }
  .p-tube .tube-rail {
    top: 0; width: 100%; min-width: 0; flex: 0 0 auto; max-height: none; padding: 6px 8px;
    border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
  }
  .p-tube .tube-rail nav { flex-direction: row; gap: 4px }
  .p-tube .tube-fila { flex: 0 0 auto; padding: 9px 10px }
  .p-tube .tube-fila span { position: static; width: auto; height: auto; clip-path: none }
  .p-tube .llama-art { flex-basis: 132px }
  .p-tube .llama-fila { gap: 12px }
  .p-tube .llama-n { flex-basis: 34px; font-size: 32px }
}

/* ---------------- Recompensas de puntos de canal ---------------- */
.msg-recompensa {
  background: rgba(229, 57, 53, 0.08) !important;
  border-left: 2px solid var(--red) !important;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 3px 0;
}
.msg-recompensa:hover {
  background: rgba(229, 57, 53, 0.14) !important;
}
.msg-rec-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 10px/1 Barlow, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 3px;
}
.msg-rec-tag svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
}

.chat-bar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.chat-rec-drop {
  position: relative;
  display: inline-block;
}
.chat-rec-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--s2);
  color: var(--mut);
  font: 700 11px/1 Barlow, sans-serif;
  cursor: pointer;
  list-style: none;
}
.chat-rec-trigger::-webkit-details-marker { display: none; }
.chat-rec-trigger:hover { border-color: var(--red); color: #fff; background: var(--s3); }
.chat-rec-trigger svg { width: 13px; height: 13px; fill: none; stroke: var(--red); stroke-width: 2; }
.chat-rec-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 250px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
  z-index: 50;
  padding: 8px;
}
.chat-rec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.chat-rec-head b { color: #fff; text-transform: uppercase; letter-spacing: .05em; }
.chat-rec-head small { color: var(--mut2); }
.chat-rec-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-rec-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--s1);
  border: 1px solid var(--line);
}
.chat-rec-item-txt { display: flex; flex-direction: column; min-width: 0; }
.chat-rec-item-txt b { font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-rec-item-txt small { font-size: 10.5px; color: var(--red); font-weight: 600; }
.chat-rec-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 5px;
  font: 700 11px/1 Barlow, sans-serif;
  padding: 4px 8px;
  cursor: pointer;
}
.chat-rec-btn:hover { background: #ff334b; }
.chat-rec-falta { font-size: 9.5px; color: var(--mut3); white-space: nowrap; }

.ptos-recompensas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.recompensas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 6px 0;
}
.recompensa-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.recompensa-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recompensa-coste {
  font: 700 13px/1 Barlow, sans-serif;
  color: var(--red);
  background: rgba(229, 57, 53, 0.12);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.recompensa-titulo { font-size: 14.5px; color: #fff; overflow-wrap: anywhere; }
.recompensa-desc { margin: 0; font-size: 12px; color: var(--mut2); line-height: 1.4; overflow-wrap: anywhere; }
.btn-borrar-recompensa {
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
}
.btn-borrar-recompensa:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}
.ptos-form-recompensa {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
}
.ptos-form-recompensa h5,
.ptos-canjes-historial h4 {
  margin: 0;
  font: 700 13px/1.3 Barlow, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
}
.ptos-form-rec-campos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}
@media (max-width: 639.98px) {
  .ptos-form-rec-campos { grid-template-columns: 1fr; }
}
.ptos-canjes-historial {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.ptos-canjes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ptos-canjes-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.ptos-canje-quien {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ptos-canje-quien b { font-size: 13.5px; color: #fff; }
.ptos-canje-quien small { font-size: 11.5px; color: var(--mut3); }
.ptos-canje-detalle {
  font-size: 12.5px;
  color: var(--mut);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ptos-canje-detalle b { color: var(--red); }
.ptos-canje-detalle small { color: var(--mut3); font-size: 11px; margin-left: 4px; }

.sala-rec-details {
  position: relative;
  display: inline-block;
}
.sala-rec-details > summary::-webkit-details-marker { display: none; }
.sala-puntos-btn {
  cursor: pointer;
  user-select: none;
  transition: border-color .16s, background-color .16s;
}
.sala-puntos-btn:hover {
  border-color: var(--red);
  background: var(--s2);
}
.sala-rec-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.sala-rec-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 310px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  z-index: 100;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sala-rec-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sala-rec-cab b { font-size: 12.5px; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.sala-rec-cab small { font-size: 11.5px; color: var(--mut2); }
.sala-rec-cab small strong { color: var(--red); }
.sala-rec-vacio { margin: 12px 0; font-size: 12.5px; color: var(--mut3); text-align: center; }
.sala-rec-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sala-rec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .16s;
}
.sala-rec-item:hover { border-color: var(--line-2); }
.sala-rec-item.sin-saldo { opacity: .75; }
.sala-rec-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sala-rec-tit { font-size: 13.5px; color: #fff; overflow-wrap: anywhere; }
.sala-rec-desc { margin: 0; font-size: 11.5px; color: var(--mut3); line-height: 1.35; overflow-wrap: anywhere; }
.sala-rec-accion { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sala-rec-precio { font: 700 12px/1 Barlow, sans-serif; color: var(--red); }
.btn-canjear {
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 11.5px/1 Barlow, sans-serif;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color .16s;
}
.btn-canjear:hover { background: #ff334b; }
.btn-canjear.falta {
  background: var(--s3);
  color: var(--mut3);
  cursor: not-allowed;
  font-size: 10.5px;
  padding: 4px 8px;
}

/* ---------------- Recompensas avanzadas, Raids y VIPs ---------------- */
.msg-recompensa--resaltado {
  background: linear-gradient(90deg, rgba(255, 112, 67, 0.18), rgba(229, 57, 53, 0.12)) !important;
  border-left: 3px solid #ff7043 !important;
  box-shadow: 0 0 10px rgba(255, 112, 67, 0.2);
}
.msg-rec-tag--resaltado {
  color: #ff9800 !important;
}
.msg-rec-tag--resaltado svg {
  stroke: #ff9800 !important;
  fill: #ff9800 !important;
}
.msg-raid {
  background: rgba(168, 85, 247, 0.12) !important;
  border-left: 3px solid #a855f7 !important;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 3px 0;
}
.msg-rec-tag--raid {
  color: #c084fc !important;
}
.msg-rec-tag--raid svg {
  stroke: #c084fc !important;
  fill: #c084fc !important;
}
.msg-aviso-chat {
  background: rgba(59, 130, 246, 0.1) !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 3px 0;
}
.msg-rec-tag--aviso {
  color: #60a5fa !important;
}
.msg-rec-tag--aviso svg {
  stroke: #60a5fa !important;
}

.chat-raid-banner {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 8px 10px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
  animation: raidPulse 1.5s infinite alternate;
}
@keyframes raidPulse {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}
.chat-raid-banner .raid-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 13px/1 Barlow, sans-serif;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.chat-raid-banner .raid-head svg {
  width: 16px;
  height: 16px;
  fill: #ffd24a;
  stroke: #ffd24a;
}
.chat-raid-banner p {
  margin: 0 0 8px;
  font-size: 13px;
}
.chat-raid-banner .raid-btn {
  display: inline-block;
  background: #fff;
  color: #7c3aed;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 6px;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity .15s;
}
.chat-raid-banner .raid-btn:hover {
  opacity: .9;
}

.chat-rec-form-canje {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.chat-rec-input {
  width: 100%;
  max-width: 180px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--s3);
  color: #fff;
}
.sala-rec-form-canje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.sala-rec-input {
  width: 100%;
  max-width: 220px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--s2);
  color: #fff;
}

.ptos-form-rec-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 10px;
}
.ptos-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tx);
  cursor: pointer;
}
.recompensa-pills {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.rec-pill {
  font: 700 10px/1 Barlow, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 6px;
  border-radius: 4px;
}
.rec-pill--destacado {
  background: rgba(255, 112, 67, 0.2);
  color: #ff9800;
  border: 1px solid rgba(255, 112, 67, 0.3);
}
.rec-pill--texto {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.ptos-canje-msg {
  font-style: italic;
  color: var(--mut);
  margin-top: 3px;
  font-size: 12px;
}

.ptos-vips {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.ptos-vips-lista {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ptos-vips-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--s2);
  border-radius: 8px;
  border: 1px solid var(--line-2);
}
.ptos-vip-quien {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ptos-vip-quien small {
  display: block;
  color: var(--mut);
}


/* ========== ALERTAS OBS (Diseño y Animaciones Originales del ZIP) ========== */

:root {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-sans: 'Figtree', sans-serif;
  --follow: oklch(0.72 0.2 10);
  --sub: oklch(0.75 0.16 230);
  --tofys: oklch(0.85 0.17 85);
  --raid: oklch(0.72 0.2 145);
}

.alert-follow { --c: var(--follow); }
.alert-sub    { --c: var(--sub); }
.alert-tofys  { --c: var(--tofys); }
.alert-raid   { --c: var(--raid); }

/* Escenario del overlay (fuente de navegador en OBS) */
.alert-stage {
  position: fixed;
  inset: 0;
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4rem;
  pointer-events: none;
  z-index: 9999;
}

/* Tarjeta de alerta original */
.alert-root {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 2.5rem 1.25rem 1.25rem;
  min-width: 520px;
  border-radius: 2rem;
  background: linear-gradient(135deg, oklch(0.18 0.03 280 / 92%), oklch(0.12 0.02 280 / 92%));
  border: 3px solid var(--c);
  box-shadow: 0 0 60px color-mix(in oklch, var(--c) 55%, transparent), inset 0 0 30px color-mix(in oklch, var(--c) 20%, transparent);
  animation-name: alert-life;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  color: oklch(0.98 0 0);
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.alert-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 1.5rem;
  font-size: 3.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  background: var(--c);
  color: oklch(0.15 0.02 280);
  animation: badge-pop .7s cubic-bezier(.3,1.6,.5,1) .2s both, badge-pulse 1.4s ease-in-out 1s infinite;
  flex-shrink: 0;
}

.alert-coin {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid oklch(0.15 0.02 280);
  animation: coin-spin 1.6s linear infinite;
}

.alert-body {
  position: relative;
  z-index: 1;
  text-align: left;
}

.alert-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--c);
  animation: slide-in .5s ease .35s both;
}

.alert-user {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.05;
  animation: slide-in .5s ease .5s both, shimmer 2.5s linear 1s infinite;
  background: linear-gradient(90deg, oklch(0.98 0 0) 40%, var(--c) 50%, oklch(0.98 0 0) 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.alert-msg {
  margin: .3rem 0 0 0;
  font-size: 1.1rem;
  opacity: .85;
  animation: slide-in .5s ease .7s both;
}

.alert-burst {
  position: absolute;
  left: 68px;
  top: 50%;
  pointer-events: none;
}

.alert-burst span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  transform: rotate(calc(var(--i) * 30deg)) translateX(0);
  animation: burst 1s ease-out .3s both;
}

.alert-raid .alert-root, .alert-root.alert-raid {
  animation-name: alert-life-raid;
}

@keyframes alert-life {
  0% { opacity: 0; transform: translateY(-60px) scale(.7); }
  8% { opacity: 1; transform: translateY(0) scale(1.05); }
  12% { transform: scale(1); }
  90% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(.9); }
}

@keyframes alert-life-raid {
  0% { opacity: 0; transform: translateX(-120%) skewX(-15deg); }
  8% { opacity: 1; transform: translateX(4%) skewX(5deg); }
  12% { transform: translateX(0) skewX(0); }
  14%, 18% { transform: translateX(-6px); } 16%, 20% { transform: translateX(6px); } 22% { transform: none; }
  90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(120%) skewX(15deg); }
}

@keyframes badge-pop {
  from { transform: scale(0) rotate(-30deg); }
  to { transform: scale(1) rotate(0); }
}

@keyframes badge-pulse {
  50% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--c) 0%, transparent), 0 0 30px var(--c); }
}

@keyframes coin-spin {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}

@keyframes shimmer {
  to { background-position: -300% 0; }
}

@keyframes burst {
  0% { opacity: 1; transform: rotate(calc(var(--i) * 30deg)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateX(140px) scale(.3); }
}

/* Escenario de previsualización con fondo radial idéntico al ZIP */
.stage {
  display: grid;
  place-items: center;
  min-height: 320px;
  border-radius: 1.5rem;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, oklch(0.3 0.06 280), oklch(0.1 0.02 280));
  position: relative;
  padding: 24px;
}

/* Tarjetas y controles del Studio */
.alertas-box h3 { margin-top: 0; }
.alertas-url-card {
  background: var(--bg-elev, #121218);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.alertas-url-card label { display: block; margin-bottom: 2px; }
.alertas-separadas h4 { margin: 0 0 6px; }

.alertas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.alerta-card-studio {
  background: var(--bg-elev, #121218);
  border: 2px solid color-mix(in oklch, var(--c, var(--primary)) 30%, transparent);
  border-radius: 1rem;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .15s, border-color .15s;
}
.alerta-card-studio:hover {
  border-color: var(--c);
}
.alerta-card-studio-cab {
  display: flex;
  align-items: center;
  gap: 14px;
}
.alerta-card-studio-cab div { flex: 1; }
.alerta-card-studio-cab b { display: block; font-size: 16px; font-family: var(--font-display); }
.alerta-card-studio-cab small { color: var(--mut); font-size: 13px; }

.alerta-icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-display);
  background: var(--c);
  color: oklch(0.15 0.02 280);
  flex-shrink: 0;
}

.alerta-card-studio-btns {
  display: flex;
  gap: 8px;
}
.alerta-card-studio-btns .ghost,
.alerta-card-studio-btns .btn-red { flex: 1; text-align: center; }

.alertas-preview-wrap {
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.5rem;
  overflow: hidden;
}
.alertas-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-elev, #121218);
  border-bottom: 1px solid rgba(255,255,255,.08);
}


/* ==========================================================================
   SISTEMA DE MOVIMIENTO · Alta Fidelidad
   Inspirado en Emil Kowalski, Rauno Freiberg, linuswillner — Taste & Craft.
   Reglas:
   1. Toda animación es funcional: guía el ojo, confirma la acción o revela.
   2. El ease-out natural (0.16, 1, 0.3, 1) para entradas; ease-in rápido
      para salidas. Spring suave (overshoot 1.15) solo en acciones del usuario.
   3. Stagger escalonado a 60 ms entre hijos.
   4. Duración proporcional a distancia: 140 ms para micro, 260 ms para
      estados, 380 ms para entradas, 550 ms para escenas.
   5. prefers-reduced-motion respetado: todo colapsa a instantáneo.
   ========================================================================== */

/* ---- Keyframes maestros ---- */
@keyframes ht-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ht-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ht-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ht-fade-scale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes ht-scale-pop {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ht-slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ht-shimmer-line {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes ht-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.58 0.23 27 / 0); }
  50%      { box-shadow: 0 0 22px -4px oklch(0.58 0.23 27 / 0.35); }
}
@keyframes ht-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---- Clases utilitarias de entrada ---- */
.ht-a-up    { animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards; }
.ht-a-down  { animation: ht-fade-down var(--dur-smooth) var(--ease-out) backwards; }
.ht-a-in    { animation: ht-fade-in var(--dur-smooth) var(--ease-out) backwards; }
.ht-a-scale { animation: ht-fade-scale var(--dur-smooth) var(--ease-out) backwards; }
.ht-a-pop   { animation: ht-scale-pop var(--dur-cinematic) var(--ease-spring) backwards; }
.ht-a-right { animation: ht-slide-right var(--dur-smooth) var(--ease-out) backwards; }

/* Stagger: aplícalo en el padre (.ht-stagger) y los hijos usan nth-child */
.ht-stagger > :nth-child(1)  { animation-delay: 0ms; }
.ht-stagger > :nth-child(2)  { animation-delay: 60ms; }
.ht-stagger > :nth-child(3)  { animation-delay: 120ms; }
.ht-stagger > :nth-child(4)  { animation-delay: 180ms; }
.ht-stagger > :nth-child(5)  { animation-delay: 240ms; }
.ht-stagger > :nth-child(6)  { animation-delay: 300ms; }
.ht-stagger > :nth-child(7)  { animation-delay: 360ms; }
.ht-stagger > :nth-child(8)  { animation-delay: 420ms; }
.ht-stagger > :nth-child(9)  { animation-delay: 480ms; }
.ht-stagger > :nth-child(10) { animation-delay: 540ms; }
.ht-stagger > :nth-child(n+11) { animation-delay: 580ms; }

/* ================================================================
   1 · BARRA SUPERIOR (header .top)
   ================================================================ */
.top {
  animation: ht-fade-down var(--dur-smooth) var(--ease-out);
}

/* Logo marca: hover respira */
.brand-mark {
  transition: transform var(--dur-norm) var(--ease-spring);
}
.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.08);
}
.brand-txt b {
  transition: letter-spacing var(--dur-norm) var(--ease-out);
}
.brand:hover .brand-txt b {
  letter-spacing: .07em;
}

/* Buscador: expansión suave del anillo de foco */
.search {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              background-color var(--dur-norm) var(--ease-smooth),
              box-shadow var(--dur-norm) var(--ease-smooth);
}
.search:focus-within {
  box-shadow: 0 0 0 3px oklch(0.58 0.23 27 / 0.18);
}

/* Perfil y acciones: lift + spring */
.top-perfil {
  transition: border-color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast),
              transform var(--dur-norm) var(--ease-spring);
}
.top-perfil:hover {
  transform: translateY(-1px);
}
.top-perfil:active {
  transform: translateY(0) scale(0.97);
}

/* ================================================================
   2 · BOTONES — feedback físico
   ================================================================ */
.btn-red {
  transition: transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px oklch(0.58 0.23 27 / 0.65);
}
.btn-red:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 12px -6px oklch(0.58 0.23 27 / 0.5);
  transition-duration: var(--dur-fast);
}

.ghost {
  transition: color var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.ghost:active {
  transform: scale(0.97);
  transition-duration: var(--dur-fast);
}

.glassbtn {
  transition: border-color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.glassbtn:hover {
  transform: translateY(-1px);
}
.glassbtn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-fast);
}

.btn-discord {
  transition: background-color var(--dur-fast),
              transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.btn-discord:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgb(88 101 242 / .55);
}
.btn-discord:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-fast);
}

/* ================================================================
   3 · HERO — entrada cinematográfica
   ================================================================ */
.hero-img {
  animation: ht-fade-in 1.2s var(--ease-out);
}
.hero-velo {
  animation: ht-fade-in 1.6s var(--ease-out);
}
.hero-vivos {
  animation: ht-fade-up 600ms var(--ease-out) 200ms backwards;
}
.hero-titulo {
  animation: ht-fade-up 700ms var(--ease-out) 350ms backwards;
}
.hero-beta {
  animation: ht-fade-up 600ms var(--ease-out) 550ms backwards;
}
.hero .flash {
  animation: ht-fade-scale 400ms var(--ease-spring) backwards;
}

/* ================================================================
   4 · PORTALES (las tres puertas de la landing)
   ================================================================ */
.portal {
  transition: background-color var(--dur-smooth) var(--ease-smooth);
}
.portal-foto {
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.portal:hover .portal-foto {
  transform: scale(1.04);
}
.portal-c {
  transition: transform var(--dur-smooth) var(--ease-out);
}
.portal:hover .portal-c {
  transform: translateY(-4px);
}
.portal-ir {
  transition: gap var(--dur-norm) var(--ease-spring),
              color var(--dur-fast);
}
.portal:hover .portal-ir {
  gap: 14px;
}
.portal-n {
  transition: transform var(--dur-smooth) var(--ease-out);
}
.portal:hover .portal-n {
  transform: translateX(4px);
}

/* ================================================================
   5 · TARJETAS DE DIRECTO (.card-live) — lift con sombra dinámica
   ================================================================ */
.card-live {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              background-color var(--dur-norm) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.card-live:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px oklch(0.58 0.23 27 / 0.2);
}
.card-live:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: var(--dur-fast);
}

/* Artwork: zoom sutil */
.card-art img {
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.card-live:hover .card-art img {
  transform: scale(1.05);
}
.card-art-mark {
  transition: opacity var(--dur-norm) var(--ease-smooth);
}
.card-live:hover .card-art-mark {
  opacity: 0;
}

/* Play button: scale-in */
.card-play {
  transition: opacity var(--dur-norm) var(--ease-out),
              transform var(--dur-norm) var(--ease-spring);
  transform: scale(0.7);
}
.card-live:hover .card-play {
  opacity: 1;
  transform: scale(1);
}

/* Uptime badge */
.card-uptime {
  transition: transform var(--dur-norm) var(--ease-out),
              opacity var(--dur-norm);
}
.card-live:hover .card-uptime {
  transform: translateY(-2px);
}

/* Avatar en tarjeta */
.card-ava .ava {
  transition: transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.card-live:hover .card-ava .ava {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--red), 0 6px 14px rgb(0 0 0 / .35);
}

/* Live badge: pulso */
.live-badge {
  animation: ht-fade-scale 300ms var(--ease-spring) backwards;
}

/* Stagger automático en la rejilla */
.grid-live > :nth-child(1)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 0ms backwards; }
.grid-live > :nth-child(2)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 50ms backwards; }
.grid-live > :nth-child(3)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 100ms backwards; }
.grid-live > :nth-child(4)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 150ms backwards; }
.grid-live > :nth-child(5)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 200ms backwards; }
.grid-live > :nth-child(6)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 250ms backwards; }
.grid-live > :nth-child(7)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 300ms backwards; }
.grid-live > :nth-child(8)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 350ms backwards; }
.grid-live > :nth-child(n+9) { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 380ms backwards; }

/* ================================================================
   6 · TARJETAS DE PERFIL (.card-profile) — misma lógica, sutil
   ================================================================ */
.card-profile {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              background-color var(--dur-norm) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.card-profile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px oklch(0.58 0.23 27 / 0.15);
}
.card-profile:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: var(--dur-fast);
}

.pf-cta {
  transition: opacity var(--dur-norm) var(--ease-out),
              transform var(--dur-norm) var(--ease-spring);
  transform: translateY(4px);
}
.card-profile:hover .pf-cta {
  opacity: 1;
  transform: none;
}

.grid-profile > :nth-child(1)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 0ms backwards; }
.grid-profile > :nth-child(2)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 50ms backwards; }
.grid-profile > :nth-child(3)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 100ms backwards; }
.grid-profile > :nth-child(4)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 150ms backwards; }
.grid-profile > :nth-child(5)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 200ms backwards; }
.grid-profile > :nth-child(n+6) { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 230ms backwards; }

/* ================================================================
   7 · TARJETAS DE VIDEO (.card-video) — TofyTube
   ================================================================ */
.card-video .video-art {
  transition: border-color var(--dur-norm) var(--ease-smooth);
}
.card-video:hover .video-art {
  border-color: oklch(0.58 0.23 27 / 0.5);
}
.card-video .video-art img {
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.card-video:hover .video-art img {
  transform: scale(1.04);
}
.video-play {
  transition: opacity var(--dur-norm) var(--ease-out),
              transform var(--dur-norm) var(--ease-spring);
  transform: scale(0.7);
}
.card-video:hover .video-play, .short:hover .video-play {
  transform: scale(1);
}
.video-dur {
  transition: transform var(--dur-norm) var(--ease-out);
}
.card-video:hover .video-dur {
  transform: translateY(-2px);
}

/* Stagger en la rejilla de vídeos */
.grid-videos > :nth-child(1)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 0ms backwards; }
.grid-videos > :nth-child(2)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 50ms backwards; }
.grid-videos > :nth-child(3)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 100ms backwards; }
.grid-videos > :nth-child(4)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 150ms backwards; }
.grid-videos > :nth-child(5)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 200ms backwards; }
.grid-videos > :nth-child(6)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 250ms backwards; }
.grid-videos > :nth-child(n+7) { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 280ms backwards; }

/* ================================================================
   8 · SHORTS — entrada lateral
   ================================================================ */
.shorts {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}
.short {
  transition: transform var(--dur-norm) var(--ease-spring);
}
.short:hover {
  transform: translateY(-3px);
}
.short:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--dur-fast);
}
.short-art {
  transition: border-color var(--dur-norm) var(--ease-smooth);
}
.short-art img {
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.short:hover .short-art img {
  transform: scale(1.05);
}
.shorts-fila > :nth-child(1)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 0ms backwards; }
.shorts-fila > :nth-child(2)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 60ms backwards; }
.shorts-fila > :nth-child(3)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 120ms backwards; }
.shorts-fila > :nth-child(4)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 180ms backwards; }
.shorts-fila > :nth-child(5)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 240ms backwards; }
.shorts-fila > :nth-child(n+6) { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 280ms backwards; }

/* ================================================================
   9 · CARRIL LATERAL (.rail) — nav links
   ================================================================ */
.rail-in {
  animation: ht-slide-right var(--dur-smooth) var(--ease-out) backwards;
}
.rail-nav a {
  transition: color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring),
              padding-left var(--dur-norm) var(--ease-out);
}
.rail-nav a:hover {
  transform: translateX(3px);
}
.rail-nav a:active {
  transform: scale(0.98);
  transition-duration: var(--dur-fast);
}
/* Indicador activo: anima la barra lateral */
.rail-nav a.on::after {
  animation: ht-fade-scale var(--dur-norm) var(--ease-spring) backwards;
}
.rail-ic {
  transition: opacity var(--dur-fast), transform var(--dur-norm) var(--ease-spring);
}
.rail-nav a:hover .rail-ic {
  transform: scale(1.1);
}

/* Canales en el carril */
.rail-c {
  transition: background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.rail-c:hover {
  transform: translateX(2px);
}
.rail-c .ava {
  transition: transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.rail-c:hover .ava {
  transform: scale(1.08);
}
.rail-c.is-live .ava {
  animation: ht-glow-pulse 2.5s ease-in-out infinite;
}

/* Stagger de los canales */
.rail-list > :nth-child(1)  { animation: ht-slide-right var(--dur-smooth) var(--ease-out) 60ms backwards; }
.rail-list > :nth-child(2)  { animation: ht-slide-right var(--dur-smooth) var(--ease-out) 120ms backwards; }
.rail-list > :nth-child(3)  { animation: ht-slide-right var(--dur-smooth) var(--ease-out) 180ms backwards; }
.rail-list > :nth-child(4)  { animation: ht-slide-right var(--dur-smooth) var(--ease-out) 240ms backwards; }
.rail-list > :nth-child(5)  { animation: ht-slide-right var(--dur-smooth) var(--ease-out) 300ms backwards; }
.rail-list > :nth-child(n+6) { animation: ht-slide-right var(--dur-smooth) var(--ease-out) 340ms backwards; }

/* ================================================================
   10 · TAGS Y BADGES — pop al pasar
   ================================================================ */
.tag {
  transition: border-color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring),
              color var(--dur-fast);
}
.tag:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--red);
  color: #fff;
}

.ht-gafete {
  transition: transform var(--dur-norm) var(--ease-spring);
}
.ht-gafete-c:hover .ht-gafete {
  transform: translateY(-1px) scale(1.06);
}

/* ================================================================
   11 · POSTS / MURO (TofySocial)
   ================================================================ */
.post {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.post:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px oklch(0.58 0.23 27 / 0.12);
}
.post > .ava {
  transition: transform var(--dur-norm) var(--ease-spring);
}
.post:hover > .ava {
  transform: scale(1.08);
}
.post-img {
  transition: transform var(--dur-cinematic) var(--ease-out);
  overflow: hidden;
}
.post-img img {
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.post:hover .post-img img {
  transform: scale(1.02);
}
.boton-accion {
  transition: color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.boton-accion:hover {
  transform: scale(1.06);
}
.boton-accion:active {
  transform: scale(0.94);
  transition-duration: var(--dur-fast);
}

/* Publicar */
.muro-publicar {
  transition: box-shadow var(--dur-norm) var(--ease-out),
              transform var(--dur-norm) var(--ease-spring);
}
.muro-publicar:hover {
  transform: translateY(-2px);
}
.muro-publicar:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-fast);
}

.muro-nav a {
  transition: color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.muro-nav a:hover {
  transform: translateX(3px);
}

/* ================================================================
   12 · FORMULARIOS — foco con anillo
   ================================================================ */
.auth-card {
  animation: ht-fade-scale var(--dur-cinematic) var(--ease-out) backwards;
}
.auth-card input,
.auth-card textarea,
.auth-card select {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              box-shadow var(--dur-norm) var(--ease-smooth),
              background-color var(--dur-norm);
}
.auth-card input:focus,
.auth-card textarea:focus,
.auth-card select:focus {
  box-shadow: 0 0 0 3px oklch(0.58 0.23 27 / 0.15);
}

/* Campo del chat */
.chat-caja {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              background-color var(--dur-norm),
              box-shadow var(--dur-norm) var(--ease-smooth);
}
.chat-caja:focus-within {
  box-shadow: 0 0 0 3px oklch(0.58 0.23 27 / 0.12);
}
.chat-enviar {
  transition: background-color var(--dur-fast),
              transform var(--dur-norm) var(--ease-spring);
}
.chat-enviar:hover {
  transform: scale(1.08);
}
.chat-enviar:active {
  transform: scale(0.92);
  transition-duration: var(--dur-fast);
}

/* ================================================================
   13 · CHAT — mensajes
   ================================================================ */
.chat-lista > .msg {
  animation: ht-fade-up 250ms var(--ease-out) backwards;
}

/* Emotes */
.chat-emote {
  transition: background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.chat-emote:hover {
  transform: scale(1.15);
}
.chat-emote:active {
  transform: scale(0.9);
  transition-duration: var(--dur-fast);
}

/* ================================================================
   14 · AVATARES — spring al hover
   ================================================================ */
.ava {
  transition: transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.ava:hover {
  transform: scale(1.08);
}

/* ================================================================
   15 · FLASH MESSAGES — entrada pop
   ================================================================ */
.flash {
  animation: ht-fade-scale 400ms var(--ease-spring) backwards;
}

/* ================================================================
   16 · SECCIONES DE PÁGINA — stagger general
   ================================================================ */
.page .wrap > section {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}
.page .wrap > section:nth-child(2)  { animation-delay: 80ms; }
.page .wrap > section:nth-child(3)  { animation-delay: 160ms; }
.page .wrap > section:nth-child(4)  { animation-delay: 240ms; }
.page .wrap > section:nth-child(n+5) { animation-delay: 300ms; }

.page-head {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}
.band-head {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}

/* ================================================================
   17 · PANEL-GRID — entrada escalonada (Studio, Ajustes)
   ================================================================ */
.panel-grid > :nth-child(1)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 0ms backwards; }
.panel-grid > :nth-child(2)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 60ms backwards; }
.panel-grid > :nth-child(3)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 120ms backwards; }
.panel-grid > :nth-child(4)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 180ms backwards; }
.panel-grid > :nth-child(5)  { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 240ms backwards; }
.panel-grid > :nth-child(n+6) { animation: ht-fade-up var(--dur-smooth) var(--ease-out) 280ms backwards; }

/* Studio state card */
.studio-state {
  animation: ht-fade-scale var(--dur-smooth) var(--ease-out) backwards;
}

/* ================================================================
   18 · PERFIL (ht-) — banner y cabecera
   ================================================================ */
.ht-banner {
  animation: ht-fade-in 800ms var(--ease-out) backwards;
}
.ht-cab {
  animation: ht-fade-up var(--dur-cinematic) var(--ease-out) 200ms backwards;
}
.ht-avatar {
  animation: ht-scale-pop var(--dur-cinematic) var(--ease-spring) 300ms backwards;
}
.ht-log-card {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}

/* ================================================================
   19 · TABLAS — table-wrap
   ================================================================ */
.table-wrap {
  animation: ht-fade-scale var(--dur-smooth) var(--ease-out) backwards;
}

/* ================================================================
   20 · HOME TRES COLUMNAS — rows stagger
   ================================================================ */
.tres {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}
.home-r {
  transition: color var(--dur-fast),
              transform var(--dur-norm) var(--ease-spring);
}
.home-r:hover {
  transform: translateX(4px);
}
.home-r .ava {
  transition: transform var(--dur-norm) var(--ease-spring);
}
.home-r:hover .ava {
  transform: scale(1.1);
}

/* ================================================================
   21 · FOOTER — entrada suave
   ================================================================ */
.foot {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}
.foot-bottom a {
  transition: color var(--dur-fast) var(--ease-smooth);
}

/* ================================================================
   22 · DETALLES Y MENÚS DESPLEGABLES
   ================================================================ */
.post-mas-dentro {
  animation: ht-fade-scale var(--dur-norm) var(--ease-spring) backwards;
}
.chat-rec-menu {
  animation: ht-fade-scale var(--dur-norm) var(--ease-spring) backwards;
}
.ht-globo {
  transition: opacity var(--dur-norm) var(--ease-out),
              transform var(--dur-norm) var(--ease-spring);
}
.menu-p {
  animation: ht-fade-scale var(--dur-norm) var(--ease-spring) backwards;
}
.nf-panel {
  animation: ht-fade-scale var(--dur-norm) var(--ease-spring) backwards;
}
.menu-p a {
  transition: color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.menu-p a:hover {
  transform: translateX(3px);
}
.nf-fila {
  transition: color var(--dur-fast) var(--ease-smooth),
              background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.nf-fila:hover {
  transform: translateX(2px);
}

/* ================================================================
   23 · GRID HOLLOW (estado vacío)
   ================================================================ */
.grid-hollow {
  animation: ht-fade-in var(--dur-smooth) var(--ease-out) 100ms backwards;
}

/* ================================================================
   24 · EYEBROW — línea de entrada
   ================================================================ */
.eyebrow {
  animation: ht-slide-right var(--dur-smooth) var(--ease-out) backwards;
}

/* ================================================================
   25 · LINKS DEL PIE DEL PERFIL — .pf-volver
   ================================================================ */
.pf-volver {
  transition: color var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring);
}
.pf-volver:hover {
  transform: translateX(-3px);
}
.pf-volver:active {
  transform: scale(0.97);
  transition-duration: var(--dur-fast);
}

/* ================================================================
   26 · RAID BANNER EN CHAT
   ================================================================ */
.chat-raid-banner {
  animation: ht-fade-scale var(--dur-cinematic) var(--ease-spring) backwards;
}
.chat-raid-banner .raid-btn {
  transition: background-color var(--dur-fast),
              transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm);
}
.chat-raid-banner .raid-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px oklch(0.58 0.23 27 / 0.5);
}
.chat-raid-banner .raid-btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-fast);
}

/* ================================================================
   27 · MURO-CAJA Y BÚSQUEDA DEL MURO
   ================================================================ */
.muro-caja {
  animation: ht-fade-up var(--dur-smooth) var(--ease-out) backwards;
}
.muro-buscar {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              box-shadow var(--dur-norm) var(--ease-smooth);
}
.muro-buscar:focus-within {
  box-shadow: 0 0 0 3px oklch(0.58 0.23 27 / 0.12);
}

/* ================================================================
   28 · ALERTAS STUDIO — tarjetas de alerta
   ================================================================ */
.alerta-card-studio {
  transition: border-color var(--dur-norm) var(--ease-smooth),
              transform var(--dur-norm) var(--ease-spring),
              box-shadow var(--dur-norm) var(--ease-out);
}
.alerta-card-studio:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px oklch(0.58 0.23 27 / 0.15);
}

/* ================================================================
   29 · SCROLLBARS — suaves
   ================================================================ */
* {
  scrollbar-color: var(--line-2) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mut3);
}

/* ================================================================
   30 · FOCUS VISIBLE — anillo unificado
   Solo en elementos interactivos explícitos, no en contenedores.
   ================================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid oklch(0.58 0.23 27 / 0.7);
  outline-offset: 2px;
}
.btn-red:focus-visible,
.ghost:focus-visible,
.glassbtn:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 4px oklch(0.58 0.23 27 / 0.2);
}
/* Quitamos outline de details/summary y paneles flotantes para evitar marcos toscos */
summary,
summary:focus,
summary:focus-visible,
details,
details:focus,
details:focus-visible,
details[open],
details[open]:focus,
details[open]:focus-visible,
.menu,
.menu summary,
.menu-p,
.notif,
.notif summary,
.nf-panel,
.post-mas,
.post-mas summary,
.post-mas-dentro,
.menu-drop {
  outline: none !important;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* ================================================================
   31 · PREFIERE REDUCIR MOVIMIENTO
   Colapsamos todo a instantáneo. Los colores y las sombras se quedan.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* Barra de control y prueba de audio para cuando se abre el overlay en navegador */
.browser-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(18, 18, 26, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #fff;
  z-index: 100000;
  pointer-events: auto;
  user-select: none;
}
.bb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.bb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.bb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bb-btn {
  background: #ff3b5c;
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, opacity .15s, background .15s;
}
.bb-btn:hover { transform: scale(1.04); }
.bb-btn:active { transform: scale(0.96); }
.bb-pulse {
  animation: bb-pulse-anim 1.5s infinite;
}
@keyframes bb-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255, 59, 92, 0); }
}
.bb-ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.bb-ghost:hover { background: rgba(255, 255, 255, 0.16); }
.bb-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  line-height: 1;
}
.bb-close:hover { color: #fff; }