/* =========================================================================
   My Garage — 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: #9a4a1f;
  --tipo-repaso: #1d5fd1;
  --acento-texto: #ffffff;
  --acento-suave: #f7ebe3;
  --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: #b35200;
  --tipo-dominada: #866a00;
  /* Neón de las tarjetas (en claro, brillo suave) */
  --neon-nueva: #00c853;
  --neon-aprendiendo: #ff7a00;
  --neon-dominada: #f5b800;
  --neon-repaso: #0a84ff;
  --neon-brillo: 35%;
  --neon-halo: 18%;
  --neon-fondo: 6%;
  --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: #f0a875;
    --acento-texto: #1c1008;
    --acento-suave: #3a2a20;
    --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: #6d8cec;
    --p-dominadas: #30aa64;
    --tipo-aprendiendo: #ff9a3d;
    --tipo-repaso: #7fb0ff;
    /* Neón de las tarjetas (en oscuro, brillo intenso) */
    --neon-nueva: #39ff88;
    --neon-aprendiendo: #ff8a1f;
    --neon-dominada: #ffd60a;
    --tipo-dominada: #ffd84d;
    --neon-repaso: #1ea7ff;
    --neon-brillo: 75%;
    --neon-halo: 40%;
    --neon-fondo: 12%;
    --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: #f0a875;
  --acento-texto: #1c1008;
  --acento-suave: #3a2a20;
  --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: #6d8cec;
  --p-dominadas: #30aa64;
  --tipo-aprendiendo: #ff9a3d;
  --tipo-repaso: #7fb0ff;
  /* Neón de las tarjetas (en oscuro, brillo intenso) */
  --neon-nueva: #39ff88;
  --neon-aprendiendo: #ff8a1f;
  --neon-dominada: #ffd60a;
  --tipo-dominada: #ffd84d;
  --neon-repaso: #1ea7ff;
  --neon-brillo: 75%;
  --neon-halo: 40%;
  --neon-fondo: 12%;
  --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(--tipo-repaso); }
.tipo-dominada { --color-tipo: var(--tipo-dominada); }

/* ---------- 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); }

/* ---------- Progreso (estadísticas) ---------- */
.periodos { margin-bottom: 1rem; }
.estadisticas { transition: opacity .15s; }
.estadisticas.recargando { opacity: .5; }
.cifras-4 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (min-width: 40rem) { .cifras-4 { grid-template-columns: repeat(4, 1fr); } }
.cifra small { display: block; font-size: .78rem; margin-top: .1rem; }
.cifra strong { font-variant-numeric: normal; }
.grafica-panel { margin-top: 1rem; }
.grafica-panel h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.grafica-panel .leyenda { margin: .5rem 0 0; }
.clave-linea { display: inline-block; width: 1rem; height: 0; border-top: 2px solid; }

.grafica { position: relative; margin-top: .5rem; touch-action: pan-y; }
.grafica svg { display: block; overflow: visible; }
.grafica-rejilla { stroke: var(--borde); stroke-width: 1; }
.grafica-base { stroke: var(--texto-suave); stroke-width: 1; opacity: .5; }
.grafica-eje { fill: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafica-valor { fill: var(--texto); font-size: 12px; font-weight: 700; }
.grafica-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafica-area { stroke: none; opacity: .1; }
.grafica-punto { stroke: var(--superficie); stroke-width: 2; }
.grafica-cruz { stroke: var(--texto-suave); stroke-width: 1; }
.grafica-barra { transition: opacity .1s; }
.grafica-barra.activa { opacity: .7; }
.grafica-capa { fill: transparent; cursor: crosshair; outline: none; }
.grafica-capa:focus-visible { stroke: var(--acento); stroke-width: 2; }

/* Colores de cada serie: el trazo/relleno de la marca; los textos nunca llevan el color. */
.serie-aprendidas { stroke: var(--p-aprendidas); fill: var(--p-aprendidas); border-color: var(--p-aprendidas); }
.serie-dominadas { stroke: var(--p-dominadas); fill: var(--p-dominadas); border-color: var(--p-dominadas); }
.serie-actividad { fill: var(--acento); }
.grafica-linea.serie-aprendidas, .grafica-linea.serie-dominadas { fill: none; }

.grafica-ventana {
  position: absolute; top: 0; z-index: 2; pointer-events: none;
  display: grid; gap: .15rem; min-width: 8.5rem;
  padding: .5rem .7rem; border-radius: 10px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  font-size: .85rem; opacity: 0; transition: opacity .1s;
}
.grafica-ventana.visible { opacity: 1; }
.grafica-fecha { color: var(--texto-suave); font-size: .78rem; }
.grafica-fila { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.grafica-fila strong { font-variant-numeric: tabular-nums; }
.grafica-fila .clave { display: inline-block; width: .8rem; border-top: 2px solid; }

.tabla-datos { margin-top: 1rem; }
.tabla-datos summary { cursor: pointer; color: var(--acento); font-weight: 600; padding: .5rem 0; }
.tabla-scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--borde); border-radius: 12px; }
.tabla-datos table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tabla-datos th, .tabla-datos td { padding: .45rem .6rem; text-align: right; border-bottom: 1px solid var(--borde); }
.tabla-datos th:first-child { text-align: left; }
.tabla-datos thead th { position: sticky; top: 0; background: var(--superficie-2); color: var(--texto-suave); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .estadisticas, .grafica-ventana, .grafica-barra { transition: none; } }
/* Prioridad sobre el color de la serie: el área no lleva borde y los puntos llevan anillo del color de fondo. */
.grafica .grafica-area { stroke: none; }
.grafica .grafica-punto { stroke: var(--superficie); }

/* ---------- Tiempo en la app (Progreso) ---------- */
.tiempo-panel { margin-top: 1rem; }
.tiempo-panel h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.cifras-3 { grid-template-columns: repeat(3, 1fr); margin: .5rem 0; }
.cifras-3 .cifra { background: var(--superficie-2); border-color: transparent; }
.cifras-3 .cifra strong { font-size: 1.3rem; }

/* ---------- Tarjetas con borde de neón ----------
   Verde = nueva · Naranja = aprendiendo · Azul eléctrico = repaso · Dorado = dominada. El tipo viene en data-tipo. */
[data-tipo] { --neon: var(--neon-repaso); }
[data-tipo="nueva"] { --neon: var(--neon-nueva); }
[data-tipo="aprendiendo"] { --neon: var(--neon-aprendiendo); }
[data-tipo="repaso"] { --neon: var(--neon-repaso); }
[data-tipo="dominada"] { --neon: var(--neon-dominada); }
.tarjeta .cara {
  position: relative;
  border: 2px solid var(--neon);
  background:
    radial-gradient(120% 90% at 62% 58%, color-mix(in srgb, var(--neon) var(--neon-fondo), var(--superficie)) 0%, var(--superficie) 72%);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--neon) var(--neon-brillo), transparent),
    0 0 24px color-mix(in srgb, var(--neon) var(--neon-halo), transparent),
    inset 0 0 16px color-mix(in srgb, var(--neon) var(--neon-halo), transparent);
}
.tarjeta:focus-visible { outline: none; }
.tarjeta:focus-visible .cara { outline: 3px solid var(--acento); outline-offset: 4px; }

/* Fase de la palabra, arriba a la derecha de la tarjeta */
.fase-tarjeta {
  position: absolute; top: .75rem; right: .9rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  padding: .15rem .55rem; border-radius: 999px;
  color: var(--texto-suave); background: var(--superficie-2);
}
.tarjeta .cara { padding-top: 2.6rem; } /* hueco para la etiqueta de la fase */
/* Las claves de línea de la leyenda son rayas rectas (sin la altura ni las esquinas de los cuadraditos del inicio). */
.leyenda i.clave-linea { width: 1rem; height: 0; border-radius: 0; background: none; }

/* ---------- Botones de la tarjeta: sólidos con relieve (sin neón) ----------
   Colores de siempre con texto blanco, un degradado suave, sombra y efecto de "hundirse" al pulsar. */
.boton-mostrar, .respuesta {
  border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 88%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    0 3px 0 color-mix(in srgb, var(--c) 60%, #000),
    0 8px 18px rgb(0 0 0 / .18);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.boton-mostrar:active, .respuesta:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 0 0 color-mix(in srgb, var(--c) 60%, #000), 0 3px 8px rgb(0 0 0 / .18);
}
.boton-mostrar { --c: var(--acento); color: var(--acento-texto); letter-spacing: .02em; }
.respuesta { color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .25); }
.respuesta small { color: rgb(255 255 255 / .92); }
.r-1 { --c: var(--b-otra); }
.r-2 { --c: var(--b-dificil); }
.r-3 { --c: var(--b-bien); }
.r-4 { --c: var(--b-facil); }
@media (hover: hover) and (pointer: fine) {
  .boton-mostrar:hover, .respuesta:not(:disabled):hover { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { .boton-mostrar, .respuesta { transition: none; } }

/* ---------- Reiniciar progreso (Ajustes) ---------- */
.panel-peligro { border-color: color-mix(in srgb, var(--error) 45%, var(--borde)); }
.lista-reinicio { margin: .25rem 0 1rem; padding-left: 0; list-style: none; display: grid; gap: .45rem; font-size: .92rem; color: var(--texto-suave); }
.etiqueta-reinicio { text-transform: none; font-weight: 600; color: var(--error); }
.acciones-copia-fila { display: flex; gap: .4rem; flex: none; }
.lista-copias li { flex-wrap: wrap; }
.cifras-tiempo { grid-template-columns: repeat(2, 1fr); margin: .5rem 0; }
@media (min-width: 40rem) { .cifras-tiempo { grid-template-columns: repeat(4, 1fr); } }
.cifras-tiempo .cifra { background: var(--superficie-2); border-color: transparent; }
.cifras-tiempo .cifra strong { font-size: 1.3rem; }

/* ---------- Estado de cada palabra (Explorar) ---------- */
.estado-palabra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tipo-aprendida { --color-tipo: var(--tipo-repaso); }
/* Filtros de Explorar: 2×2 en móvil (fase, prioridad, estado, categoría) y una fila en pantallas grandes. */
.filtros .categoria { grid-column: auto; }
@media (min-width: 48rem) { .filtros { grid-template-columns: repeat(4, 1fr); } }

/* ---------- My Garage: progreso por tipo (Inicio) ---------- */
.progreso-tipo { margin-bottom: 1.25rem; }
.progreso-tipo details summary { cursor: pointer; color: var(--acento); font-weight: 600; font-size: .9rem; margin: .35rem 0 .75rem; }
.progreso-tipo details .fase { margin-left: .75rem; }
.cifra small { display: block; font-size: .75rem; margin-top: .1rem; }

/* ---------- Mini diálogo (expresiones) ---------- */
.ejemplo-dialogo { align-items: center; }
.dialogo { flex: 1; display: grid; gap: .35rem; text-align: left; }
.dialogo .turno { margin: 0; display: flex; gap: .5rem; align-items: baseline; font-style: italic; }
.dialogo .quien {
  flex: none; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font-size: .72rem; font-weight: 800; font-style: normal; color: #fff;
}
.dialogo .turno-a .quien { background: var(--acento); color: var(--acento-texto); }
.dialogo .turno-b .quien { background: var(--tipo-repaso); }

/* ---------- Traducción de la frase o del diálogo ---------- */
.ejemplo p > span[lang="en"] { display: block; }
.frase-es { display: block; margin-top: .2rem; font-style: normal; font-size: .88em; line-height: 1.35; color: var(--texto-suave); }
.dialogo .texto-turno { display: flex; flex-direction: column; min-width: 0; }
.dialogo .turno { align-items: flex-start; }
.dialogo .quien { margin-top: .1rem; }

/* ---------- Tarjeta de escuchar: botón grande para volver a oír el audio ---------- */
.boton-escuchar {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.3rem 1.6rem; border-radius: 22px; border: 2px solid var(--acento);
  background: var(--acento-suave); color: var(--acento); font: inherit; font-weight: 700; cursor: pointer;
}
.boton-escuchar svg { width: 3rem; height: 3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton-escuchar.sonando { background: var(--acento); color: var(--acento-texto); }
.boton-escuchar:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* ---------- Próxima sesión y «Seguir aprendiendo» ---------- */
.panel-sesion p { margin: .35rem 0 0; }
.seguir-aprendiendo { margin-top: 1rem; display: grid; gap: .35rem; justify-items: center; text-align: center; }
.seguir-aprendiendo .ayuda { margin: 0; }
.fin .seguir-aprendiendo { margin: .5rem 0; }

/* ---------- Nombre de quien usa esta copia (variable NOMBRE_USUARIO) ---------- */
.marca-y-nombre { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.nombre-usuario {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--acento-suave); color: var(--acento); letter-spacing: .02em;
}
.acceso .nombre-usuario { font-size: .95rem; margin: -.25rem 0 0; }

/* ---------- Lista de lo que toca hoy (al pulsar «repasos» o «nuevas») ---------- */
.cifra-boton { font: inherit; color: inherit; cursor: pointer; text-align: center; }
.cifra-boton:hover { border-color: var(--acento); }
.cifra-boton:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.cifra-boton strong { text-decoration: underline; text-decoration-color: var(--acento-suave); text-underline-offset: .25em; }
.lista-hoy {
  width: min(560px, calc(100vw - 32px)); max-height: 80vh; padding: 0; border: 1px solid var(--borde, #8884);
  border-radius: 18px; background: var(--superficie, var(--fondo)); color: var(--texto);
}
.lista-hoy::backdrop { background: #0008; }
.lista-hoy-cabecera { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1rem; background: inherit; border-bottom: 1px solid var(--borde, #8884); }
.lista-hoy-cabecera h2 { margin: 0; font-size: 1.1rem; }
.lista-hoy ul { list-style: none; margin: 0; padding: .4rem 1rem 1rem; }
.lista-hoy li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0;
  border-bottom: 1px solid var(--borde, #8883); }
.lista-hoy li:last-child { border-bottom: 0; }
.lista-hoy > p { padding: 1rem; }
.etiqueta-clase { flex: none; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap; }
.clase-aprendiendo { color: var(--tipo-aprendiendo, #c2620a); }
.clase-repaso { color: var(--tipo-repaso); }
.clase-nueva { color: var(--tipo-nueva, #1f9d55); }

/* ---------- My Garage: nota EE. UU. y aviso de modo ---------- */
.nota-palabra { margin: .25rem 0 .5rem; font-size: .9rem; color: var(--texto-suave, #666); }
.aviso-seccion { border-left-width: 4px; }