:root{
  --bg:#F5F8F5; --surface:#FFFFFF; --surface-2:#EEF3EF;
  --ink:#0E1712; --muted:#556358; --line:#E0E8E2;
  --brand:#0F5132; --accent:#129A63; --accent-strong:#0B7C4E; --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(12,32,22,.06),0 12px 30px -12px rgba(12,32,22,.14);
  --radius:16px;
  --f-display:"Bricolage Grotesque",Georgia,serif;
  --f-body:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A120E; --surface:#111E18; --surface-2:#16241D; --ink:#EAF2EC; --muted:#9DB3A7; --line:#21332A;
  --accent:#2FD68B; --accent-strong:#54E3A0; --on-accent:#04140C;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
body{margin:0; font-family:var(--f-body); background:var(--bg); color:var(--ink); min-height:100vh; display:grid; place-items:center; padding:24px}
.card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:34px 30px}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:800; font-size:1.25rem; color:var(--ink); text-decoration:none; margin-bottom:22px}
.brand .dot{width:26px; height:26px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:14px}
h1{font-family:var(--f-display); font-size:1.5rem; margin:0 0 4px}
.sub{color:var(--muted); font-size:.92rem; margin:0 0 22px}
.field{margin-bottom:14px}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px}
.field input{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:.95rem}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.row-between{display:flex; justify-content:space-between; align-items:center; margin:2px 0 20px}
.row-between label{display:flex; gap:7px; align-items:center; font-size:.85rem; color:var(--muted); cursor:pointer}
a.link{color:var(--accent-strong); font-size:.85rem; text-decoration:none; font-weight:600}
a.link:hover{text-decoration:underline}
.btn{width:100%; border:none; border-radius:11px; padding:13px; font-family:var(--f-body); font-weight:700; font-size:1rem; cursor:pointer; background:var(--accent); color:var(--on-accent)}
.btn:hover{background:var(--accent-strong)}
.foot{text-align:center; margin-top:20px; font-size:.88rem; color:var(--muted)}
.back{display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:var(--muted); font-size:.85rem; text-decoration:none}
.back:hover{color:var(--ink)}
.demo{margin-top:16px; padding:10px 12px; background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; font-size:.8rem; color:var(--muted)}
/* Registro autoservicio */
.card-wide{max-width:560px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} }
.opt{font-weight:400; color:var(--muted)}
.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
@media (max-width:520px){ .planes{grid-template-columns:1fr} }
.plan-opt input{position:absolute; opacity:0; pointer-events:none}
.plan-box{display:flex; flex-direction:column; gap:3px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); cursor:pointer; height:100%}
.plan-box strong{font-family:var(--f-display); font-size:1rem}
.plan-precio{font-weight:700; font-size:1.05rem}
.plan-precio small{font-weight:500; color:var(--muted); font-size:.78rem}
.plan-cajas{font-size:.8rem; color:var(--muted)}
.plan-opt input:checked + .plan-box{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.plan-opt input:focus-visible + .plan-box{outline:2px solid var(--accent); outline-offset:2px}
.btn-sec{background:var(--surface-2); color:var(--ink); border:1px solid var(--line)}
.btn-sec:hover{background:var(--line)}
.reintento{margin-top:18px; font-size:.88rem}
.reintento summary{cursor:pointer; color:var(--muted)}
.reintento form{margin-top:12px}
a.btn{display:block; text-align:center; text-decoration:none}
.estado{text-align:center}
.estado .icono{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin:0 auto 12px; font-size:1.6rem; font-weight:800; background:var(--surface-2); border:1px solid var(--line)}
.estado-pagada .icono{background:var(--accent); color:var(--on-accent); border-color:transparent}
.msg-error{margin:-4px 0 14px; padding:10px 12px; border-radius:10px; font-size:.85rem; background:color-mix(in srgb,#d33 12%,transparent); color:var(--ink)}

/* Mensajes dentro del formulario (reemplazan los alert() del navegador) */
.msg{display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; border-radius:11px; font-size:.88rem; line-height:1.4; border:1px solid transparent; animation:msgIn .18s ease-out}
.msg[hidden]{display:none}
.msg .msg-ico{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:800; color:#fff}
.msg .msg-txt{flex:1}
.msg .msg-accion{display:inline-block; margin-top:8px; padding:7px 12px; border-radius:9px; font-weight:700; font-size:.82rem; text-decoration:none; background:var(--accent); color:var(--on-accent)}
.msg .msg-accion:hover{background:var(--accent-strong)}
.msg-error{background:color-mix(in srgb,#d33 10%,var(--surface)); border-color:color-mix(in srgb,#d33 35%,transparent); color:var(--ink)}
.msg-error .msg-ico{background:#c62828}
.msg-aviso{background:color-mix(in srgb,#e0a100 12%,var(--surface)); border-color:color-mix(in srgb,#e0a100 40%,transparent); color:var(--ink)}
.msg-aviso .msg-ico{background:#b7791f}
.field input.invalido{border-color:#c62828}
@keyframes msgIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}

/* Requisitos de la contraseña (se marcan al escribir) */
.reglas-clave{list-style:none; margin:-4px 0 14px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; font-size:.8rem; color:var(--muted)}
@media (max-width:520px){ .reglas-clave{grid-template-columns:1fr} }
.reglas-clave li::before{content:'○ '; }
.reglas-clave li.ok{color:var(--accent-strong)} .reglas-clave li.ok::before{content:'✓ '}
.reglas-clave li.falta{color:#b3261e}