/* Estilo común de la entrada: vidrio sobre manchas de color, igual que las apps */
:root{
  --bg:#e9ede0; --fg:#20261a; --muted:#5b6450; --accent:#4c6a26; --accent-ink:#fff;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.82); --line:rgba(255,255,255,.9); --hair:rgba(60,70,40,.16); --shadow:rgba(52,64,30,.18);
  --blob1:#9cb36a; --blob2:#f3b06a; --blob3:#c3aee3;
  --warn:#a5600c; --warn-bg:rgba(243,176,106,.28); --ok:#2f7f40; --ok-bg:rgba(47,138,69,.14); --bad:#b23b33; --bad-bg:rgba(200,70,60,.12);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --r-xl:24px; --r-lg:18px; --r-md:12px; --r-pill:999px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f130d; --fg:#edf1e4; --muted:#a4ad95; --accent:#b7d86a; --accent-ink:#17200c;
  --glass:rgba(34,42,28,.55); --glass-strong:rgba(42,52,34,.88); --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.12); --shadow:rgba(0,0,0,.45);
  --blob1:#3f5a1f; --blob2:#7a4615; --blob3:#4b3a6e;
  --warn:#f5c27f; --warn-bg:rgba(122,70,21,.4); --ok:#86d694; --ok-bg:rgba(127,211,142,.14); --bad:#f08b80; --bad-bg:rgba(240,139,128,.14);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0f130d; --fg:#edf1e4; --muted:#a4ad95; --accent:#b7d86a; --accent-ink:#17200c;
  --glass:rgba(34,42,28,.55); --glass-strong:rgba(42,52,34,.88); --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.12); --shadow:rgba(0,0,0,.45);
  --blob1:#3f5a1f; --blob2:#7a4615; --blob3:#4b3a6e; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%}
body{margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 var(--f-body); -webkit-font-smoothing:antialiased}
.blobs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blobs i{position:absolute; border-radius:50%; filter:blur(80px); opacity:.6}
.blobs i:nth-child(1){width:44vmax;height:44vmax;background:var(--blob1);left:-12vmax;top:-12vmax}
.blobs i:nth-child(2){width:36vmax;height:36vmax;background:var(--blob2);right:-10vmax;top:30vh}
.blobs i:nth-child(3){width:38vmax;height:38vmax;background:var(--blob3);left:30vw;bottom:-20vmax}
.glass{background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-radius:var(--r-xl); box-shadow:0 10px 36px -18px var(--shadow)}
.wrap{position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.card{width:min(460px,100%); padding:28px 24px}
.card.ancha{width:min(640px,100%)}
.brand{font:800 26px var(--f-display); letter-spacing:-.02em; margin:0}
.brand small{display:block; font:500 13px var(--f-body); color:var(--muted); letter-spacing:0; margin-top:2px}
h2{font:800 21px var(--f-display); margin:20px 0 6px; letter-spacing:-.01em}
.sub{color:var(--muted); font-size:14.5px; margin:0 0 14px}
form{display:grid; gap:12px}
label.f{display:grid; gap:5px; font-size:14px; font-weight:600}
.fld{width:100%; padding:11px 13px; border-radius:var(--r-md); border:1px solid var(--hair); background:var(--glass-strong); color:var(--fg); font:16px var(--f-body)}
.fld:focus-visible, .btn:focus-visible, .lnk:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:var(--r-pill); border:0; background:var(--accent); color:var(--accent-ink); font:700 15px var(--f-body); cursor:pointer; min-height:46px}
.btn[disabled]{opacity:.6; cursor:progress}
.btn.ghost{background:var(--glass-strong); color:var(--fg); border:1px solid var(--hair)}
.btn.full{width:100%}
.lnk{background:none; border:0; padding:4px 0; color:var(--accent); font:600 14px var(--f-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.row.sep{justify-content:space-between; margin-top:14px}
.msg{padding:11px 13px; border-radius:var(--r-md); font-size:14.5px; margin:0}
.msg.err{background:var(--bad-bg); color:var(--bad)}
.msg.ok{background:var(--ok-bg); color:var(--ok)}
.msg.info{background:var(--glass-strong); border:1px solid var(--hair)}
.opciones{display:grid; gap:10px; margin-top:6px}
.opcion{display:grid; gap:2px; text-align:left; padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--hair); background:var(--glass-strong); color:var(--fg); font:700 16px var(--f-body); cursor:pointer}
.opcion small{font:500 13.5px var(--f-body); color:var(--muted)}
.opcion:hover{border-color:var(--accent)}
.consent{max-height:46vh; overflow:auto; padding:14px 16px; border-radius:var(--r-md); background:var(--glass-strong); border:1px solid var(--hair); font-size:14.5px}
.consent h3{font:700 15px var(--f-body); margin:12px 0 4px}
.consent h3:first-child{margin-top:0}
.consent p, .consent ul{margin:0 0 6px}
.chk{display:flex; gap:10px; align-items:flex-start; font-size:14.5px}
.chk input{width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex:0 0 auto}
.cargando{display:grid; place-items:center; gap:12px; padding:30px 0; color:var(--muted)}
.spin{width:28px; height:28px; border-radius:50%; border:3px solid var(--hair); border-top-color:var(--accent); animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation:none} }
.cc-toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60; display:grid; gap:2px; max-width:min(520px, calc(100% - 32px)); padding:12px 16px; border-radius:var(--r-lg); background:var(--fg); color:var(--bg); box-shadow:0 12px 30px -12px var(--shadow); font-size:14.5px}
.cc-toast.malo{background:var(--bad); color:#fff}
.cc-toast span{opacity:.9}
.pie{margin-top:16px; font-size:12.5px; color:var(--muted); text-align:center}