/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO DE aula8020 · 22/08/2026

   HISTORIA CORTA
   Este sitio nació con estética de «boli Bic sobre papel»: papel crema, serif
   editorial (Fraunces) y subrayador amarillo. Bonito, pero leía a LIBRO DE
   TEXTO — justo de lo que huye alguien que lleva veinte años sin atreverse a
   hablar inglés. Sergio lo dijo claro: «parece clásico y difícil de leer».

   QUÉ ES ESTO AHORA
   El mismo sistema que Oposiciones.red, con su color cambiado. Se copiaron sus
   valores reales (leídos del sitio en vivo, no a ojo): fondo gris muy claro,
   tarjetas blancas, bordes finos, radios pequeños, sombras de dos capas,
   tipografía Inter y titulares en tinta con mucho peso.

   EL COLOR: verde azulado profundo (#0b6b63) en lugar del índigo de
   Oposiciones. Es adulto, no es el verde chillón de Duolingo y no compite con
   el de la otra web. Da 6,37 de contraste sobre blanco.
   → Para cambiarlo, se toca --ink-blue y sus dos variantes. Nada más.

   ⚠ POR QUÉ LAS VARIABLES SE SIGUEN LLAMANDO --paper, --ink, --marker…
   Porque app.html, dashboard.html, admin.html y las 18 páginas del temario las
   usan por todas partes. Cambiando solo los VALORES, el sitio entero adopta el
   diseño sin tocar un fichero más. Renombrarlas habría roto media aplicación
   con gente pagando dentro. Los nombres mienten un poco; el código funciona.

   Todos los contrastes comprobados ≥ 4,5 sobre los dos fondos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inter variable, la misma que usa Oposiciones.red (copiada de su servidor con
   su licencia SIL en fonts/LICENCIA-Inter.txt). Un solo fichero cubre todos
   los pesos de 100 a 900. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Superficies */
  --paper: #f7f8fb;      /* el fondo de la página */
  --paper-2: #f1f3f8;    /* zonas hundidas, bandas */
  --card: #ffffff;       /* tarjetas y paneles */

  /* Texto */
  --ink: #12161f;
  --ink-soft: #545d6e;
  --ink-faint: #646d7e;
  --line: #e2e6ee;
  --line-strong: #818b9d;

  /* La marca. Cambiar SOLO estas tres líneas cambia el color de todo el sitio. */
  --ink-blue: #0b6b63;   /* la marca */
  --ink-blue-2: #084f49; /* al pasar por encima y al pulsar */
  --ink-green: #0a7145;
  --ink-green-2: #085c38;

  /* Los titulares van en TINTA, no en color. El color se reserva para lo que
     se puede pulsar: así el verde SIGNIFICA «esto se toca». */
  --head: var(--ink);

  /* Lo que antes era el subrayador amarillo: ahora un resalte del color de la
     marca, suave, para destacar sin gritar. */
  --marker: #e3f2ef;
  --marker-ink: #084f49;
  --marker-deep: #b9ddd7;

  --good: #0a7145;
  --bad: #b42318;

  /* Sombras de dos capas: casi no se ven, pero separan la tarjeta del fondo. */
  --shadow: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .06);
  --shadow-md: 0 4px 8px -2px rgb(16 24 40 / .08), 0 2px 4px -2px rgb(16 24 40 / .05);
  --shadow-lg: 0 12px 24px -6px rgb(16 24 40 / .1), 0 4px 8px -4px rgb(16 24 40 / .06);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Se conserva la variable para que nada se rompa: ahora apunta a la misma. */
  --display: var(--sans);
}

/* El conmutador de tema claro (el oscuro está retirado hasta que haya una
   versión oscura hecha de verdad). */
:root[data-theme="light"] {
  --paper: #f7f8fb; --paper-2: #f1f3f8; --card: #ffffff;
  --ink: #12161f; --ink-soft: #545d6e; --ink-faint: #646d7e; --line: #e2e6ee;
  --ink-blue: #0b6b63; --ink-blue-2: #084f49; --ink-green: #0a7145; --ink-green-2: #085c38;
  --head: var(--ink);
  --marker: #e3f2ef; --marker-ink: #084f49; --marker-deep: #b9ddd7;
  --good: #0a7145; --bad: #b42318;
}

* { box-sizing: border-box; }

html {
  /* iOS Safari infla algunos textos por su cuenta y ensancha el contenido más
     de lo que calcula el layout: eso «mordía» la pantalla por la derecha. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  max-width: 100%;
  overflow-x: clip;
}

p { text-wrap: pretty; }
a { color: inherit; }

/* Cifras alineadas en columna en todo lo numérico. */
.mono, .eyebrow, .pill, .badge, th, td.mono, .stat .n { font-variant-numeric: tabular-nums lining-nums; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 460px; margin: 0 auto; padding: 0 22px; }

/* Titulares: peso 700, muy apretados de letra y de línea. Es lo que da el aire
   de producto en vez de el de revista. */
h1, h2, h3 {
  font-family: var(--display);
  color: var(--head);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(31px, 5vw, 48px); letter-spacing: -.03em; line-height: 1.2; margin: 14px 0 16px; }
h2 { font-size: clamp(23px, 3.2vw, 29.6px); letter-spacing: -.018em; line-height: 1.2; }
h3 { font-size: 19px; letter-spacing: -.012em; line-height: 1.32; }

.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .01em; text-transform: none; color: var(--ink-blue); margin: 0;
}
.mono { font-family: var(--mono); }

/* El resalte: una etiqueta suave del color de la marca. */
.mark {
  background: var(--marker); color: var(--marker-ink);
  padding: .05em .24em; border-radius: 6px; font-weight: inherit;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.muted { color: var(--ink-soft); }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 12px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; text-decoration: none; min-width: 0; flex-shrink: 0; }
.brand .badge { font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--ink-blue); color: #fff; padding: 3px 7px; border-radius: var(--radius-sm); }
.nav-actions { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15.2px; font-weight: 700; cursor: pointer;
  border-radius: var(--radius); padding: 11px 18px; min-height: 44px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  text-decoration: none; box-shadow: var(--shadow);
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
/* El principal es de color: es lo único de la página que pide que lo pulses. */
.btn-primary { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.btn-primary:hover { background: var(--ink-blue-2); border-color: var(--ink-blue-2); color: #fff; }
.btn-marker { background: var(--marker); color: var(--marker-ink); border-color: var(--marker-deep); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--paper-2); }
.btn-sm { padding: 8px 14px; font-size: 14px; min-height: 40px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--marker-deep); outline-offset: 2px; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; }

/* ── Formularios ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field label { font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; min-height: 46px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--marker-deep); outline-offset: 1px; border-color: var(--ink-blue);
}

.banner { padding: 12px 15px; border-radius: var(--radius); font-size: 15px; margin-bottom: 14px; }
.banner.err { background: #fdecea; border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); color: var(--bad); }
.banner.ok { background: #e5f6ee; border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line)); color: var(--good); }

.hidden { display: none !important; }
/* El atributo [hidden] debe ganar SIEMPRE. Sin esto, cualquier regla que fije
   `display` (p. ej. `display:flex`) lo anula y el elemento sigue ocupando
   sitio: así se coló un panel de 379 px que dejaba el chat en 55 px. */
[hidden] { display: none !important; }

/* ── Cifras ─────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); }
.stat .n { font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.stat .l { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr 1fr; } }

.pill { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-soft); }
.pill.paid { background: #e5f6ee; color: var(--good); border-color: color-mix(in srgb, var(--good) 28%, var(--line)); }
.pill.pending { background: #fdecea; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, var(--line)); }
.pill.none { color: var(--ink-faint); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
th { font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-soft); }
td.mono { font-family: var(--mono); font-size: 14px; }

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding: 7px 11px; font-size: 13px; }
  .brand { font-size: 15px; }
  .brand .badge { font-size: 11px; padding: 3px 6px; }
}

/* ── LA PRUEBA SIN CUENTA ──────────────────────────────────────────────────
   Hablar inglés antes de registrarse. Estos estilos los usan la portada Y las
   18 páginas del temario: por eso viven aquí y no dentro de una de las dos. */
.probar { margin: 26px 0 0; padding: 22px 24px; border-radius: var(--radius-lg);
          background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.probar h2 { margin: 6px 0 8px; font-size: clamp(20px, 2.4vw, 25px); }
.probar > p { margin: 0 0 16px; color: var(--ink-soft); max-width: 56ch; }
.probar .nota { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }
#probar-error { color: var(--bad); font-size: 15px; margin: 10px 0 0; }
.pb-cab { display: flex; align-items: center; gap: 8px; padding-bottom: 10px;
          border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.pb-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.pb-est { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.pb-chat { display: flex; flex-direction: column; gap: 10px; padding: 15px 0;
           min-height: 130px; max-height: 340px; overflow-y: auto; }
.pb-b { max-width: 88%; padding: 10px 13px; border-radius: var(--radius); font-size: 15.5px;
        line-height: 1.45; white-space: pre-wrap; }
.pb-aula { align-self: flex-start; background: var(--paper-2); border: 1px solid var(--line); }
.pb-yo { align-self: flex-end; background: var(--ink-blue); color: #fff; }
.pb-pie { display: flex; gap: 8px; padding-top: 13px; border-top: 1px solid var(--line); }
.pb-campo { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius);
            border: 1px solid var(--line); background: var(--card); color: var(--ink);
            font-size: 16px; font-family: inherit; min-height: 46px; }
.pb-campo:focus { outline: 3px solid var(--marker-deep); outline-offset: 1px; border-color: var(--ink-blue); }
.pb-mic, .pb-enviar { flex: 0 0 auto; min-height: 46px; border-radius: var(--radius);
                      border: 1px solid var(--line); background: var(--card); color: var(--ink);
                      font-size: 15px; font-weight: 700; font-family: inherit; padding: 10px 17px; cursor: pointer; }
.pb-mic.on { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
.pb-enviar { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.pb-enviar:disabled, .pb-campo:disabled { opacity: .55; cursor: default; }
.pb-fin { margin-top: 15px; padding-top: 17px; border-top: 1px solid var(--line); }
.pb-fin-t { font-weight: 700; margin: 0 0 8px; font-size: 17px; }
.pb-fin-p { color: var(--ink-soft); margin: 0 0 15px; max-width: 54ch; }
.pb-fallos { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.pb-fallos li { margin-bottom: 5px; }

/* EL ACENTO DEL INGLÉS. Va en la cabecera del panel, a la vista, porque es una
   decisión de aprendizaje —no una preferencia de sistema escondida en ajustes—.
   Quien estudia para trabajar en Londres tiene que verla el primer día. */
.acento { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.acento-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); letter-spacing: .02em; text-transform: uppercase; margin-right: 2px; }
.acento-op {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  transition: background .12s, color .12s, border-color .12s;
}
.acento-op:hover { background: var(--paper-2); }
.acento-op.on { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
/* El foco tiene que verse: esto se opera con teclado más de lo que parece. */
.acento-op:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 2px; }

/* LOS PUNTOS QUE SE MUEVEN MIENTRAS EL TUTOR PIENSA.
   Medido el 23/08/2026: un turno de la prueba gratuita tardo 8 segundos. Un
   «escribiendo…» gris y quieto durante 8 segundos, en la pantalla que decide
   si alguien se suscribe, parece que la pagina se ha colgado. */
.pb-est-vivo::after { content: ""; animation: pb-puntos 1.2s steps(4, end) infinite; }
@keyframes pb-puntos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
/* Quien pide menos movimiento ve los tres puntos fijos, no un vacio. */
@media (prefers-reduced-motion: reduce) {
  .pb-est-vivo::after { content: "…"; animation: none; }
}