:root{--fondo:#f6f5f1;--superficie:#fff;--borde:#e2dfd8;--borde-suave:#eceae4;--texto:#1c1b19;--texto-suave:#5f5c55;--acento:#0f766e;--acento-suave:#cce8e4;--subida:#c2410c;--subida-fondo:#fff4ec;--peligro:#b91c1c;--radio:16px;--fuente:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fuente-titulos:"Space Grotesk", Inter, system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--fondo);color:var(--texto);font-family:var(--fuente);-webkit-text-size-adjust:100%;margin:0;font-size:16px}#app{min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));max-width:560px;margin:0 auto}h1{font-family:var(--fuente-titulos);margin:0;font-size:26px;font-weight:700}.tarjeta{background:var(--superficie);border:1px solid var(--borde-suave);border-radius:18px;flex-direction:column;gap:8px;padding:16px 18px;display:flex}.estado{align-items:center;gap:10px;font-size:17px;font-weight:600;display:flex}.punto{background:var(--borde);border-radius:6px;flex:none;width:12px;height:12px}.punto.ok{background:var(--acento)}.punto.error{background:var(--peligro)}.suave{color:var(--texto-suave);font-size:14px}.boton{border-radius:var(--radio);background:var(--acento);color:#fff;min-height:54px;font:600 16px var(--fuente);cursor:pointer;border:none;padding:0 20px}.boton:focus-visible{outline:3px solid var(--acento-suave);outline-offset:2px}.pila{flex-direction:column;gap:16px;display:flex}
