:root { --papel: #efe9de; --tinta: #1d231f; --gris: #5e6058; --linea: #dcd3c3; --acento: #a8442c; --pendiente: #ffe27a; }
@media (prefers-color-scheme: dark) {
  :root { --papel: #141a17; --tinta: #ece6da; --gris: #a5a99f; --linea: #2b3530; --acento: #e8836a; --pendiente: #6b5a00; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.65 "Barlow", "Segoe UI", system-ui, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 48px max(24px, env(safe-area-inset-left, 0px)) 90px; }
.volver { color: var(--acento); text-decoration: none; font-weight: 500; }
h1 { font: 600 clamp(40px, 7vw, 60px)/1 "Barlow Condensed", "Arial Narrow", sans-serif; margin: 36px 0 8px; }
h2 { font: 600 24px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; margin: 38px 0 8px; padding-top: 18px; border-top: 1px solid var(--linea); }
.fecha { color: var(--gris); font: 400 13px "IBM Plex Mono", monospace; }
ul { padding-left: 20px; }
.pendiente { background: var(--pendiente); padding: 0 4px; border-radius: 3px; font-weight: 500; }