:root {
  --fondo: #f5f6fa;
  --superficie: #ffffff;
  --superficie-2: #eef0f6;
  --texto: #1d2130;
  --texto-suave: #5d6375;
  --borde: #dde0ea;
  --acento: #3b5bdb;
  --acento-texto: #ffffff;
  --ok: #2b8a3e;
  --ok-fondo: #e6f4ea;
  --error: #c92a2a;
  --error-fondo: #fdecec;
  --aviso: #e67700;
  --sombra: 0 1px 3px rgba(20, 25, 45, .08), 0 4px 14px rgba(20, 25, 45, .05);
  --radio: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #12141c;
    --superficie: #1c1f2b;
    --superficie-2: #262a38;
    --texto: #e8eaf2;
    --texto-suave: #9aa0b4;
    --borde: #2f3445;
    --acento: #748ffc;
    --acento-texto: #10131c;
    --ok: #69db7c;
    --ok-fondo: #1d3324;
    --error: #ff8787;
    --error-fondo: #3a1f22;
    --aviso: #ffa94d;
    --sombra: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --fondo: #12141c;
    --superficie: #1c1f2b;
    --superficie-2: #262a38;
    --texto: #e8eaf2;
    --texto-suave: #9aa0b4;
    --borde: #2f3445;
    --acento: #748ffc;
    --acento-texto: #10131c;
    --ok: #69db7c;
    --ok-fondo: #1d3324;
    --error: #ff8787;
    --error-fondo: #3a1f22;
    --aviso: #ffa94d;
    --sombra: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

a { color: var(--acento); }

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Cabecera y navegación ---------- */

.cabecera {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.marca {
  font-weight: 700;
  font-size: 19px;
  color: var(--texto);
  text-decoration: none;
}

#selector-curso {
  font: inherit;
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
}

.barra-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}

.barra-inferior a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 10px;
  font-size: 12px;
  color: var(--texto-suave);
  text-decoration: none;
}

.barra-inferior a span { font-size: 22px; line-height: 1; }
.barra-inferior a.activo { color: var(--acento); font-weight: 600; }

/* ---------- Contenido ---------- */

.contenido {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

h1 { font-size: 26px; line-height: 1.2; margin: 4px 0 16px; }
h2 { font-size: 19px; margin: 24px 0 10px; }
h3 { font-size: 17px; margin: 18px 0 6px; }

.suave { color: var(--texto-suave); }
.pequeño { font-size: 14px; }
.cargando, .vacio { color: var(--texto-suave); text-align: center; padding: 24px 8px; }

.volver {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 15px;
}

.tarjeta {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}

.lista { display: grid; gap: 10px; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.asignatura {
  border-top: 4px solid var(--c, var(--acento));
}

.asignatura .icono { font-size: 30px; line-height: 1; }
.asignatura .nombre { font-weight: 600; margin: 8px 0 2px; }

.fila {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fila .crece { flex: 1; min-width: 0; }

/* Barra de progreso */
.barra {
  height: 8px;
  border-radius: 99px;
  background: var(--superficie-2);
  overflow: hidden;
  margin-top: 8px;
}

.barra > i {
  display: block;
  height: 100%;
  background: var(--c, var(--acento));
  border-radius: 99px;
  transition: width .3s;
}

/* Exámenes */
.examen { border-left: 5px solid var(--c, var(--acento)); }

.cuenta {
  flex: none;
  text-align: center;
  min-width: 58px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--superficie-2);
}

.cuenta b { display: block; font-size: 22px; line-height: 1.1; }
.cuenta small { font-size: 11px; color: var(--texto-suave); }
.cuenta.pronto b { color: var(--aviso); }
.cuenta.hoy b { color: var(--error); }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}

.boton.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.boton.ancho { width: 100%; }
.boton[disabled], .boton.desactivado { opacity: .45; pointer-events: none; }

/* Opciones del tema */
.modo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modo .icono { font-size: 28px; }
.modo .estado { font-size: 14px; color: var(--texto-suave); }
.modo.desactivado { opacity: .5; pointer-events: none; }

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }

/* Resumen */
.resumen { line-height: 1.65; }
.resumen h3 { color: var(--acento); }
.resumen ul { padding-left: 22px; margin: 6px 0; }
.resumen li { margin: 4px 0; }
.resumen p { margin: 8px 0; }

/* Test */
.progreso-test {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--texto-suave);
}

.enunciado { font-size: 20px; font-weight: 600; margin: 18px 0; }

.opciones { display: grid; gap: 10px; }

.opcion {
  text-align: left;
  padding: 14px 16px;
  min-height: 52px;
  border-radius: 12px;
  border: 2px solid var(--borde);
  background: var(--superficie);
}

.opcion.correcta { border-color: var(--ok); background: var(--ok-fondo); }
.opcion.incorrecta { border-color: var(--error); background: var(--error-fondo); }
.opcion[disabled] { cursor: default; }
.opcion.elegida { border-color: var(--acento); background: var(--superficie-2); font-weight: 600; }

button.tarjeta { width: 100%; text-align: left; font: inherit; }
.pista { font-size: 14px; font-style: italic; color: var(--texto-suave); margin: -8px 0 10px; }

.respuesta-corta {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  resize: vertical;
}

.respuesta-corta:focus { outline: none; border-color: var(--acento); }

.enunciado-examen { font-size: 18px; margin: 4px 0 12px; }

.feedback {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie-2);
}

.feedback.ok { background: var(--ok-fondo); }
.feedback.mal { background: var(--error-fondo); }

.nota {
  font-size: 56px;
  font-weight: 800;
  text-align: center;
  margin: 8px 0 0;
}

.fallo {
  border-left: 4px solid var(--error);
}

/* Tarjetas de repaso */
.carta {
  perspective: 1000px;
  height: 300px;
  margin: 16px 0;
  cursor: pointer;
}

.carta-interior {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .45s;
  transform-style: preserve-3d;
}

.carta.girada .carta-interior { transform: rotateY(180deg); }

.cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: var(--sombra);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 21px;
  font-weight: 600;
  overflow-y: auto;
}

.cara small {
  position: absolute;
  top: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
}

.cara.detras {
  transform: rotateY(180deg);
  background: var(--superficie-2);
  font-weight: 500;
}

.botones-carta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.boton.repasar { color: var(--error); }
.boton.sabe { color: var(--ok); }

/* Recursos de cada examen: 2 × 2 */
.acciones.recursos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Examen imprimible */
.hoja {
  margin-top: 16px;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.hoja-cabecera { border-bottom: 2px solid var(--texto); padding-bottom: 12px; margin-bottom: 16px; }
.hoja-cabecera h1 { margin: 0 0 4px; font-size: 22px; }
.hoja-cabecera p { margin: 0; color: var(--texto-suave); }
.hoja-datos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-size: 15px; }

.hoja-preguntas { padding-left: 24px; margin: 0; }
.hoja-preguntas > li { margin-bottom: 18px; break-inside: avoid; }
.hoja-enunciado { font-weight: 600; margin: 0 0 6px; }
.hoja-opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }

.casilla {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  vertical-align: -2px;
}

.hoja-lineas span { display: block; height: 30px; border-bottom: 1px solid var(--borde); }

.hoja-soluciones { break-before: page; margin-top: 32px; padding-top: 16px; border-top: 2px dashed var(--borde); }
.hoja-soluciones ol { padding-left: 24px; }
.hoja-soluciones li { margin-bottom: 6px; }

@media print {
  .cabecera, .barra-inferior, .no-imprimir, .visitas { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 12pt; }
  .contenido { max-width: none; padding: 0; }
  .hoja { margin: 0; padding: 0; border: none; background: #fff; color: #000; }
  .hoja-cabecera { border-color: #000; }
  .hoja-cabecera p, .hoja-soluciones .suave { color: #444; }
  .hoja-lineas span { border-color: #999; }
  .hoja-soluciones { border: none; margin-top: 0; }
}

/* Notas visuales */
.pestanas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 12px -16px 4px;
  padding: 2px 16px 8px;
  scrollbar-width: thin;
}

.pestana {
  flex: none;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.pestana.activa { background: var(--c, var(--acento)); border-color: transparent; color: #fff; }

.bloque-notas { display: grid; gap: 12px; margin-top: 20px; }

.titulo-bloque {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--c, var(--acento));
}

.titulo-bloque::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

.rejilla-notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.nota-visual {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-top: 4px solid var(--c, var(--acento));
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.nota-visual h4 { margin: 6px 0 6px; font-size: 16px; }
.nota-visual ul { margin: 0; padding-left: 18px; font-size: 15px; }
.nota-visual li { margin: 4px 0; }

.nota-etiqueta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--acento)) 16%, transparent);
  color: var(--texto);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.chip {
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie-2);
  font-size: 14px;
}

/* Las notas usan todo el ancho en pantallas grandes */
.contenido.ancho { max-width: 1100px; }
.contenido.ancho .acciones { max-width: 640px; }

/* Contador de visitas */
.visitas {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 16px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.visitas:empty { display: none; }

/* Estadísticas */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; }
.cifras div { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.cifras b { font-size: 24px; font-variant-numeric: tabular-nums; }
.cifras span { font-size: 13px; color: var(--texto-suave); }
.tabla-desliza { overflow-x: auto; margin-bottom: 8px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
.tabla-visitas { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabla-visitas th, .tabla-visitas td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: right; white-space: nowrap; }
.tabla-visitas tr:last-child > * { border-bottom: none; }
.tabla-visitas th:first-child { text-align: left; white-space: normal; min-width: 180px; font-weight: 500; }
.tabla-visitas thead th { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.tabla-visitas td.cero { color: var(--texto-suave); opacity: .6; }