:root { --fondo:#f4f5f3; --tarjeta:#fff; --texto:#1c2320; --suave:#5d6a64; --borde:#d9dfdb; --acento:#00806a; --sobre-acento:#fff; --error:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --fondo:#111b18; --tarjeta:#1b2723; --texto:#e8eeeb; --suave:#a2b0aa; --borde:#31403a; --acento:#3cc2a6; --sobre-acento:#08201a; --error:#ff9c94; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:16px/1.45 system-ui,sans-serif; }
main { max-width:760px; margin:0 auto; padding:16px; }
h1 { font-size:1.35rem; margin:8px 0 16px; } h2 { font-size:1.05rem; margin:0 0 8px; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:12px; padding:16px; margin-bottom:12px; }
label { display:block; margin:10px 0 4px; font-size:.9rem; color:var(--suave); }
input { width:100%; padding:11px; font-size:16px; border:1px solid var(--borde); border-radius:8px; background:var(--fondo); color:var(--texto); }
button { padding:10px 14px; min-height:44px; font-size:.95rem; border:1px solid var(--acento); border-radius:8px; background:var(--acento); color:var(--sobre-acento); cursor:pointer; margin-top:12px; }
button.sec { background:transparent; color:var(--acento); }
.fila { display:flex; flex-wrap:wrap; gap:8px; } .fila button { margin-top:8px; }
.suave { color:var(--suave); font-size:.9rem; overflow-wrap:anywhere; } #error { color:var(--error); min-height:1.4em; }
code { overflow-wrap:anywhere; font-size:1rem; } img { display:block; max-width:220px; background:#fff; margin:8px 0; }
.cab { display:flex; justify-content:space-between; align-items:center; gap:8px; }