*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F5F7FB;color:#253044;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.4}
.demo{background:#FFF4D6;color:#5b4300;text-align:center;font-weight:700;font-size:14px;padding:8px}
.tarjeta{max-width:480px;margin:0 auto;padding:20px 16px 8px}
header{background:#142B50;color:#fff;border-radius:18px;padding:20px 20px 22px;margin-bottom:14px}
.marca{margin:0 0 6px;font-weight:800;letter-spacing:.12em;font-size:12px;color:#9fc1ff}
h1{margin:0;font-size:26px;line-height:1.15;word-break:break-word}
.sub{margin:6px 0 0;color:#cfe0ff;font-size:15px}
.todo{display:block;width:100%;min-height:64px;border:0;border-radius:16px;background:#2463EB;color:#fff;font-size:19px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 18px rgba(36,99,235,.3)}
.todo:active{transform:scale(.99)}.todo.hecho,.copiar.hecho{background:#142B50;color:#fff}
.todo:focus-visible,.copiar:focus-visible{outline:3px solid #142B50;outline-offset:3px}
.estado{min-height:24px;margin:10px 2px 6px;font-weight:700;font-size:15px}.estado.ok{color:#1a49b8}.estado.mal{color:#a12020}
.datos{list-style:none;margin:0;padding:0;background:#fff;border-radius:16px;border:1px solid #dfe6f3}
.dato{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-top:1px solid #edf1f8}
.dato:first-child{border-top:0}.dato div{min-width:0}
.etq{display:block;font-size:13px;color:#5d6880;font-weight:600}
.val{display:block;font-size:18px;font-weight:700;color:#142B50;word-break:break-all;-webkit-user-select:all;user-select:all}
.copiar{flex:none;min-width:88px;min-height:44px;border-radius:12px;border:2px solid #2463EB;background:#EAF2FF;color:#1a49b8;font-weight:800;font-size:15px;cursor:pointer}
.pasos{margin:16px 4px;padding-left:22px;color:#4a5570;font-size:15px}
.aviso{text-align:center;padding-top:48px}.aviso h1{color:#142B50;margin-bottom:16px}.aviso .marca{color:#2463EB}
.grande{font-size:20px;font-weight:700;color:#142B50}
.pie{max-width:480px;margin:0 auto;padding:8px 18px 28px;font-size:12.5px;color:#66708a;text-align:center}.pie a{color:#2463EB;font-weight:700;text-decoration:none}

/* v3: impresión comercial, pantalla móvil */
body{background:linear-gradient(180deg,#eff4ff 0%,#f7f9fc 60%);color:#213657}
.tarjeta{max-width:530px;padding:32px 18px 15px}
.tarjeta header{background:linear-gradient(125deg,#112b5c,#2761e1);border-radius:25px;padding:30px 25px;box-shadow:0 15px 35px #2355ab25}
.marca{font-size:11px;color:#b4d0ff}.tarjeta h1{font-size:clamp(25px,6vw,33px);letter-spacing:-.035em}.sub{color:#d4e2ff}
.todo{border-radius:16px;background:#255de8;min-height:70px;font-size:18px;box-shadow:0 9px 22px rgba(37,93,232,.28)}
.datos{border-radius:18px;border-color:#e0e8f4;box-shadow:0 10px 32px #18365a0a}
.dato{padding:18px 20px}.dato .etq{font-size:11px;color:#7e8ca4;text-transform:uppercase;letter-spacing:.06em}.dato .val{font-size:17px;word-break:break-word}.copiar{border-width:1px;border-color:#cfddff;background:#edf3ff;color:#245bd6;min-height:43px;font-size:13px}
.pie{color:#71819a}