:root{color-scheme:dark;--bg:#0f1115;--card:#181b21;--text:#eceef2;--muted:#9aa1ad;--border:#2a2f38;--accent:#6b9bff;--btn:#3b6fe0;--ok:#4fd18b;--ok-bg:#12291d;--no:#ff7b6e;--no-bg:#2e1614;--warn:#f0c050;--warn-bg:#2b2310;--sk:#232730}
input::placeholder{color:#6b7280}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;justify-content:center;padding:clamp(32px,12vh,120px) 16px 32px}
main{width:100%;max-width:560px}
h1{font-size:clamp(1.4rem,4.5vw,1.8rem);margin:0 0 4px;line-height:1.2}
.sub{color:var(--muted);margin:0 0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
form{display:flex;gap:8px}
input{flex:1;min-width:0;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);transition:border-color .15s}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
button{font-size:1rem;padding:12px 18px;border-radius:10px;border:0;background:var(--btn);color:#fff;cursor:pointer;font-weight:600;min-height:44px;touch-action:manipulation;transition:transform .1s,opacity .15s}
button:active{transform:scale(.97)}
button[aria-busy=true]{opacity:.7}
#resultado{margin-top:20px;min-height:72px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;animation:in .18s ease-out}
.estado{font-size:1.1rem;font-weight:700;padding:10px 12px;border-radius:8px;margin-bottom:12px;overflow-wrap:anywhere}
.estado:last-child{margin-bottom:0}
.ok{color:var(--ok);background:var(--ok-bg)}.no{color:var(--no);background:var(--no-bg)}.warn{color:var(--warn);background:var(--warn-bg)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:.95rem}
dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.nota{color:var(--muted);font-size:.85rem;margin:12px 0 0}
.sk{height:44px;border-radius:8px;background:linear-gradient(90deg,var(--sk) 25%,var(--card) 50%,var(--sk) 75%);background-size:200% 100%;animation:sh 1s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:420px){form{flex-direction:column}button{width:100%}dl{grid-template-columns:1fr;gap:2px}dd{margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}