/* Modo nocturno por defecto: es una app para leer antes de dormir. */
:root {
  --fondo: #14171f;
  --superficie: #1d2130;
  --texto: #ece7dc;
  --suave: #a9a39a;
  --acento: #e8b86d;
  --peligro: #e07a6b;
  --borde: #2e3446;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 18px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 42rem; margin: 0 auto; padding: 1rem 16px 4rem; }
a { color: var(--acento); }
h1 { font-size: 1.6rem; line-height: 1.25; }
.cabecera { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding: .75rem 16px; border-bottom: 1px solid var(--borde); }
.cabecera nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.marca { font-weight: 700; text-decoration: none; }
form { margin: 0; }
label { display: block; margin: 1rem 0 .3rem; }
input, select, textarea { width: 100%; font: inherit; padding: .65rem .75rem; border-radius: .5rem; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); }
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: .5rem; }
.casilla { display: flex; align-items: flex-start; gap: .25rem; margin: .75rem 0; }
button, .boton { display: inline-block; font: inherit; padding: .7rem 1.1rem; border-radius: .6rem; border: 0; background: var(--acento); color: #1b1408; font-weight: 600; cursor: pointer; text-decoration: none; }
button.secundario, .boton.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
button.peligro { background: var(--peligro); color: #1b0f0c; }
button.enlace { background: none; padding: 0; color: var(--acento); font-weight: 400; text-decoration: underline; }
.aviso { padding: .75rem 1rem; border-radius: .6rem; background: var(--superficie); border-left: 4px solid var(--acento); margin: 1rem 0; }
.error { border-left-color: var(--peligro); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: .8rem; padding: 1rem; margin: .75rem 0; }
.fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.suave { color: var(--suave); font-size: .9rem; }
.etiqueta-ia { font-size: .8rem; color: var(--suave); border: 1px solid var(--borde); border-radius: 1rem; padding: .1rem .6rem; display: inline-block; }
.aviso-max { margin: 0; border-radius: 0; text-align: center; font-weight: 600; }
/* Aviso discreto "PoC privada: usa nombres inventados" (CUENTOS_SOLO_FICTICIOS). */
.aviso-ficticios { margin: 0; padding: .35rem 1rem; text-align: center; font-size: .85rem; color: var(--suave); background: var(--superficie); border-bottom: 1px solid var(--borde); }

/* Feedback rápido (decisiones.md, 2026-10-11): botón discreto que nunca tapa el final de la página. */
.opinar-flotante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10; min-height: 44px; padding: .4rem .9rem; font-size: .9rem; font-weight: 400; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
body.con-opinar main { padding-bottom: 6rem; }
dialog.hoja { width: 100%; max-width: 32rem; max-height: 90vh; overflow: auto; margin: auto auto 0; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--borde); border-radius: 1rem 1rem 0 0; background: var(--superficie); color: var(--texto); }
dialog.hoja::backdrop { background: rgba(0, 0, 0, .6); }
dialog.hoja h2 { margin-top: 0; font-size: 1.25rem; }
@media (min-width: 40rem) { dialog.hoja { margin: auto; border-radius: 1rem; } }
.caras { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.caras legend { padding: 0; margin-bottom: .5rem; }
.caras input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.caras label { margin: 0; flex: 1; text-align: center; min-height: 44px; padding: .5rem; border-radius: .6rem; border: 1px solid var(--borde); background: var(--fondo); cursor: pointer; }
.caras label span { font-size: 1.5rem; vertical-align: middle; }
.caras input:checked + label { border-color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); }
.caras input:focus-visible + label { outline: 2px solid var(--acento); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.chip, .oc-valor { min-height: 44px; }
.chip { padding: .4rem .8rem; font-size: .9rem; font-weight: 400; border-radius: 2rem; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); }
.chip[aria-pressed="true"], .oc-valor[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); }

/* Portadas (decisiones.md, 2026-10-11): SVG en línea; el título siempre en HTML, fuera de la imagen. */
.portada svg { display: block; width: 100%; height: auto; border-radius: .6rem; }
.portada-grande { width: min(15rem, 70vw); margin: 0 auto 1rem; }
.portada-mini { flex: 0 0 4.5rem; width: 4.5rem; }
.portada-mini svg { border-radius: .4rem; }
.con-portada { display: flex; gap: .75rem; align-items: flex-start; }
.con-portada > div:last-child { min-width: 0; flex: 1; }
.con-portada p { margin: 0 0 .4rem; }