/* =========================================
   LOGIN / REGISTER – VetScanAI
   Colores tomados de estilosIndex.css:
   - Predomina blanco y cian
   - Azul petróleo para contraste
   - Naranja para acentos
========================================= */

:root {
  /* Usa la paleta global de estilosIndex.css */
  --auth-bg: radial-gradient(circle at top left, rgba(52, 215, 196, 0.20), transparent 55%),
             radial-gradient(circle at bottom right, rgba(30, 64, 175, 0.10), transparent 55%),
             #f3f6fb;
  --auth-radius-card: 20px;
  --auth-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
  --auth-border-subtle: rgba(148, 163, 184, 0.35);
  --auth-transition: all 0.22s ease-out;
}

/* =========================
   BASE AUTH PAGE
========================= */

body.auth-page {
  margin: 0;
  min-height: 100vh;
  background: var(--auth-bg);
  color: #0f172a;
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* compensar header fijo global */
.auth-main {
  padding-top: 7rem;
  padding-bottom: 4rem;
}

/* Layout principal: hero izquierdo + card derecho */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: flex-start;   /* antes: center */
}

/* =========================
   HERO LADO IZQUIERDO
========================= */

.auth-hero-panel {
  position: relative;
  color: var(--azul-petroleo);
  padding-inline: 0.5rem;
}

/* pill superior */
.auth-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  animation: glowSoft 3.4s ease-in-out infinite;
}

.auth-hero-badge i {
  color: var(--cian);
}

.auth-hero-panel h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.2rem, 3vw + 1rem, 3.1rem);
  margin: 0 0 0.75rem;
  line-height: 1.15;
  color: var(--azul-petroleo);
}

.auth-hero-panel h1 span {
  color: var(--cian);
}

.auth-hero-text {
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
  max-width: 520px;
  color: var(--gris-claro);
}

/* lista de beneficios */
.auth-hero-list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.auth-hero-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: flex-start;
}

.auth-hero-list i {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.18);
  color: var(--cian);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 10px 25px rgba(34, 197, 235, 0.35);
}

.auth-hero-list strong {
  font-size: 0.95rem;
  color: var(--azul-petroleo);
}

.auth-hero-list span {
  display: block;
  font-size: 0.82rem;
  color: var(--gris-claro);
}

/* mini métricas */
.auth-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 0.6rem;
}

.auth-hero-meta > div {
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  font-size: 0.78rem;
}

.meta-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cian);
}

.meta-caption {
  display: block;
  color: var(--gris-claro);
}

/* =========================
   CARD LOGIN / REGISTRO
========================= */

.auth-panel {
  display: flex;
  justify-content: center;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  background: var(--blanco);
  color: var(--azul-petroleo);
  border-radius: var(--auth-radius-card);
  box-shadow: var(--auth-shadow-soft);
  border: 1px solid var(--auth-border-subtle);
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: fadeUp 0.6s ease-out;
  position: relative;
}

/* ribete naranja arriba */
.auth-box::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--naranja-calido), var(--cian));
}

/* Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  background: #f8fafc;
}

.auth-tab {
  flex: 1;
  padding: 0.85rem 1rem;
  background: transparent;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gris-claro);
  cursor: pointer;
  position: relative;
  transition: var(--auth-transition);
}

.auth-tab:hover {
  color: var(--azul-petroleo);
  background: #edf2ff;
}

.auth-tab.active {
  color: var(--azul-petroleo);
}

.auth-tab.active::after {
  content: "";
  position: absolute;
  inset-inline: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--cian), var(--naranja-calido));
}

/* Formularios */
.auth-form {
  padding: 1.6rem 1.6rem 1.9rem;
  display: none;
}

.auth-form.active {
  display: block;
  animation: fadeIn 0.45s ease-out;
}

.auth-title-group {
  margin-bottom: 1.3rem;
}

.auth-title-group h2 {
  margin: 0 0 0.35rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  color: var(--azul-petroleo);
}

.auth-title-group p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--gris-claro);
}

/* =========================
   CAMPOS / INPUTS
========================= */

.form-group {
  margin-bottom: 1.1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--gris-claro);
}

/* base para TODOS los inputs (Nombre, Apellido, etc.) */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #f9fafb;
  color: var(--azul-petroleo);
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  transition: var(--auth-transition);
}


.auth-form input::placeholder {
  color: var(--gris-claro);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 2px rgba(52, 215, 196, 0.35);
  background: var(--blanco);
}

/* inputs con icono: solo ajustamos padding */
.input-with-icon {
  position: relative;
}

.input-with-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Aquí solo cambiamos el padding para que el texto no choque con el icono */
.input-with-icon input {
  padding-left: 3rem;   /* antes menos, por eso se encimaba */
  padding-right: 3rem;  /* deja espacio cómodo al botón de ojo */
}


/* botón mostrar contraseña */
.show-password {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem;
  transition: var(--auth-transition);
}

.show-password:hover {
  color: var(--cian);
}

/* fila de 2 columnas */
.form-row {
  display: flex;
  gap: 0.8rem;
}

.form-row .form-group {
  flex: 1;
}

/* link olvidé contraseña */
.forgot-password {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--gris-claro);
  text-decoration: none;
  transition: var(--auth-transition);
}

.forgot-password:hover {
  color: var(--naranja-calido);
}

/* =========================
   CHECKBOXES / TÉRMINOS
========================= */

.remember-me,
.terms {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.remember-me input,
.terms input {
  margin-top: 0.13rem;
  width: 0.9rem;
  height: 0.9rem;
  accent-color: var(--cian);
  cursor: pointer;
}

.remember-me label,
.terms label {
  font-size: 0.8rem;
  color: var(--gris-claro);
  cursor: pointer;
}

.terms a {
  color: var(--cian);
  font-weight: 500;
  text-decoration: none;
  transition: var(--auth-transition);
}

.terms a:hover {
  color: var(--naranja-calido);
  text-decoration: underline;
}

/* =========================
   BOTONES
========================= */

.btn {
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  transition: var(--auth-transition);
}

.btn.primary {
  background: linear-gradient(135deg, var(--cian), #8ef9e5);
  color: #0f172a;
  box-shadow: 0 14px 35px rgba(52, 211, 153, 0.45);
}

.btn.primary:hover {
  transform: translateY(-1px) translateZ(0);
  box-shadow: 0 18px 45px rgba(52, 211, 153, 0.6);
}

.btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(52, 211, 153, 0.35);
}

.auth-submit {
  width: 100%;
  margin-top: 0.7rem;
}

/* estado de carga opcional */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-top-color: var(--azul-petroleo);
  inset: 0;
  margin: auto;
  animation: spin 0.9s linear infinite;
}

/* =========================
   LOGIN SOCIAL
========================= */

.social-auth {
  margin-top: 1.3rem;
  text-align: center;
}

.social-auth p {
  font-size: 0.82rem;
  color: var(--gris-claro);
  margin-bottom: 0.7rem;
  position: relative;
}

.social-auth p::before,
.social-auth p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 25%;
  height: 1px;
  background: rgba(148, 163, 184, 0.6);
}

.social-auth p::before {
  left: 0;
}

.social-auth p::after {
  right: 0;
}

.social-buttons {
  display: flex;
  justify-content: center;
}

.social-btn {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #ffffff;
  color: var(--azul-petroleo);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--auth-transition);
  min-width: 0;
}

.social-btn.google {
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.6);
}

.social-btn.google i {
  font-size: 1rem;
}

.social-btn.google:hover {
  background: rgba(249, 115, 22, 0.06);
  box-shadow: 0 12px 28px rgba(248, 148, 31, 0.35);
}

/* =========================
   SWITCH LOGIN / REGISTRO
========================= */

.auth-switch {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--gris-claro);
}

.auth-switch a {
  color: var(--cian);
  text-decoration: none;
  font-weight: 500;
  transition: var(--auth-transition);
}

.auth-switch a:hover {
  color: var(--naranja-calido);
  text-decoration: underline;
}

/* =========================
   FUERZA DE CONTRASEÑA
========================= */

.password-strength {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.strength-bar {
  flex: 1;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.20);
  overflow: hidden;
}

.strength-text {
  font-size: 0.7rem;
  color: var(--gris-claro);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px) {
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .auth-hero-panel {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .auth-main {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .auth-hero-panel h1 {
    font-size: 2rem;
  }

  .auth-hero-list {
    gap: 0.7rem;
  }

  .auth-panel {
    order: -1;
  }

  .auth-box {
    max-width: 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .auth-main {
    padding-inline: 0.4rem;
  }

  .auth-box {
    border-radius: 16px;
  }

  .auth-tabs {
    flex-wrap: wrap;
  }

  .auth-tab {
    font-size: 0.85rem;
    padding-inline: 0.6rem;
  }
}

/* =========================
   ANIMACIONES
========================= */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glowSoft {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.0); }
  50%  { box-shadow: 0 0 24px 0 rgba(52, 211, 153, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.0); }
}

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


/* ========== INPUTS BASE ========== */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"] {
  width: 100%;
  height: 48px;                    /* <-- altura uniforme */
  line-height: 48px;
  border-radius: 999px;
  box-sizing: border-box;
  padding: 0 1.2rem;               /* <-- padding normal para inputs sin icono */
  border: 1px solid rgba(148,163,184,0.7);
  background: #f9fafb;
  color: var(--azul-petroleo);
  font-size: 0.92rem;
  transition: var(--auth-transition);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 2px rgba(52, 215, 196, 0.35);
  background: var(--blanco);
}

/* ========== INPUTS CON ICONO ========== */
.input-with-icon {
  position: relative;
  width: 100%;
}

.input-with-icon i {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #94a3b8;
  pointer-events: none; /* <-- para que no estorbe al clic */
}

.input-with-icon input {
  padding-left: 3rem !important;  /* <-- deja espacio REAL al icono */
  padding-right: 3rem !important; /* <-- deja espacio al botón de ojo */
}

/* ICONO DE MOSTRAR CONTRASEÑA */
.show-password {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  cursor: pointer;
  background: none;
  border: none;
}

.show-password:hover {
  color: var(--cian);
}