/* Tengo la pagina leggibile anche su uno schermo piccolo */
:root { font-family: system-ui, sans-serif; color: #203047; background: #f1f4f8; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 850px; margin: 55px auto; padding: 0 22px; }
header { margin-bottom: 32px; }
.eyebrow { color: #446690; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
h1 { font-size: 2.7rem; letter-spacing: -.05em; margin: 10px 0; }
h2 { font-size: 1.3rem; margin: 16px 0; }
p, li { line-height: 1.65; }
.card { background: white; border: 1px solid #dce3ec; border-radius: 14px; padding: 28px; margin-bottom: 20px; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 5px 10px; border-radius: 6px; background: #e3f4ec; color: #216546; font-size: .8rem; font-weight: 600; }
.warning { background: #fff1d5; color: #7b5314; }
.neutral { background: #e9effa; color: #345889; }
button { background: #285ec8; color: white; border: 1px solid transparent; border-radius: 7px; padding: 11px 17px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #204da5; }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { background: white; color: #34445c; border-color: #cad4e1; }
button:focus-visible { outline: 3px solid #87b3ff; outline-offset: 3px; }
dl { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr; gap: 13px; font-size: .95rem; }
dt { color: #64748b; }
dd { margin: 0; overflow-wrap: anywhere; }
.muted, footer { color: #64748b; font-size: .85rem; }
.notice { padding: 16px; background: #fff0ef; border: 1px solid #efc5c0; border-radius: 8px; }
pre { padding: 18px; background: #152337; color: #dce8fc; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.6; }
footer { text-align: center; padding: 10px; }
@media (max-width: 560px) { main { margin-top: 30px; } .card { padding: 20px; } dl { grid-template-columns: 1fr; gap: 6px; } dd { margin-bottom: 12px; } }