:root {
  --fondo: #f7f7f5; --texto: #1f2328; --suave: #5b6168; --tarjeta: #ffffff; --borde: #e3e3df; --acento: #2a78d6;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #15171a; --texto: #e8e8e6; --suave: #a3a8ae; --tarjeta: #1e2125; --borde: #30343a; --acento: #6aa7ef; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 620px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { font-size: 2rem; margin: 0 0 4px; }
h2 { font-size: 1.2rem; margin-top: 28px; }
.sub, .nota, footer { color: var(--suave); }
.sub { margin: 0 0 24px; }
.tarjeta { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin: 12px 0; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--borde); color: inherit; text-decoration: none; }
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--acento); }
.icono { font-size: 1.8rem; line-height: 1; }
.boton { border: 2px solid var(--acento); }
.boton strong { color: var(--acento); font-size: 1.1rem; }
.nota { font-size: .9rem; margin-top: 24px; }
footer { font-size: .9rem; margin-top: 16px; }
footer a, .doc a { color: var(--acento); }
.doc li { margin: 4px 0; }
.borrador { border: 2px dashed #d97706; padding: 10px 14px; border-radius: 8px; font-size: .9rem; }