/* QuijoteLingua — monocroma. Mismo sistema que las fichas de clase (clase.cls):
   solo negro y tintas de negro, filetes horizontales, barras a la izquierda en
   vez de cajas, sin color, sin radios, sin sombras. Fuentes del sistema. */

:root {
  /* Tintas: los «grises» son tintas del mismo negro, no otro color. */
  --papel: #ffffff;
  --fondo: #f4f4f4;      /* gray 0.955 */
  --tinta: #000000;      /* gray 0    */
  --tinta-media: #6b6b6b;/* gray 0.42 */
  --tinta-clara: #b8b8b8;/* gray 0.72 */

  /* Alias del nombre viejo, para no tocar el resto de reglas ni el JS. */
  --bg: var(--papel);
  --bg-soft: var(--papel);
  --ink: var(--tinta);
  --ink-soft: var(--tinta-media);
  --line: var(--tinta-clara);

  /* Constantia y Corbel vienen con Windows. Detrás, equivalentes de macOS
     y Linux con las mismas proporciones. */
  --serif: Constantia, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --titular: Corbel, 'Segoe UI', Optima, 'Gill Sans', 'Helvetica Neue', sans-serif;

  --max: 780px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0d0d0d;
    --fondo: #1a1a1a;
    --tinta: #f2f2f2;
    --tinta-media: #9a9a9a;
    --tinta-clara: #4a4a4a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  font-variant-numeric: oldstyle-num;
  -webkit-text-size-adjust: 100%;
}

/* Títulos y etiquetas en la de palo; el texto corrido, en la serif. */
h1, h2, h3, h4 {
  font-family: var(--titular);
  line-height: 1.15; font-weight: 700; color: var(--tinta);
  font-variant-numeric: lining-num;
}
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .2em 0 .3em; }
h2 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); margin: 0 0 .5em; }
h3 { font-size: 1.05rem; margin: 0 0 .3em; }
p { margin: 0 0 .62em; }
em, i { font-style: italic; }
a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-style: dotted; }
::selection { background: var(--tinta); color: var(--papel); }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.2rem;
  border-bottom: 1.5px solid var(--tinta);
  background: var(--papel);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--tinta); }
.brand-mark { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-text { font-family: var(--titular); font-weight: 700; letter-spacing: .01em; }
.brand-text em { font-style: italic; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; font-family: var(--titular); font-size: .88rem; }
.site-nav a { text-decoration: none; color: var(--tinta-media); }
.site-nav a:hover { color: var(--tinta); text-decoration: underline; }

.lang-toggle {
  border: 1px solid var(--tinta-clara); background: transparent; color: var(--tinta);
  border-radius: 0; padding: .2rem .7rem; cursor: pointer;
  font-family: var(--titular); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.lang-toggle:hover { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }

/* ---------- layout ---------- */
/* Margen derecho más ancho, como en la ficha: es donde se escribe. */
main { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
.section { margin: 3rem 0; }
.section-sub { color: var(--tinta-media); font-style: italic; margin-top: -.4em; }
.eyebrow {
  font-family: var(--titular); color: var(--tinta-media);
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin-bottom: .5em;
}
.lead { font-size: 1.08rem; max-width: 62ch; }
.muted { color: var(--tinta-media); font-size: .88rem; }
.note { color: var(--tinta-media); font-size: .93rem; font-style: italic; }
.hint { color: var(--tinta-media); font-size: .83rem; }

/* Títulos de sección con filete debajo, como \parte */
.section > h2, .ch-section > h2 {
  padding-bottom: .12em; border-bottom: 1px solid var(--tinta);
}

/* ---------- hero ---------- */
.hero { padding: 2.5rem 0 1.2rem; border-bottom: 1px solid var(--tinta-clara); }
.hero h1 em { font-style: italic; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 1rem; }

.btn {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 0;
  border: 1px solid var(--tinta); background: transparent; color: var(--tinta);
  font-family: var(--titular); font-size: .9rem;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--tinta); color: var(--papel); }
.btn-primary:hover { background: var(--papel); color: var(--tinta); }
.btn-ghost { border-color: var(--tinta-clara); color: var(--tinta-media); }
.btn-ghost:hover { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.btn-small { padding: .25rem .7rem; font-size: .8rem; }
/* Grabando: negativo parpadeante, sin rojo. */
.btn-mic.recording { background: var(--tinta); color: var(--papel); animation: latido 1s steps(1) infinite; }
@keyframes latido { 50% { background: var(--papel); color: var(--tinta); } }
.linkish {
  background: none; border: 0; color: var(--tinta-media); font-family: var(--titular);
  font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0;
}
.linkish:hover { color: var(--tinta); }

.progress-summary { margin-top: 1.4rem; }
.progress-summary .bar { height: 6px; background: transparent; border: 1px solid var(--tinta); border-radius: 0; overflow: hidden; max-width: 420px; }
.progress-summary .bar span { display: block; height: 100%; background: var(--tinta); width: 0; transition: width .3s ease; }
.progress-summary p { font-family: var(--titular); font-size: .85rem; color: var(--tinta-media); margin: .5em 0 .2em; }

/* ---------- fichas de capítulo ---------- */
.chapter-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.chapter-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: transparent; border: 0; border-top: 1px solid var(--tinta-clara); border-radius: 0;
  padding: 1rem 1.2rem 1.1rem 0; box-shadow: none;
}
.chapter-card:hover { background: var(--fondo); }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .3rem; }
/* El número, grande y en tinta clara, como el número de \parte al margen. */
.card-num { font-family: var(--titular); font-variant-numeric: lining-num; font-size: 1.7rem; line-height: 1; color: var(--tinta-clara); font-weight: 700; }
.card-level {
  font-family: var(--titular); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-media); border: 1px solid var(--tinta-clara); border-radius: 0; padding: .08rem .5rem;
}
.chapter-card h3 { margin: 0 0 .2em; }
.card-sum { font-size: .9rem; color: var(--tinta-media); margin: 0; }
.chapter-card.done { border-top-color: var(--tinta); border-left: 2.2px solid var(--tinta); padding-left: 1rem; }
.card-badge { position: absolute; top: 1rem; right: .6rem; color: var(--tinta); font-weight: 700; }
.chapter-card.soon { opacity: .45; pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.4rem; }

/* ---------- pasos ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.steps li { display: grid; gap: .1rem; padding-left: 2.4rem; position: relative; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.05em;
  font-family: var(--titular); font-variant-numeric: lining-num;
  font-size: 1.5rem; font-weight: 700; color: var(--tinta-clara);
}
.steps strong { font-family: var(--titular); }
.steps span { color: var(--tinta-media); font-size: .93rem; }

/* ---------- página de capítulo ---------- */
/* Cabecera de ficha: filete grueso arriba, fino abajo. */
.chapter-head { padding: 1.4rem 0 .8rem; border-top: 1.5px solid var(--tinta); border-bottom: 1px solid var(--tinta-clara); margin-top: 1rem; }
.ch-section { margin: 2.8rem 0; }

.story-para {
  position: relative; background: transparent; border: 0;
  border-bottom: 1px solid var(--tinta-clara); border-radius: 0;
  padding: .8rem 2.6rem .8rem 0; margin-bottom: 0; cursor: pointer;
}
.story-para:hover { background: var(--fondo); }
.story-para .es { margin: 0; font-size: 1.08rem; }
.story-para .en { margin: .5em 0 0; color: var(--tinta-media); font-size: .95rem; padding-top: .5em; border-top: 0; padding-left: .9rem; border-left: .9px solid var(--tinta-clara); }
.para-tools { position: absolute; top: .7rem; right: 0; }
.icon-btn { background: none; border: 0; cursor: pointer; font-size: .95rem; opacity: .45; padding: .2rem; filter: grayscale(1); }
.icon-btn:hover { opacity: 1; }

/* Vocabulario: dos columnas con filete, no tarjetas. */
.vocab-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vocab-card { background: transparent; border: 0; border-bottom: 1px solid var(--tinta-clara); border-radius: 0; padding: .45rem .8rem .45rem 0; display: grid; }
.vocab-top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.vocab-es { font-weight: 700; }
.vocab-en { color: var(--tinta-media); font-size: .88rem; font-style: italic; }

/* Gramática: barra negra a la izquierda, como \begin{destacado} */
.grammar-body {
  background: transparent; border: 0; border-left: 2.2px solid var(--tinta);
  border-radius: 0; padding: .2rem 0 .2rem 1.1rem; overflow-x: auto;
}
/* Tablas: solo filetes horizontales. Nada de rejilla ni sombreado. */
.gtable { border-collapse: collapse; margin: .9em 0; font-size: .93rem; width: 100%; }
.gtable th, .gtable td { border: 0; border-bottom: .4px solid var(--tinta-clara); padding: .35rem .7rem .35rem 0; text-align: left; vertical-align: top; }
.gtable thead th { border-bottom: .7px solid var(--tinta); font-family: var(--titular); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: transparent; }
.gtable tr:last-child td { border-bottom: .7px solid var(--tinta); }

/* ---------- ejercicios ---------- */
.exercise {
  background: transparent; border: 0; border-radius: 0;
  padding: 0 0 1.4rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--tinta-clara);
}
.exercise-title {
  font-family: var(--titular); color: var(--tinta); font-size: 1rem;
  padding-bottom: .1em; border-bottom: .4px solid var(--tinta-clara); margin-bottom: .6em;
}
/* Hecho: marca al margen, sin cambiar de color. */
.exercise.is-done .exercise-title::after { content: ' ·  hecho'; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-media); }
.q-list { padding-left: 1.5rem; margin: 0 0 1rem; }
.q-list li::marker { font-family: var(--titular); font-variant-numeric: lining-num; }
.q-item { margin-bottom: .9rem; }
.q-text { margin: 0 0 .35em; }
.options { display: grid; gap: .15rem; }
.option { display: flex; align-items: flex-start; gap: .5rem; padding: .25rem .5rem .25rem 0; border: 0; border-left: 2px solid transparent; padding-left: .6rem; border-radius: 0; cursor: pointer; }
.option:hover { background: var(--fondo); }
/* Acierto y fallo sin color: negrita + barra frente a tachado gris. */
.option.ok { border-left-color: var(--tinta); font-weight: 700; }
.option.bad { border-left-color: var(--tinta-clara); color: var(--tinta-media); text-decoration: line-through; text-decoration-thickness: 1px; }

.word-bank { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .9em; }
.bank-label { font-family: var(--titular); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-media); margin-right: .2rem; }
.chip { background: transparent; border: 1px solid var(--tinta-clara); border-radius: 0; padding: .1rem .6rem; font-size: .86rem; }

/* Los huecos son rayas para escribir, como \h en la ficha. */
input[type="text"], textarea {
  font: inherit; color: var(--tinta); background: transparent;
  border: 0; border-bottom: 1px solid var(--tinta); border-radius: 0; padding: .15rem .3rem;
}
textarea { border: 1px solid var(--tinta-clara); padding: .5rem .6rem; }
input[type="text"]:focus, textarea:focus { outline: 0; border-color: var(--tinta); background: var(--fondo); }
.gap-input { margin: 0 .25rem; min-width: 6rem; }
.gap-input.ok, .dictation-input.ok { border-bottom-width: 2.2px; font-weight: 700; }
.gap-input.bad, .dictation-input.bad { border-bottom-style: dashed; color: var(--tinta-media); }
.gap-item { line-height: 2.3; }
.dictation-input, .writing-input { width: 100%; margin-top: .4rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; }
/* Solución: nota al pie, letra pequeña, como \begin{apunte} */
.solution { font-size: .88rem; color: var(--tinta-media); margin: .5em 0 0; padding-left: .9rem; border-left: .9px solid var(--tinta-clara); }

.feedback { font-family: var(--titular); font-size: .9rem; margin: .7em 0 0; min-height: 1.2em; color: var(--tinta-media); }
.feedback.good, .speak-result.good, .writing-meta.good { color: var(--tinta); font-weight: 700; }
.feedback.bad, .speak-result.bad { color: var(--tinta-media); font-style: italic; }

.target-text { font-size: 1.12rem; margin: 0; }
.target-en { color: var(--tinta-media); font-style: italic; font-size: .88rem; margin: 0 0 .4em; }
.speak-result { font-size: .92rem; min-height: 1.2em; margin: .4em 0 0; }

.prompt { font-size: 1.02rem; }
.writing-meta { font-family: var(--titular); font-size: .82rem; color: var(--tinta-media); }
.checklist { margin-top: .9rem; padding-left: .9rem; border-left: .9px solid var(--tinta-clara); border-top: 0; padding-top: 0; }
.checklist h4 { margin: 0 0 .3em; font-size: .72rem; color: var(--tinta); text-transform: uppercase; letter-spacing: .12em; }
.checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.checklist label { display: flex; gap: .5rem; align-items: flex-start; font-size: .93rem; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--tinta); }
.model-answer { margin-top: 1rem; border-top: .4px solid var(--tinta-clara); padding-top: .6rem; }
.model-answer summary { cursor: pointer; font-family: var(--titular); font-size: .86rem; color: var(--tinta-media); }
.model-answer summary:hover { color: var(--tinta); }
.model-title { font-family: var(--titular); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-media); margin: .7em 0 .3em; }
.model-en { color: var(--tinta-media); font-size: .9rem; font-style: italic; }

/* ---------- cita original ---------- */
.cervantes {
  margin: 0 0 1rem; padding: 0 0 0 1.1rem; border-left: 2.2px solid var(--tinta);
  background: transparent; border-radius: 0;
}
.quote-es { font-size: 1.1rem; font-style: italic; margin: 0 0 .5em; }
.quote-en { color: var(--tinta-media); font-size: .92rem; margin: 0; }

/* ---------- navegación de capítulo ---------- */
.chapter-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; border-top: 1.5px solid var(--tinta); padding-top: 1.4rem; }
.finish-btn.done { background: var(--tinta); color: var(--papel); }
.nav-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---------- barra de voz ---------- */
/* Ajuste, no contenido: letra pequeña de palo y filete fino, como \apunte. */
.voice-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  padding: .5rem 0 .7rem; border-bottom: .4px solid var(--tinta-clara);
  font-family: var(--titular); font-size: .8rem;
}
.voice-field { display: flex; align-items: center; gap: .45rem; }
.voice-name { text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-media); }
.voice-select {
  font-family: var(--titular); font-size: .8rem; color: var(--tinta);
  background: transparent; border: 0; border-bottom: 1px solid var(--tinta-clara);
  border-radius: 0; padding: .1rem .2rem; cursor: pointer; max-width: 15rem;
}
.voice-select:hover, .voice-select:focus { border-bottom-color: var(--tinta); outline: 0; }
.voice-select:disabled { color: var(--tinta-clara); cursor: default; }
.voice-warn { flex-basis: 100%; margin: .2rem 0 0; padding-left: .9rem; border-left: .9px solid var(--tinta-clara); color: var(--tinta-media); font-size: .78rem; line-height: 1.45; }

/* ---------- donación ---------- */
/* Enlace normal, no botón: se pide, no se vende. */
.tip { margin: 2rem 0 0; text-align: center; }
.tip-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--titular); font-size: .85rem; color: var(--tinta-media);
  text-decoration: none; border-bottom: 1px solid var(--tinta-clara); padding-bottom: .15rem;
}
.tip-link:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.tip-mark { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ilustraciones ---------- */
/* Estilo de trazo: línea negra suelta, sin relleno ni sombreado. Los SVG que
   se añadan usan currentColor, así que se invierten solos en modo oscuro. */
.dibujo { display: block; margin: 1.6rem auto; max-width: 100%; height: auto; color: var(--tinta); }
.dibujo svg, svg.dibujo { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dibujo-pie { font-family: var(--titular); font-size: .78rem; letter-spacing: .06em; text-align: center; color: var(--tinta-media); margin: -.8rem 0 1.6rem; }
/* Fotos y mapas de bits: a blanco y negro, sin excepción. */
.dibujo img, .ilustracion img { filter: grayscale(1) contrast(1.15); max-width: 100%; height: auto; }

/* Separador entre bloques, como \corte */
.corte { border: 0; border-top: .4px solid var(--tinta-clara); width: 22mm; margin: 2rem auto; }

/* ---------- pie ---------- */
.site-footer { border-top: 1px solid var(--tinta-clara); padding: 1.4rem 1.2rem 2.5rem; text-align: center; color: var(--tinta-media); font-family: var(--titular); font-size: .82rem; }
.site-footer p { max-width: 60ch; margin: 0 auto .4em; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .site-nav a[href^="#"] { display: none; }
  .story-para { padding-right: 2.2rem; }
}

/* Impresión: la web ya es la ficha. */
@media print {
  .site-header, .site-footer, .chapter-nav, .btn, .para-tools, .lang-toggle { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  main { max-width: none; }
}