/* ============================================================
   login.css — Módulo de Login · Fundación Hogar Salud A.C.
   ─────────────────────────────────────────────────────────────
   Contiene:
     · Variables de diseño (:root) — tokens coloniales compartidos
     · Reset base
     · Patrón de fondo Talavera
     · Componentes exclusivos: .login-screen, .login-card,
       .demo-btn, .field__password-wrap, .spinner
     · Botones base (.btn) — también usados en dashboard.css
       (se repiten intencionalmente para que login.html sea
        completamente autosuficiente sin importar dashboard.css)
   ============================================================ */

/* ── Variables de diseño (tokens coloniales) ── */
:root {
  /* Primarios — Azul Rey y Marino */
  --primary:       #004080;   /* Azul Rey Principal */
  --primary-dk:    #001F3F;   /* Azul Marino Profundo */
  --primary-lt:    #00A3E0;   /* Azul Cian */
  --primary-faint: #E6F4FA;   /* fondo cian suave */
  --primary-mid:   #B3E5FC;   /* azul medio */

  /* Secundario — azul talavera/cian */
  --tala:          #00A3E0;
  --tala-lt:       #38BDF8;
  --tala-faint:    #F0F9FF;

  /* Acento — dorado */
  --oro:           #FFC72C;
  --oro-lt:        #FFE082;
  --oro-faint:     #FFF9E6;

  /* Verde acento */
  --green:         #059669;
  --green-dk:      #047857;
  --green-faint:   #ECFDF5;

  /* Rojo */
  --red:           #DC2626;
  --red-faint:     #FEF2F2;

  /* Neutros Slate */
  --white:         #FFFFFF;
  --cal:           #F8FAFC;
  --cal-dk:        #E2E8F0;
  --cal-md:        #CBD5E1;
  --carbon:        #0F172A;
  --carbon-60:     #475569;
  --carbon-30:     #94A3B8;
  --carbon-80:     #001F3F;

  /* Radios */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 999px;

  /* Sombras */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 12px 24px rgba(0,0,0,.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,.06);

  /* Tipografías */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cal);
  color: var(--carbon);
  line-height: 1.6;
  min-height: 100vh;
}

a    { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }

/* ── Patrón ornamental Talavera en el fondo ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='12' stroke='%2300A3E0' stroke-width='1.5' fill='none'/%3E%3Cpath d='M30 18 L42 30 L30 42 L18 30 Z' stroke='%23004080' stroke-width='1' fill='none'/%3E%3Cline x1='0' y1='0' x2='60' y2='60' stroke='%23FFC72C' stroke-width='.5'/%3E%3Cline x1='60' y1='0' x2='0' y2='60' stroke='%23FFC72C' stroke-width='.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* ============================================================
   BOTONES — base autosuficiente para login.html
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; font-weight: 600; font-size: .875rem;
  border-radius: var(--r-full); border: 2px solid transparent;
  padding: .55rem 1.25rem;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  cursor: pointer; white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--primary-lt); outline-offset: 2px; }
.btn:active        { transform: scale(.97); }
.btn--full         { width: 100%; }

.btn--primary {
  background: var(--primary); color: var(--white); border-color: var(--primary);
}
.btn--primary:hover {
  background: var(--primary-dk); border-color: var(--primary-dk); box-shadow: var(--shadow-md);
}
.btn--primary:disabled {
  opacity: .65; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ============================================================
   CAMPOS DE FORMULARIO
   ============================================================ */
.field { display: flex; flex-direction: column; gap: .35rem; }

.field__label {
  font-size: .8rem; font-weight: 600; color: var(--carbon-60);
}

.field__input {
  height: 44px; border: 2px solid var(--cal-dk);
  border-radius: var(--r-md); padding: 0 .875rem;
  font-size: .9rem; color: var(--carbon); background: var(--cal);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  width: 100%;
}
.field__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,64,128,.15);
  background: var(--white);
}
.field__input.has-error { border-color: var(--red); }

/* Wrapper para campo contraseña con botón "ojo" */
.field__password-wrap              { position: relative; }
.field__password-wrap .field__input { padding-right: 2.75rem; }

.field__eye {
  position: absolute; right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: 0; line-height: 1;
  color: var(--carbon-30);
  transition: color .15s;
}
.field__eye:hover { color: var(--primary); }

/* ============================================================
   SPINNER DE CARGA (inline en botón de submit)
   ============================================================ */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  vertical-align: middle;
  margin-left: .2rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   LOGIN SCREEN — contenedor centrado
   ============================================================ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ── Tarjeta de login ── */
.login-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--primary);
  text-align: center;
}

.login-card__logo  { font-size: 2.5rem; margin-bottom: .5rem; line-height: 1; }
.login-card__org   {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--carbon-60); margin-bottom: .5rem;
}
.login-card__title {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.6rem;
  color: var(--carbon); letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.login-card__sub   { font-size: .85rem; color: var(--carbon-60); margin-bottom: 1.75rem; }
.login-card__error {
  font-size: .8rem; color: var(--red);
  margin: .5rem 0 .75rem; min-height: 1.2em;
  text-align: left;
}
.login-card__back  {
  display: block; margin-top: 1.5rem;
  font-size: .8rem; color: var(--carbon-60);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.login-card__back:hover { color: var(--primary); }

/* ── Sección de acceso rápido (demo) ── */
.login-card__demo {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cal-dk);
}

.demo-title {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--carbon-30); margin-bottom: .875rem;
}

.demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.demo-btn {
  background: var(--cal);
  border: 1.5px solid var(--cal-dk);
  border-radius: var(--r-md);
  padding: .7rem .6rem;
  font-size: .78rem; font-weight: 500;
  color: var(--carbon);
  cursor: pointer; text-align: center; line-height: 1.4;
  transition: border-color .15s, background .15s;
}
.demo-btn:hover {
  border-color: var(--primary);
  background: var(--primary-faint);
}
.demo-btn small {
  display: block;
  font-size: .68rem; color: var(--carbon-60); margin-top: .25rem;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .login-card          { padding: 2rem 1.25rem; }
  .demo-btns           { grid-template-columns: 1fr; }
}