:root{
  color-scheme: light;

  /* Layout */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --easing: cubic-bezier(.22,.61,.36,1);

  /* Tipografía (igual que index) */
  --font-ui:'Plus Jakarta Sans','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-head:'Manrope','Plus Jakarta Sans','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* Colores (paleta principal del sitio) */
  --bg:#f6f8fc;
  --bg-2:#f0f3f9;
  --panel:#ffffff;
  --card:#ffffff;
  --ink:#13233c;
  --ink-2:#566681;
  --ink-3:#8a96ad;
  --line:rgba(19,35,60,.12);
  --primary:#2656f0;
  --accent:#12b0b4;

  /* Gradientes & sombras */
  --grad-strong:linear-gradient(135deg,#2656f0 0%,#3e73ff 60%,#12b0b4 100%);
  --grad-soft:linear-gradient(135deg,rgba(38,86,240,.06) 0%,rgba(18,176,180,.06) 100%);
  --shadow-xs:0 1px 2px rgba(15,25,55,.06),0 1px 1px rgba(15,25,55,.04);
  --shadow-sm:0 8px 22px rgba(15,25,55,.10);
  --shadow:0 26px 80px rgba(15,25,55,.14);

  --ring:0 0 0 3px rgba(38,86,240,.20);
}

/* ================= Base ================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font: 400 1rem/1.6 var(--font-ui);
  letter-spacing:.1px;
  color:var(--ink);
  background:
    radial-gradient(880px 560px at -12% -14%, rgba(38,86,240,.04), transparent 60%),
    radial-gradient(780px 520px at 112% -10%, rgba(18,176,180,.04), transparent 60%),
    #f9fbff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Accesibilidad */
:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(38,86,240,.24),
    0 0 0 6px rgba(38,86,240,.10) !important;
  border-color: color-mix(in oklab, var(--primary) 52%, var(--line)) !important;
}
.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;
}
.skip-link{
  position:absolute;
  inset: 8px auto auto 8px;
  transform: translateY(-200%);
  background:#fff;
  color:#000;
  padding:.5rem .75rem;
  border-radius:.6rem;
  z-index:9999;
  box-shadow: var(--shadow-sm);
}
.skip-link:focus-visible{ transform:none }

/* ================= Layout login ================= */
.auth{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding: max(24px, env(safe-area-inset-top))
           clamp(16px,4vw,24px)
           max(18px, env(safe-area-inset-bottom));
  position:relative;
}
.auth-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(40% 40% at 85% 10%, rgba(38,86,240,.14), transparent 70%),
    radial-gradient(30% 30% at 10% 15%, rgba(18,176,180,.14), transparent 60%);
  filter: blur(34px) saturate(1.06);
  pointer-events:none;
}

/* Logo + texto AmachAI con AI resaltado */
.brand{
  position:absolute;
  top: clamp(18px,4vh,26px);
  left: clamp(18px,4vw,26px);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--ink);
  font-family:var(--font-head);
  z-index:5;
}

/* puedes mantener el recorte circular si quieres que oculte fondos blancos */
.brand .logo{
  width:52px;
  height:52px;
  object-fit:cover;
  -webkit-mask: radial-gradient(closest-side,#000 99%,transparent 100%);
          mask: radial-gradient(closest-side,#000 99%,transparent 100%);
  clip-path: circle(50% at 50% 50%);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* “Amach” normal */
.brand-name{
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.02rem;
  color:var(--ink);           /* texto oscuro normal */
}

/* Solo “AI” con gradiente azul */
.brand-name .ai{
  display:inline-block;
  position:relative;
  background-image: linear-gradient(90deg,#0d47a1 0%,#1fa2ff 50%,#00d4ff 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

/* subrayado suave bajo “AI” al hacer hover, como en el index */
.brand-name .ai::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-.12em;
  height:.18em;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    rgba(31,162,255,0) 0%,
    rgba(31,162,255,.55) 40%,
    rgba(0,212,255,.55) 100%
  );
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .35s var(--easing);
  opacity:.9;
}

.brand:hover .ai::after{
  transform:scaleX(1);
}


/* ================= Card ================= */
.card{
  width: min(440px, 94vw);
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
  backdrop-filter: blur(14px) saturate(1.03);
  -webkit-backdrop-filter: blur(14px) saturate(1.03);
}
.card-head h1{
  font-family:var(--font-head);
  font-weight:800;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  margin:0 0 4px;
  color:var(--ink);
}
.card-head .sub{
  margin:0 0 14px;
  color:var(--ink-2);
  font-size: .94rem;
}

/* ================= Form ================= */
.form{
  display:grid;
  gap:16px;
}

.field{
  display:grid;
  gap:8px;
}
.field input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  background:#fff;
  border:1px solid rgba(12,28,70,.18);
  color:var(--ink);
  outline:none;
  font-family:var(--font-ui);
  transition:
    border-color .18s var(--easing),
    background .18s var(--easing),
    box-shadow .18s var(--easing);
}
.field input:focus-visible{
  border-color: color-mix(in oklab, var(--primary) 46%, var(--line));
  box-shadow:0 0 0 3px rgba(38,86,240,.18);
}
.hint{
  font-size:.85rem;
  color:var(--ink-3);
}

/* Password */
.password-wrap{ position:relative }
.password-wrap input{ padding-right: 44px }
.toggle-pass{
  position:absolute;
  right:6px;
  top:50%;
  transform: translateY(-50%);
  height:36px;
  width:36px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
  color: var(--ink-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.toggle-pass:hover{ filter:brightness(1.04) }

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.check{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--ink-2);
  font-size:.9rem;
}
.check input{ accent-color: var(--primary) }

.link{
  color:var(--primary);
  text-decoration:none;
  font-size:.9rem;
}
.link:hover{ text-decoration:underline }
.link-strong{
  color:var(--primary);
  font-weight:600;
}

/* ================= Mensaje de error ================= */
.alert{
  background: color-mix(in oklab, #ff4d4d 14%, var(--card));
  border: 1px solid color-mix(in oklab, #ff4d4d 36%, transparent);
  color:#8b1111;
  padding:.7rem .8rem;
  border-radius:12px;
  font-size:.9rem;
}

/* ================= Botón principal ================= */
.btn-primary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  width:100%;
  padding:.9rem 1rem;
  border-radius: 12px;
  border:0;
  cursor:pointer;
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.16px;
  background: var(--grad-strong);
  box-shadow:0 14px 34px rgba(38,86,240,.22);
  transition:
    transform .18s var(--easing),
    box-shadow .18s var(--easing),
    opacity .18s var(--easing),
    filter .18s var(--easing);
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 22px 52px rgba(38,86,240,.28);
}
.btn-primary:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 10px 24px rgba(38,86,240,.2);
}
.btn-primary.loading{
  opacity:.85;
  pointer-events:none;
}

.btn-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border: 2px solid rgba(0,0,0,.08);
  border-top-color:#fff;
  display:none;
  animation: spin .8s linear infinite;
}
.btn-primary.loading .btn-label{ opacity:0 }
.btn-primary.loading .btn-spinner{ display:inline-block }

@keyframes spin{ to{ transform: rotate(360deg) } }

/* ================= Divider ================= */
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--ink-3);
  font-size:.9rem;
}
.divider::before,
.divider::after{
  content:"";
  height:1px;
  flex:1;
  background: color-mix(in oklab, var(--ink-3) 40%, transparent);
}
.divider span{ line-height:1; padding-top:2px }

/* ================= Botón Google ================= */
.btn-google{
  width:100%;
  border:1px solid rgba(12,28,70,.16);
  background: color-mix(in oklab, var(--bg-2) 70%, #fff 30%);
  color:var(--ink);
  padding:.85rem 1rem;
  border-radius: 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-weight:600;
  font-family:var(--font-ui);
  transition:
    background .2s var(--easing),
    border-color .2s var(--easing),
    transform .16s var(--easing),
    box-shadow .16s var(--easing);
  backdrop-filter: blur(6px);
}
.btn-google:hover{
  transform:translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--line));
  box-shadow: var(--shadow-sm);
}
.btn-google .g{
  width:20px;
  height:20px;
  display:block;
}

/* ================= Legal ================= */
.legal{
  margin-top:18px;
  text-align:center;
  font-size:.9rem;
}
.muted{ color:var(--ink-2) }
.center{ text-align:center }

/* ================= Responsivo ================= */
@media (max-width: 480px){
  .auth{
    padding-top: clamp(72px, 14vh, 96px);
  }
  .card{
    width: min(94vw, 420px);
    padding: 20px 18px 18px;
    border-radius: calc(var(--radius-lg) - 2px);
    box-shadow:0 18px 40px rgba(12,28,70,.16);
  }
  .card-head h1{
    font-size: clamp(1.2rem, 1.05rem + 2vw, 1.6rem);
  }
  .field input{
    padding:11px 12px;
  }
  .toggle-pass{
    right:4px;
    height:34px;
    width:34px;
  }
  .btn-primary,
  .btn-google{
    padding:.82rem .95rem;
    border-radius:11px;
  }
  .brand{
    top:12px;
    left:12px;
    transform:scale(.96);
  }
  .legal{
    margin-top:14px;
    font-size:.85rem;
  }
  .row-between{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 380px){
  .card{ width:95vw; padding:18px 14px 16px; }
  .card-head .sub{ font-size:.95rem; }
  .hint{ font-size:.82rem; }
  .btn-primary .btn-label{ font-size:.95rem; }
}

/* Landscape bajo */
@media (orientation: landscape) and (max-height: 540px){
  .auth{
    align-items:center;
    justify-content:flex-start;
    padding-top:72px;
  }
  .card{ margin-top:8px; }
  .legal{ margin-top:10px; }
}

/* Altura grande: un pelín más aire */
@media (min-height: 900px) and (min-width: 480px){
  .card{ padding:28px 28px 24px; }
  .btn-primary,
  .btn-google{ padding:1rem 1.1rem; }
  .legal{ margin-bottom:10px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}

/* Safe-area vertical real (iOS) */
@supports (height: 100svh){
  .auth{ min-height:100svh; }
}

/* Tocar tamaño mínimo táctil de controles */
.field input,
.btn-primary,
.btn-google,
.toggle-pass{
  font-size:16px;
  min-height:44px;
}

/* === Logo del login alineado como en el resto del sitio === */

/* Reutilizamos el mismo ancho y padding que en el index */
:root {
  --wrap: max(min(1200px, 92vw), 320px);
  --wrap-pad: clamp(10px, 2vw, 16px);
}

/* Fila centrada, pero con el contenido pegado a la izquierda del wrap */
.brand {
  position: fixed;
  top: clamp(18px, 3vh, 26px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--wrap);
  padding-inline: var(--wrap-pad);

  display: flex;
  align-items: center;
  gap: .6rem;

  font-weight: 800;
  font-family: var(--font-head, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  color: var(--ink, #13233c);
  text-decoration: none;
  z-index: 20;
}

/* Logo mismo tamaño y “feeling” que el header principal */
.brand .logo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  /* mismo truco para ocultar el fondo exterior */
  -webkit-mask: radial-gradient(closest-side, #000 99%, transparent 100%);
          mask: radial-gradient(closest-side, #000 99%, transparent 100%);
  clip-path: circle(50% at 50% 50%);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Texto AmachAI igual que en el resto del front */
.brand-name {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.05rem;
}

.brand-name .ai {
  display: inline-block;
  position: relative;
  background-image: linear-gradient(90deg,#0d47a1 0%,#1fa2ff 50%,#00d4ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.brand-name .ai::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -.12em;
  height: .18em;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(31,162,255,0) 0%,
    rgba(31,162,255,.55) 40%,
    rgba(0,212,255,.55) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .35s var(--easing, cubic-bezier(.22,.61,.36,1));
}

.brand:hover .ai::after {
  transform: scaleX(1);
}

/* Ajustes en móvil para que no se rompa */
@media (max-width: 640px) {
  .brand {
    top: 14px;
    padding-inline: clamp(12px, 4vw, 18px);
  }

  .brand .logo {
    width: 48px;
    height: 48px;
  }
}