/* ============================================================
   LA PRESA — prueba.css (T21 · La prueba de los 10; T22 restyle)
   The collapsed line on the cover and the screen «Mi prueba».
   Tokens only; the exits bring their own look from LP.comun. A
   grave incident ([data-sober] on #app) turns all of it gray.
   ============================================================ */

/* ---------------- the cover: ONE line and two buttons ---------------- */
.prueba-linea-txt { font-size: 16px; line-height: 1.45; color: var(--ink); }
.prueba-linea-btns, .prueba-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.prueba-linea-btns .btn, .prueba-btns .btn { flex: 1 1 0; } /* a secondary stays 48 next to the 56 primary */

/* A link that pins a test hour: said in text, never by colour alone. */
.prueba-ensayo {
  margin-top: 12px; padding: 10px 12px;
  border: 2px dashed var(--line-campo); border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.45; color: var(--ink);
}

/* ---------------- the screen ---------------- */
.prueba { font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
.prueba-card p + p, .prueba-card ul + p { margin-top: 10px; }
/* The title takes the focus from code (tabindex -1): it is not a control. */
.prueba [data-prueba-foco]:focus { outline: none; }
/* The driving guard: the first thing said, never small print. */
.prueba-guarda { font-weight: 700; color: var(--ink); }
.prueba-nota { margin-top: 10px; }
.prueba-diario { list-style: none; margin: 0; padding: 0; }
.prueba-diario li { padding: 3px 0; }

/* ---- the three questions ---- */
.prueba-p { margin-top: 18px; }
.prueba-q { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.prueba-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* «Sí» is two letters: never a tap target under 44px wide. */
.prueba-op { min-width: 56px; }
/* The chosen answer: brand AND a tick (never colour alone). */
.prueba-op[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.prueba-op[aria-pressed="true"]::before { content: "✓ "; }

.prueba-falta {
  display: block; width: 100%; margin-top: 8px; box-sizing: border-box;
  font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-campo);
  border-radius: 12px; padding: 11px 14px; min-height: 88px;
}
.prueba-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.prueba-cuenta { font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prueba-aviso { margin-top: 8px; font-size: 14px; color: var(--ink); }
.prueba-aviso:empty { display: none; }

/* ---- the message exactly as it leaves: a chat bubble, selectable ---- */
.prueba-globo {
  margin-top: 10px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
  background: var(--soft); color: var(--ink);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 13px;
  font-size: 15px; line-height: 1.45;
}

.prueba [data-prueba-callout] .emergencia-callout { margin-top: 12px; }