/* =================== LOGIN (reemplaza todo el archivo) =================== */

/* Quitar offsets del layout */
.login-page main{ padding: 0 !important; }
.login-page .central-content{ max-width: none; padding: 0; margin: 0; }

/* =================== Lienzo general =================== */
.auth-shell{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;         /* mitad-izq / mitad-der */
  min-height: 100dvh;
  width: 100%;
  margin-inline: auto;
  gap: clamp(12px, 2.4vw, 28px);
  background: #f6f8fc;
  overflow: hidden;
  isolation: isolate;
}

/* Marca de agua (gallo) sutil abajo-izquierda */
.auth-shell::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 360px at 8% 75%, rgba(110,126,255,.14), transparent 70%),
    var(--auth-mark) no-repeat left -22px bottom -18px;
  background-size:
    100% 100%,
    clamp(520px, 44vw, 780px) auto;
  opacity:.14;
  filter: blur(.2px);
  z-index:0;
  pointer-events:none;
}

/* Enlace volver (si lo usas) */
.auth-back{
  position:absolute; top:14px; left:14px; z-index:2;
  text-decoration:none; font-weight:700; color:#1f2a44;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 12px;
  box-shadow: 0 6px 14px rgba(16,24,40,.08);
}
.auth-back:hover{ border-color:#cbd5e1; }

/* =================== Columna izquierda =================== */
.auth-left{
  position: relative; z-index:1;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(150px, 1.8vw, 24px);
  max-width: 600px;
}

.banner-nr{
  width: min(520px, 100%);
  height: auto;
  /*display: block;*/
  margin: 0 0 150px 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Tarjeta */
.auth-card{
  width: min(520px, 92%);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow: 0 18px 40px rgba(16,24,40,.12), 0 6px 14px rgba(16,24,40,.06);
  overflow: hidden;
}

/* Panel azul dentro de la tarjeta */
.card-hero{
  background: linear-gradient(180deg, #2f409a 0%, #23327a 100%);
  color:#fff;
  padding: clamp(24px, 2.6vw, 32px);
}
.card-hero h1{
  margin:0 0 10px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
}
.card-hero p{ margin:0 0 16px; opacity:.95; }

/* Botón Google */
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%;
  max-width: 420px;
  margin: 10px auto 0;
  box-sizing: border-box;
  background:#fff; color:#1f2a44; text-decoration:none; font-weight:800;
  padding:12px 16px; border-radius:12px; border:1px solid #e5e7eb;
  box-shadow: 0 10px 22px rgba(16,24,40,.16);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.google-btn:hover{ border-color:#cbd5e1; transform: translateY(-1px); }
.google-btn svg{ flex-shrink: 0; }

.auth-error{ margin: 10px 0 0; color:#b91c1c; font-weight:700; }

/* =================== Columna derecha (imagen) =================== */
.auth-right, .auth-hero{
  border-radius: 0px;
  min-height: 100%;
  background:
    var(--auth-hero, none) center / cover no-repeat;
  /*box-shadow: 0 10px 24px rgba(16,24,40,.08);*/
  background-position: 50% 40%;
  background-size: auto 95%;
}

/* =================== Responsive =================== */
@media (max-width: 1024px){
  .auth-shell{
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }
  .auth-right{
    height: 40vh;
    order: -1;
    background:
      var(--auth-hero, none) center / cover no-repeat;
  }
  .auth-shell::before{
    background:
      var(--auth-mark) no-repeat center 100%;
    background-size:
      100% 100%,
      86vw auto;
    opacity:.10;
  }
}
@media (max-width:640px){
  .auth-right{ height: 34vh; }
  .auth-back{ top:10px; left:10px; }
  .card-hero{ padding: 18px; }
}

/* === Modo gallo: estilos SOLO con el flag (clase gallo-hero en .auth-shell) === */
.gallo-hero.auth-shell::before,
.gallo-hero.auth-shell::after{
  content: none !important;
  background: none !important;
}
.gallo-hero .auth-right{
  background: none !important;                         /* sin capas */
  background-image: var(--auth-hero) !important;       /* solo el gallo */
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: clamp(260px, 85%, 680px) auto !important;
  background-color: transparent !important;
  box-shadow: none !important;                          /* sin “cuadro” */
  transition: none !important;
}
.gallo-hero .auth-right::before,
.gallo-hero .auth-right::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}
@media (max-width: 1024px){
  .gallo-hero .auth-right{
    background: none !important;
    background-image: var(--auth-hero) !important;
    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    background-size: clamp(220px, 70vw, 680px) auto !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

.wa-float{
  position: fixed;
  right: 48px;
  bottom: 48px;
  width: clamp(56px, 7vw, 84px);
  z-index: 3000;
  animation: wa-pulse 1.4s infinite ease-in-out;
  transform-origin: center;
  cursor: pointer;
}
.wa-float:hover{ animation-play-state: paused; transform: scale(1.06); }
.wa-float img{ width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); }

@keyframes wa-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ===== FIX de spacing base (bug de clamp) ===== */
.auth-left{
  /* antes: clamp(150px, 1.8vw, 24px) -> siempre 150px */
  padding: clamp(24px, 1.8vw + 16px, 150px);
  max-width: 600px;
}

/* La tarjeta ocupa todo el ancho disponible y queda centrada */
.auth-card{
  width: min(560px, 100%);
  margin-inline: auto;
}

/* En desktop el panel derecho mantiene proporción sin cortar demasiado */
.auth-right, .auth-hero{
  background-position: right bottom;
  background-size: auto 95%;
}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .auth-shell{
    grid-template-columns: 1fr;
    min-height: 100dvh;
    gap: clamp(12px, 2vw, 20px);
  }

  .auth-left{
    /* centramos contenido y reducimos padding en móviles/tablet */
    justify-items: center;
    align-content: start;
    padding: 24px 16px 32px;
    max-width: 700px;
    margin-inline: auto;
  }

  .auth-right{
    order: -1;                /* imagen arriba */
    height: 38vh;             /* menos alta para que no empuje el card */
    background-size: contain; /* que entre completa */
    background-position: center bottom;
  }

  /* marca de agua más sutil y sin forzar tamaños raros */
  .auth-shell::before{
    opacity: .08;
    filter: blur(.2px);
  }
}

/* teléfonos */
@media (max-width: 640px){
  .auth-right{ height: 30vh; }

  .card-hero{ padding: 18px; }
  .card-hero h1{ font-size: clamp(20px, 6vw, 26px); }

  /* el banner superior ya no deja un hueco gigante */
  .banner-nr{
    margin: 0 0 24px 0;       /* antes 150px */
    max-width: 420px;
  }
}

/* pantallas muy pequeñas o con notch: más compacto aún */
@media (max-width: 420px){
  .auth-right{ height: 26vh; }
  .banner-nr{ display: none; }         /* opcional: ocúltalo si prefieres */
  .google-btn{ max-width: none; }      /* que ocupe todo el ancho */
}

/* ====== “modo gallo” (show_avatar) pulido ====== */
.gallo-hero .auth-right{
  background: none !important;
  background-image: var(--auth-hero) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: clamp(220px, 70vw, 680px) auto !important;
  box-shadow: none !important;
}
@media (max-width: 1024px){
  .gallo-hero .auth-right{
    background-position: center bottom !important;
    background-size: clamp(200px, 80vw, 640px) auto !important;
  }
}