/* llamaxmi — identidad de llama✕ti para las páginas nuevas (login, callback, bienvenida).
   Tokens y reglas del PDF de identidad de Moisés (23 jul 2026). */

:root{
  --background:#F8F6F5; --foreground:#201C19;
  --card:#FFFFFF;
  --primary:#C24630; --primary-foreground:#FFFFFF; --primary-hover:#A0392A;
  --muted:#F3F0EE; --muted-foreground:#5F5750;
  --accent:#FBE7E1; --accent-foreground:#A0392A;
  --border:#E8E3E0; --input-strong:#8F857E;
  --ring:#DE5B3F; --brand-ink:#DE5B3F;
  --euca:#12907C; --euca-600:#0E7466; --euca-bg:#EAF7F3;
  --hero-cream:#FFF4ED;
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-ui:"Figtree",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-ui);font-size:16px;line-height:1.55;
  background:var(--background);color:var(--foreground)}
h1,h2{font-family:var(--font-display);font-weight:800;
  font-variation-settings:"wdth" 92;line-height:1.08;text-wrap:balance}
.mono{font-family:var(--font-mono)}
img{max-width:100%}

/* Foco: anillo doble, nunca el contorno azul del navegador. */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring);border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* La marca. La ✕ es un SVG de dos ondas cruzadas: nunca la equis del teclado. */
.wordmark{display:inline-flex;align-items:baseline;font-family:var(--font-display);
  font-weight:800;font-variation-settings:"wdth" 92;font-size:27px;
  letter-spacing:-0.015em;color:var(--foreground);text-decoration:none;line-height:1}
.wordmark .x-svg{width:.62em;height:.72em;margin:0 .045em;
  transform:translateY(-0.04em);align-self:center}
.wordmark .x-svg path{stroke:var(--brand-ink);stroke-width:13;stroke-linecap:round;fill:none}

/* Botones: 48 px de alto, radio 12. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 17px var(--font-ui);border-radius:12px;border:1px solid transparent;
  padding:0 24px;min-height:48px;cursor:pointer;text-decoration:none;width:100%;
  transition:background 150ms,box-shadow 150ms}
.btn:disabled{opacity:.55;cursor:default}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
/* El de Google va blanco con borde, como manda Google. */
.btn-google{background:#FFFFFF;color:var(--foreground);border-color:var(--input-strong)}
.btn-google:hover:not(:disabled){background:var(--muted)}
.btn-texto{background:none;border:0;color:var(--muted-foreground);
  font:500 15px var(--font-ui);cursor:pointer;text-decoration:underline;
  min-height:auto;width:auto;padding:0}

.tarjeta{background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:32px 28px;box-shadow:0 6px 24px -6px rgba(32,28,25,.10)}

.campo{width:100%;min-height:48px;border:1px solid var(--input-strong);border-radius:12px;
  padding:0 14px;font:400 16px var(--font-ui);background:var(--card);color:var(--foreground)}

.aviso{border-radius:12px;padding:12px 16px;font-size:14.5px;margin-top:18px}
.aviso-error{background:var(--accent);color:var(--accent-foreground);border:1px solid #F0A794}
.aviso-ok{background:var(--euca-bg);color:var(--euca-600);border:1px solid #5FD3BF}