/* =========================================================================
   AInglish — estilos
   Pensado primero para móvil. Colores en variables: tema claro, oscuro o del sistema.
   ========================================================================= */

/* ---------- Colores ---------- */
:root {
  color-scheme: light;
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #eef1f5;
  --texto: #1b2230;
  --texto-suave: #586273;
  --borde: #dde2e9;
  --acento: #3056d3;
  --acento-texto: #ffffff;
  --acento-suave: #e8eefc;
  --tonica: #b8430c;          /* sílaba tónica de la pronunciación */
  --pron-fondo: #fff4ec;
  --aviso-fondo: #fff6df;
  --aviso-borde: #f0cf7a;
  --aviso-texto: #6b4a00;
  --error: #b42318;
  --ok: #157f3d;
  /* Botones de respuesta (texto blanco encima) */
  --b-otra: #c2392a;
  --b-dificil: #a55204;
  --b-bien: #157f3d;
  --b-facil: #2559d6;
  /* Progreso por fase */
  --p-nuevas: #d5dbe3;
  --p-aprendiendo: #e3a008;
  --p-aprendidas: #5b85ec;
  --p-dominadas: #1f9d55;
  --tipo-aprendiendo: #a15c00;
  --sombra: 0 1px 2px rgb(16 24 40 / .06), 0 4px 16px rgb(16 24 40 / .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0f141b;
    --superficie: #171e28;
    --superficie-2: #202938;
    --texto: #e8edf3;
    --texto-suave: #9ba7b7;
    --borde: #2b3545;
    --acento: #7f9fff;
    --acento-texto: #0d1422;
    --acento-suave: #1e2a47;
    --tonica: #ffa66e;
    --pron-fondo: #2a2019;
    --aviso-fondo: #2d2512;
    --aviso-borde: #6e5617;
    --aviso-texto: #f5d98b;
    --error: #ff8a80;
    --ok: #5fd28b;
    --b-otra: #c7402f;
    --b-dificil: #b05c0b;
    --b-bien: #1a8a45;
    --b-facil: #3466e0;
    --p-nuevas: #344052;
    --p-aprendiendo: #d4a017;
    --p-aprendidas: #6f93f0;
    --p-dominadas: #34b56a;
    --tipo-aprendiendo: #f0b429;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0f141b;
  --superficie: #171e28;
  --superficie-2: #202938;
  --texto: #e8edf3;
  --texto-suave: #9ba7b7;
  --borde: #2b3545;
  --acento: #7f9fff;
  --acento-texto: #0d1422;
  --acento-suave: #1e2a47;
  --tonica: #ffa66e;
  --pron-fondo: #2a2019;
  --aviso-fondo: #2d2512;
  --aviso-borde: #6e5617;
  --aviso-texto: #f5d98b;
  --error: #ff8a80;
  --ok: #5fd28b;
  --b-otra: #c7402f;
  --b-dificil: #b05c0b;
  --b-bien: #1a8a45;
  --b-facil: #3466e0;
  --p-nuevas: #344052;
  --p-aprendiendo: #d4a017;
  --p-aprendidas: #6f93f0;
  --p-dominadas: #34b56a;
  --tipo-aprendiendo: #f0b429;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem calc(5.5rem + env(safe-area-inset-bottom));
  outline: none;
}
body.sin-pestanas main { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
p { margin: 0 0 1rem; }
a { color: var(--acento); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.saltar { position: absolute; left: -999px; top: .5rem; background: var(--superficie); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: .5rem; }

.cargando, .vacio { color: var(--texto-suave); text-align: center; padding: 3rem 0; }
.suave { color: var(--texto-suave); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Botones ---------- */
button, .boton { font: inherit; cursor: pointer; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.25rem;
  border-radius: 14px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto);
  font-weight: 600; text-decoration: none;
  transition: transform .1s ease, background-color .15s ease;
}
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .55; cursor: default; transform: none; }
.boton-principal { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.boton-grande { width: 100%; min-height: 3.75rem; font-size: 1.15rem; border-radius: 18px; }
.boton-peligro { color: var(--error); }

.boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto);
}
.boton-icono svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton-icono:disabled { opacity: .4; }

.boton-audio { color: var(--acento); }
.boton-audio.sonando { background: var(--acento-suave); }

/* ---------- Pronunciación ---------- */
.pron {
  display: inline-block;
  padding: .1em .55em;
  border-radius: 8px;
  background: var(--pron-fondo);
  color: var(--texto-suave);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .95em;
  letter-spacing: .03em;
}
.pron .tonica { color: var(--tonica); font-weight: 700; }

/* ---------- Pestañas (abajo, a mano del pulgar) ---------- */
.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: center; gap: .25rem;
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
}
.pestanas[hidden] { display: none; }
.pestanas a {
  flex: 1; max-width: 9rem;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .4rem 0; border-radius: 12px;
  color: var(--texto-suave); text-decoration: none; font-size: .8rem; font-weight: 600;
}
.pestanas svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pestanas a[aria-current="page"] { color: var(--acento); background: var(--acento-suave); }

/* ---------- Aviso flotante (toast) ---------- */
.aviso-flotante {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); z-index: 20;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: min(26rem, calc(100% - 2rem));
  padding: .7rem 1.1rem; border-radius: 12px;
  background: var(--texto); color: var(--fondo); font-weight: 600; text-align: center;
  box-shadow: var(--sombra);
  transition: opacity .2s ease, transform .2s ease;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-flotante.error { background: var(--error); color: #fff; }

/* ---------- Tarjetas genéricas ---------- */
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: var(--sombra);
}

.aviso {
  background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso-texto);
  border-radius: 14px; padding: .85rem 1rem; margin: 1rem 0; font-size: .95rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chips li { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; background: var(--superficie-2); color: var(--texto-suave); }

/* ---------- Acceso ---------- */
.acceso { min-height: 80vh; display: grid; place-content: center; text-align: center; gap: 1rem; }
.acceso img { width: 4rem; height: 4rem; margin: 0 auto; }
.acceso form { display: grid; gap: .75rem; width: min(22rem, 100%); margin: 0 auto; }
.campo {
  width: 100%; min-height: 3.25rem; padding: .7rem 1rem;
  border-radius: 14px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: inherit;
}
.campo:focus { outline: 3px solid var(--acento-suave); border-color: var(--acento); }
.mensaje-error { color: var(--error); min-height: 1.5em; margin: 0; font-weight: 600; }

/* ---------- Inicio ---------- */
.cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fecha { color: var(--texto-suave); font-size: .95rem; }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: .85rem .5rem; text-align: center; }
.cifra strong { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--texto-suave); font-size: .85rem; }

.racha { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.racha .llama { font-size: 1.8rem; line-height: 1; }
.racha p { margin: 0; }
.racha-detalle { display: block; } /* segunda línea, entera: "¡Hoy ya cuenta!" */

.fase { margin-bottom: 1rem; }
.fase-titulo { display: flex; justify-content: space-between; gap: .5rem; font-size: .95rem; margin-bottom: .35rem; }
.fase-titulo span { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.barra { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; background: var(--p-nuevas); }
.barra i { display: block; height: 100%; }
.barra i + i { border-left: 2px solid var(--superficie); }
.c-nuevas { background: var(--p-nuevas); }
.c-aprendiendo { background: var(--p-aprendiendo); }
.c-aprendidas { background: var(--p-aprendidas); }
.c-dominadas { background: var(--p-dominadas); }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: 0 0 1rem; list-style: none; font-size: .85rem; color: var(--texto-suave); }
.leyenda li { display: flex; align-items: center; gap: .4rem; }
.leyenda i { width: .75rem; height: .75rem; border-radius: 3px; display: inline-block; }

/* ---------- Repaso ---------- */
.repaso { display: flex; flex-direction: column; gap: 1rem; min-height: calc(100dvh - 2.5rem); }
.repaso-barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.contador { display: flex; gap: .9rem; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.contador .c-rep { color: var(--acento); }
.contador .c-nue { color: var(--ok); }

.tarjeta {
  flex: 1; display: flex; flex-direction: column;
  perspective: 1400px; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.tarjeta-interior {
  flex: 1; display: grid;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tarjeta-interior.girada { transform: rotateY(180deg); }
.cara {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  min-height: 19rem; padding: 1.5rem 1.25rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px;
  box-shadow: var(--sombra);
  text-align: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.detras { transform: rotateY(180deg); justify-content: flex-start; }

.etiqueta-dir { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.palabra { font-size: clamp(2rem, 9vw, 2.9rem); font-weight: 750; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; margin: 0; }
.detras .palabra { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.traduccion { font-size: clamp(1.35rem, 6vw, 1.8rem); font-weight: 650; margin: 0; overflow-wrap: anywhere; }
.pregunta { color: var(--texto-suave); margin: 0; }
.linea-audio { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.ejemplo { display: flex; align-items: flex-start; gap: .6rem; text-align: left; background: var(--superficie-2); border-radius: 14px; padding: .75rem .85rem; width: 100%; }
.ejemplo p { margin: 0; flex: 1; font-style: italic; align-self: center; }
.separador { width: 3rem; border: 0; border-top: 2px solid var(--borde); margin: .25rem auto; }
.recordatorio { font-size: .85rem; color: var(--texto-suave); margin: auto 0 0; }
.pista-girar { font-size: .85rem; color: var(--texto-suave); margin: auto 0 0; }
.delante > :first-child { margin-top: auto; } /* centra el contenido; la pista queda abajo */

.respuestas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding-bottom: env(safe-area-inset-bottom); }
.respuesta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 4rem; padding: .4rem .2rem;
  border: 0; border-radius: 16px; color: #fff; font-weight: 700; font-size: .95rem;
  transition: transform .1s ease, filter .15s ease;
}
.respuesta small { font-weight: 500; font-size: .8rem; opacity: .92; font-variant-numeric: tabular-nums; }
.respuesta:active { transform: scale(.96); }
.respuesta:disabled { filter: saturate(.4); opacity: .7; }
.respuesta kbd { display: none; }
.r-1 { background: var(--b-otra); }
.r-2 { background: var(--b-dificil); }
.r-3 { background: var(--b-bien); }
.r-4 { background: var(--b-facil); }

.fin { text-align: center; display: grid; gap: 1rem; padding-top: 2rem; }
.fin .emoji { font-size: 3.5rem; line-height: 1; }

/* Atajos de teclado: solo en pantallas con ratón */
@media (hover: hover) and (pointer: fine) {
  .respuesta kbd { display: inline; font: inherit; font-size: .7rem; opacity: .75; }
  .atajos { display: block !important; }
}
.atajos { display: none; text-align: center; font-size: .8rem; color: var(--texto-suave); margin: 0; }
.atajos kbd { font-family: inherit; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35em; background: var(--superficie); }

/* Reducir movimiento: en vez de girar, cambio suave de una cara a otra */
@media (prefers-reduced-motion: reduce) {
  .tarjeta-interior, .tarjeta-interior.girada { transform: none; transition: none; }
  .cara { transition: opacity .15s linear; }
  .detras { transform: none; opacity: 0; visibility: hidden; }
  .girada .delante { opacity: 0; visibility: hidden; }
  .girada .detras { opacity: 1; visibility: visible; }
  .boton, .respuesta, .aviso-flotante { transition: none; }
}

/* ---------- Explorar ---------- */
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .75rem; }
.filtros .buscar { grid-column: 1 / -1; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat; padding-right: 2rem; }
.filtros .categoria { grid-column: 1 / -1; }
.total { color: var(--texto-suave); font-size: .9rem; margin-bottom: .75rem; }
.lista { display: grid; gap: .75rem; }
.ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: .9rem 1rem; display: grid; gap: .55rem; content-visibility: auto; contain-intrinsic-size: auto 11rem; }
.ficha-cabecera { display: flex; align-items: center; gap: .6rem; }
.ficha-cabecera div { flex: 1; min-width: 0; }
.ficha h3 { font-size: 1.2rem; margin: 0 0 .2rem; overflow-wrap: anywhere; }
.ficha .es { margin: 0; font-weight: 600; }
.ficha .ejemplo { padding: .5rem .6rem; }
.ficha .ejemplo .boton-icono { width: 2.4rem; height: 2.4rem; }

/* ---------- Ajustes ---------- */
.grupo { display: grid; gap: .25rem; }
.grupo + .grupo { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: 1rem; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fila label, .grupo > label, .grupo legend { font-weight: 600; }
.ayuda { font-size: .88rem; color: var(--texto-suave); margin: .2rem 0 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* El título de un fieldset se dibuja encima del borde: así se comporta como un título normal */
.grupo legend { float: left; width: 100%; padding: 0; margin-bottom: .1rem; }
.grupo legend + * { clear: both; }
.numero { width: 6rem; text-align: center; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--acento); height: 2rem; }
.valor { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--acento); }

.interruptor { position: relative; width: 3.2rem; height: 1.9rem; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--borde); transition: background-color .15s; pointer-events: none; }
.interruptor span::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .15s; }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(1.3rem); }
.interruptor input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }

.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; background: var(--superficie-2); border-radius: 14px; padding: .25rem; margin-top: .4rem; }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos span { display: block; text-align: center; padding: .55rem .25rem; border-radius: 11px; font-weight: 600; font-size: .95rem; color: var(--texto-suave); }
.segmentos input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.segmentos input:focus-visible + span { outline: 3px solid var(--acento); }

.casillas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.casillas label { position: relative; }
.casillas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.casillas span { display: block; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--borde); font-weight: 600; font-size: .9rem; color: var(--texto-suave); }
.casillas input:checked + span { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
.casillas input:focus-visible + span { outline: 3px solid var(--acento); }

.acciones-copia { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 48rem) {
  main { padding-top: 2rem; }
  .cara { min-height: 22rem; }
  .filtros { grid-template-columns: 2fr 1fr 1fr; }
  .filtros .buscar { grid-column: 1 / -1; }
  .filtros .categoria { grid-column: auto; }
  .filtros { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Copias automáticas (Ajustes) ---------- */
.subtitulo { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.lista-copias { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.lista-copias li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--borde); }
.lista-copias li:first-child { border-top: 0; }
.lista-copias span { text-transform: capitalize; font-weight: 600; }
.lista-copias small { text-transform: none; font-weight: 400; }
.lista-copias .boton { min-height: 2.5rem; padding: .4rem .9rem; font-size: .9rem; }

/* ---------- Tipo de tarjeta (Nueva / Aprendiendo / Repaso) ---------- */
.etiquetas-tarjeta { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.tipo-tarjeta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: var(--color-tipo);
  background: color-mix(in srgb, var(--color-tipo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-tipo) 35%, transparent);
}
.tipo-tarjeta::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-tipo); }
.tipo-nueva { --color-tipo: var(--ok); }
.tipo-aprendiendo { --color-tipo: var(--tipo-aprendiendo); }
.tipo-repaso { --color-tipo: var(--acento); }

/* ---------- Nombre de la app ---------- */
.marca { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--acento); }
.marca span { color: var(--texto); }
.lema { color: var(--texto-suave); margin: -.5rem 0 .5rem; }
.etiqueta-seccion { margin: 1rem 0 -.4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }