/* ============================================================
   LA PRESA — placa.css (T18 · Restricción — ¿hoy me toca?; T22)
   One sheet for the in-app screen, the cover line and the
   standalone app/placa.html (tokens.css + this file only: nothing
   here leans on app.css). Accent = --accent (brand as text), never
   the simulated mood; [data-sober] on .placa is the sober palette.
   ============================================================ */

/* Standalone has no app.css reset; :where() = zero specificity. */
:where(.placa, .placa *) { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- the standalone page paints itself ---- */
body.placa-pagina {
  margin: 0;
  min-height: 100vh; min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
.placa-pagina main { max-width: 470px; margin: 0 auto; padding: 8px 20px 40px; }
.placa-cerrada { padding: 56px 0; text-align: center; color: var(--ink-dim); font-size: 16px; line-height: 1.5; }

/* The app's header row (p5): creature box 31 (ring 22), «LA PRESA» 17/700. */
.placa-cab { display: flex; align-items: center; gap: 4px; min-height: 48px; border-bottom: 1px solid var(--line); }
.placa-criatura { width: 31px; height: 31px; flex: none; display: block; }
.placa-marca { font-weight: 700; font-size: 17px; }

/* ---- the screen ---- */
.placa { --placa-acento: var(--accent); color: var(--ink); font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
.placa-titulo { margin-top: 8px; font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--ink-strong); }
.placa-cab + .placa-titulo { margin-top: 18px; }

/* Test clock: said in text, never by colour alone. */
.placa-banner {
  margin-top: 12px; padding: 10px 12px;
  border: 2px dashed var(--line-campo); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700;
}
.placa-nota { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--soft); font-size: 14px; }

/* app.css has these rules (B's signage, F4); the standalone page needs its own. */
.placa-suelta .emergencia-callout {
  margin-top: 14px; padding: 13px 15px; font-size: 15px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line-sobria); border-radius: var(--r-md);
}
.placa-suelta .em-titulo { margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.placa-suelta .em-aviso { width: 20px; height: 20px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.placa-suelta .em-aviso circle { fill: currentColor; stroke: none; }

/* ---- the question: ten digits, 5 x 2 ---- */
.placa-pregunta { margin-top: 18px; font-weight: 700; }
.placa-digitos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.placa-d {
  min-height: 52px;
  font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer;
}
.placa-d[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* ---- the week strip ---- */
.placa-semana { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.placa-dia {
  min-width: 0; min-height: 56px; padding: 8px 2px 6px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.placa-dia-n { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ink-dim); }
.placa-dia-d { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* Labels are short words (suite); one that still does not fit wraps at a
   space or overflows whole — it is never cut inside the word. */
.placa-dia-e { display: block; min-height: 16px; font-size: 12px; line-height: 16px; color: var(--ink-dim); overflow-wrap: normal; }
.placa-dia[data-hoy] { border-color: var(--placa-acento); box-shadow: inset 0 0 0 1px var(--placa-acento); }
.placa-dia[data-hoy] .placa-dia-e, .placa-dia[data-mio] .placa-dia-e { color: var(--ink); font-weight: 700; }
/* «tu día»: its word, a soft fill and a 4 px bar (>= 3:1 on both grounds) */
.placa-dia[data-mio] { background: var(--soft); box-shadow: inset 0 -4px 0 var(--placa-acento); }
.placa-dia[data-hoy][data-mio] { box-shadow: inset 0 0 0 1px var(--placa-acento), inset 0 -4px 0 var(--placa-acento); }
.placa-dia[data-mio] .placa-dia-d { color: var(--placa-acento); }
.placa-dia[data-estado="en_duda"], .placa-dia[data-estado="suspendida"] { border-style: dashed; border-color: var(--line-campo); }
.placa-pie { margin-top: 8px; font-size: 13px; color: var(--ink-dim); }

/* ---- the fact box (p17: a white card under its stamp); the dry lines in a second one ---- */
.placa-caja, .placa-tarjeta {
  margin-top: 16px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
[data-placa-parte="detalle"] > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Expired, or before the verification: nothing is asserted (p17). */
.placa[data-estado="vencido"] .placa-caja, .placa[data-estado="anterior"] .placa-caja { border: 1px dashed var(--line-campo); }
/* A stamp is text in a pill, never an image (p17 chip). */
.placa-sello {
  display: inline-flex; align-items: center; min-height: 25px; padding: 3px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1.2;
  color: var(--ink); background: var(--soft); border-radius: var(--r-pill);
}
.placa-sello[data-placa-sello="duda"] { background: none; border: 1px dashed var(--line-campo); }
.placa-frase { margin-top: 10px; font-size: 19px; line-height: 1.4; font-weight: 700; }
.placa-aviso { margin-top: 10px; font-size: 15px; color: var(--ink-dim); }
.placa-secas, .placa-prov { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-dim); }
.placa-secas { list-style: none; }
.placa-secas li + li, .placa-prov p + p { margin-top: 6px; }
.placa-prov { font-size: 13px; }
.placa-prov .placa-alcance { color: var(--ink); font-weight: 700; }

/* ---- the cards below ---- */
.placa-tarjeta { margin-top: 12px; }
.placa-tarjeta h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ink-dim); }
.placa-tarjeta h3:not(:first-child) { margin-top: 14px; }
.placa-linea, .placa-lista { margin-top: 8px; font-size: 15px; }
.placa-lista { list-style: none; }
.placa-lista li + li { margin-top: 6px; }
.placa-horo li { display: flex; gap: 10px; }
.placa-signo { flex: none; width: 44px; font-weight: 700; color: var(--placa-acento); }

/* The exits sit in a card whose text is --ink: their result line inherits it. */
.placa-tarjeta > .lp-salidas { margin-top: 0 !important; }
.placa-previa { margin-bottom: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
.placa-regla { margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
/* In its place while a Bitácora trip is open (in-app): one line, no control. */
.placa-viaje { font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
.placa-suelta-fila { margin-top: 12px; }
.placa-suelta-nota { display: block; font-size: 13px; color: var(--ink-dim); }
.placa-enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ink); }

.placa button:focus-visible, .placa a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the cover line (in-app, slot 'portada'; the chip is app.css .sello) ---- */
.placa-portada { margin-top: 12px; font-size: 15px; line-height: 1.45; }
/* The line's only control: a 44 px row whatever the text size. */
.placa-portada a { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 0; }