/* ============================================================
   OpenWorksheets · Fichas interactivas autocorregibles
   Identidad: «cuaderno de tinta» — papel crema, cuadrícula sutil,
   tinta azul noche, acento rojo bolígrafo y verde de corrección.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;900&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --papel: #f7f2e7;
  --papel-2: #efe7d5;
  --blanco: #fffdf8;
  --tinta: #1d2c42;
  --tinta-suave: #4a5870;
  --tinta-tenue: rgba(29, 44, 66, 0.18);
  --rojo: #c63d2c;
  --rojo-oscuro: #a32f21;
  --verde: #2c7a4b;
  --verde-claro: #e2f0e6;
  --ambar: #b97f10;
  --ambar-claro: #f7ecd4;
  --rojo-claro: #f9e3df;
  --azul-claro: #e3ebf5;
  --sombra: 5px 5px 0 rgba(29, 44, 66, 0.10);
  --sombra-mini: 3px 3px 0 rgba(29, 44, 66, 0.10);
  --radio: 8px;
  --display: 'Nunito', 'Trebuchet MS', sans-serif;
  --cuerpo: 'Atkinson Hyperlegible', 'Trebuchet MS', sans-serif;
  --cuadricula: rgba(83, 119, 173, 0.07);
}

/* Modo oscuro automático (sigue preferencia del sistema) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --papel: #1d2235;
    --papel-2: #161a27;
    --blanco: #252b3b;
    --tinta: #ece4d4;
    --tinta-suave: #9aaabe;
    --tinta-tenue: rgba(236, 228, 212, 0.15);
    --rojo: #d44f3c;
    --rojo-oscuro: #b33828;
    --verde: #3da065;
    --verde-claro: rgba(58, 160, 96, 0.18);
    --ambar: #c98b18;
    --ambar-claro: rgba(201, 139, 24, 0.18);
    --rojo-claro: rgba(212, 79, 60, 0.18);
    --azul-claro: rgba(83, 119, 173, 0.22);
    --sombra: 5px 5px 0 rgba(0, 0, 0, 0.40);
    --sombra-mini: 3px 3px 0 rgba(0, 0, 0, 0.35);
    --cuadricula: rgba(180, 200, 240, 0.05);
  }
}

/* Modo oscuro forzado manualmente */
:root[data-theme='dark'] {
  --papel: #1d2235;
  --papel-2: #161a27;
  --blanco: #252b3b;
  --tinta: #ece4d4;
  --tinta-suave: #9aaabe;
  --tinta-tenue: rgba(236, 228, 212, 0.15);
  --rojo: #d44f3c;
  --rojo-oscuro: #b33828;
  --verde: #3da065;
  --verde-claro: rgba(58, 160, 96, 0.18);
  --ambar: #c98b18;
  --ambar-claro: rgba(201, 139, 24, 0.18);
  --rojo-claro: rgba(212, 79, 60, 0.18);
  --azul-claro: rgba(83, 119, 173, 0.22);
  --sombra: 5px 5px 0 rgba(0, 0, 0, 0.40);
  --sombra-mini: 3px 3px 0 rgba(0, 0, 0, 0.35);
  --cuadricula: rgba(180, 200, 240, 0.05);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  color-scheme: light dark;
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark']  { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: 2rem; font-weight: 900; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 0.8em; }
a { color: var(--rojo); }
small { color: var(--tinta-suave); }

::selection { background: var(--tinta); color: var(--papel); }

/* ---------- Barra superior ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--tinta);
  color: var(--papel);
  flex-wrap: wrap;
}
.topbar .brand {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--papel);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.topbar .brand .tag {
  font-family: var(--cuerpo);
  font-size: 0.72rem;
  font-weight: 400;
  color: #b8c4d6;
  letter-spacing: 0.04em;
}
.topbar .spacer { flex: 1; }
/* El topbar ya es oscuro: se mantiene igual en ambos modos */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .topbar { background: #1d2c42; color: #f7f2e7; }
  :root:not([data-theme='light']) .topbar .title-input { color: #f7f2e7; border-bottom-color: rgba(247, 242, 231, 0.4); }
  :root:not([data-theme='light']) .topbar .title-input::placeholder { color: #93a2b8; }
  :root:not([data-theme='light']) .topbar .brand { color: #f7f2e7; }
}
:root[data-theme='dark'] .topbar { background: #1d2c42; color: #f7f2e7; }
:root[data-theme='dark'] .topbar .title-input { color: #f7f2e7; border-bottom-color: rgba(247, 242, 231, 0.4); }
:root[data-theme='dark'] .topbar .title-input::placeholder { color: #93a2b8; }
:root[data-theme='dark'] .topbar .brand { color: #f7f2e7; }

#btnTema { color: #f7f2e7; border-color: rgba(247, 242, 231, 0.3); font-size: 1rem; padding: 5px 9px; }
#btnTema:hover { border-color: #f7f2e7; background: transparent; }

.sel-lang {
  background: transparent;
  border: 1px solid rgba(247, 242, 231, 0.3);
  color: #f7f2e7;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 0.76rem;
  font-family: var(--cuerpo);
  cursor: pointer;
  flex: 0 0 auto;
  width: auto;
  max-width: 120px;
}
.sel-lang:focus { outline: 1px solid #f7f2e7; outline-offset: 1px; }
.sel-lang option { background: #1d2c42; color: #f7f2e7; }
.topbar .title-input {
  background: transparent;
  border: none;
  border-bottom: 2px dashed rgba(247, 242, 231, 0.4);
  color: var(--papel);
  font-family: var(--display);
  font-size: 1.05rem;
  padding: 4px 6px;
  min-width: 200px;
  flex: 1 1 220px;
  max-width: 440px;
}
.topbar .title-input::placeholder { color: #93a2b8; }
.topbar .title-input:focus { outline: none; border-bottom-color: var(--papel); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 16px;
  border-radius: var(--radio);
  border: 2px solid var(--tinta);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--sombra-mini);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  text-decoration: none;
  user-select: none;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(29, 44, 66, 0.14); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(29, 44, 66, 0.14); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.primary { background: var(--rojo); border-color: var(--rojo-oscuro); color: #fff; }
.btn.dark { background: var(--tinta); color: var(--papel); }
.btn.ghost { background: transparent; box-shadow: none; border-color: var(--tinta-tenue); }
.btn.ghost:hover { border-color: var(--tinta); }
.btn.small { padding: 5px 10px; font-size: 0.8rem; box-shadow: none; }
.btn.danger { color: var(--rojo); border-color: var(--rojo); }
.btn.success { background: #b8f5cc; border-color: #7ee8a2; color: #1a2e1a; }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2px; }

.color-input-wrap { display: inline-flex; align-items: center; gap: 4px; }
.color-input-wrap input[type="color"] { width: 36px; height: 28px; padding: 2px; border-radius: 4px; border: 1px solid var(--borde); cursor: pointer; }
.color-input-wrap .btn svg { width: 14px; height: 14px; }

/* Cuentagotas de ficha (fallback sin EyeDropper API) */
.color-pick-overlay {
  position: fixed; inset: 0; z-index: 9999;
  cursor: crosshair; outline: none;
}
.color-pick-hint {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.72); color: #fff;
  padding: 6px 14px; border-radius: 20px;
  font-size: .82rem; white-space: nowrap; pointer-events: none;
}
.color-pick-swatch {
  position: fixed; display: none;
  align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none; min-width: 80px;
}
.color-pick-hex { font-size: 11px; font-weight: 600; font-family: monospace; }

/* ---------- Formularios ---------- */

label.f-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 12px 0 4px;
}
input[type='text'], input[type='number'], input[type='url'], select, textarea {
  font-family: var(--cuerpo);
  font-size: 0.95rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 2px solid var(--tinta-tenue);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tinta);
}
textarea { resize: vertical; min-height: 70px; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.92rem; }
.check-row input { width: auto; }

/* ---------- Tarjetas y página ---------- */

.page-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }

.card {
  background: var(--blanco);
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 24px;
}

.hero { text-align: center; padding: 44px 16px 26px; }
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin-bottom: 0.25em;
}
.hero h1 .subrayado {
  background-image: linear-gradient(transparent 62%, rgba(198, 61, 44, 0.35) 62%, rgba(198, 61, 44, 0.35) 92%, transparent 92%);
  padding: 0 2px;
}
.hero .lead {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  max-width: 620px;
  margin: 0 auto 8px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  margin-top: 26px;
}
.home-card { display: flex; flex-direction: column; gap: 8px; }
.home-card .num, .card > .num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--rojo);
  line-height: 1;
}
.home-card p { flex: 1; color: var(--tinta-suave); font-size: 0.95rem; }

.steps-box { margin-top: 34px; }
.steps-box ol { padding-left: 22px; }
.steps-box li { margin-bottom: 6px; }

.aviso {
  border: 2px dashed var(--ambar);
  background: var(--ambar-claro);
  border-radius: var(--radio);
  padding: 14px 18px;
  font-size: 0.92rem;
  margin-top: 28px;
}

footer.pie {
  text-align: center;
  padding: 26px 16px 40px;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
footer.pie a { color: var(--tinta-suave); }
footer.pie .pie-linea {
  display: block;
  margin-top: 6px;
}
footer.pie .pie-sep { margin: 0 4px; }
footer.pie .pie-priv {
  display: inline-block;
  position: relative;
}
footer.pie .pie-priv summary {
  cursor: pointer;
  text-decoration: underline;
  list-style: none;
}
footer.pie .pie-priv summary::-webkit-details-marker { display: none; }
footer.pie .pie-priv p {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 86vw);
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--blanco);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-align: left;
  font-size: 0.8rem;
  z-index: 50;
}

/* ---------- Diálogos ---------- */

dialog {
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: 8px 8px 0 rgba(29, 44, 66, 0.18);
  background: var(--blanco);
  color: var(--tinta);
  padding: 24px 26px;
  max-width: 560px;
  width: calc(100vw - 40px);
}
dialog::backdrop { background: rgba(29, 44, 66, 0.45); }
dialog .dlg-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
#dlgAjustes {
  max-width: 880px;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-grid fieldset {
  border: 2px solid var(--tinta-tenue);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin: 0;
}
.settings-grid legend {
  padding: 0 6px;
  font-family: var(--display);
  font-weight: 900;
  color: var(--tinta-suave);
  text-transform: uppercase;
  font-size: 0.78rem;
}
.settings-grid p {
  margin: 8px 0 0;
}
.settings-warning {
  background: var(--rojo-claro);
  border: 2px solid var(--rojo);
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--tinta);
}
.settings-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: stretch;
}
.password-row input {
  min-width: 0;
}
.pw-toggle {
  border: 2px solid var(--tinta-tenue);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.pw-toggle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.pw-toggle .eye-hide { display: none; }
.pw-toggle.on { background: var(--azul-claro); border-color: var(--tinta); }
.pw-toggle.on .eye-show { display: none; }
.pw-toggle.on .eye-hide { display: block; }
.crypto-dialog p { line-height: 1.45; margin: 8px 0; }
.crypto-dialog .warn {
  background: var(--ambar-claro);
  border: 2px solid var(--ambar);
  border-radius: 6px;
  padding: 9px 11px;
  font-weight: 700;
}
.crypto-dialog .crypto-error {
  color: var(--rojo);
  font-weight: 700;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .settings-grid,
  .settings-two {
    grid-template-columns: 1fr;
  }
}
.link-out {
  font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: 0.82rem;
  word-break: break-all;
  background: var(--azul-claro);
  border: 2px solid var(--tinta-tenue);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
}
.link-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.link-actions .btn { box-sizing: border-box; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- Fecha + hora (restricciones de acceso) ---------- */

.fecha-hora { display: grid; grid-template-columns: auto auto auto; gap: 4px; align-items: center; }
.fecha-hora input[type='date'] { grid-column: 1 / -1; width: 100%; min-width: 0; }
.fecha-hora select { padding: 4px 2px; font-size: 0.85rem; width: auto; }
.fecha-hora span { font-weight: 700; font-size: 0.85rem; }

/* ---------- Verificación de entrega ---------- */

.verify-card { font-family: inherit; font-size: 0.88rem; }
.verify-header { margin-bottom: 12px; }
.verify-meta { line-height: 1.7; }
.verify-meta strong { color: var(--tinta); }

.verify-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.82rem; }
.verify-table th { text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--tinta-tenue); color: var(--tinta-suave); font-weight: 600; white-space: nowrap; }
.verify-table td { padding: 5px 8px; border-bottom: 1px solid var(--tinta-tenue); vertical-align: top; }
.verify-table td.vr-ans { word-break: break-word; max-width: 260px; }
.verify-table tr:last-child td { border-bottom: none; }

.vr-badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.vr-badge.ok  { background: var(--verde-claro); color: var(--verde); }
.vr-badge.err { background: var(--rojo-claro);  color: var(--rojo); }
.vr-badge.partial { background: var(--ambar-claro); color: var(--ambar); }
.vr-badge.blank { background: var(--tinta-tenue); color: var(--tinta-suave); }

/* ---------- Tabla de clase ---------- */

.drop-hint { font-size: 0.82rem; color: var(--tinta-suave); margin: 4px 0 0; }
#verifySection.drag-over { outline: 3px dashed var(--azul-claro); outline-offset: -4px; background: color-mix(in srgb, var(--azul-claro) 15%, transparent); }

.class-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.class-count { font-weight: 600; font-size: 0.88rem; }
.class-actions { display: flex; gap: 6px; }
.btn.small { padding: 4px 10px; font-size: 0.82rem; }

.class-table-wrap { overflow-x: auto; }
.class-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.class-table th { text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--tinta-tenue); color: var(--tinta-suave); font-weight: 600; white-space: nowrap; }
.class-table th.cl-sort { cursor: pointer; user-select: none; }
.class-table th.cl-sort:hover { color: var(--tinta); }
.class-table td { padding: 5px 8px; border-bottom: 1px solid var(--tinta-tenue); vertical-align: middle; }
.class-table tbody tr { cursor: pointer; transition: background 0.12s; }
.class-table tbody tr:hover { background: color-mix(in srgb, var(--azul-claro) 20%, transparent); }
.class-table td.cl-num, .class-table th.cl-num { text-align: right; font-variant-numeric: tabular-nums; }
.class-table td.cl-date { white-space: nowrap; font-size: 0.78rem; color: var(--tinta-suave); }
.class-table tfoot td { padding: 6px 8px; font-size: 0.8rem; color: var(--tinta-suave); border-top: 2px solid var(--tinta-tenue); }
.class-stats { font-style: italic; }

.score-high td { color: var(--verde); }
.score-mid  td { color: var(--ambar); }
.score-low  td { color: var(--rojo); }
.score-high:hover td, .score-mid:hover td, .score-low:hover td { color: inherit; }

.dup-warn { color: var(--ambar); font-size: 0.82rem; cursor: help; }
.cl-del { width: 24px; }
.cl-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--tinta-tenue); font-size: 0.85rem; padding: 2px 4px;
  border-radius: 4px; line-height: 1; transition: color 0.15s, background 0.15s;
}
.cl-del-btn:hover { color: var(--rojo); background: var(--rojo-claro); }

/* ---------- Toast ---------- */

.wpf-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--tinta);
  color: var(--papel);
  padding: 10px 20px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
  max-width: min(520px, 90vw);
}
.wpf-toast.show { opacity: 1; transform: translate(-50%, 0); }
.wpf-toast[data-kind='error'] { background: var(--rojo-oscuro); color: #fff; }
.wpf-toast[data-kind='ok'] { background: var(--verde); color: #fff; }

/* ============================================================
   EDITOR (modo profesor)
   ============================================================ */

.ed-layout {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 330px;
  height: calc(100vh - 58px);
}

/* Paleta de tipos de campo */
.ed-palette {
  background: var(--papel-2);
  border-right: 2px solid var(--tinta);
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Grupos temáticos de la paleta (acordeón) */
.ed-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  border-radius: var(--radio);
  padding: 8px 2px 5px;
  cursor: pointer;
  color: var(--tinta);
  font-family: var(--cuerpo);
}
.ed-group + .ed-group, .ed-group-tools + .ed-group {
  margin-top: 4px;
  border-top: 1px solid var(--tinta-suave);
  border-radius: 0;
}
.ed-group .glyph {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--display);
  background: var(--tinta);
  color: var(--papel-2);
  border: 2px solid var(--tinta);
  border-radius: 6px;
  width: 46px;
  height: 30px;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-mini);
}
.ed-group .glyph svg { width: 16px; height: 16px; display: block; }
.ed-group .name {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.15;
}
.ed-group:hover .glyph { background: var(--tinta-suave); border-color: var(--tinta-suave); }
.ed-group.open .glyph { background: var(--rojo); border-color: var(--rojo-oscuro); color: #fff; }
.ed-group-tools {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.ed-group-tools.open { grid-template-rows: 1fr; }
.ed-group-tools-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.28s, padding 0.28s ease;
}
.ed-group-tools.open .ed-group-tools-inner {
  visibility: visible;
  padding: 2px 0 8px;
}
@media (prefers-reduced-motion: reduce) {
  .ed-group-tools, .ed-group-tools-inner { transition: none; }
}

.ed-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 2px solid transparent;
  background: transparent;
  border-radius: var(--radio);
  padding: 7px 2px 5px;
  cursor: pointer;
  color: var(--tinta);
  font-family: var(--cuerpo);
}
.ed-tool .glyph {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--display);
  background: var(--blanco);
  border: 2px solid var(--tinta);
  border-radius: 6px;
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-mini);
}
.ed-tool .glyph svg { width: 18px; height: 18px; display: block; }
.ed-tool .name { font-size: 0.58rem; text-align: center; line-height: 1.15; }
.ed-tool:hover .glyph { background: var(--azul-claro); }
.ed-tool.active { border-color: var(--rojo); background: var(--rojo-claro); }
.ed-tool.active .glyph { background: var(--rojo); color: #fff; border-color: var(--rojo-oscuro); }

/* Lienzo central */
.ed-canvas {
  overflow: auto;
  padding: 26px 22px 80px;
}
.ed-canvas.drawing { cursor: crosshair; }
.ed-canvas.drawing .wpf-page { cursor: crosshair; }

.ed-empty {
  max-width: 460px;
  margin: 60px auto;
  text-align: center;
}
.ed-empty-alt {
  font-size: 0.85em;
  color: var(--gris);
  margin-top: -4px;
}


.ed-pagebox {
  width: calc(860px * var(--zoom, 1));
  max-width: calc(100% * var(--zoom, 1));
  margin: 0 auto 30px;
}

/* Control de zoom anclado arriba del lienzo */
.ed-zoom-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
/* Botón de vista previa en la barra del lienzo: acento azul acorde con la zona
   de trabajo (antes era verde, pensado para la barra superior). */
.ed-preview-btn {
  background: var(--azul-claro);
  border-color: var(--tinta);
  color: var(--tinta);
}
.ed-preview-btn:hover { background: var(--blanco); }
.ed-preview-btn svg { width: 15px; height: 15px; flex-shrink: 0; vertical-align: middle; }
.zoom-ctrl {
  display: inline-flex;
  align-items: center;
  background: var(--blanco);
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-mini);
  padding: 1px;
}
.zoom-ctrl button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--cuerpo);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tinta);
  padding: 2px 9px;
  border-radius: 6px;
  line-height: 1.3;
}
.zoom-ctrl button:hover { background: var(--azul-claro); }
.zoom-ctrl .zoom-pct {
  font-size: 0.8rem;
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ed-pagehead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.ed-pagehead .spacer { flex: 1; }

.ed-add-page-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 4px auto 20px;
  width: calc(860px * var(--zoom, 1));
  max-width: 100%;
}
.ed-add-page-bar--between {
  margin-top: 6px;
  margin-bottom: 6px;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.ed-add-page-bar--between:hover {
  opacity: 1;
}
.ed-add-page-label {
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

/* Página: contenedor relativo con container queries para fuentes fluidas */
.wpf-page {
  position: relative;
  container-type: inline-size;
  background: #fff;
  border: 2px solid var(--tinta);
  box-shadow: var(--sombra);
  border-radius: 4px;
  overflow: visible;
  color: #1d2c42;
  color-scheme: light;
  /* Fijar variables al modo claro para que los campos siempre se vean sobre el PDF blanco */
  --papel: #f7f2e7;
  --papel-2: #efe7d5;
  --blanco: #fffdf8;
  --tinta: #1d2c42;
  --tinta-suave: #4a5870;
  --tinta-tenue: rgba(29, 44, 66, 0.18);
  --rojo: #c63d2c;
  --verde: #2c7a4b;
  --verde-claro: #e2f0e6;
  --ambar: #b97f10;
  --ambar-claro: #f7ecd4;
  --rojo-claro: #f9e3df;
  --azul-claro: #e3ebf5;
  --sombra-mini: 3px 3px 0 rgba(29, 44, 66, 0.10);
}
.wpf-page > img.fondo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  pointer-events: none;
  user-select: none;
}

/* Campos en el editor */
.ed-field {
  position: absolute;
  border: 2px solid var(--tinta-suave);
  background: rgba(227, 235, 245, 0.55);
  border-radius: 4px;
  cursor: grab;
  font-size: calc(1.6cqw * var(--fs, 1));
  display: flex;
  align-items: flex-start;
  overflow: visible;
  transform-origin: center center;
}
.ed-field:active { cursor: grabbing; }
/* Decorativos en el editor: vista fiel de lo que verá el alumno */
.ed-field.ed-field-cover { background: #fff; border-style: dashed; }
.ed-field.ed-field-label { background: transparent; border-style: dashed; }
.ed-label-prev {
  position: absolute;
  inset: 0;
  padding: 0.15em 0.3em;
  white-space: pre-wrap;
  line-height: 1.35;
  pointer-events: none;
  overflow: hidden;
}
.ed-field.ed-field-label .chip,
.ed-field.ed-field-cover .chip,
.ed-field.ed-field-image .chip { opacity: 0; transition: opacity 0.15s; }
.ed-field.ed-field-label:hover .chip, .ed-field.ed-field-cover:hover .chip, .ed-field.ed-field-image:hover .chip,
.ed-field.ed-field-label.selected .chip, .ed-field.ed-field-cover.selected .chip, .ed-field.ed-field-image.selected .chip { opacity: 1; }
.ed-field .chip {
  font-size: 0.62em;
  font-weight: 700;
  background: var(--tinta-suave);
  color: #fff;
  padding: 1px 7px;
  border-bottom-right-radius: 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.ed-field.selected { border-color: var(--rojo); background: rgba(198, 61, 44, 0.14); z-index: 5; }
.ed-field.selected .chip { background: var(--rojo); }
.ed-field .handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  background: var(--rojo);
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
}
.ed-field.selected .handle { display: block; }
.ed-field .rot-handle {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: var(--tinta);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  z-index: 10;
  line-height: 1;
}
.ed-field .rot-handle::after { content: '↻'; }
.ed-field.selected .rot-handle { display: flex; }
.rot-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.rot-row input[type=number] { width: 78px; }

.ed-zone {
  position: absolute;
  border: 2px dashed var(--ambar);
  background: rgba(185, 127, 16, 0.13);
  border-radius: 4px;
  cursor: grab;
  font-size: calc(1.4cqw * var(--fs, 1));
}
.ed-zone .chip {
  font-size: 0.62em;
  font-weight: 700;
  background: var(--ambar);
  color: #fff;
  padding: 1px 6px;
  border-bottom-right-radius: 5px;
  pointer-events: none;
}
.ed-zone.selected { border-style: solid; border-color: var(--rojo); z-index: 5; }
.ed-zone .handle {
  position: absolute;
  right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  background: var(--ambar);
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
}
.ed-zone.selected .handle { display: block; }

/* Pieza recortada del PDF (editor, modo "crops" de dragdrop) */
.ed-piece {
  position: absolute;
  border: 2px solid var(--rojo);
  border-radius: 4px;
  cursor: grab;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.ed-piece-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.ed-piece.selected { border-color: var(--tinta); z-index: 6; }
.ed-piece .handle {
  position: absolute;
  right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  background: var(--rojo);
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
  z-index: 2;
}
.ed-piece.selected .handle { display: block; }

/* Elección de medio para «arrastrar a zonas» (pregunta inicial) */
.ed-mode-choice { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.ed-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.ed-mode-card:hover,
.ed-mode-card:focus-visible {
  border-color: var(--rojo);
  background: var(--rojo-claro);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  outline: none;
}
.ed-mode-card-radio {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 2px solid var(--tinta-suave);
  border-radius: 50%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ed-mode-card:hover .ed-mode-card-radio,
.ed-mode-card:focus-visible .ed-mode-card-radio {
  border-color: var(--rojo);
  box-shadow: inset 0 0 0 3px var(--rojo);
}
.ed-mode-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.ed-mode-card-title { font-weight: 700; color: var(--tinta); }
.ed-mode-card-desc { font-size: 0.85rem; color: var(--tinta-suave); line-height: 1.35; }
.ed-mode-card-arrow { flex: 0 0 auto; display: flex; color: var(--tinta-suave); transition: color 0.12s ease; }
.ed-mode-card-arrow svg { width: 20px; height: 20px; }
.ed-mode-card:hover .ed-mode-card-arrow,
.ed-mode-card:focus-visible .ed-mode-card-arrow { color: var(--rojo); }
.ed-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}
.ed-mode-head-label { font-size: 0.9rem; color: var(--tinta-suave); }
.ed-mode-head-label strong { color: var(--tinta); }

/* Rectángulo de dibujo */
.ed-rubber {
  position: absolute;
  border: 2px dashed var(--rojo);
  background: rgba(198, 61, 44, 0.08);
  pointer-events: none;
  z-index: 10;
}

/* Panel lateral */
.ed-panel {
  background: var(--blanco);
  border-left: 2px solid var(--tinta);
  overflow-y: auto;
  padding: 16px 18px 50px;
}
.ed-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--tinta-tenue);
  padding-bottom: 8px;
}
.ed-panel .tipo-chip {
  font-size: 0.68rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 20px;
  padding: 2px 10px;
  font-family: var(--cuerpo);
  font-weight: 400;
}
.ed-panel-vacio { color: var(--tinta-suave); font-size: 0.9rem; }
.ed-panel-tool-hint { color: var(--tinta); }
.ed-tool-hint-header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; margin-bottom: 10px; }
.ed-tool-hint-header .glyph { display: flex; align-items: center; flex-shrink: 0; }
.ed-tool-hint-header .glyph svg { width: 22px; height: 22px; stroke: var(--acento); }
.ed-panel-tool-hint p { font-size: 0.88rem; line-height: 1.5; color: var(--tinta-suave); margin: 0; white-space: pre-line; }
.ed-acciones { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.ed-acciones .btn svg, .ed-pagehead .btn svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; }

.ed-accordion {
  margin-top: 12px;
  border-top: 2px dashed var(--tinta-tenue);
}
.ed-accordion-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 0 6px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-family: var(--cuerpo);
}
.ed-accordion-toggle:hover { color: var(--tinta); }
.ed-accordion-arrow { font-style: normal; transition: transform 0.18s; display: inline-flex; align-items: center; }
.ed-accordion-arrow svg { width: 14px; height: 14px; }
.ed-accordion.open .ed-accordion-arrow { transform: rotate(90deg); }
.ed-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.ed-accordion-body-inner {
  overflow: hidden;
  padding-bottom: 0;
  transition: padding-bottom 0.25s ease;
}
.ed-accordion.open .ed-accordion-body { grid-template-rows: 1fr; }
.ed-accordion.open .ed-accordion-body-inner { padding-bottom: 6px; }

.opt-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.opt-row { display: flex; align-items: center; gap: 6px; }
.opt-row input[type='text'] { flex: 1; }
.opt-row .marca { width: auto; }
.opt-quitar {
  border: none;
  background: none;
  color: var(--rojo);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.add-row { margin-top: 8px; }

/* Resumen de zona en el panel de dragdrop: se toca para abrir su editor */
.zone-summary {
  flex: 1;
  text-align: left;
  background: none;
  border: 1px dashed var(--tinta-tenue);
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  color: var(--tinta);
  font: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zone-summary:hover { border-color: var(--rojo); color: var(--rojo); }

.lista-campos { margin-top: 18px; border-top: 2px dashed var(--tinta-tenue); padding-top: 12px; }
.lista-campos .item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.lista-campos .item:hover { background: var(--azul-claro); }
.lista-campos .item.sel { background: var(--rojo-claro); }
.lista-campos .item .g {
  font-family: var(--display);
  font-weight: 700;
  width: 34px;
  text-align: center;
  flex: none;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lista-campos .item .g svg { width: 14px; height: 14px; flex-shrink: 0; }
.lista-campos .item .resumen {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tinta-suave);
}
.lista-campos .item .pts { font-size: 0.72rem; color: var(--tinta-suave); flex: none; }

.zona-bloque {
  border: 2px dashed var(--ambar);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 8px;
  background: var(--ambar-claro);
  font-size: 0.85rem;
}
.ans-img-btn {
  width: 2.6em; height: 2.2em;
  border: 1.5px dashed var(--tinta-suave);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--azul-claro);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-size: 1em;
  color: var(--tinta-suave);
}
.ans-img-btn::before { content: '🖼'; }
.ans-img-btn.has-img::before { content: ''; }
.ans-img-btn:hover { border-color: var(--tinta); background: var(--ambar-claro); }
.tok-thumb {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.tok-thumb-xs {
  height: 1.8em; width: auto;
  object-fit: contain;
  border-radius: 3px;
  border: 1px solid var(--tinta-suave);
  flex-shrink: 0;
}

/* ============================================================
   CAMPOS DEL ALUMNO
   ============================================================ */

.wpf-field {
  position: absolute;
  font-size: calc(1.6cqw * var(--fs, 1));
  z-index: 2;
  transform-origin: center center;
  color: var(--field-fg, var(--tinta));
}
.wpf-field input, .wpf-field select, .wpf-field button {
  font-family: var(--cuerpo);
  font-size: inherit;
  color-scheme: light;
}

.wpf-input {
  width: 100%;
  height: 100%;
  min-height: 1.7em;
  border: 2px solid var(--tinta);
  border-radius: 5px;
  padding: 0.12em 0.45em;
  background: var(--field-bg, rgb(255, 253, 248));
  color: var(--tinta);
  box-shadow: var(--sombra-mini);
}
.wpf-field-text .wpf-input, .wpf-field-number .wpf-input { position: absolute; inset: 0; height: auto; }
.wpf-input:focus, .wpf-select:focus, .wpf-gap-input:focus {
  outline: none;
  border-color: var(--rojo);
}

.wpf-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0.13em solid var(--tinta);
  border-radius: 0.35em;
  padding: 0.12em 1.4em 0.12em 0.3em;
  background-color: var(--field-bg, rgb(255, 253, 248));
  /* flecha en SVG escalada en em para que acompañe al tamaño de la página */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d2c42' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45em center;
  background-size: 0.7em;
  color: var(--tinta);
  box-shadow: var(--sombra-mini);
  font-size: 0.92em;
}

.wpf-choices, .wpf-tf {
  background: var(--field-bg, rgb(255, 253, 248));
  border: 2px solid var(--tinta);
  border-radius: 6px;
  padding: 0.25em 0.4em;
  box-shadow: var(--sombra-mini);
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  /* el texto de las opciones algo menor que el del enunciado: cabe mejor en
     cajas estrechas sin romper la proporción sobre el PDF */
  font-size: 0.9em;
}
/* Opciones en horizontal: ocupan la fila y saltan a la siguiente si no caben. */
.wpf-choices--row,
.wpf-tf--row { flex-direction: row; flex-wrap: wrap; gap: 0.18em 0.9em; }
.wpf-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  cursor: pointer;
  line-height: 1.35;
}
/* Controles dibujados a mano y dimensionados en em: así escalan con la página
   (font-size en cqw) y mantienen la proporción sobre el fondo del PDF también
   en móvil, donde los radio/checkbox nativos conservan un tamaño fijo. */
.wpf-choice input[type='radio'],
.wpf-choice input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  min-width: 0.95em;
  margin: 0.18em 0 0;
  padding: 0;
  border: 0.13em solid var(--tinta);
  background: #fff;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.wpf-choice input[type='radio'] { border-radius: 50%; }
.wpf-choice input[type='checkbox'] { border-radius: 0.2em; }
.wpf-choice input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 0.17em;
  border-radius: 50%;
  background: var(--rojo);
}
.wpf-choice input[type='checkbox']:checked {
  background: var(--rojo);
  border-color: var(--rojo);
}
.wpf-choice input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 0.28em;
  top: 0.05em;
  width: 0.26em;
  height: 0.5em;
  border: solid #fff;
  border-width: 0 0.13em 0.13em 0;
  transform: rotate(45deg);
}
.wpf-choice input:focus-visible { outline: 0.12em solid var(--rojo); outline-offset: 0.1em; }

/* Elementos decorativos: texto libre y tapado de zonas */
.wpf-label-text {
  white-space: pre-wrap;
  line-height: 1.35;
}
.wpf-cover-fill {
  position: absolute;
  inset: 0;
}
.wpf-field-label, .wpf-field-cover, .wpf-field-image { pointer-events: none; }
.wpf-field-cover { z-index: 1; }
.wpf-field-image { overflow: hidden; }
.wpf-img-decor { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Formas de dibujo (línea, flecha, rectángulo, elipse) */
.wpf-shape { display: block; width: 100%; height: 100%; overflow: visible; }
.wpf-field-line, .wpf-field-arrow, .wpf-field-rect, .wpf-field-ellipse { pointer-events: none; }
/* Editor: formas */
.ed-field-line, .ed-field-arrow, .ed-field-rect, .ed-field-ellipse {
  background: transparent;
  border-style: dashed;
  border-color: var(--tinta-tenue);
  overflow: visible;
}
.ed-field .wpf-shape { position: absolute; inset: 0; pointer-events: none; }
.ed-field-line .chip, .ed-field-arrow .chip, .ed-field-rect .chip, .ed-field-ellipse .chip {
  opacity: 0;
  transition: opacity 0.15s;
}
.ed-field-line:hover .chip, .ed-field-arrow:hover .chip, .ed-field-rect:hover .chip, .ed-field-ellipse:hover .chip,
.ed-field-line.selected .chip, .ed-field-arrow.selected .chip, .ed-field-rect.selected .chip, .ed-field-ellipse.selected .chip {
  opacity: 1;
}
/* Editor: campo imagen */
.ed-field-image { background: rgba(83,119,173,0.06); border-style: dashed; overflow: hidden; }
.ed-img-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }
.img-field-preview { margin-bottom: 8px; border: 1px solid var(--tinta-suave); border-radius: 4px; overflow: hidden; max-height: 12em; display: flex; align-items: center; justify-content: center; background: var(--azul-claro); }
.img-field-thumb { max-width: 100%; max-height: 12em; object-fit: contain; display: block; }

.wpf-gaps {
  background: var(--field-bg, rgb(255, 253, 248));
  border: 2px solid var(--tinta);
  border-radius: 6px;
  padding: 0.4em 0.6em;
  box-shadow: var(--sombra-mini);
  line-height: 2;
  white-space: pre-wrap; /* respeta los saltos de línea del texto del docente */
}
/* input.* para ganar a la regla global input[type='text'] { width: 100% } */
input.wpf-gap-input {
  display: inline-block;
  border: none;
  border-bottom: 2px solid var(--tinta);
  background: var(--azul-claro);
  border-radius: 4px 4px 0 0;
  padding: 0.05em 0.4em;
  margin: 0 0.15em;
  font-size: inherit;
  color: var(--tinta);
  width: auto;
}

.wpf-match {
  background: var(--field-bg, rgb(255, 253, 248));
  border: 2px solid var(--tinta);
  border-radius: 6px;
  padding: 0.35em 0.55em;
  box-shadow: var(--sombra-mini);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.wpf-match-row { display: flex; align-items: center; gap: 0.6em; }
.wpf-match-left { flex: 1; }
.wpf-match-row .wpf-select { flex: 1.2; width: auto; box-shadow: none; }

.wpf-order {
  background: var(--field-bg, rgb(255, 253, 248));
  border: 0.14em solid var(--tinta);
  border-radius: 6px;
  padding: 0.3em 0.45em;
  box-shadow: var(--sombra-mini);
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}
/* En horizontal los elementos se colocan en fila y saltan si no caben. */
.wpf-order--row { flex-direction: row; flex-wrap: wrap; gap: 0.3em; }
.wpf-order-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: var(--azul-claro);
  border: 0.1em solid var(--tinta-tenue);
  border-radius: 5px;
  padding: 0.1em 0.45em;
  cursor: grab;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.wpf-order-item:active { cursor: grabbing; }
.wpf-order-item.dragging { opacity: 0.45; }
.wpf-order-item.drag-over {
  border-color: var(--rojo);
  background: var(--ambar-claro);
  transform: scale(1.02);
}
.wpf-order-num {
  font-family: var(--display);
  font-weight: 700;
  color: var(--rojo);
  width: 1.2em;
  flex: none;
}
.wpf-order-text { flex: 1; }
.wpf-order-btns { display: flex; gap: 0.2em; }
.wpf-mini-btn {
  border: 0.1em solid var(--tinta);
  background: var(--blanco);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7em;
  padding: 0.1em 0.4em;
  color: var(--tinta);
}
.wpf-mini-btn:disabled { opacity: 0.3; cursor: default; }

/* Arrastrar a zonas */
.wpf-tray {
  background: var(--field-bg, rgb(255, 253, 248));
  border: 0.14em solid var(--tinta);
  border-radius: 6px;
  padding: 0.3em 0.5em;
  box-shadow: var(--sombra-mini);
}
.wpf-tray-label { font-size: 0.68em; color: var(--tinta-suave); margin-bottom: 0.25em; }
.wpf-tray-tokens { display: flex; flex-wrap: wrap; gap: 0.35em; }
.wpf-tray-empty { font-size: 0.8em; color: var(--tinta-suave); font-style: italic; }
.wpf-token {
  border: 0.14em solid var(--tinta);
  background: var(--azul-claro);
  border-radius: 20px;
  padding: 0.1em 0.7em;
  cursor: pointer;
  font-size: 0.92em;
  color: var(--tinta);
  box-shadow: var(--sombra-mini);
}
.wpf-token.has-img {
  border-radius: 8px;
  padding: 0.2em;
  background: #fff;
  line-height: 0;
}
.wpf-token-img {
  display: block;
  max-width: 5em;
  max-height: 4em;
  width: auto;
  height: auto;
  border-radius: 4px;
  pointer-events: none;
}
.wpf-token.selected { background: var(--rojo); color: #fff; border-color: var(--rojo-oscuro); }
.wpf-token.has-img.selected { background: var(--rojo); }
.wpf-zone {
  position: absolute;
  border: 0.14em dashed var(--tinta-suave);
  background: rgba(227, 235, 245, 0.5);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  cursor: pointer;
  font-size: calc(1.5cqw * var(--fs, 1));
  padding: 0.2em 0.3em;
  z-index: 2;
  overflow-y: auto;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.wpf-zone.armed { border-color: var(--rojo); background: rgba(198, 61, 44, 0.10); }
.wpf-zone.filled { border-style: solid; background: var(--field-bg, rgb(255, 253, 248)); }
.wpf-zone.drag-over { border-style: solid; border-color: var(--tinta); background: var(--azul-claro); transform: scale(1.03); }
.wpf-zone.mark-ok { border-color: var(--verde); background: var(--verde-claro); }
.wpf-zone.mark-ko { border-color: var(--rojo); background: var(--rojo-claro); }
.wpf-token.dragging, .wpf-zone-chip.dragging { opacity: 0.4; }
.wpf-zone-chip {
  border: 0.1em solid var(--tinta);
  background: var(--azul-claro);
  border-radius: 20px;
  padding: 0.05em 0.55em;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.3;
}
.wpf-zone-chip.has-img {
  border-radius: 6px;
  padding: 0.1em;
  background: #fff;
  line-height: 0;
}
.wpf-zone-chip .wpf-token-img {
  max-width: 3.5em;
  max-height: 3em;
}
.wpf-zone-chip:not(:disabled):hover { background: var(--ambar-claro); border-color: var(--ambar); }
.wpf-zone-chip.mark-ok { border-color: var(--verde); background: var(--verde-claro); cursor: default; }
.wpf-zone-chip.mark-ko { border-color: var(--rojo); background: var(--rojo-claro); cursor: default; }

/* ── Arrastrar a zonas: modo recorte del PDF ─────────────── */
/* El campo no usa bandeja; no debe interceptar clics sobre la página. */
.wpf-crops-host { pointer-events: none; }

/* Hueco de origen de una pieza, sobre la página. Tapa el contenido
   original con el fondo de la página para que quede "vacío" al arrastrar. */
/* El hueco ocupa exactamente el rectángulo original: sin borde que reste
   espacio (el contorno discontinuo va por outline, que no afecta al tamaño). */
.wpf-hole {
  position: absolute;
  background: var(--field-bg, #fff);
  border-radius: 4px;
  box-sizing: border-box;
  transition: outline-color 0.12s ease, background 0.12s ease;
}
.wpf-hole.empty { outline: 0.12em dashed rgba(0, 0, 0, 0.28); outline-offset: -0.12em; }
.wpf-hole.armed { outline: 0.12em solid var(--rojo); outline-offset: -0.12em; background: rgba(198, 61, 44, 0.08); }
.wpf-hole.drag-over { outline: 0.14em solid var(--tinta); outline-offset: -0.14em; background: var(--azul-claro); }
.wpf-hole.mark-ko { outline: 0.14em solid var(--rojo); outline-offset: -0.14em; background: var(--rojo-claro); }
.wpf-hole-piece {
  display: block;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: grab;
}
.wpf-hole-piece:disabled { cursor: default; }
.wpf-hole-piece.selected { outline: 0.16em solid var(--rojo); outline-offset: -0.16em; }
/* El recorte conserva su tamaño original: llena el hueco sin tope. */
.wpf-hole-piece .wpf-token-img {
  display: block;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  border-radius: 0;
  object-fit: fill;
}

/* ── Casillas (checkbox) ─────────────── */
/* El campo es solo un ancla transparente; las casillas se colocan sobre la página. */
.wpf-cb-hostfield { background: transparent !important; border: none !important; pointer-events: none; }
.wpf-field-checkbox > .wpf-badge,
.wpf-field-checkbox > .wpf-expected { display: none; }

.wpf-cbbox {
  position: absolute;
  cursor: pointer;
  color: var(--tinta);
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
.wpf-cb-svg { display: block; width: 100%; height: 100%; }
.wpf-cb-frame { fill: #fff; }
.wpf-cb-tick { opacity: 0; }
.wpf-cbbox.checked .wpf-cb-tick { opacity: 1; }
.wpf-cbbox:not(.disabled):hover .wpf-cb-frame { fill: var(--azul-claro); }

/* Corrección por casilla */
.wpf-cbbox.cb-ok  { color: var(--verde); }
.wpf-cbbox.cb-ok  .wpf-cb-frame { fill: var(--verde-claro); }
.wpf-cbbox.cb-ko  { color: var(--rojo); }
.wpf-cbbox.cb-ko  .wpf-cb-frame { fill: var(--rojo-claro); }
.wpf-cbbox.cb-ko  .wpf-cb-tick { opacity: 1; }
/* Casilla correcta que el alumno dejó sin marcar: se muestra la solución */
.wpf-cbbox.cb-missing { color: var(--verde); }
.wpf-cbbox.cb-missing .wpf-cb-frame { fill: none; stroke-dasharray: 3 2.5; }
.wpf-cbbox.cb-missing .wpf-cb-tick { opacity: 0.55; }

/* ── Huecos sobre el documento (textboxes) ─── */
/* El campo es solo un ancla transparente; los huecos se colocan sobre la página. */
.wpf-tb-hostfield { background: transparent !important; border: none !important; pointer-events: none; }
.wpf-field-textboxes > .wpf-badge,
.wpf-field-textboxes > .wpf-expected { display: none; }

.wpf-tbbox {
  position: absolute;
  z-index: 3;
  min-height: 0;
}
.wpf-tbbox.tb-ok { border-color: var(--verde); background: var(--verde-claro); }
.wpf-tbbox.tb-ko { border-color: var(--rojo); background: var(--rojo-claro); }
/* Solución mostrada bajo un hueco incorrecto al corregir */
.wpf-tb-exp {
  position: absolute;
  z-index: 4;
  font-size: 0.8em;
  color: var(--verde);
  font-weight: 600;
  background: var(--verde-claro);
  border: 1px solid var(--verde);
  border-radius: 4px;
  padding: 0 5px;
  margin-top: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Arrowmatch ─────────────────────── */
.wpf-field-arrowmatch { overflow: visible; }

.wpf-arrowmatch {
  display: grid;
  grid-template-columns: 44% 12% 44%;
  position: relative;
  min-height: 6em;
  padding: 0.3em 0;
  user-select: none;
}

.wpf-am-col { display: flex; flex-direction: column; gap: 0.35em; padding: 0.3em 0; }

.wpf-am-item {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 2.2em;
}

.wpf-am-left-col  .wpf-am-item { justify-content: flex-start; }
.wpf-am-right-col .wpf-am-item { justify-content: flex-end; }

.wpf-am-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 5px;
  background: rgba(255,253,248,0.95);
  padding: 0.3em 0.45em;
  overflow: hidden;
  box-shadow: var(--sombra-mini);
}

.wpf-am-dot {
  position: absolute;
  /* En cqw (relativo al ancho de la página) para que el punto escale con
     la ficha: los hotspots se colocan sobre la página, no dentro del campo,
     así que no heredan su font-size en cqw y un tamaño en em/px no escalaría. */
  width: calc(1.5cqw * var(--fs, 1)); height: calc(1.5cqw * var(--fs, 1));
  border-radius: 50%;
  background: #5377ad;
  cursor: pointer;
  z-index: 3;
  top: 50%; transform: translateY(-50%);
  transition: background 0.12s, transform 0.1s;
}
.wpf-am-left-col  .wpf-am-dot { right: calc(-0.75cqw * var(--fs, 1)); }
.wpf-am-right-col .wpf-am-dot { left:  calc(-0.75cqw * var(--fs, 1)); }

.wpf-am-dot.am-dot-active {
  background: var(--rojo);
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 0 4px rgba(198,61,44,0.2);
}
.wpf-am-dot.am-dot-connected { background: #2a9d8f; }

.am-disabled .wpf-am-dot { cursor: default; pointer-events: none; }

.wpf-arrowmatch.am-pending .wpf-am-right-col .wpf-am-dot {
  animation: am-pulse 0.9s ease infinite;
}
@keyframes am-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83,119,173,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(83,119,173,0); }
}

.wpf-am-img  { max-width: 100%; max-height: 100%; object-fit: contain; }
.wpf-am-text { font-size: calc(0.85em * var(--fs, 1)); text-align: center; word-break: break-word; line-height: 1.2; }
.wpf-am-empty { font-size: 0.8em; color: var(--tinta-suave); font-style: italic; grid-column: 1/-1; text-align: center; }

.wpf-am-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none; /* SVG transparente; los hit-paths usan atributo SVG propio */
  z-index: 2;
}
.wpf-am-line { fill: none; stroke: #3a7bcc; stroke-width: 2; pointer-events: none; }
.wpf-am-hit  { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.wpf-am-line.am-line-ok      { stroke: #2a9d8f; stroke-width: 2.5; }
.wpf-am-line.am-line-ko      { stroke: var(--rojo); }
.wpf-am-line.am-line-missing { stroke: #2a9d8f; stroke-dasharray: 6 4; opacity: 0.55; }

/* Arrowmatch modo hotspot (player) */
.wpf-am-hotspot-field { background: transparent !important; border: none !important; pointer-events: none; }
.wpf-am-hotspot {
  position: absolute;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  z-index: 3;
}
.wpf-am-hs-left  { border: 2px solid #5377ad; background: rgba(83,119,173,0.10); justify-content: flex-end; }
.wpf-am-hs-right { border: 2px solid #2a9d8f; background: rgba(42,157,143,0.10); justify-content: flex-start; }
.wpf-am-hs-left  .wpf-am-dot { right: calc(-0.75cqw * var(--fs, 1)); left: auto; }
.wpf-am-hs-right .wpf-am-dot { left: calc(-0.75cqw * var(--fs, 1)); right: auto; }
.wpf-am-hotspot .wpf-am-dot { position: absolute; top: 50%; transform: translateY(-50%); }
.wpf-am-hotspot.am-dot-active { border-style: solid; }
.wpf-am-svg-page {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

/* Campo arrowmatch en modo hotspot: no arrastrable, solo muestra el chip */
.ed-am-hotspot-field {
  background: transparent !important;
  border: none !important;
  pointer-events: none;
}
.ed-am-hotspot-field .chip { pointer-events: auto; cursor: pointer; }
.ed-am-hotspot-field .handle { display: none !important; }

/* Editor: overlays de items arrowmatch sobre la página */
.ed-amitem {
  position: absolute;
  border-radius: 4px;
  cursor: grab;
  font-size: calc(1.4cqw * var(--fs, 1));
  border: 2px dashed;
}
.ed-amitem-left  { border-color: #5377ad; background: rgba(83,119,173,0.13); }
.ed-amitem-right { border-color: #2a9d8f; background: rgba(42,157,143,0.13); }
.ed-amitem .chip {
  font-size: 0.62em; font-weight: 700;
  color: #fff; padding: 1px 6px;
  border-bottom-right-radius: 5px;
  pointer-events: none;
}
.ed-amitem-left  .chip { background: #5377ad; }
.ed-amitem-right .chip { background: #2a9d8f; }
.ed-amitem.selected { border-style: solid; z-index: 5; }
.ed-amitem-left.selected  { border-color: #3a5a8a; }
.ed-amitem-right.selected { border-color: #1a7a70; }
.ed-amitem .handle {
  position: absolute;
  right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
}
.ed-amitem-left  .handle { background: #5377ad; }
.ed-amitem-right .handle { background: #2a9d8f; }
.ed-amitem.selected .handle { display: block; }

/* Editor: campo de casillas (host transparente + overlays) */
.ed-cb-hostfield {
  background: transparent !important;
  border: none !important;
  pointer-events: none;
}
.ed-cb-hostfield .chip { display: none; }
.ed-cb-hostfield .handle { display: none !important; }

.ed-cbbox {
  position: absolute;
  cursor: grab;
  color: var(--tinta-suave);
}
.ed-cbbox .wpf-cb-svg { display: block; width: 100%; height: 100%; }
.ed-cbbox .wpf-cb-frame { fill: rgba(255, 255, 255, 0.85); }
.ed-cbbox .wpf-cb-tick { opacity: 0; }
/* Casilla marcada como correcta: se muestra el ✓ y en verde (clave de respuestas) */
.ed-cbbox.correct { color: var(--verde); }
.ed-cbbox.correct .wpf-cb-tick { opacity: 1; }
.ed-cbbox.selected { color: var(--rojo); z-index: 5; }
.ed-cbbox.selected .wpf-cb-frame { fill: rgba(198, 61, 44, 0.12); }
.ed-cbbox .handle {
  position: absolute;
  right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  background: var(--rojo);
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
}
.ed-cbbox.selected .handle { display: block; }

/* Botón de la lista de casillas en el panel */
.cb-locate {
  flex: 1;
  text-align: left;
  background: none;
  border: 1px dashed var(--tinta-tenue);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--tinta);
  font: inherit;
}
.cb-locate:hover { border-color: var(--rojo); color: var(--rojo); }
.cfg-hint { font-size: 0.82rem; color: var(--tinta-suave); margin: 6px 0 0; }

/* Editor: campo de huecos (host transparente + overlays de texto) */
.ed-tb-hostfield {
  background: transparent !important;
  border: none !important;
  pointer-events: none;
}
.ed-tbbox {
  position: absolute;
  border: 2px dashed #5377ad;
  background: rgba(83, 119, 173, 0.13);
  border-radius: 4px;
  cursor: grab;
  overflow: hidden;
  font-size: calc(1.4cqw * var(--fs, 1));
}
.ed-tbbox .chip {
  display: block;
  font-size: 0.7em;
  font-weight: 700;
  color: #3a5a8a;
  padding: 1px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.ed-tbbox.selected { border-style: solid; border-color: var(--rojo); z-index: 5; }
.ed-tbbox .handle {
  position: absolute;
  right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  background: #5377ad;
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
}
.ed-tbbox.selected .handle { display: block; }

/* Editor: nueva lista de pares unificada */
.am-pairs-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.am-pair-row2 { display: flex; align-items: center; gap: 4px; }
.am-pair-num { font-weight: 700; color: var(--tinta-suave); font-size: .82em; min-width: 1.4em; text-align: right; }
.am-side { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.am-side-left  { justify-content: flex-end; }
.am-side-right { justify-content: flex-start; }
.am-arrow { font-size: 1.1em; color: var(--tinta-suave); flex-shrink: 0; }
.f-input-xs { flex: 1; min-width: 0; font-size: .82em; padding: 2px 5px; border: 1px solid var(--borde); border-radius: 4px; background: var(--fondo-panel); color: var(--tinta); }
.am-area-btn { font-size: .9em; padding: 2px 5px; }
.am-area-btn.has-area { background: rgba(83,119,173,.15); border-color: #5377ad; color: #3a5a8a; }

/* Editor: filas de items y pares (legado, por compatibilidad) */
.am-item-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.am-item-row .f-input { flex: 1; }
.am-pair-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.am-pair-lbl { font-weight: 600; min-width: 2em; }

/* Marcas de corrección */
.wpf-field.disabled { pointer-events: none; }
.wpf-field.mark-ok > :first-child,
.wpf-field.mark-ok .wpf-input, .wpf-field.mark-ok .wpf-select { border-color: var(--verde); }
.wpf-field.mark-ko > :first-child,
.wpf-field.mark-ko .wpf-input, .wpf-field.mark-ko .wpf-select { border-color: var(--rojo); }
.wpf-field.mark-ok { outline: 3px solid rgba(44, 122, 75, 0.35); outline-offset: 2px; border-radius: 6px; }
.wpf-field.mark-ko, .wpf-field.mark-blank { outline: 3px solid rgba(198, 61, 44, 0.35); outline-offset: 2px; border-radius: 6px; }
.wpf-field.mark-partial { outline: 3px solid rgba(185, 127, 16, 0.45); outline-offset: 2px; border-radius: 6px; }

.wpf-badge {
  position: absolute;
  top: -0.8em;
  right: -0.8em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95em;
  border: 2px solid #fff;
  box-shadow: var(--sombra-mini);
  background: var(--rojo);
  color: #fff;
  z-index: 6;
}
.mark-ok > .wpf-badge { background: var(--verde); }
.mark-partial > .wpf-badge { background: var(--ambar); }

.wpf-expected {
  position: absolute;
  top: calc(100% + 0.25em);
  left: 0;
  max-width: 130%;
  min-width: 60%;
  background: var(--verde-claro);
  border: 2px solid var(--verde);
  color: var(--tinta);
  border-radius: 6px;
  padding: 0.18em 0.55em;
  font-size: 0.78em;
  z-index: 7;
  box-shadow: var(--sombra-mini);
}
.wpf-expected::before { content: '✓ '; color: var(--verde); font-weight: 700; }

/* ============================================================
   VISOR DEL ALUMNO
   ============================================================ */

.al-centro {
  min-height: calc(100vh - 58px);
  display: grid;
  place-items: center;
  padding: 30px 16px;
}
.al-tarjeta { max-width: 440px; width: 100%; text-align: center; }
.al-tarjeta .icono {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--rojo);
  line-height: 1;
  margin-bottom: 8px;
}
.al-tarjeta form { text-align: left; margin-top: 14px; }
.al-progreso {
  height: 10px;
  border: 2px solid var(--tinta);
  border-radius: 10px;
  overflow: hidden;
  background: var(--blanco);
  margin-top: 14px;
}
.al-progreso > div {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg, var(--rojo), var(--rojo) 8px, var(--rojo-oscuro) 8px, var(--rojo-oscuro) 16px);
  transition: width 0.2s ease;
}

.al-doc {
  width: calc(860px * var(--zoom, 1));
  max-width: calc(100% * var(--zoom, 1));
  margin: 0 auto;
  padding: 22px 14px 130px;
}
.al-doc .wpf-page { margin-bottom: 26px; }
.al-doc.al-entregado:not(.al-show-correction) .wpf-page { display: none; }

.al-cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.al-cabecera h1 { font-size: 1.5rem; margin: 0; }
.al-cabecera .quien { color: var(--tinta-suave); font-size: 0.9rem; }

.al-instrucciones {
  border-left: 4px solid var(--rojo);
  background: var(--blanco);
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  box-shadow: var(--sombra-mini);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
}

/* Barra inferior fija */
.al-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tinta);
  color: var(--papel);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  z-index: 100;
  flex-wrap: wrap;
}
.al-barra .estado { font-size: 0.88rem; flex: 1; min-width: 140px; }
.al-barra .mini-prog {
  height: 8px;
  background: rgba(247, 242, 231, 0.25);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
  max-width: 280px;
}
.al-barra .mini-prog > div { height: 100%; background: var(--papel); width: 0%; transition: width 0.2s; }
.al-crono {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.95rem;
}
.al-crono.urgente { color: #ff8a76; animation: cronoPulso 1s ease-in-out infinite; }
@keyframes cronoPulso { 50% { opacity: 0.55; } }

/* Resultados */
.al-resultado {
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: var(--blanco);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.al-resultado .notaza {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--rojo);
}
.al-resultado .notaza.bien { color: var(--verde); }
.al-resultado .detalle { color: var(--tinta-suave); margin-top: 4px; }
.al-resultado .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.al-retry-question { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); }
.al-retry-question p { margin: 0 0 10px; font-weight: 600; }
.al-resultado .codigo {
  font-family: ui-monospace, monospace;
  background: var(--azul-claro);
  border-radius: 6px;
  padding: 2px 8px;
}

/* Vista previa del editor */
.prev-overlay {
  position: fixed;
  inset: 0;
  background: var(--papel);
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 200;
  overflow: auto;
}
.prev-aviso {
  position: sticky;
  top: 0;
  background: var(--ambar);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.prev-aviso .btn { white-space: nowrap; }
.prev-aviso .btn svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; }
.acciones .btn svg { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }

/* Pantalla de carga del alumno */
.al-carga .spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border: 4px solid var(--tinta-tenue);
  border-top-color: var(--rojo);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Animación de entrada de tarjetas */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.anim-in { animation: aparecer 0.45s ease backwards; }
.anim-in:nth-child(2) { animation-delay: 0.08s; }
.anim-in:nth-child(3) { animation-delay: 0.16s; }
.anim-in:nth-child(4) { animation-delay: 0.24s; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .ed-layout {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: auto;
    min-height: calc(100vh - 58px);
  }
  .ed-panel {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 2px solid var(--tinta);
    max-height: 45vh;
  }
  .ed-tool .name, .ed-group .name { display: none; }
  .ed-group .glyph { width: 40px; }
}

@media (max-width: 600px) {
  .topbar { padding: 8px 12px; }
  .btn { font-size: 0.84rem; padding: 8px 12px; }
  .hero h1 { font-size: 2rem; }
}

/* Impresión de la ficha entregada (botón «Imprimir / PDF» del resultado):
   solo la tarjeta del resumen (las páginas quedan ocultas tras la entrega). */
@media print {
  .topbar, .al-barra, .al-instrucciones, .toast,
  .al-resultado .acciones, .al-resultado .al-info { display: none !important; }
  * { animation: none !important; transition: none !important; }
  body { background: #fff; }
  #app, .al-doc * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .al-doc {
    --zoom: 1;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .al-resultado {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* Evita el auto-inflado de texto en Safari iOS (font boosting).
   Solo se aplica en pantallas táctiles para no generar avisos en Firefox. */
@media (hover: none) and (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}