/* ---- Tipografía: Manrope, alojada en la propia web (sin Google) ---- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2?v=a30ddcd349) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2?v=3911b66d9f) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Colores: tema «azul noche» (el mismo con el sistema en modo claro u oscuro) ----
   Fondo azul muy oscuro, que casa con la cabecera y el pie negros y hace destacar el
   rojo de la marca; cajas y tarjetas en un azul algo más claro. */
:root {
  color-scheme: dark;      /* controles del navegador (casillas, barras de scroll…) en oscuro */
  --fondo: #182742;        /* fondo de la página */
  --tarjeta: #213354;      /* cajas, paneles y tarjetas */
  --borde: #314668;
  --linea: #40567d;        /* líneas que unen las respuestas */
  --texto: #eef2f8;
  --suave: #9fb0c8;
  --acento: #ff5a4f;       /* enlaces y detalles (rojo legible sobre oscuro) */
  --rojo: #eb0000;         /* botones principales, como "ACCEDER" */
  --azul: #8ea2ff;
  --negro: #101c33;        /* cabecera y pie: azul profundo (el azul del fondo, más oscuro) */
  --ok: #4ade80;
  --error: #f87171;
  --mencion: #6cb6ff;      /* @menciones en los comentarios */
  --miembro: #b7791f;      /* insignia "Miembro de pago" (marrón anaranjado) */
  --radio: 4px;
}
* { box-sizing: border-box; }
/* Lo que lleva el atributo "hidden" se oculta siempre, aunque otro estilo diga lo contrario. */
[hidden] { display: none !important; }
/* Reserva siempre el hueco de la barra de desplazamiento: así el contenido
   (y el menú) no se mueve entre páginas largas y cortas. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
.contenedor { width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; }
h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { margin-top: 0; font-size: clamp(1.7rem, 4vw, 2.3rem); }
.ok { color: var(--ok); }
.error { color: var(--error); }
a { color: var(--acento); }
.suave { color: var(--suave); }
.pequeno { font-size: .875rem; margin-top: -8px; }
img { max-width: 100%; height: auto; }

/* ---- Cabecera (negra, logo a la izquierda, menú en el centro) ---- */
.cabecera { background: var(--negro); color: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 2px solid var(--rojo); }
/* Tres columnas: logo | menú | botones. Las dos laterales miden lo mismo
   (1fr), así el menú queda siempre en el centro exacto, aunque cambie lo que
   hay a la derecha (botón Acceder / Mi cuenta, enlace Admin, idioma). */
.cabecera-interior {
  max-width: 1240px; margin: 0 auto; padding: 10px 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.marca {
  display: flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; white-space: nowrap;
}
.marca img { width: 48px; height: 48px; }
.menu-principal { display: flex; gap: 4px; }
.menu-principal a {
  color: #fff; text-decoration: none; font-weight: 300; font-size: 1.15rem;
  padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radio);
}
.menu-principal a:hover { border-color: rgba(255, 255, 255, .5); }
.menu-principal a[aria-current="page"] { border-color: #fff; }
.cabecera-derecha { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
#nav { display: flex; align-items: center; gap: 12px; }
#nav a { color: #fff; text-decoration: none; }
#nav a.boton-acceder {
  background: var(--rojo); color: #fff; text-transform: uppercase;
  padding: 9px 18px; border-radius: var(--radio); font-weight: 500; letter-spacing: .02em;
}
#nav a.boton-acceder:hover { filter: brightness(1.1); }
#nav a.enlace-admin { font-size: .9rem; opacity: .8; }
/* Con sesión: foto + nombre (→ perfil) y engranaje (→ Mi cuenta). */
#nav a.perfil-cabecera { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 8px 2px 2px; border-radius: 999px; }
#nav a.perfil-cabecera:hover { background: rgba(255, 255, 255, .12); }
.avatar-cabecera {
  width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--rojo); color: #fff; font-weight: 700;
}
.avatar-cabecera img { width: 100%; height: 100%; object-fit: cover; }
.nombre-cabecera { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
#nav a.engranaje {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); color: #fff;
}
#nav a.engranaje:hover { background: rgba(255, 255, 255, .12); }
#nav a.engranaje[aria-current="page"] { background: var(--rojo); border-color: var(--rojo); }
#nav a.campana { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
#nav a.campana:hover { background: rgba(255, 255, 255, .12); }
#nav a.campana[aria-current="page"] { background: rgba(255, 255, 255, .18); }
.globo-avisos {
  position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--rojo); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
@media (max-width: 600px) { .nombre-cabecera { display: none; } }
#selector-idioma {
  font: inherit; font-size: .85rem; padding: 4px 6px;
  border: 1px solid #444; border-radius: var(--radio);
  background: #1a2a48; color: #fff;
}
.menu-movil {
  display: none; justify-self: end; background: transparent; border: 1px solid #555;
  color: #fff; padding: 6px 10px; font-size: 1.2rem; line-height: 1;
}

/* Móvil: el menú se despliega con el botón ☰ */
@media (max-width: 900px) {
  .cabecera-interior { grid-template-columns: 1fr auto; }
  .menu-principal, .cabecera-derecha { grid-column: 1 / -1; }
  .marca { font-size: 1rem; }
  .marca img { width: 40px; height: 40px; }
  .menu-movil { display: block; }
  .menu-principal, .cabecera-derecha { display: none; width: 100%; }
  .cabecera.abierta .menu-principal { display: flex; flex-direction: column; margin: 0; }
  .cabecera.abierta .cabecera-derecha { display: flex; justify-content: space-between; padding: 8px 0 4px; }
  .menu-principal a { padding: 10px 6px; }
}

/* ---- Pie de página ---- */
.pie { background: var(--negro); color: #fff; margin-top: 48px; border-top: 2px solid var(--rojo); }
.pie-interior {
  max-width: 1240px; margin: 0 auto; padding: 40px 16px 24px;
  display: grid; gap: 32px; grid-template-columns: 1fr 1fr 1fr; align-items: start;
}
.pie .marca { flex-direction: column; align-items: flex-start; font-size: 1.3rem; }
.pie .marca img { width: 80px; height: 80px; }
.pie-menu { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; }
.pie-menu a { color: #fff; text-decoration: none; font-weight: 300; font-size: 1.05rem; }
.pie-menu a:hover { text-decoration: underline; }
.pie-redes { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pie-redes a { text-decoration: none; font-size: 1.15rem; font-weight: 300; display: inline-flex; align-items: center; gap: 12px; }
.pie-redes a:hover { text-decoration: underline; }
.pie-redes svg { width: 24px; height: 24px; flex: none; }
/* Colores de cada red, como en la web anterior. */
.pie-redes .red-youtube { color: #ff0000; }
.pie-redes .red-instagram { color: #f00075; }
.pie-redes .red-telegram { color: #2aabee; }
.pie-legal { grid-column: 1 / -1; font-size: .8rem; color: #aaa; margin: 0; }
@media (max-width: 760px) {
  .pie-interior { grid-template-columns: 1fr; }
  .pie-menu { justify-content: flex-start; }
  .pie-redes { align-items: flex-start; margin: 0; }
}

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 16px; max-width: 400px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--tarjeta);
  color: var(--texto);
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
button {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radio);
  background: var(--rojo);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}
button:disabled { opacity: .6; cursor: wait; }
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.aviso { color: var(--error); margin: 0; min-height: 1.5em; }
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 20px;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
a.boton, label.boton {
  display: inline-block;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radio);
  background: var(--rojo);
  color: #fff;
  text-decoration: none;
}

/* Lista de episodios (inicio) */

/* Página de episodio */
.contenedor.ancho { max-width: 1240px; }
.barra-vista {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 16px;
}
.opciones-vista { display: contents; } /* sus botones siguen en la fila de .barra-vista */
.opciones-mano { display: none; gap: 8px; } /* solo en el móvil */
.opcion {
  background: transparent; color: var(--texto); border: 1px solid var(--borde);
  font-weight: 500; padding: 6px 12px; align-self: center;
}
.opcion[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }
.casilla { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.rejilla-episodio { display: grid; gap: 16px; }
.rejilla-episodio.vista-lado {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "video subs" "vocab subs";
  grid-template-rows: auto 1fr;
}
.rejilla-episodio.vista-arriba {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: "video vocab" "subs vocab";
  grid-template-rows: auto 1fr;
}
.area-video { grid-area: video; }
.area-subs { grid-area: subs; }
.area-vocab { grid-area: vocab; }
.rejilla-episodio.vista-lado { height: calc(100vh - 230px); min-height: 560px; grid-template-rows: auto minmax(0, 1fr); }
.vista-lado .area-subs { height: 100%; }
.vista-lado .area-vocab { min-height: 0; }
.vista-arriba .area-subs { max-height: 40vh; }
.vista-arriba .area-vocab { max-height: 85vh; }

.panel {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  padding: 12px; overflow-y: auto; position: relative;
}
.marco-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.marco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.audio { width: 100%; }

.subtitulos { list-style: none; margin: 0; padding: 0; }
.frase {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 10px 8px; border-radius: 8px; transition: background .2s; cursor: pointer;
}
.frase:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.frase.activa { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.frase p { margin: 0; }
.frase .es { font-size: 1.1rem; }
.frase .en { color: var(--suave); font-size: .95rem; margin-top: 2px; }
.sin-traduccion .frase .en, .sin-traduccion .ejemplo.en { display: none; }
/* Canal multilingüe: original + traducciones elegidas; sin columna de vocabulario. */
.frase .orig { font-size: 1.1rem; }
.frase .trad { color: var(--suave); font-size: .95rem; margin-top: 2px; }
.frase .trad-en { font-style: italic; }
.ocultar-es .frase .trad-es, .ocultar-en .frase .trad-en { display: none; }
.casillas-traduccion { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sin-vocab .area-vocab { display: none; }
@media (min-width: 801px) {
  .rejilla-episodio.sin-vocab.vista-lado { grid-template-areas: "video subs" ". subs"; }
  .rejilla-episodio.sin-vocab.vista-arriba { grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "subs"; }
  .sin-vocab.vista-arriba .area-video { width: 100%; max-width: 860px; justify-self: center; }
  .sin-vocab.vista-arriba .area-subs { max-height: 45vh; }
}
.saltar {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; color: var(--acento); padding: 2px 4px; font-size: .9rem;
}
.saltar .tiempo { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--suave); }

.tarjeta-vocab {
  border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.tarjeta-vocab.activa { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 7%, transparent); }
.tarjeta-vocab.con-momento { cursor: pointer; transition: background .2s; }
.tarjeta-vocab.con-momento:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.tarjeta-vocab p { margin: 0 0 6px; }
.tarjeta-vocab .termino { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 1.05rem; }
.tarjeta-vocab .ejemplo { font-style: italic; font-size: .95rem; }
.tarjeta-vocab .ejemplo.en { color: var(--suave); font-style: normal; }
.saltar-mini { margin-left: auto; background: transparent; color: var(--acento); padding: 0 4px; font-size: .8rem; font-weight: 500; }
.bloqueo {
  margin-top: 12px; padding: 14px; border: 1px dashed var(--acento); border-radius: 10px; text-align: center;
}
.bloqueo p { margin: 0 0 8px; }
.descripcion { color: var(--suave); margin-top: 24px; white-space: pre-line; }

@media (max-width: 800px) {
  .rejilla-episodio.vista-lado, .rejilla-episodio.vista-arriba {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "video" "subs" "vocab";
    grid-template-rows: auto;
  }
  .rejilla-episodio.vista-lado { height: auto; min-height: 0; }
  /* En el móvil, frases y tarjetas van en cajas con scroll propio, no muy altas y con un
     hueco a la derecha para poner el dedo y mover la página. */
  .vista-lado .area-subs, .vista-arriba .area-subs { height: auto; max-height: 38vh; }
  .vista-lado .area-vocab, .vista-arriba .area-vocab { max-height: 50vh; }
  .area-subs, .area-vocab { margin-right: 40px; }
  .opciones-vista { display: none; }
  .opciones-mano { display: inline-flex; }
  /* Zurdos: el hueco para el dedo y el botón de reproducir, a la izquierda. */
  .zurdo .area-subs, .zurdo .area-vocab { margin-right: 0; margin-left: 40px; }
  .zurdo .boton-flotante { right: auto; left: 16px; }
}

/* Panel de administración */
.admin-seccion { margin-bottom: 24px; }
.admin-seccion h2 { margin-top: 0; font-size: 1.15rem; }
#estado-publicacion { margin: 4px 0 0; }
#estado-publicacion.programado { font-weight: 700; }
.ancho-form { max-width: 520px; }
select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--tarjeta); color: var(--texto);
}
textarea { resize: vertical; width: 100%; }
/* Lista de espera (Clases): objetivos de 2 a 4 líneas y comentarios de 3 a 6 (se puede cambiar el
   tamaño entre esos límites; si se escribe más, sale la barra para bajar). Línea de 1.6 + relleno y borde. */
.caja-objetivos { min-height: calc(2 * 1.6em + 18px); max-height: calc(4 * 1.6em + 18px); }
.caja-comentarios { min-height: calc(3 * 1.6em + 18px); max-height: calc(6 * 1.6em + 18px); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 8px; border-bottom: 1px solid var(--borde); }
.barra-guardar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--fondo); padding: 8px 0; margin-bottom: 16px; border-bottom: 1px solid var(--borde);
}
.barra-guardar h1 { margin: 0; font-size: 1.4rem; margin-right: auto; }
.rejilla-form { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla-form label:not(.casilla) { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.ancho-completo { grid-column: 1 / -1; }
.paso-ia { border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 12px; }
.paso-ia h3 { margin: 0 0 8px; font-size: 1rem; }
.paso-ia label { display: block; margin-bottom: 8px; }
.paso-ia label input { display: block; margin-top: 4px; }
.paso-ia .botones { margin: 8px 0 4px; }
.paso-a-paso progress { width: 100%; margin-top: 8px; }
.paso-ia [aria-live] { white-space: pre-line; }
.fila-ia { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
progress { width: 100%; }
/* Editor: el vídeo arriba y, debajo, las frases a todo el ancho. */
.rejilla-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.editor-video { width: 100%; max-width: 720px; }
.pequeno-ayuda { font-size: .875rem; }
/* Listas de frases y tarjetas del editor: con su propio scroll (el JS ajusta
   la altura máxima para que se vean 5 filas). */
.lista-editor {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
  position: relative; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
  scrollbar-gutter: stable; /* el ancho no cambia al aparecer la barra de scroll */
}
.num-fila { font-size: .8rem; font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; text-align: center; }
.vista-previa { display: flex; flex-wrap: wrap; gap: 12px 24px; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin: 0; }
.vista-previa legend { font-weight: 700; padding: 0 6px; }
.vista-previa input { width: 120px; }
.fila-editor {
  display: grid; gap: 8px; padding: 8px; border: 1px solid var(--borde); border-radius: 8px;
}
.fila-frase { grid-template-columns: auto minmax(0, 1fr) auto; }
.fila-frase.activa { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); }
.col-tiempo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cabeza-tiempo { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.controles-tiempo { display: flex; align-items: center; gap: 2px; }
/* Botones de cada frase en dos columnas (Unir / Dividir arriba, ✕ debajo) para que la fila sea baja. */
.col-textos textarea { padding: 5px 8px; line-height: 1.35; }
.col-acciones.acciones-tarjeta { gap: 6px; }
/* Cuadros de las tarjetas que crecen solos si el texto no cabe en una línea. */
.campos-tarjeta textarea.auto-alto { resize: none; overflow: hidden; line-height: 1.35; padding: 6px 8px; }
/* En pantallas anchas, cada tarjeta en dos líneas: Expresión con Traducción debajo,
   Ejemplo en español con Ejemplo en inglés debajo, el Momento y, ocupando el
   resto del ancho (y las dos líneas), la Definición. */
@media (min-width: 900px) {
  .fila-tarjeta .campos-tarjeta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.2fr) 6.5em minmax(0, 1.1fr);
    grid-template-areas: "term ej-es momento def" "trad ej-en . def";
  }
  .campo-term { grid-area: term; }
  .campo-translation { grid-area: trad; }
  .campo-example_es { grid-area: ej-es; }
  .campo-example_en { grid-area: ej-en; }
  .campo-momento { grid-area: momento; }
  .campo-definition { grid-area: def; }
  .campo-definition textarea { flex: 1; min-height: 60px; }
}
.col-acciones.acciones-frase { display: grid; grid-template-columns: auto auto; gap: 4px; align-content: start; }
.col-textos { display: flex; flex-direction: column; gap: 4px; }
.col-textos textarea[lang="en"] { color: var(--suave); }
.col-acciones { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.input-tiempo { width: 6.5em; padding: 4px 6px; font-variant-numeric: tabular-nums; text-align: center; }
button.mini {
  font-size: .8rem; font-weight: 500; padding: 4px 8px; align-self: auto;
  background: transparent; color: var(--texto); border: 1px solid var(--borde);
}
button.mini:hover { border-color: var(--acento); color: var(--acento); }
.insignia {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ok); border: 1px solid currentColor; border-radius: 999px; padding: 1px 6px; text-align: center;
}
.fila-tarjeta { grid-template-columns: minmax(0, 1fr) auto; }
.campos-tarjeta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.campos-tarjeta label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
/* Ejercicios del editor: cada uno, una tarjeta con sus campos según el tipo. */
.fila-ejercicio { grid-template-columns: minmax(0, 1fr) auto; }
.campos-ejercicio { display: flex; flex-direction: column; gap: 8px; }
.campos-ejercicio label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.campos-ejercicio textarea { padding: 5px 8px; line-height: 1.35; }
.opciones-ejercicio { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.campos-ejercicio label.opcion-ejercicio { flex-direction: row; align-items: center; gap: 6px; }
.opcion-ejercicio input[type="text"] { flex: 1; min-width: 0; padding: 4px 8px; }
.opcion-ejercicio input[type="radio"] { width: auto; margin: 0; }
.tramo-dictado { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.tramo-dictado .controles-tiempo { gap: 4px; }
.tipo-ejercicio { font-weight: 700; font-size: .85rem; }
@media (max-width: 700px) { .fila-ejercicio { grid-template-columns: minmax(0, 1fr); } }
.zona-peligro { margin-top: 40px; }
button.peligro { background: var(--error); }
@media (max-width: 900px) {
  .rejilla-editor { grid-template-columns: minmax(0, 1fr); }
  .editor-video { position: static; }
}
/* Editor en el móvil: cada frase/tarjeta en vertical, a todo el ancho. Arriba el
   número, «gratis» y el tiempo (▶ 00:03.8 ⏱); debajo los textos; y abajo los botones
   en una sola fila. */
@media (max-width: 700px) {
  .fila-frase, .fila-tarjeta { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .fila-frase .col-tiempo { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
  /* El cuadro crece hasta que cabe toda la frase (navegadores que lo admiten). */
  .col-textos textarea { font-size: 1rem; field-sizing: content; min-height: 2.2em; resize: none; }
  .col-acciones.acciones-frase { display: flex; flex-direction: row; gap: 6px; }
  .col-acciones.acciones-frase button { flex: 1; }
  .col-acciones.acciones-frase button:last-child { flex: 0 0 auto; }
  /* Tarjetas: número, «gratis» y ↑ ↓ ✕ arriba, encima de los campos. */
  .col-acciones.acciones-tarjeta { order: -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .campos-tarjeta { grid-template-columns: minmax(0, 1fr); }
  .campos-tarjeta textarea { font-size: 1rem; }
  input[type="file"] { max-width: 100%; }
}

/* Mi cuenta */
.secciones-cuenta { display: flex; flex-direction: column; gap: 20px; }
.secciones-cuenta h2 { margin-top: 0; font-size: 1.15rem; }
.zona-borrar { border-color: color-mix(in srgb, var(--error) 40%, var(--borde)); }
.aviso.ok { color: var(--ok); }
.pequeno-enlace { margin: -6px 0 0; font-size: .9rem; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
a.boton.secundario, label.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
label.boton:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.pequeno-texto { font-size: .875rem; }
.bloqueo .pequeno-texto { margin: 10px 0 0; }
.caja-baja { border-top: 1px solid var(--borde); margin-top: 12px; padding-top: 12px; }
.caja-baja p { margin: 0 0 6px; }

/* ---- Textos largos (Sobre mí, Clases) ---- */
.texto-largo { font-size: 1.05rem; }
.texto-largo h2 { margin: 2.2em 0 .6em; font-size: 1.35rem; }
.texto-largo h3 { margin: 1.6em 0 .4em; font-size: 1.1rem; }
.texto-largo ul { padding-left: 1.2em; }
.texto-largo li { margin-bottom: .4em; }
.clases > h2:first-child { margin-top: 0; }
/* Clases: tarjetas del principio (icono + texto, de «destacados» en clases.*.md) y el botón. */
.clases-destacados {
  list-style: none; margin: 8px 0 32px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* De tres en tres; si en la última fila quedan una o dos, se ensanchan hasta llenarla. */
@media (min-width: 601px) {
  .clases-destacados li { grid-column: span 2; }
  .clases-destacados li:last-child:nth-child(3n+1) { grid-column: span 6; }
  .clases-destacados li:last-child:nth-child(3n+2), .clases-destacados li:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
}
.clases-destacados li {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde); font-weight: 600; line-height: 1.35;
}
.clases-icono {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem;
  background: color-mix(in srgb, var(--rojo) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rojo) 35%, transparent);
}
/* Clases: una semana de ejemplo (Telegram todos los días y 2 videollamadas). */
.semana { margin: 1.4em 0 1.8em; padding: 16px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); }
.texto-largo .semana-dias { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.texto-largo .semana-dias li {
  margin: 0; padding: 10px 2px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--fondo); border: 1px solid var(--borde);
}
.texto-largo .semana-dias li.con-llamada {
  border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 12%, var(--fondo));
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--rojo) 60%, transparent);
}
.semana-dia { font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.con-llamada .semana-dia { color: var(--texto); }
.semana-marca { font-size: 1.15rem; line-height: 1; }
.semana figcaption { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; }
.semana-leyenda { font-weight: 600; }
.semana-nota { flex-basis: 100%; font-size: .85rem; }
@media (max-width: 600px) {
  .semana { padding: 12px 10px; }
  .texto-largo .semana-dias { gap: 4px; }
  .texto-largo .semana-dias li { padding: 8px 0; gap: 4px; }
  .semana-dia { font-size: .68rem; letter-spacing: 0; }
  .semana-marca { font-size: 1rem; }
}

/* Clases: antes / durante / después de cada clase, como una línea del tiempo vertical. */
.texto-largo .clase-pasos { list-style: none; margin: 1.2em 0 0; padding: 0; }
.texto-largo .clase-pasos > li { position: relative; display: flex; gap: 16px; margin: 0; padding-bottom: 20px; }
.clase-pasos > li:not(:last-child)::before {
  content: ""; position: absolute; left: 23px; top: 50px; bottom: 4px; width: 2px;
  background: linear-gradient(var(--rojo), color-mix(in srgb, var(--rojo) 15%, transparent));
}
.clase-paso-icono {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem;
  background: var(--tarjeta); border: 2px solid var(--rojo); box-shadow: 0 0 14px color-mix(in srgb, var(--rojo) 35%, transparent);
}
.clase-paso-cuerpo { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--borde); }
.texto-largo .clase-paso-cuerpo h3 { margin: 0 0 .4em; }
.clase-paso-cuerpo p { margin: 0 0 .6em; }
.clase-paso-cuerpo > :last-child { margin-bottom: 0; }

/* Clases: el ciclo continuo de práctica como un círculo. Un punto rojo da la vuelta (--vuelta) y
   cada paso se ilumina cuando el punto pasa por él (su animation-delay lo pone Clases.astro). */
/* Radio del círculo: 38 % (aquí, en el SVG y en posicionCiclo de Clases.astro). */
.ciclo { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin: 1.4em auto 2.2em; }
.ciclo-aro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ciclo-aro circle { fill: none; stroke: var(--borde); stroke-width: .8; stroke-dasharray: 2 2; }
/* Lo que gira es un cuadrado del tamaño del círculo (no de toda la caja): así, al girar, sus
   esquinas (invisibles) apenas sobresalen y no ensanchan la página en el móvil. */
.ciclo-giro { position: absolute; inset: 12%; animation: ciclo-girar var(--vuelta) linear infinite; }
.ciclo-giro span {
  position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--rojo); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--rojo) 60%, transparent);
}
@keyframes ciclo-girar { to { transform: rotate(360deg); } }
.ciclo-centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.8rem; background: var(--tarjeta); border: 1px solid var(--borde);
}
.texto-largo .ciclo ol { list-style: none; margin: 0; padding: 0; }
/* Cada paso con el centro de su icono sobre el círculo; el texto debajo, con fondo, para que el
   punto que gira pase por detrás. */
.texto-largo .ciclo ol { position: absolute; inset: 0; z-index: 1; }
.texto-largo .ciclo li {
  position: absolute; translate: -50% -27px; width: 112px; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  animation: ciclo-paso var(--vuelta) ease-in-out infinite;
}
.ciclo-icono {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--tarjeta); border: 2px solid var(--borde); transition: none;
}
.ciclo-texto { font-size: .9rem; font-weight: 700; line-height: 1.25; color: var(--suave); background: var(--fondo); padding: 1px 6px; border-radius: 6px; }
/* El paso activo: borde rojo, brillo y texto claro durante su parte de la vuelta. */
@property --ciclo-activo { syntax: "<number>"; inherits: true; initial-value: 0; }
/* Encendido desde un poco antes de que llegue el punto (el final de la vuelta anterior) hasta
   que se acerca al siguiente paso. */
@keyframes ciclo-paso {
  0%, 12% { --ciclo-activo: 1; }
  19%, 95% { --ciclo-activo: 0; }
  100% { --ciclo-activo: 1; }
}
.texto-largo .ciclo li { --ciclo-activo: 0; }
.ciclo li .ciclo-icono { border-color: color-mix(in srgb, var(--rojo) calc(var(--ciclo-activo) * 100%), var(--borde));
  box-shadow: 0 0 calc(var(--ciclo-activo) * 18px) color-mix(in srgb, var(--rojo) 60%, transparent);
  scale: calc(1 + var(--ciclo-activo) * .12); }
.ciclo li .ciclo-texto { color: color-mix(in srgb, var(--texto) calc(var(--ciclo-activo) * 100%), var(--suave)); }
@media (prefers-reduced-motion: reduce) {
  .ciclo-giro { display: none; }
  .texto-largo .ciclo li { animation: none; }
  .ciclo-texto { color: var(--texto); }
}
@media (max-width: 600px) {
  .texto-largo .ciclo li { width: 84px; gap: 4px; translate: -50% -22px; }
  .ciclo-icono { width: 44px; height: 44px; font-size: 1.25rem; }
  .ciclo-texto { font-size: .78rem; }
  .ciclo-centro { width: 52px; height: 52px; font-size: 1.4rem; }
}

/* Clases: desplegables (dudas frecuentes y «Es para ti si…»). */
.desplegables { display: flex; flex-direction: column; gap: 8px; }
.desplegables details { border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--borde); transition: border-color .2s; }
.desplegables details[open] { border-color: color-mix(in srgb, var(--rojo) 45%, var(--borde)); }
.desplegables summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 700; list-style: none;
}
.desplegables summary::-webkit-details-marker { display: none; }
.desplegables summary::after { content: "+"; margin-left: auto; padding-left: 8px; font-size: 1.3rem; line-height: 1; color: var(--acento); transition: transform .2s; }
.desplegables details[open] summary::after { transform: rotate(45deg); }
.desplegables details > p { margin: 0; padding: 0 16px 14px; }
.para-ti summary strong { font-weight: 700; }
.para-ti details > p { padding-left: 50px; }
.para-ti-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem;
  background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
}

/* Clases: el precio como tarjeta de plan, con el botón a la lista de espera. */
.plan-precio {
  max-width: 520px; margin-bottom: 40px; padding: 24px; border-radius: 18px; background: var(--tarjeta);
  border: 1px solid color-mix(in srgb, var(--rojo) 45%, var(--borde));
  box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--rojo) 55%, transparent);
}
.plan-cifra { margin: 0 0 14px; font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.texto-largo .plan-incluye { list-style: none; padding: 0; margin: 0 0 14px; }
.texto-largo .plan-incluye li { position: relative; padding-left: 28px; margin-bottom: .5em; }
.plan-incluye li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.plan-precio > .suave { margin: 0 0 18px; }
.plan-precio .plan-boton { display: block; text-align: center; }
/* Clases: recuadro para apuntarse (sin cuenta: crear una; con cuenta: botón a /lista-espera). */
.texto-largo .apuntarse { margin: 8px 0 40px; }
.apuntarse > div > p:first-child { margin-top: 0; }
.apuntarse > div > p:last-child, .apuntarse [data-aviso-lista-espera] > p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .clase-paso-icono { width: 40px; height: 40px; font-size: 1.2rem; }
  .clase-pasos > li:not(:last-child)::before { left: 19px; top: 42px; }
  .texto-largo .clase-pasos > li { gap: 10px; }
  .para-ti details > p { padding-left: 16px; }
  .plan-precio { padding: 18px; }
}
@media (max-width: 600px) {
  /* En el móvil, icono y texto en la misma línea, una tarjeta debajo de otra. */
  .clases-destacados { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clases-destacados li { flex-direction: row; align-items: center; padding: 10px 12px; }
  .clases-icono { flex: 0 0 auto; width: 36px; height: 36px; font-size: 1.15rem; }
}

/* Sobre mí: foto a la izquierda, texto a la derecha */
/* ---------- Sobre mí ---------- */
.sm-portada, .sm-idiomas, .sm-cierre, .sm-fotos { max-width: 1080px; margin-left: auto; margin-right: auto; }
.sm-portada { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: center; margin-bottom: 56px; }
/* Foto redonda que flota despacio, con un aro de luz roja girando detrás. */
.sm-foto { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 12px auto; }
.sm-aro {
  position: absolute; inset: -12px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rojo), transparent 25%, color-mix(in srgb, var(--rojo) 70%, #ff9a3c) 50%, transparent 75%, var(--rojo));
  filter: blur(3px); opacity: .85; animation: sm-girar 14s linear infinite;
}
.sm-foto img {
  position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 6px solid var(--fondo); box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--rojo) 70%, transparent);
  animation: sm-flotar 6s ease-in-out infinite;
}
@keyframes sm-girar { to { transform: rotate(360deg); } }
@keyframes sm-flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* La presentación aparece subiendo un poco al cargar la página. */
.sm-presentacion { animation: sm-aparecer .8s ease-out both; }
@keyframes sm-aparecer { from { opacity: 0; translate: 0 16px; } }
.sm-presentacion h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 .4em; }
.sm-presentacion p { font-size: 1.12rem; }
.sm-cifras { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.texto-largo .sm-cifras li {
  margin: 0; padding: 14px 12px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 4px;
}
.sm-cifras strong { font-size: 1.9rem; line-height: 1; color: var(--acento); }
.sm-cifras span { font-size: .85rem; color: var(--suave); line-height: 1.3; }

/* Mis idiomas: un grupo por fila; la intensidad del color baja con el nivel. */
.sm-idiomas { margin-bottom: 56px; }
.sm-idiomas h2 { font-size: 1.6rem; margin: 0 0 18px; }
.sm-idiomas > ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sm-grupo {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 24px; align-items: center;
  padding: 16px 18px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde);
}
.sm-grupo-cabeza h3 { margin: 0; font-size: 1.05rem; }
.sm-grupo-cabeza p { margin: 2px 0 0; font-size: .85rem; color: var(--suave); line-height: 1.35; }
.sm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chips li { padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid var(--borde); background: var(--fondo); }
/* Banderas que no existen como emoji (Cataluña, Galicia…): imagen pequeña, del tamaño de un emoji. */
.sm-bandera { display: inline-block; width: 1.25em; height: auto; margin-right: .35em; vertical-align: -.12em; border-radius: 2px; }
.sm-grupo-1 { border-color: color-mix(in srgb, var(--rojo) 55%, var(--borde)); box-shadow: 0 0 24px -12px var(--rojo); }
.sm-grupo-1 .sm-chips li { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.sm-grupo-2 .sm-chips li { background: color-mix(in srgb, var(--rojo) 28%, var(--fondo)); border-color: color-mix(in srgb, var(--rojo) 55%, var(--borde)); }
.sm-grupo-3 .sm-chips li { background: color-mix(in srgb, var(--rojo) 12%, var(--fondo)); }
.sm-grupo-4 .sm-chips li { background: var(--fondo); }
.sm-grupo-5 .sm-chips li { background: transparent; border-style: dashed; color: var(--suave); font-weight: 500; }

/* La cita del final, con los botones. */
.sm-cierre { max-width: 820px; text-align: center; margin-bottom: 56px; }
.sm-cierre blockquote {
  position: relative; margin: 0 0 20px; padding: 28px 28px 24px; border-radius: 18px; background: var(--tarjeta);
  border: 1px solid var(--borde); font-size: 1.15rem; line-height: 1.6;
}
.sm-cierre blockquote::before {
  content: "“"; position: absolute; left: 50%; top: -26px; translate: -50% 0; font-size: 4.5rem; line-height: 1;
  color: var(--rojo); font-family: Georgia, serif;
}
.sm-cierre .botones { justify-content: center; }

/* Fotos del final: de lado a lado (2 o 3) o una sola centrada. */
.sm-fotos { display: grid; gap: 16px; grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); margin-bottom: 24px; }
.sm-fotos-1 { --columnas: 1; max-width: 380px; }
.sm-fotos-2 { --columnas: 2; max-width: 760px; }
.sm-fotos figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--tarjeta); border: 1px solid var(--borde); aspect-ratio: 4 / 5; }
.sm-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .5s ease; }
.sm-fotos figure:hover img { scale: 1.04; }

@media (max-width: 760px) {
  .sm-portada { grid-template-columns: minmax(0, 1fr); gap: 24px; text-align: center; }
  .sm-foto { width: min(70%, 280px); }
  .sm-cifras { gap: 8px; }
  .texto-largo .sm-cifras li { padding: 10px 6px; }
  .sm-cifras strong { font-size: 1.5rem; }
  .sm-cifras span { font-size: .75rem; }
  .sm-grupo { grid-template-columns: minmax(0, 1fr); }
  .sm-fotos { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-aro, .sm-foto img, .sm-presentacion { animation: none; }
}

/* Vídeos: pestañas de canal y tarjetas */
.pestanas { display: flex; gap: 4px; }
.pestana {
  background: transparent; color: var(--texto); font-weight: 400; border-radius: var(--radio) var(--radio) 0 0;
  padding: 8px 16px; font-size: 1.05rem;
}
.pestana[aria-selected="true"] { background: #36507c; color: #eef2f8; }
.panel-pestana { background: #26395c; padding: 16px; border-radius: 0 var(--radio) var(--radio) var(--radio); min-height: 200px; }
.tarjetas-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tarjeta-video {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  background: var(--tarjeta); color: var(--texto); text-decoration: none;
  border: 1px solid var(--borde); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); padding-bottom: 10px;
}
.tarjeta-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--borde); }
.titulo-video { padding: 0 10px; font-size: 1.05rem; line-height: 1.3; }
.fecha-video { padding: 0 10px; font-size: .78rem; color: var(--suave); margin-top: auto; }
.tarjeta-video:hover .titulo-video { color: var(--acento); }

/* Clases: precio y lista de espera */
.lista-espera { margin-bottom: 24px; }
.lista-espera h2 { margin-top: 0; }
.lista-espera .formulario { max-width: none; }
.casilla-larga { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; }
.casilla-larga input { margin-top: 5px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cursos */
.tarjetas-cursos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 340px)); }
.tarjeta-curso { border: 1px solid var(--borde); background: var(--tarjeta); }
.imagen-curso { position: relative; }
.imagen-curso img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.insignia-proximamente {
  position: absolute; top: 10px; left: 10px; background: var(--rojo); color: #fff;
  font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radio);
}
.cuerpo-curso { padding: 12px 16px 16px; }
.cuerpo-curso h2 { font-size: 1.15rem; margin: 0 0 4px; }
.etiqueta-gratis { color: var(--acento); font-weight: 600; margin: 0 0 8px; }
.cuerpo-curso p:last-child { margin-bottom: 0; color: var(--suave); }

/* ---- Textos legales ---- */
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 12px 0 20px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--borde); }
.legal code { font-size: .9em; background: color-mix(in srgb, var(--texto) 7%, transparent); padding: 1px 4px; border-radius: 3px; }
.pie-legal a { color: #aaa; }
.enlace-privacidad { font-size: .875rem; margin: 0; }

/* ---- Vídeo de YouTube: portada antes de cargarlo ---- */
.portada-video {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: #000; cursor: pointer; display: block;
}
.portada-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.portada-video:hover img { opacity: 1; }
.icono-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 50px; border-radius: 12px; background: #ff0000; color: #fff;
  display: grid; place-items: center; font-size: 1.4rem;
}
.aviso-youtube { font-size: .8rem; color: var(--suave); margin: 6px 0 0; }

/* ---- Panel de administración: menú, cifras, tablas y fichas ---- */
.menu-admin { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--borde); margin: 0 0 24px; } /* si no cabe, pasa a otra línea (sin barra de scroll) */
.menu-admin a { white-space: nowrap; }
.menu-admin a {
  padding: 8px 16px; text-decoration: none; color: var(--texto); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.menu-admin a[aria-current="page"] { border-bottom-color: var(--rojo); color: var(--rojo); }
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 20px; }
.cifra { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px; }
.cifra .numero { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.cifra .etiqueta { color: var(--suave); font-size: .875rem; }
.buscador { display: flex; gap: 8px; margin-bottom: 12px; max-width: 520px; }
.buscador input { flex: 1; }
.tabla-scroll { overflow-x: auto; }
.tabla td.suave, .tabla .fecha { white-space: nowrap; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.etiqueta-estado {
  display: inline-block; font-size: .75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.etiqueta-estado.si { color: var(--ok); }
.etiqueta-estado.no { color: var(--suave); }
.etiqueta-estado.admin { color: var(--rojo); }
.paginacion { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ficha { display: grid; gap: 4px 16px; grid-template-columns: max-content minmax(0, 1fr); margin: 0 0 8px; }
.ficha dt { color: var(--suave); }
/* Los textos largos (emails, fechas) se parten en vez de salirse por la derecha. */
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lista-periodos { margin: 0 0 8px; padding-left: 1.4em; }
.lista-periodos li { margin: 4px 0; }
/* En el móvil, cada dato debajo de su nombre, a todo el ancho. */
@media (max-width: 560px) {
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ficha dt { margin-top: 10px; font-size: .9rem; }
  .ficha dt:first-child { margin-top: 0; }
}
.acciones-usuario { display: flex; flex-direction: column; gap: 16px; }
.acciones-usuario .tarjeta h2 { margin-top: 0; font-size: 1.1rem; }
.fila-acceso { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Mi cuenta: perfil */
/* La foto se alinea arriba, a la altura del nombre y el @ (Mi cuenta y perfil público). */
.perfil { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.nombre-y-distintivo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.nombre-y-distintivo .perfil-nombre { margin: 0; }
.linea-usuario { margin: 0 0 10px; }
.avatar {
  position: relative; flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: var(--rojo); color: #fff; display: grid; place-items: center; font-size: 2.2rem; font-weight: 700;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perfil-nombre { font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; }
.mini-boton { font-size: .85rem; padding: 6px 12px; cursor: pointer; }
.fila-nombre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fila-nombre input { flex: 1; min-width: 180px; }
.ancho-fila { flex-basis: 100%; margin: 0; }
/* Campo de @usuario con la @ delante. */
.campo-arroba { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 180px; }
.campo-arroba > span { font-weight: 700; color: var(--suave); }
.campo-arroba input { flex: 1; min-width: 0; }
.autor-usuario { font-size: .85rem; }

/* ---- Comentarios ---- */
/* Ejercicios de la página del episodio (public/js/ejercicios.js). */
.ejercicios { margin-top: 40px; max-width: 820px; }
.lista-ejercicios { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.ejercicio {
  background: var(--tarjeta); border: 1px solid var(--borde); border-left: 4px solid var(--borde);
  border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.ejercicio.acierto { border-left-color: var(--ok); }
.ejercicio.fallo { border-left-color: var(--error); }
.ejercicio p { margin: 0; }
.tipo-ej { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.frase-ej { font-size: 1.1rem; line-height: 1.7; }
.hueco-ej {
  display: inline-block; width: auto; margin: 0 4px; padding: 2px 8px; font: inherit;
  border: none; border-bottom: 2px solid var(--acento); border-radius: 4px 4px 0 0; background: rgb(255 255 255 / .06);
}
.opciones-ej { display: flex; flex-wrap: wrap; gap: 8px; }
button.opcion-ej {
  background: transparent; color: var(--texto); border: 1px solid var(--borde); font-weight: 500; text-align: left;
}
button.opcion-ej:not(:disabled):hover { border-color: var(--acento); }
button.opcion-ej:disabled { opacity: 1; cursor: default; }
button.opcion-ej.elegida { border-color: var(--error); color: var(--error); }
button.opcion-ej.buena { border-color: var(--ok); color: var(--ok); }
.dictado-ej { width: 100%; font-size: 1.05rem; }
.controles-dictado { display: flex; align-items: center; gap: 12px; width: 100%; flex-wrap: wrap; }
.controles-dictado button { flex: 0 0 auto; min-width: 8.5em; }
.barra-dictado { flex: 1 1 160px; min-width: 120px; accent-color: var(--acento); padding: 0; cursor: pointer; }
.reloj-dictado { font-variant-numeric: tabular-nums; font-size: .9rem; }
.resultado-ej { font-weight: 700; }
.explicacion-ej { font-size: .95rem; }
.palabra-bien { color: var(--ok); }
.palabra-mal { color: var(--error); text-decoration: underline wavy; text-underline-offset: 3px; }
.nota-ejercicios { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.comentarios { margin-top: 40px; max-width: 820px; }
/* Página «No encontrada» (404). */
.no-encontrada { text-align: center; max-width: 560px; margin: 40px auto 60px; }
.no-encontrada-codigo {
  margin: 0; font-size: clamp(5rem, 22vw, 8.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: var(--rojo); text-shadow: 0 0 40px color-mix(in srgb, var(--rojo) 45%, transparent);
}
.no-encontrada h1 { margin: 12px 0 10px; }
.no-encontrada-botones { justify-content: center; margin-top: 24px; }
/* Mi cuenta → sección de Patreon (desde el aviso de un episodio): que no quede debajo de la cabecera fija. */
#seccion-patreon { scroll-margin-top: 90px; }
.comentarios h2 { font-size: 1.35rem; }
.form-comentario { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-comentario .aviso { min-height: 0; }
.lista-comentarios { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
/* Comentario: [foto | texto] y debajo, en la columna del texto, sus respuestas. */
.comentario {
  --av: 44px; --hueco: 12px;
  display: grid; grid-template-columns: var(--av) minmax(0, 1fr); column-gap: var(--hueco); row-gap: 0;
  scroll-margin-top: 90px;
}
.comentario.respuesta { --av: 32px; --hueco: 10px; }
.col-avatar { position: relative; grid-column: 1; grid-row: 1; }
.comentario-cuerpo { grid-column: 2; grid-row: 1; transition: background-color .6s; }
/* Cada comentario (y cada respuesta) va dentro de una caja un poco más clara que el fondo. */
.lista-comentarios .comentario-cuerpo {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px 8px;
}
/* Comentario eliminado: la caja casi no se nota, solo un borde de puntos. */
.lista-comentarios .comentario.eliminado > .comentario-cuerpo { background: transparent; border-style: dashed; }
/* Ventana para elegir cómo borrar un comentario (administradores). */
.dialogo { border: 1px solid var(--borde); border-radius: 14px; padding: 20px; max-width: 460px; width: calc(100% - 32px);
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--fondo); color: var(--texto); }
.dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.dialogo-ancho { max-width: 680px; }
.dialogo-ancho .pestanas { margin-bottom: 12px; }
.panel-tarjetas { display: flex; flex-direction: column; gap: 8px; }
.panel-tarjetas textarea { width: 100%; font: inherit; }
.panel-tarjetas p { margin: 0; }
#estado-tarjetas { white-space: pre-line; }
#estado-tarjetas:empty { display: none; }
#estado-tarjetas.error { color: var(--error); }
.dialogo form { display: flex; flex-direction: column; gap: 10px; }
.dialogo h2 { font-size: 1.15rem; margin: 0 0 4px; }
.opcion-borrado { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; }
.opcion-borrado span { font-weight: 400; font-size: .9rem; }
/* "Oculto para los demás" (solo lo ve un administrador). */
.etiqueta-oculto { display: inline-block; font-size: .72rem; font-weight: 700; font-style: normal; padding: 1px 8px;
  border-radius: 999px; background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.avatar-mini.avatar-eliminado { background: var(--borde); }
.comentario-eliminado { font-style: italic; margin: 6px 0; }
.nota-deshacer { font-size: .85rem; font-style: normal; }
/* Comentario fijado (el primero de la lista). */
.etiqueta-fijado { font-size: .8rem; font-weight: 700; color: var(--suave); margin: 0 0 2px; }
.franja-eliminado .peligro-texto { color: var(--error); font-weight: 700; }
/* Selección de varios comentarios (administradores). */
.seleccionar-comentario { width: 18px; height: 18px; margin: 0 4px 0 0; cursor: pointer; accent-color: var(--acento); }
.autor-cabecera > .seleccionar-comentario { margin: 0 0 0 auto; }
.barra-seleccion { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; max-width: calc(100% - 32px);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.barra-seleccion span { font-weight: 700; }
/* Comentario eliminado visto por un administrador: completo pero atenuado, con una franja. */
.comentario.eliminado-admin > .comentario-cuerpo > :not(.franja-eliminado):not(.respuestas) { opacity: .6; }
.comentario.eliminado-admin > .col-avatar { opacity: .6; }
.franja-eliminado { font-size: .85rem; margin: 0 0 4px; padding: 4px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--error) 8%, transparent); }
.comentario.resaltado > .comentario-cuerpo { background: color-mix(in srgb, #f5b400 22%, var(--tarjeta)); }
.avatar-mini {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--rojo); color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem;
}
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.autor-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.autor-nombre { font-weight: 700; color: var(--texto); text-decoration: none; }
.autor-nombre:hover { text-decoration: underline; }
.distintivo {
  font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.distintivo.admin { color: var(--rojo); }
.distintivo.member { color: var(--miembro); }
.distintivo.user { color: var(--suave); }
/* "hace 15 minutos" en su propia línea, debajo del nombre. */
.autor-cabecera .hace { flex-basis: 100%; }
/* Respuestas anidadas con líneas, como en YouTube. La línea baja desde la foto del
   comentario y cada respuesta se une a ella con un "codo" redondeado. */
.respuestas {
  grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0;
  /* Distancia (hacia la izquierda) desde el borde de la lista hasta la línea:
     se calcula aquí con la foto del comentario padre y la heredan sus respuestas. */
  --linea-x: calc(-1 * (var(--hueco) + var(--av) / 2) - 1px);
}
.respuestas:empty { display: none; }
.respuestas > li { position: relative; padding-top: 12px; }
.respuestas > li::before {
  content: ""; position: absolute; top: 0; left: var(--linea-x);
  width: calc(-1 * var(--linea-x) - 4px); height: calc(12px + var(--av) / 2);
  border-left: 2px solid var(--linea); border-bottom: 2px solid var(--linea); border-bottom-left-radius: 12px;
}
.respuestas > li:not(:last-child)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--linea-x); border-left: 2px solid var(--linea);
}
.comentario:has(> .respuestas > li:not([hidden])) > .col-avatar::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: calc(var(--av) + 6px); bottom: 0; border-left: 2px solid var(--linea);
}
.col-avatar .avatar-mini { width: var(--av); height: var(--av); }
.comentario.respuesta .avatar-mini { font-size: .85rem; }
.mas-respuestas { --av: 24px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; min-height: 36px; }
.ver-respuestas { font-weight: 700; text-decoration: none; }
.ver-respuestas:hover { text-decoration: underline; }
.mencion { color: var(--mencion); font-weight: 600; text-decoration: none; }
.mencion:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .comentario { --av: 40px; --hueco: 10px; }
  .comentario.respuesta { --av: 28px; --hueco: 8px; }
}
.comentario-cuerpo .form-comentario { margin: 10px 0 0; }
.respuesta-a { font-size: .85rem; margin: 2px 0 0; }
.comentario-texto { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario-pie { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--acento); font-weight: 500; font-size: inherit; text-decoration: underline; cursor: pointer; }
.comentario-acciones { display: inline-flex; gap: 10px; }
.editar-comentario textarea { width: 100%; }
/* Caja de escribir un comentario: 5 líneas al abrirse (rows en comentarios.js); se puede
   cambiar de tamaño entre 2 y 12 líneas (líneas de 1.6 + relleno de 8 px arriba y abajo + borde). */
.form-comentario textarea, .editar-comentario textarea { min-height: calc(2 * 1.6em + 18px); max-height: calc(12 * 1.6em + 18px); }
.perfil.perfil-publico { margin-bottom: 24px; }
.perfil-publico h1.perfil-nombre { font-size: 1.8rem; margin: 0; }
/* Nombre y @usuario, uno encima del otro; en tu propio perfil, el botón «Editar perfil» a su
   derecha, centrado a media altura entre los dos. */
.perfil-cabeza { display: grid; grid-template-columns: minmax(0, max-content) auto; column-gap: 14px; align-items: center; margin: 0 0 6px; }
.perfil-cabeza .perfil-nombre, .perfil-cabeza p { grid-column: 1; overflow-wrap: break-word; }
.perfil-publico .perfil-cabeza p { margin: 4px 0 0; }
.perfil-cabeza .boton-editar-perfil { grid-column: 2; grid-row: 1 / span 2; justify-self: start; }
/* En el móvil, el botón en su propia línea debajo del @usuario: así el nombre tiene todo el ancho
   (un nombre largo no se parte en mitad de las palabras). */
@media (max-width: 600px) {
  .perfil-cabeza { grid-template-columns: minmax(0, 1fr); }
  .perfil-cabeza .boton-editar-perfil { grid-column: 1; grid-row: auto; margin-top: 8px; }
}
.boton-editar-perfil { padding: 5px 12px; font-size: .85rem; white-space: nowrap; }
.boton-editar-perfil[hidden] { display: none; }
.perfil-publico p { margin: 0 0 6px; }
.perfil-lineas p { margin: 0 0 2px; }
/* Perfil: "Usuario desde…" en verde y "Ha sido / Fue miembro de pago…" del color de la insignia. */
.perfil-lineas .linea-alta { color: var(--ok); }
.perfil-lineas .linea-miembro { color: var(--miembro); }
/* Descripción del perfil público, debajo de la foto y los datos. */
.perfil-bio { margin: 0 0 24px; padding: 12px 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  white-space: pre-line; overflow-wrap: anywhere; }
.campo-descripcion { min-height: calc(2 * 1.6em + 18px); max-height: calc(12 * 1.6em + 18px); }
.contador-descripcion { text-align: right; margin: 4px 0 0; }
.comentario-enlace { display: block; color: var(--texto); text-decoration: none; }
.comentario-enlace:hover { text-decoration: underline; }
.comentario-perfil { border-bottom: 1px solid var(--borde); padding-bottom: 14px; }
/* Página de notificaciones. */
.lista-notificaciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notificacion a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.notificacion a:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.notificacion.sin-leer a { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, transparent); }
.notificacion-frase, .notificacion-texto { margin: 0 0 4px; }
.notificacion-texto { overflow-wrap: anywhere; }
/* Panel desplegable de la campana: se ven 3 notificaciones y el resto con scroll. */
.panel-notificaciones {
  position: fixed; z-index: 40; width: 380px; max-width: calc(100% - 16px); padding: 12px;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.panel-notificaciones-titulo { font-weight: 700; margin: 0 0 8px; }
.panel-notificaciones .lista-notificaciones { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.panel-notificaciones .notificacion a { padding: 10px; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.panel-notificaciones .avatar-mini { width: 36px; height: 36px; }
.panel-notificaciones .notificacion-frase { font-size: .9rem; }
.panel-notificaciones .notificacion-texto { font-size: .85rem; }
.panel-notificaciones-todas { display: block; text-align: center; margin-top: 8px; font-weight: 600; }
@media (max-width: 600px) { .panel-notificaciones { width: auto; } }
.comentario-perfil > .hace { display: block; margin-top: 2px; }
.lista-moderacion { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.moderacion.denunciado { border-color: var(--error); }
.moderacion.eliminado { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.aviso-eliminado { font-size: .9rem; font-weight: 600; margin: 4px 0 8px; }
.filtros-moderacion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 12px 0; }
.filtros-moderacion label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.filtros-moderacion input[type="search"] { min-width: 220px; }
.moderacion .botones { margin: 8px 0 0; }
.denuncias { background: color-mix(in srgb, var(--error) 8%, transparent); border-radius: 8px; padding: 8px 12px; font-size: .9rem; }
.denuncias ul { margin: 4px 0 0; padding-left: 1.2em; }

/* ---------- Panel de estadísticas (/admin/estadisticas) ---------- */
.controles-estadisticas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 12px; }
.estadisticas .pestanas { flex-wrap: wrap; }
@media (max-width: 600px) {
  .estadisticas .pestana { padding: 6px 10px; font-size: .95rem; }
  .estadisticas .tabla th, .estadisticas .tabla td { padding: 6px 4px; }
}
.estadisticas.cargando #bloque-visitas, .estadisticas.cargando .cifras { opacity: .55; transition: opacity .2s; }
.filtros-activos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-filtro { border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .875rem; cursor: pointer; }
.chip-filtro:hover { border-color: var(--acento); }
.cifra .detalle { font-size: .8rem; }
.grafica-tarjeta { margin-bottom: 8px; }
.cabecera-grafica { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; color: var(--suave); }
.leyenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.grafica svg { width: 100%; height: auto; display: block; color: var(--texto); overflow: visible; }
.grafica text { font-size: 11px; fill: var(--suave); }
.grafica .rejilla { stroke: var(--borde); stroke-width: 1; }
.grafica .area { fill: color-mix(in srgb, var(--texto) 7%, transparent); }
.grafica .zona { fill: transparent; }
.grafica .zona:hover { fill: color-mix(in srgb, var(--texto) 6%, transparent); }
.rejilla-tablas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 16px 0 28px; }
.tabla-estadistica.ancha { grid-column: 1 / -1; }
.tabla-estadistica h3 { margin: 0 0 8px; font-size: 1rem; }
.tabla-estadistica .tabla-scroll { max-height: 420px; overflow-y: auto; }
.tabla-estadistica .tabla th.num, .tabla-estadistica .tabla td.num { text-align: right; white-space: nowrap; width: 1%; }
.tabla-estadistica td:first-child { position: relative; }
.tabla-estadistica .nombre-fila { position: relative; z-index: 1; }
.tabla-estadistica .ruta-fila { position: relative; z-index: 1; display: block; word-break: break-all; }
.tabla-estadistica .barra-fila { position: absolute; left: 0; top: 4px; bottom: 4px; background: color-mix(in srgb, var(--azul) 12%, transparent); border-radius: 3px; z-index: 0; }
.tabla-estadistica tr.pulsable { cursor: pointer; }

/* Botón flotante de pausa / reproducir en el episodio (cuando el vídeo no se ve). */
.boton-flotante {
  /* A la derecha y a un cuarto de la altura de la pantalla (desde abajo): cómodo para el pulgar. */
  position: fixed; right: 16px; bottom: 25vh; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; padding: 0;
  background: var(--rojo); color: #fff; font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.boton-flotante[hidden] { display: none; }

/* ---------- Portada: «Cómo funciona» con demostración animada ---------- */
.como-funciona {
  /* minmax(0, 1fr): la columna nunca es más ancha que el recuadro (un título largo no la ensancha). */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; margin: 32px 0 40px; padding: 32px;
  border-radius: 20px; border: 1px solid var(--borde);
  background:
    radial-gradient(60% 80% at 85% 20%, color-mix(in srgb, var(--rojo) 14%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, color-mix(in srgb, var(--rojo) 8%, transparent), transparent 70%),
    var(--tarjeta);
}
@media (min-width: 900px) { .como-funciona { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding: 40px; } }
.cf-etiqueta { display: inline-block; margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.cf-etiqueta::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 8px var(--rojo); }
.como-funciona h2 { margin: 0 0 18px; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; }
.cf-pasos { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cf-pasos li {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent; transition: background .4s, border-color .4s, transform .4s;
}
.cf-pasos li { cursor: pointer; }
.cf-pasos li:hover { border-color: color-mix(in srgb, var(--rojo) 25%, transparent); }
.cf-pasos li:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.cf-pasos li.actual { background: color-mix(in srgb, var(--rojo) 8%, var(--tarjeta)); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); transform: translateX(4px); }
.cf-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; background: var(--negro); color: #fff; transition: background .4s, box-shadow .4s;
}
.cf-pasos li.actual .cf-num { background: var(--rojo); box-shadow: 0 0 12px color-mix(in srgb, var(--rojo) 60%, transparent); }

/* La "ventana" de la demostración: oscura como la cabecera, con brillo rojo. */
.cf-demo { position: relative; }
.cf-ventana {
  position: relative; max-width: 560px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #141e33, #0b1220); color: #f2f2f2;
  border: 1px solid color-mix(in srgb, var(--rojo) 45%, #333);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 18px 50px -12px color-mix(in srgb, var(--rojo) 55%, transparent), 0 0 80px -30px var(--rojo);
}
.cf-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #2a2a2a; font-size: .8rem; color: #a9a9a9; }
.cf-barra i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.cf-barra i:first-child { background: var(--rojo); }
.cf-barra span { margin-left: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pulsar la ventana pausa la demostración: entonces se ve ❚❚ arriba a la derecha. */
.cf-ventana { cursor: pointer; }
.cf-barra .cf-pausa { margin-left: auto; flex: 0 0 auto; color: #fff; font-size: .8rem; letter-spacing: -1px; opacity: 0; transition: opacity .2s; }
.cf-ventana.pausada .cf-pausa { opacity: 1; }
/* Y centrado arriba, debajo de la barra: «Animación pausada». */
.cf-aviso-pausa {
  position: absolute; top: 48px; left: 50%; translate: -50% 0; z-index: 4; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff;
  font-size: .8rem; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .2s;
}
.cf-ventana.pausada .cf-aviso-pausa { opacity: 1; }
.cf-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.cf-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-controles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.cf-progreso { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.cf-progreso span { display: block; height: 100%; width: 0; background: var(--rojo); transition: width 2.3s linear; }
.cf-tiempo { font-size: .75rem; font-variant-numeric: tabular-nums; color: #ddd; }

/* Frases: se ven unas 3; la activa resaltada y con su traducción. */
.cf-subs { height: 190px; overflow: hidden; padding: 6px 10px; position: relative;
  mask-image: linear-gradient(transparent, #000 8%, #000 85%, transparent); }
.cf-subs ol { list-style: none; margin: 0; padding: 0; transition: transform .6s ease; }
/* Con las frases del vídeo de la demostración: todas a la vista, sin altura fija ni desvanecido. */
.cf-subs.todas { height: auto; mask-image: none; }
.cf-subs li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 10px; border-radius: 10px;
  border-left: 3px solid transparent; transition: background .4s, border-color .4s, opacity .4s; opacity: .45;
}
.cf-subs li.activa { background: color-mix(in srgb, var(--rojo) 18%, transparent); border-left-color: var(--rojo); opacity: 1; }
.cf-t { grid-row: span 2; font-size: .72rem; color: #a9a9a9; font-variant-numeric: tabular-nums; padding-top: 3px; }
.cf-es { font-size: .98rem; line-height: 1.35; }
.cf-en { font-size: .82rem; color: #b5b5b5; line-height: 1.3; margin-top: 2px; }

/* Dos "pantallas" en el mismo sitio: vídeo + frases (pasos 1 y 2) o solo las tarjetas (paso 3). */
.cf-pantallas { position: relative; }
.cf-vista { transition: opacity .5s ease, transform .5s ease; }
.cf-vista-vocab { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 14px 0; opacity: 0; transform: translateY(12px); pointer-events: none; }
.cf-ventana.modo-vocab .cf-vista-video { opacity: 0; transform: translateY(-12px); }
.cf-ventana.modo-vocab .cf-vista-vocab { opacity: 1; transform: none; }
.cf-vista-ejercicios { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 14px 0; opacity: 0; transform: translateY(12px); pointer-events: none; }
.cf-ventana.modo-ejercicios .cf-vista-video { opacity: 0; transform: translateY(-12px); }
.cf-ventana.modo-ejercicios .cf-vista-ejercicios { opacity: 1; transform: none; }
/* Muestra de ejercicios (como en la página del episodio, en pequeño). */
.cf-caja-ejercicios { flex: 1; min-height: 0; overflow: hidden; }
.cf-lista-ejercicios { display: flex; flex-direction: column; gap: 10px; transition: transform .6s ease; }
.cf-ejercicio {
  border: 1px solid #333; border-left: 4px solid #333; border-radius: 12px; padding: 10px 14px; background: #1b1b1b;
  transition: border-color .4s, opacity .4s; opacity: .55;
}
.cf-ejercicio.activa { opacity: 1; border-color: #555; }
.cf-ejercicio.acierto { opacity: 1; border-color: #333; border-left-color: var(--ok); }
.cf-ejercicio p { margin: 0 0 8px; }
.cf-tipo-ej { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a9a9a9; }
.cf-frase-ej { font-size: .98rem; line-height: 1.45; }
.cf-hueco { display: inline-block; min-width: 4.5em; border-bottom: 2px solid var(--rojo); text-align: center; padding: 0 4px; }
.cf-hueco.lleno { color: var(--ok); border-bottom-color: var(--ok); }
.cf-opciones-ej { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-opcion-ej { font-size: .82rem; padding: 4px 10px; border: 1px solid #444; border-radius: 8px; transition: border-color .3s, color .3s; }
.cf-opcion-ej.buena { border-color: var(--ok); color: var(--ok); }
.cf-correcto { font-size: .85rem; font-weight: 700; color: var(--ok); margin: 8px 0 0 !important; opacity: 0; transition: opacity .3s; }
.cf-ejercicio.acierto .cf-correcto { opacity: 1; }
.cf-vocab { margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff6b62; }
.cf-lista-tarjetas { flex: 1; min-height: 0; overflow: hidden; mask-image: linear-gradient(#000 85%, transparent); }
.cf-lista-tarjetas > div { transition: transform .7s ease; }
/* Cada tarjeta, como en la página del episodio: todo a la vista. */
.cf-tarjeta-vocab {
  border: 1px solid #333; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #1b1b1b;
  transition: border-color .4s, background .4s, opacity .4s; opacity: .55;
}
.cf-tarjeta-vocab.activa { border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 14%, #1b1b1b); opacity: 1; }
.cf-tarjeta-vocab p { margin: 0 0 5px; }
.cf-termino-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 1.05rem; }
.cf-flecha { color: #c8c8c8; }
.cf-momento { margin-left: auto; font-size: .8rem; color: #ff6b62; }
.cf-definicion { font-size: .9rem; color: #e6e6e6; }
.cf-ejemplo { font-size: .9rem; font-style: italic; }
.cf-ejemplo::before { content: "🇪🇸 "; font-style: normal; }
.cf-ejemplo-en { font-size: .82rem; color: #a9a9a9; }
.cf-ejemplo-en::before { content: "🇬🇧 "; }

/* El "dedo" que pulsa. */
.cf-dedo {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, .35); border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  opacity: 0; transition: left .7s ease, top .7s ease, opacity .3s, scale .2s; pointer-events: none; z-index: 3;
}
.cf-dedo.visible { opacity: 1; }
.cf-dedo.pulsa { scale: .75; background: color-mix(in srgb, var(--rojo) 60%, transparent); }
@media (max-width: 600px) {
  .como-funciona { padding: 20px 16px; margin-left: -4px; margin-right: -4px; }
  .cf-pasos li.actual { transform: none; } /* sin desplazarse: no hay sitio a la derecha */
  .cf-subs { height: 170px; }
}
.estadisticas .titulo-grupo { margin: 18px 0 8px; font-size: 1rem; color: var(--suave); }

/* ---------- Idiomas del usuario (perfil público y Mi cuenta), como en italki ---------- */
.idiomas-perfil { margin: 4px 0 10px; }
.fila-idiomas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 6px; }
.fila-idiomas .idioma { display: inline-flex; align-items: center; gap: 6px; line-height: 1.6; white-space: nowrap; }
.etiqueta-idiomas { font-size: .9rem; }
.fila-idiomas .nativo {
  font-size: .78rem; font-weight: 700; padding: 1px 9px; border-radius: 999px;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.barras-nivel { display: inline-flex; align-items: flex-end; gap: 2px; cursor: help; }
.barras-nivel i { display: block; width: 4px; height: 14px; border-radius: 1px; background: var(--borde); }
.barras-nivel i.llena { background: var(--ok); }
.fila-idiomas.aprende .barras-nivel i.llena { background: var(--azul); }
.fila-idiomas.pausa .barras-nivel i.llena { background: var(--suave); }
/* Editor de Mi cuenta: una fila por idioma (idioma, tipo, nivel, quitar). */
.lista-idiomas { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.fila-idioma { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Desplegable con el diseño de la web (desplegable() en public/js/comun.js): parece un <select>,
   pero con los colores de la web; el <select> de verdad queda escondido dentro. */
.selector { position: relative; min-width: 0; font-weight: 400; }
.selector[hidden] { display: none; }
.selector-nativo {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0;
}
.selector-boton {
  width: 100%; display: block; text-align: left; font: inherit; font-weight: 400; padding: 8px 30px 8px 10px;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--tarjeta); color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; min-height: calc(1.6em + 18px);
}
.selector-boton::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .75;
}
.selector-boton.sin-elegir { color: var(--suave); }
.selector-panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); min-width: 200px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); padding: 6px;
}
.selector-panel[hidden] { display: none; }
.selector-filtro {
  width: 100%; box-sizing: border-box; font: inherit; padding: 7px 10px; margin-bottom: 6px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--texto);
}
.selector-lista { position: relative; list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.selector-lista li { padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.selector-lista li[hidden] { display: none; }
.selector-lista li[aria-selected="true"] { font-weight: 700; }
.selector-lista li:hover, .selector-lista li.marcado { background: var(--fondo); }
.selector-lista li.marcado { outline: 1px solid var(--borde); }
.selector-lista .selector-vacio { color: var(--suave); cursor: default; }
.selector-lista .selector-vacio:hover { background: none; }
.fila-idioma .selector { flex: 1 1 150px; }
.fila-idioma .selector-tipo { flex-basis: 230px; }
/* La lista de niveles, solo tan ancha como sus textos (sin hueco a la derecha), para que en el
   móvil no sobresalga de la fila. */
.selector-nivel .selector-panel { right: auto; min-width: 100%; width: max-content; padding: 4px; font-size: .95rem; }
.selector-nivel .selector-lista li { padding: 7px 6px; }
#vista-idiomas:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.asa-idioma {
  flex: 0 0 auto; padding: 4px 8px; background: transparent; color: var(--suave); border: 1px solid transparent;
  font-size: 1.1rem; line-height: 1; cursor: grab; touch-action: none; /* el dedo arrastra la fila, no la página */
}
.asa-idioma:hover, .asa-idioma:focus-visible { color: var(--texto); border-color: var(--borde); }
/* Arrastrar: las demás filas se deslizan; la arrastrada va "levantada" con sombra y sigue al dedo. */
.lista-idiomas { position: relative; }
.fila-idioma { position: relative; transition: transform .2s ease, box-shadow .2s ease; border-radius: 8px; }
.fila-idioma.arrastrando {
  z-index: 2; transition: box-shadow .2s ease; /* sin transición en transform: pegada al dedo */
  background: var(--tarjeta); box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px var(--borde);
}
.fila-idioma.arrastrando .asa-idioma { cursor: grabbing; color: var(--texto); }
.fila-idioma.encajando { z-index: 2; }
.paises-perfil { margin: 2px 0 6px; }
.rejilla-paises { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 10px 0; }
.rejilla-paises label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.idiomas-registro { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px 14px; margin: 4px 0; display: flex; flex-direction: column; gap: 8px; }
.idiomas-registro legend { font-weight: 700; padding: 0 6px; }
.idiomas-registro p { margin: 0; }
.idiomas-registro .lista-idiomas { margin: 0; }
.idiomas-registro #anadir-idioma { align-self: flex-start; }
/* En el registro (formulario estrecho), cada idioma en dos líneas: el idioma arriba y el tipo y el nivel debajo. */
.idiomas-registro .lista-idiomas { gap: 12px; }
.idiomas-registro .fila-idioma { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.idiomas-registro .fila-idioma .asa-idioma { grid-column: 1; grid-row: 1 / span 2; }
.idiomas-registro .fila-idioma .selector-idioma { grid-column: 2 / 4; grid-row: 1; }
.idiomas-registro .fila-idioma .selector-tipo { grid-column: 2; grid-row: 2; }
.idiomas-registro .fila-idioma .selector-nivel { grid-column: 3; grid-row: 2; }
.idiomas-registro .fila-idioma .selector-tipo:has(+ .selector[hidden]) { grid-column: 2 / 4; }
.idiomas-registro .fila-idioma > button:last-child { grid-column: 4; grid-row: 1; }
/* En Editar perfil, igual pero solo en el móvil: el tipo y el nivel, debajo del idioma y alineados con él. */
@media (max-width: 600px) {
  .fila-idioma { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
  .fila-idioma .asa-idioma { grid-column: 1; grid-row: 1 / span 2; }
  .fila-idioma .selector-idioma { grid-column: 2 / 4; grid-row: 1; }
  .fila-idioma .selector-tipo { grid-column: 2; grid-row: 2; }
  .fila-idioma .selector-nivel { grid-column: 3; grid-row: 2; }
  .fila-idioma .selector-tipo:has(+ .selector[hidden]) { grid-column: 2 / 4; }
  .fila-idioma > button:last-child { grid-column: 4; grid-row: 1; }
}

/* Panel de estadísticas: «Métricas de Cloudflare» (public/js/admin-cloudflare.js). */
.metricas-cf { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.mcf-metrica { padding: 14px 16px; }
.mcf-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.mcf-cabecera h4 { margin: 0; font-size: 1rem; }
.mcf-limite { font-size: .85rem; }
.mcf-columnas { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mcf-columna { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcf-titulo-columna { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.mcf-numero { font-size: 1.4rem; line-height: 1.2; }
.mcf-detalle { font-size: .8rem; }
.mcf-barra-fila { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mcf-barra { flex: 1; height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.mcf-barra span { display: block; height: 8px; border-radius: 999px; }
.mcf-pct { font-size: .8rem; color: var(--suave); min-width: 52px; text-align: right; }
.mcf-mini { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-top: 12px; }
.mcf-mini span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.mcf-nota { margin: 8px 0 0; }
/* Pestañas de las secciones del panel de estadísticas: más grandes y con una línea debajo,
   para distinguirlas de los botones de periodo y de tipo. */
.secciones-estadisticas { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--borde); flex-wrap: wrap; }
.secciones-estadisticas .pestana { font-size: 1.05rem; font-weight: 700; padding: 8px 16px; }
.secciones-estadisticas .pestana[aria-selected="true"] { background: var(--rojo); color: #fff; }
.claude-grafica { height: 80px; }
/* Números de los días debajo de una gráfica de barras (pestaña Claude). Con muchas barras
   en una pantalla estrecha solo se ve uno de cada dos, para que no se monten. */
.etiquetas-grafica { display: flex; gap: 2px; margin-top: 4px; }
.etiquetas-grafica span { flex: 1; min-width: 0; text-align: center; font-size: .72rem; color: var(--suave); white-space: nowrap; overflow: visible; }
.etiquetas-grafica span.hoy { color: var(--texto); font-weight: 700; }
.etiquetas-grafica .mes { font-size: inherit; }
@media (max-width: 900px) {
  .etiquetas-grafica.muchas > span:nth-child(even):not(.hoy) { visibility: hidden; }
  .etiquetas-grafica.muchas .mes { display: none; } /* en el móvil, sin el mes: no cabe */
}
.pestanas-pais { flex-wrap: wrap; margin: 4px 0 6px; }

/* Mi cuenta, Patreon sin conectar: paso 1 (conectar) y paso 2 (suscribirse), cada uno con su etiqueta a la izquierda. */
.pasos-patreon { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pasos-patreon li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.paso-patreon {
  flex: 0 0 auto; min-width: 64px; padding: 4px 10px; border-radius: 999px; text-align: center;
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--rojo) 40%, transparent);
}

/* Registro: aviso debajo del @usuario mientras se escribe. */
.aviso-usuario { margin: -4px 0 0; min-height: 0; font-weight: 600; }
.aviso-usuario:empty { display: none; }
.aviso-usuario.error { color: var(--error); }
.aviso-usuario.ok { color: var(--ok); }
.aviso-usuario.suave { color: var(--suave); font-weight: 500; }