/* Estilos comunes (salen de Belegli). Los colores de la marca los pone /marca.css, que sale de app.config.mjs. */
:root{
  --bg:#f3f5f7; --surface:#ffffff; --ink:#15202b; --muted:#5b6876; --line:#d9dfe5;
  --accent:#d52b1e; --accent-ink:#ffffff; --accent-soft:#fbe7e5; --danger:#c2410c; --danger-soft:#fdebdf; --ok:#1f7a4d; --ok-soft:#e3f3ea; --warn:#9a6200; --warn-soft:#fdf1dc;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f151b; --surface:#17202a; --ink:#e8edf2; --muted:#9aa7b4; --line:#2a3642;
  --accent:#ff5a4c; --accent-ink:#1a0806; --accent-soft:#3a1714; --danger:#fb8b4b; --danger-soft:#3a1e10; --ok:#5fd39a; --ok-soft:#173326; --warn:#f2b54c; --warn-soft:#3a2c12; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
a{color:inherit}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);text-decoration:none}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:8px 12px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:default}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.25rem;text-decoration:none}
.cross{width:26px;height:26px;flex:none;background:url(/logo.svg) center/contain no-repeat}
.ck{width:26px;height:26px;border-radius:7px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:800 .8rem var(--display);flex:none}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.9rem}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:11px 12px}
.msg{font-size:.92rem;padding:10px 12px;border-radius:8px}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.lang{position:relative}
.lang-pick summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.85rem;cursor:pointer;color:var(--ink)}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick .flag{font-size:1.15rem;line-height:1}
.lang-list{position:absolute;right:0;top:46px;z-index:30;min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;display:grid;gap:2px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.lang-list button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;font:600 .95rem var(--body);color:var(--ink);cursor:pointer;text-align:left}
.lang-list button:hover{background:var(--bg)}
.lang-list button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Ojito para ver la contraseña (i18n.js → wireEyes) */
.eye{position:absolute;right:4px;width:46px;height:46px;border:0;background:transparent;border-radius:12px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eye[aria-pressed="true"]{color:var(--accent)}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:50px}
.pw-wrap .eye{top:50%;margin-top:-23px}

/* ---- Pantallas de entrar, crear cuenta y contraseña (body.auth-page) ---- */
/* Pantallas de entrar, crear cuenta y contraseña: todo centrado, sin tarjeta en el móvil, tarjeta en pantallas grandes. */
body.auth-page{min-height:100vh;min-height:100dvh;margin:0;padding:0;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--bg)) 0%, var(--bg) 60%)}
.auth-top{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left))}
.auth-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem}
.auth-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.auth{flex:1;display:flex;align-items:center;justify-content:center;padding:24px max(20px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 28px) max(20px, env(safe-area-inset-left))}
.auth-box{width:100%;max-width:400px;display:grid;gap:22px}
.auth-head{display:grid;justify-items:center;gap:10px;text-align:center}
.auth-logo{width:76px;height:76px;border-radius:22px;background:url(/logo.svg) center/contain no-repeat;box-shadow:0 16px 34px -16px color-mix(in srgb, var(--accent) 70%, transparent);margin-bottom:6px}
.auth-head h1{font-size:clamp(1.7rem,7vw,2.05rem);font-weight:800;letter-spacing:-.015em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.auth-box > *{min-width:0}
.auth-head p{color:var(--muted);font-size:1.02rem;max-width:32ch}
.auth form{display:grid;gap:14px}
.auth .field{display:grid;gap:7px}
.auth .field label{font-weight:600;font-size:.92rem}
.inp{position:relative;display:flex;align-items:center}
.inp > svg{position:absolute;left:14px;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.auth .inp input{height:54px;width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);padding:0 14px 0 46px;font-size:1.05rem}
.auth .inp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.auth .inp.pw input{padding-right:52px}
.eye{position:absolute;right:4px;width:46px;height:46px;border:0;background:transparent;border-radius:12px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.row-forgot{display:flex;justify-content:flex-end;margin-top:-4px}
.link{color:var(--accent);font-weight:600;font-size:.92rem;text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer}
.link:hover{text-decoration:underline}
.auth .btn{height:54px;border-radius:14px;font-size:1.05rem;width:100%;box-shadow:0 12px 24px -14px var(--accent)}
.auth .btn.ghost{box-shadow:none;background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{color:var(--muted);font-size:.82rem}
.trust{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;text-align:center}
.trust svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (min-width:600px){
  .auth-box{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px 32px;box-shadow:0 30px 60px -40px rgba(10,20,30,.35)}
}
.pk-login{display:grid;gap:14px}
.pk-login .btn{gap:10px}
.pk-login .btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pk-pw{justify-self:center;color:var(--muted)}

.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.45;color:var(--ink);cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--accent);margin:0;flex:none}
.check a{color:var(--accent);font-weight:600}
.legal-note{color:var(--muted);font-size:.82rem;text-align:center;margin:0}
.legal-note a{color:inherit}