/* Exam Monitor — estilos compartidos.
   Dirección visual: hoja cuadriculada de examen, tinta azul marino, bolígrafo azul.
   Lo memorable: el código de acceso escrito en casillas, como en una hoja de respuestas. */

:root {
  --paper: #f7f9fb;
  --sheet: #ffffff;
  --grid: #e1e8f0;
  --ink: #14233a;
  --muted: #56667c;
  --pen: #2a56c6;
  --pen-soft: #e6ecfa;
  --ok: #1f7a4d;
  --ok-soft: #e3f3ea;
  --warn: #9a5b00;
  --warn-soft: #fdf1dc;
  --bad: #b8302a;
  --bad-soft: #fbe6e4;
  --line: #cfd9e4;

  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 4px;
  --r-md: 8px;
  --cell: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--pen); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }

/* ---------- Estructura ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
}
.sheet + .sheet { margin-top: 20px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 700; margin-bottom: 6px; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; }
input[type="text"], input[type="number"], input[type="url"], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--pen); outline: none; box-shadow: 0 0 0 3px var(--pen-soft); }
textarea { min-height: 72px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; margin-bottom: 8px; padding: 0; }

.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-weight: 400; }
.choice + .choice { margin-top: 8px; }
.choice:has(input:checked) { border-color: var(--pen); background: var(--pen-soft); }
.choice input { margin-top: 4px; }
.choice strong { display: block; }

.tool-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; }
.tool-row + .tool-row { margin-top: 8px; }
@media (max-width: 560px) { .tool-row { grid-template-columns: 1fr; } }

details summary { cursor: pointer; font-weight: 700; }

/* ---------- Botones ---------- */
button, .btn {
  font: inherit;
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
button:hover, .btn:hover { background: var(--pen-soft); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--pen); border-color: var(--pen); color: #fff; }
.btn-primary:hover { background: #1f45a6; }
.btn-danger { border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-quiet { border-color: transparent; background: transparent; padding: 6px 10px; }
.btn-big { font-size: 1.125rem; padding: 14px 24px; }

.error { color: var(--bad); font-weight: 700; }

/* ---------- Código en casillas ---------- */
.code-boxes { display: inline-flex; gap: 6px; }
.code-boxes span {
  width: 1.1em; height: 1.35em;
  display: inline-grid; place-items: center;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  font-weight: 700;
  color: var(--pen);
  line-height: 1;
}
.code-input {
  font-size: 2rem !important;
  letter-spacing: .5em;
  text-align: center;
  font-weight: 700;
  color: var(--pen);
  padding-left: .5em !important;
}

/* ---------- Estados ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--grid); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.pen { background: var(--pen-soft); color: var(--pen); }

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .55; } }
}

/* ---------- Selector de idioma y cabecera ---------- */
.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch button { padding: 4px 8px; font-size: .8125rem; border-color: var(--line); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lang-float { position: fixed; top: 12px; right: 12px; z-index: 5; }
body:has(#view-exam:not([hidden])) .lang-float { display: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--ink); }