:root { --fondo:#f4f6f8; --tarjeta:#fff; --texto:#17212b; --suave:#5d6b78; --verde:#0a8f5a; --verde-osc:#07734a; --borde:#dde3e8; --rojo:#c0392b; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; background:var(--fondo); color:var(--texto); }
main { max-width:460px; margin:0 auto; padding:20px 16px 40px; }
h1 { font-size:1.4rem; margin:8px 0 4px; }
.sub { color:var(--suave); margin:0 0 18px; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:14px; padding:16px; margin-bottom:14px; }
.estado { display:flex; align-items:center; gap:10px; font-weight:600; }
.punto { width:12px; height:12px; border-radius:50%; background:#aaa; flex:none; }
.punto.ok { background:var(--verde); } .punto.mal { background:var(--rojo); }
.pasos { margin:0; padding-left:20px; color:var(--suave); line-height:1.6; }
.opciones { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opcion { border:2px solid var(--borde); background:#fff; border-radius:12px; padding:14px 6px; text-align:center; cursor:pointer; font:inherit; color:inherit; }
.opcion b { display:block; font-size:1.25rem; }
.opcion small { color:var(--suave); }
.opcion.llenar { grid-column:1 / -1; }
.opcion[aria-pressed="true"] { border-color:var(--verde); background:#e9f7f0; }
.boton { display:block; width:100%; border:0; border-radius:12px; padding:16px; font:inherit; font-weight:700; font-size:1.05rem; background:var(--verde); color:#fff; cursor:pointer; text-align:center; text-decoration:none; }
.boton:disabled { background:#9fb5aa; cursor:not-allowed; }
.boton.secundario { background:#fff; color:var(--rojo); border:2px solid var(--rojo); }
.nota { font-size:.85rem; color:var(--suave); }
.error { color:var(--rojo); font-weight:600; min-height:1.2em; }
.cifras { display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:center; }
.cifras div { background:var(--fondo); border-radius:10px; padding:12px 4px; }
.cifras b { display:block; font-size:1.6rem; }
.barra { height:10px; background:var(--fondo); border-radius:6px; overflow:hidden; margin-top:12px; }
.barra span { display:block; height:100%; background:var(--verde); width:0; transition:width .6s; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th, td { text-align:left; padding:6px 4px; border-bottom:1px solid var(--borde); }