/* ============================================================
   ciudadanía — estilos base (estructura v0.1)
   Principios: móvil primero, tipografía grande, contraste alto,
   botones grandes, español claro, carga rápida (sin frameworks).
   ============================================================ */

:root{
  --azul:#0b3d91;          /* azul institucional, contraste alto */
  --azul-oscuro:#072a66;
  --rojo:#b22234;          /* acento sobrio */
  --crema:#fdfbf7;
  --tinta:#14213d;
  --gris:#4a4a4a;
  --borde:#d8dce6;
  --verde:#146c2e;
  --radio:14px;
  --ancho-max:780px;
  --sombra:0 2px 10px rgba(11,61,145,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:19px;
  line-height:1.55;
  padding-bottom:76px; /* espacio para el anuncio ancla inferior */
}
img{max-width:100%}
a{color:var(--azul)}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}

/* ---------- Cabecera y navegación (máx. 2 toques a todo) ---------- */
.cabecera{
  background:var(--azul);
  color:#fff;
  position:sticky;top:0;z-index:40;
  box-shadow:var(--sombra);
}
.cabecera .barra{
  max-width:var(--ancho-max);
  margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
}
.marca{
  color:#fff;text-decoration:none;
  font-weight:800;font-size:1.15rem;letter-spacing:.2px;
  display:flex;align-items:center;gap:10px;
}
.marca .escudo{font-size:1.5rem;line-height:1}
.nav{
  max-width:var(--ancho-max);
  margin:0 auto;
  display:flex;gap:6px;flex-wrap:wrap;
  padding:0 12px 10px;
}
.nav a{
  color:#fff;text-decoration:none;
  background:rgba(255,255,255,.14);
  padding:10px 14px;border-radius:999px;
  font-size:1rem;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center;
}
.nav a[aria-current="page"]{background:#fff;color:var(--azul)}
.nav a:active{transform:scale(.98)}

/* ---------- Contenido ---------- */
.contenedor{max-width:var(--ancho-max);margin:0 auto;padding:20px 16px 8px}
h1{font-size:1.9rem;line-height:1.2;margin:.2em 0 .4em}
h2{font-size:1.35rem;line-height:1.25;margin:1.1em 0 .4em}
h3{font-size:1.12rem;margin:1em 0 .3em}
.destacado{font-size:1.12rem;color:var(--gris)}
.tarjeta{
  background:#fff;border:1px solid var(--borde);
  border-radius:var(--radio);padding:18px;
  box-shadow:var(--sombra);margin:16px 0;
}
.tarjeta-suave{background:#eef3fc;border-color:#c9d8f2}

/* ---------- Botones (grandes, para adultos) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:14px 22px;
  border-radius:12px;border:2px solid transparent;
  font-size:1.12rem;font-weight:700;text-decoration:none;
  cursor:pointer;text-align:center;width:100%;
}
.btn-principal{background:var(--azul);color:#fff}
.btn-principal:active{background:var(--azul-oscuro)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-suave{background:#fff;color:var(--azul);border-color:var(--azul)}
.btn-verde{background:var(--verde);color:#fff}
.btn-bloque{margin:8px 0}
.fila-botones{display:grid;gap:10px}
@media(min-width:560px){.fila-botones{grid-template-columns:1fr 1fr}.btn{width:auto}.btn-ancho{width:100%}}

/* ---------- Selector de fecha N-400 ---------- */
.campo label{display:block;font-weight:700;margin-bottom:6px}
.campo input[type="date"],.campo select{
  width:100%;min-height:56px;font-size:1.1rem;
  padding:10px 12px;border:2px solid var(--borde);border-radius:12px;
  background:#fff;color:var(--tinta);
}
.resultado-version{
  border-left:6px solid var(--verde);
  background:#eafaf0;padding:14px;border-radius:10px;margin-top:12px;
  font-size:1.08rem;
}
.resultado-version[hidden]{display:none}

/* ---------- Pregunta (práctica, simulacro, página individual) ---------- */
.pregunta-num{color:var(--gris);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.4px}
.pregunta-en{font-size:1.45rem;font-weight:700;line-height:1.35;margin:.3em 0}
.pregunta-es{font-size:1.1rem;color:var(--gris)}
.btn-audio{
  display:inline-flex;align-items:center;gap:8px;
  min-height:52px;padding:10px 18px;margin:6px 0 4px;
  background:var(--rojo);color:#fff;border:none;border-radius:999px;
  font-size:1.05rem;font-weight:700;cursor:pointer;
}
.btn-audio:active{filter:brightness(.9)}
.respuesta-oficial{
  background:#eafaf0;border:1px solid #bfe6cc;border-radius:10px;
  padding:14px;margin-top:12px;font-size:1.12rem;
}
/* Jerarquía de idioma en la respuesta (orden de Julian, 2026-11-04):
   la respuesta que la persona debe DECIR es la de inglés, grande y
   destacada; la traducción al español es apoyo, en menor tamaño. */
.respuesta-oficial .respuesta-en{font-size:1.28rem;font-weight:700;line-height:1.4}
.respuesta-oficial .respuesta-es{font-size:.98rem;color:var(--gris);margin-top:8px}
.explicacion{background:#fff8e6;border:1px solid #f0dfae;border-radius:10px;padding:14px;margin-top:12px}
.barra-progreso{height:12px;background:#e4e8f2;border-radius:999px;overflow:hidden;margin:10px 0}
.barra-progreso>div{height:100%;background:var(--azul);width:0;transition:width .3s}
.opciones{display:grid;gap:10px;margin-top:12px}
.resultado-final{text-align:center;padding:10px}
.resultado-final .grande{font-size:2rem;font-weight:800}
.pill-tema{
  display:inline-block;background:#eef3fc;border:1px solid #c9d8f2;color:var(--azul);
  border-radius:999px;padding:4px 12px;font-weight:700;font-size:.95rem;
}
.lista-enlaces{list-style:none;padding:0;margin:8px 0}
.lista-enlaces li{margin:6px 0}
.lista-enlaces a{
  display:block;background:#fff;border:1px solid var(--borde);border-radius:10px;
  padding:12px 14px;text-decoration:none;font-weight:600;min-height:48px;
}

/* ---------- Avisos ---------- */
.aviso-no-oficial{
  background:#fff3cd;border:2px solid #e6c959;color:#5c4a00;
  border-radius:12px;padding:14px 16px;font-weight:600;margin:16px 0;
}
/* Capa de honestidad (2026-11-04): sello de verificación en las
   páginas de pregunta y notas junto a los bloques de anuncio. */
.sello-verificacion{font-weight:800;color:var(--verde);margin:0 0 6px}
.nota-ads{font-size:.92rem;margin:6px 0 0}
.firma-carta{font-weight:700}
/* Carta de bienvenida recogida (visitas siguientes a la primera):
   una sola línea discreta y permanente dentro de su tarjeta; el
   cuerpo completo sigue en el HTML y se despliega con un toque. */
.carta-resumen{margin:0}
.carta-resumen-btn{
  width:100%;min-height:48px;padding:10px 6px;background:none;border:none;
  color:var(--azul);font:inherit;font-weight:700;text-align:left;cursor:pointer;
  border-radius:10px;
}
.carta-resumen-btn:active{background:#e6edf9}
#carta-cuerpo[hidden]{display:none}
.aviso-ejemplo{
  background:#fdecea;border:2px solid var(--rojo);color:#6d1220;
  border-radius:12px;padding:12px 16px;font-weight:700;margin:16px 0;
}

/* ---------- ESPACIOS DE ANUNCIOS ----------
   Solo huecos por ahora: sin cuentas reales.
   Cada hueco lleva data-ad-slot con su nombre.
   NUNCA colocar anuncios dentro de .pantalla-pregunta del simulacro. */
.ad-slot{
  border:2px dashed #b9c2d6;background:#f2f4f9;color:#68738c;
  border-radius:10px;padding:14px;text-align:center;
  font-size:.9rem;margin:18px 0;min-height:90px;
  display:flex;align-items:center;justify-content:center;
}
.ad-slot small{display:block}
/* Ancla inferior fija: se activa con la etiqueta real de AdSense (ancla). */
.ad-ancla{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--borde);
  min-height:56px;display:flex;align-items:center;justify-content:center;
  color:#68738c;font-size:.85rem;border-top:2px dashed #b9c2d6;
}

/* ============================================================
   SISTEMA DE EXPERIENCIA PUBLICITARIA (js/anuncios.js)
   Alturas RESERVADAS por formato (regla de oro R4): cada hueco
   ocupa su espacio final desde el primer pintado; cuando el
   anuncio real cargue, no empuja nada (CLS = 0) y jamás queda
   pegado a botones de respuesta ni al reproductor de audio. */
.ad-slot[data-ad-slot^="display"]{min-height:260px}
.ad-slot[data-ad-slot^="in-article"]{min-height:250px}
.ad-slot[data-ad-slot^="multiplex"]{min-height:300px}
.ad-slot[data-ad-slot^="in-feed"]{min-height:110px}
.ad-slot.ad-visto{border-style:solid} /* el hueco ya fue visto: impresión potencial contada */

/* Apagado total: modo concentración (body.ads-off) y pregunta
   activa en práctica/simulacro (body.ads-flujo). Sin excepciones. */
body.ads-off .ad-slot,
body.ads-off .ad-ancla,
body.ads-off .ad-vineta,
body.ads-flujo .ad-slot,
body.ads-flujo .ad-ancla,
body.ads-flujo .ad-vineta{display:none!important}

/* Ancla respetuosa: botón de cerrar grande y siempre visible.
   El cierre se recuerda toda la sesión (js/anuncios.js). */
.ad-ancla{padding-right:56px}
.ad-ancla.ancla-oculta{display:none}
.ad-ancla-cerrar{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:999px;border:2px solid var(--borde);
  background:#fff;color:var(--gris);font-size:1.05rem;font-weight:700;
  cursor:pointer;line-height:1;
}
.ad-ancla-cerrar:active{background:#eef3fc}

/* Botón de modo concentración (inyectado por js/anuncios.js en la
   barra de cabecera de todas las páginas). */
.btn-concentracion{
  margin-left:auto;min-height:44px;padding:8px 14px;border-radius:999px;
  border:2px solid rgba(255,255,255,.65);background:rgba(255,255,255,.14);
  color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;white-space:nowrap;
}
.btn-concentracion.concentracion-on{background:var(--verde);border-color:#fff}

/* Cabecera en móvil (corrección de la auditoría responsive
   2026-11-04): marca + botón de concentración NO caben en una fila:
   la fila medía 441px de contenido en pantallas de 360–414px, la
   marca se partía en dos líneas y el botón quedaba cortado por el
   borde derecho. En pantallas estrechas el botón baja a su propia
   fila, a ancho completo: texto íntegro y objetivo táctil mayor. */
@media (max-width:640px){
  .cabecera .barra{flex-wrap:wrap;row-gap:8px}
  .marca{flex:1 1 auto}
  .btn-concentracion{margin-left:0;flex:1 1 100%;min-height:48px}
}

/* Viñeta entre secciones: capa amable, jamás dentro de un flujo
   de preguntas (la lógica de cuándo puede salir vive en
   js/anuncios.js: tope duro de 1 cada 8 minutos por sesión). */
.ad-vineta{
  position:fixed;inset:0;z-index:90;background:rgba(10,20,40,.62);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.ad-vineta[hidden]{display:none}
.ad-vineta-caja{
  background:var(--crema);border-radius:var(--radio);max-width:520px;width:100%;
  padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);max-height:92vh;overflow:auto;
}
.ad-vineta-titulo{font-size:1.25rem;font-weight:800;margin:.1em 0 .3em}
.ad-slot-vineta{min-height:250px}

/* Diálogo del modo concentración (js/anuncios.js): reusa el velo y la
   caja de la viñeta; solo añade aire al texto de divulgación previa. */
.conc-dialogo-texto{line-height:1.55;margin:.2em 0 .6em}

/* Pantalla de pausa de estudio (práctica, cada 10 respuestas). */
.pausa-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.pausa-resumen>div{background:#eef3fc;border:1px solid #c9d8f2;border-radius:10px;padding:10px;text-align:center}
.pausa-resumen .num{display:block;font-size:1.5rem;font-weight:800;color:var(--azul)}
.pausa-resumen .etq{font-size:.85rem;color:var(--gris);font-weight:600}

/* ---------- Control de velocidad del audio ----------
   Pedido expreso de usuarios (notas/voz-del-usuario.md).
   Desde el 2026-11-06 es un control DESLIZANTE continuo de
   0,25× a 1,25× (orden de Julian; antes eran tres botones fijos;
   el rango mira hacia lo lento: que se entienda mejor).
   La elección persiste en localStorage para todo el sitio.
   El input mide 44 px de alto (zona táctil cómoda) y el pulgar
   es grande, para moverlo con el dedo en el celular. */
.velocidad-audio{margin:10px 0;max-width:420px}
.vel-etiqueta{display:block;font-weight:700;font-size:.95rem;color:var(--gris);margin-bottom:2px}
.vel-valor{color:var(--azul);font-weight:800}
.vel-slider{
  -webkit-appearance:none;appearance:none;display:block;width:100%;
  height:44px;background:transparent;cursor:pointer;margin:0;padding:0;
}
.vel-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#c9d8f2}
.vel-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;
  border-radius:50%;background:var(--azul);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.vel-slider::-moz-range-track{height:6px;border-radius:3px;background:#c9d8f2}
.vel-slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--azul);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.vel-marcas{display:flex;justify-content:space-between;font-size:.8rem;color:var(--gris);margin-top:-6px}

/* ---------- Pie ---------- */
.pie{
  max-width:var(--ancho-max);margin:24px auto 0;padding:16px;
  color:var(--gris);font-size:.95rem;border-top:1px solid var(--borde);
}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px}
.pie a{font-weight:600}

.util-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tablas simples de guías (p. ej. tarifas N-400): legibles en móvil,
   con desplazamiento horizontal solo si la tabla no cabe. */
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.95rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--borde);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--crema)}

/* ---------- Barra de navegación inferior (SOLO móvil, ≤768px) ------
   Añadido de Julian (2026-11-04, tras probar la muestra): el menú
   inferior debe ser visible SIEMPRE en el celular. La inyecta
   js/anuncios.js en todas las páginas; en escritorio no aparece
   (basta la navegación de la cabecera). Objetivos ≥48px, con el
   área segura del iPhone incluida en su alto (--nav-inf-h).
   Convivencia con el ancla publicitaria inferior: el ancla se
   apila ENCIMA de la barra (su bottom pasa a ser el alto de la
   barra) y el relleno inferior del cuerpo reserva la suma de
   ambas. Cuando el ancla se oculta —cerrada por la persona, modo
   concentración o pregunta activa— js/anuncios.js pone
   body.ancla-fuera y el relleno se reduce a la barra sola:
   sin huecos raros y sin contenido tapado jamás. */
:root{--nav-inf-h:calc(64px + env(safe-area-inset-bottom,0px))}
.nav-inferior{display:none}
@media (max-width:768px){
  .nav-inferior{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    height:var(--nav-inf-h);
    background:#fff;border-top:2px solid var(--borde);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -2px 10px rgba(11,61,145,.10);
  }
  .nav-inferior a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1px;min-height:48px;padding:4px 1px;
    color:var(--gris);text-decoration:none;font-size:.72rem;font-weight:700;line-height:1.12;
    white-space:nowrap;overflow:hidden;
  }
  .nav-inferior a .nav-ico{font-size:1.2rem;line-height:1}
  .nav-inferior a[aria-current="page"]{color:var(--azul)}
  .nav-inferior a:active{background:#eef3fc}
  .ad-ancla{bottom:var(--nav-inf-h)}
  body{padding-bottom:calc(var(--nav-inf-h) + 76px)}
  body.ancla-fuera{padding-bottom:var(--nav-inf-h)}
}


/* ============================================================
   V1 (Fase 0, 2026-11-06): en las páginas de pregunta (estáticas,
   plantilla dinámica y pregunta del día) el ancla publicitaria NO
   es fija: queda como un bloque más al final de la página, tras el
   pie, para no tapar la lectura — el compromiso nº 4 de la portada
   («ningún anuncio interrumpe una pregunta ni una explicación»)
   debe ser verdad también aquí. El relleno inferior del cuerpo se
   reduce en consecuencia (en móvil queda solo el de la barra de
   navegación inferior, que sí sigue fija). El apagado por
   concentración (body.ads-off) sigue ocultándola igual. */
body[data-tipo-pagina="pregunta"] .ad-ancla,
body[data-tipo-pagina="pregunta-del-dia"] .ad-ancla{position:static}
body[data-tipo-pagina="pregunta"],
body[data-tipo-pagina="pregunta-del-dia"]{padding-bottom:0}
@media (max-width:768px){
  body[data-tipo-pagina="pregunta"],
  body[data-tipo-pagina="pregunta-del-dia"]{padding-bottom:var(--nav-inf-h)}
}

/* ---------- Integración pasos 1-5 (2026-11-06) ---------- */
.ce-verificacion textarea{width:100%;min-height:56px;font-size:1.1rem;padding:10px 12px;border:2px solid var(--borde);border-radius:12px;background:#fff;color:var(--tinta)}
.ce-contraste{border-left:6px solid var(--azul);background:#eef3fc;padding:12px 14px;border-radius:10px;margin:10px 0;font-size:1.05rem}
.ce-contraste.correcta{border-left-color:var(--verde);background:#eafaf0}
.ce-contraste.casi{border-left-color:#b8860b;background:#fdf6e0}
.ce-contraste.no{border-left-color:var(--rojo);background:#fdf0f0}
.ce-contraste[hidden]{display:none}

/* ---------- Lema de cabecera en DOS LÍNEAS FIJAS (nota de diseño
   de Julian, 2026-11-06): línea 1 «Preparación en español», línea 2
   «Preguntas oficiales de USCIS», sin separador y sin partirse
   nunca por el ancho (cada línea es un span en bloque con
   white-space:nowrap). ---------- */
.lema{
  max-width:var(--ancho-max);margin:0 auto;padding:0 16px 8px;
  font-size:.88rem;line-height:1.3;font-weight:600;color:#dbe7ff;
}
.lema span{display:block;white-space:nowrap}

/* ---------- Integración paso 9: «Mis respuestas» por ZIP (2026-11-06) ---------- */
.ce-zip-seccion{border-top:2px solid var(--borde);margin-top:16px;padding-top:6px}
.ce-zip-personal{border-left:6px solid var(--verde);background:#eafaf0;padding:12px 14px;border-radius:10px;margin:10px 0}
.ce-zip-rotulo{font-weight:700;margin:.2em 0}
.ce-zip-en{font-size:1.3rem;margin:.2em 0}
.ce-zip-sello{font-size:.92rem;margin:.4em 0 0}
.ce-zip-sinaudio{color:var(--gris)}
.ce-zip-fila{border-top:1px solid var(--borde);padding:10px 0}
.ce-zip-fila:first-of-type{border-top:none}
.ce-zip-input{width:100%;min-height:56px;font-size:1.1rem;padding:10px 12px;border:2px solid var(--borde);border-radius:12px;background:#fff;color:var(--tinta)}
.ce-zip-resultado{margin-top:10px}

/* ---------- Integración pasos 6-8: manos libres, escucha activa, voz (2026-11-06) ---------- */
#ml-estado{font-weight:700}
.ce-escucha-modo{margin-top:14px;border-top:1px solid var(--borde);padding-top:10px}
.ce-escucha-modo textarea{width:100%;min-height:56px;font-size:1.1rem;padding:10px 12px;border:2px solid var(--borde);border-radius:12px;background:#fff;color:var(--tinta)}
.ce-palabra{display:inline-block;padding:2px 8px;border-radius:999px;margin:2px;font-weight:700}
.ce-palabra-bien{background:#eafaf0;border:1px solid #bfe6cc}
.ce-palabra-mal{background:#fdf0f0;border:1px solid #e6b3b3}
.ce-palabra-falta{background:#fdf6e0;border:1px solid #e6d9ae}
.ce-voz-bloque{border-top:2px solid var(--borde);margin-top:16px;padding-top:8px}
.ce-voz-puntos{border:1px solid var(--borde);border-radius:10px;margin-top:10px}
.ce-voz-puntos label{display:block;padding:8px 4px;font-size:1.02rem}
.ce-voz-puntos input{min-width:22px;min-height:22px;vertical-align:middle}

/* ---------- Integración paso 10: variantes (n.º 3, 2026-11-06) ---------- */
.ce-variantes{border-top:2px solid var(--borde);margin-top:16px;padding-top:6px}
.ce-var-etiqueta{font-weight:600}
.ce-var-fila{border-top:1px solid var(--borde);padding:10px 0}
.ce-var-fila:first-of-type{border-top:none}
.ce-var-texto{font-size:1.15rem;margin:.2em 0}
.ce-var-nota{font-size:.95rem;color:var(--gris);margin:.2em 0}
.ce-var-aviso{border-left:6px solid #b8860b;background:#fdf6e0;padding:12px 14px;border-radius:10px;margin:10px 0;font-size:1.05rem}
.ce-var-aviso[hidden]{display:none}

/* ---------- Integración paso 11: Entrevista completa (n.º 2, 2026-11-06) ---------- */
.ce-ent-etiqueta{border-left:6px solid var(--azul);background:#eef3fc;padding:12px 14px;border-radius:10px;margin:10px 0;font-size:1.05rem}
.ce-vocab-lista{list-style:none;padding:0;margin:10px 0;columns:2;column-gap:18px}
.ce-vocab-lista li{break-inside:avoid;background:#fff;border:1px solid var(--borde);border-radius:8px;padding:6px 10px;margin:0 0 6px;font-size:1rem}
@media(min-width:560px){.ce-vocab-lista{columns:3}}
.ce-legal{margin:12px 0}
.ce-delicada-nota{border-left:6px solid var(--rojo);background:#fdf0f0;padding:12px 14px;border-radius:10px;margin:10px 0;font-size:1.05rem}
.ce-conv-pregunta{margin:14px 0}
.ce-conv-privacidad{font-size:.92rem;color:var(--gris);margin:4px 0 0}
.ce-voz-aviso{border-left:6px solid #b8860b;background:#fdf6e0;padding:12px 14px;border-radius:10px;margin:10px 0}

/* ---------- Capa final paso 12: intercalado, áreas, duelos, fading, segunda voz (2026-11-06) ---------- */
.ce-duelo-info{border-left:6px solid #b8860b;background:#fdf6e0;padding:12px 14px;border-radius:10px;margin:10px 0;font-size:1.05rem}
.ce-duelo-info[hidden]{display:none}
.ce-fading-nota{border-left:6px solid var(--azul);background:#eef3fc;padding:10px 12px;border-radius:10px;margin:10px 0;font-size:1rem}
.ce-fading-nota[hidden]{display:none}
.ce-escuchas{font-size:.92rem;color:var(--gris);margin:4px 0}
.ce-escuchas[hidden]{display:none}
#prac-pista{margin:6px 0}
.velocidad-audio input.vel-slider:disabled{opacity:.45}
.sim-duro-campo input{min-width:22px;min-height:22px;vertical-align:middle}

/* ---------- Integración F2: contenidos finales — lecciones, aula,
   día D y ruta previa (2026-11-06) ---------- */
.ancla-area{display:block;height:0;overflow:hidden}
.leccion .btn-bloque{margin-top:10px}
.aula-pregunta{font-size:2rem;font-weight:800;line-height:1.3;margin:.3em 0}
.dia-paso{border-top:1px solid var(--borde);padding:6px 0}
.dia-paso:first-of-type{border-top:none}
.dia-frase{border-top:1px solid var(--borde);padding:10px 0}
.dia-frase:first-of-type{border-top:none}
.dia-frase audio{width:100%;max-width:420px}
.dia-lista{list-style:none;padding:0;margin:10px 0}
.dia-lista li{padding:9px 2px;border-bottom:1px dashed var(--borde);font-size:1.05rem}
.hoja-texto p{margin:.35em 0}
.hoja-texto .hoja-hueco{margin:.9em 0}
/* Impresión de hojas (aula y día D): SOLO sale la hoja de la página;
   fuera cabecera, pie, anuncios, barra inferior y botones. */
@media print{
  .cabecera,.pie,.ad-ancla,.nav-inferior,.ad-slot{display:none!important}
  body{padding-bottom:0;background:#fff}
  body[data-tipo-pagina="aula"] .contenedor>*:not(#aula-hoja),
  body[data-tipo-pagina="dia-d"] .contenedor>*:not(#dia-d-lista){display:none!important}
  #aula-hoja,#dia-d-lista{border:none;box-shadow:none;margin:0;padding:0}
  .no-imprimir{display:none!important}
}

/* ---------- Controles flotantes: audio y volver arriba ----------
   (2026-11-12) Siempre visibles, esquina inferior derecha. Se
   apilan POR ENCIMA de la barra de navegacion inferior (movil) y
   del ancla publicitaria; cuando el ancla sale de pantalla
   (body.ancla-fuera, modo concentracion o pregunta activa) bajan
   hasta la esquina. En las paginas de pregunta el ancla no es
   fija: quedan abajo desde el inicio. */
.ce-flotantes{
  position:fixed;right:12px;bottom:90px;z-index:65;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
body.ancla-fuera .ce-flotantes,
body.ads-off .ce-flotantes,
body.ads-flujo .ce-flotantes{bottom:16px}
body[data-tipo-pagina="pregunta"] .ce-flotantes,
body[data-tipo-pagina="pregunta-del-dia"] .ce-flotantes{bottom:16px}
@media (max-width:768px){
  .ce-flotantes{bottom:calc(var(--nav-inf-h) + 88px)}
  body.ancla-fuera .ce-flotantes,
  body.ads-off .ce-flotantes,
  body.ads-flujo .ce-flotantes{bottom:calc(var(--nav-inf-h) + 14px)}
  body[data-tipo-pagina="pregunta"] .ce-flotantes,
  body[data-tipo-pagina="pregunta-del-dia"] .ce-flotantes{bottom:calc(var(--nav-inf-h) + 14px)}
}
.ce-flotante{
  display:flex;align-items:center;gap:8px;
  min-height:48px;padding:10px 16px;border-radius:999px;
  border:2px solid var(--azul);background:#fff;color:var(--azul);
  font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(11,61,145,.25);
}
.ce-flotante:active{transform:scale(.97)}
.ce-flot-audio{opacity:.88}
.ce-flot-audio.sonando{background:var(--azul);color:#fff;opacity:1}
.ce-flot-audio.en-pausa{background:#eef3fc;opacity:1}
.ce-flot-ico{font-size:1.15rem;line-height:1}
@media print{.ce-flotantes{display:none}}

/* ---------- Explicacion breve para quien llega nuevo (2026-11-12) ---------- */
.explica{
  background:#eef3fc;border-left:6px solid var(--azul);
  padding:10px 14px;border-radius:10px;margin:10px 0;
  font-size:1.02rem;color:var(--tinta);
}

/* Titulo de grupo en la portada (reorden 2026-11-12) */
.grupo-titulo{margin:28px 0 4px;color:var(--azul-oscuro)}