/* ── Correction template ────────────────────────────────── */
.corr-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; align-self: stretch; gap: 1rem;
  padding: clamp(1rem, 5vh, 2.5rem) 1.25rem 1rem;
}
.corr-instruction { font-size: var(--ep-base); color: rgba(255,255,255,0.55); text-align: center; }

.corr-wrapper {
  position: relative;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 1.25rem 1.75rem;
  width: 100%; max-width: 1080px;
}
/* Prevent comma/punctuation zones from orphaning to a new line */
.tc-nb { white-space: nowrap; }
.corr-text {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 2.2;
  text-align: center; position: relative; z-index: 1;
  pointer-events: none; user-select: none;
  overflow-wrap: break-word; word-break: break-word;
}
.corr-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2; touch-action: pan-y; cursor: crosshair;
}

.acc-zone {
  position: relative;
  transition: background 150ms ease, color 150ms ease;
}
.acc-zone.zone-ok   { color: var(--ep-correct); background: var(--ep-correct-bg); border-radius: 4px; padding: 0 2px; }
.acc-zone.zone-miss { color: var(--ep-wrong);   background: var(--ep-wrong-bg);   border-radius: 4px; padding: 0 2px; }

/* Blank comma zone — visibility:hidden keeps natural comma width (≈ word-space)
   so the gap looks like a normal space while giving nothing away.
   padding:0 overrides the generic zone-ok/zone-miss rule → zero reflow on check. */
.acc-zone--blank {
  display: inline; visibility: hidden; padding: 0;
}
.acc-zone--blank.zone-ok,
.acc-zone--blank.zone-miss { visibility: visible; padding: 0; }

.btn-corr-check { min-width: 200px; font-size: var(--ep-base); font-weight: 700; }

/* ── Notebook skin ──────────────────────────────────────────── */
/* corr-screen uses align-self:stretch so it fills main-area height
   without depending on height:100% resolution (unreliable in flex). */
#main-area.main-area--notebook {
  padding: 0;
}

/* Equipo — cuaderno ocupa todo el ancho, sin márgenes laterales */
#main-area.main-area--equipo .corr-screen {
  padding: 0.5rem 2.5rem 0.75rem;
}
#main-area.main-area--equipo .corr-wrapper {
  max-width: none;
  border-radius: 20px;
}
/* background-clip:border-box hace que el fondo (líneas+color) rellene
   el wrapper completo — sin esto solo rellena el content-box y las
   esquinas redondeadas quedan invisibles con el texto pegado al borde */
#main-area.main-area--equipo .corr-wrapper.skin-notebook {
  background-clip: border-box;
  padding: 0.75rem 3rem 2rem;
}

/* font-size is set on the wrapper so `em` in the gradient always = lineHeight.
   _fitText() overrides font-size; em units auto-align without any JS measurement. */
.corr-wrapper.skin-notebook {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  font-size: clamp(2rem, 4.5vw, 3.8rem);   /* default before JS runs */
  background: rgba(255,255,255,0.06);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2.5em - 2px),
    rgba(255,255,255,0.18) calc(2.5em - 2px),
    rgba(255,255,255,0.18) 2.5em
  );
  background-origin: content-box;
  background-clip: content-box;
  background-size: 100% 2.5em;
  background-position: 0 2.5em;
  border-color: rgba(255,255,255,0.07);
  padding: 0.5rem 2rem 1.5rem;
}
.skin-notebook .corr-text {
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: inherit;   /* inherits from wrapper — keeps em in sync */
  line-height: 2.5;
  text-align: left;
}

/* ── Editor preview ─────────────────────────────────────── */
.corr-preview-box {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 1.5rem 2.5rem; margin-top: 1.5rem;
}
.preview-label { font-size: var(--ep-sm); color: rgba(255,255,255,0.55); margin-bottom: 0.5rem; }
.preview-text  { font-size: var(--ep-base); font-weight: 600; line-height: 2; }
.prev-zone {
  color: var(--bs-primary); background: rgba(74,144,226,0.14);
  border-radius: 4px; padding: 0 3px; border-bottom: 2px solid var(--bs-primary);
}
.prev-zone--blank {
  display: inline-block; min-width: 0.55em; color: transparent;
  border-bottom: 2px dashed var(--bs-primary); background: rgba(74,144,226,0.08);
  border-radius: 2px;
}
.char-count     { font-size: var(--ep-sm); margin-top: 0.5rem; }
.char-count--ok  { color: var(--ep-correct); }
.char-count--err { color: var(--ep-wrong); }