/* =============================================================================
   WaterProof — Pantalla de autenticación (login / social).
   Ventana enfocada, independiente del chrome de GeoNode. Usa los tokens de
   tokens.css (navy → cian, Plus Jakarta Sans + Inter). Ver Fase 2 del plan de
   integración de login con Google.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.wp-auth {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  font-family: var(--wp-font-body);
  color: var(--text);
  background: var(--neutral-0);
}

/* --- Panel de marca (izquierda) ------------------------------------------- */
.wp-auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-12) var(--sp-10);
  color: #fff;
  background:
    linear-gradient(160deg, rgba(4,49,76,.92) 0%, rgba(0,92,145,.86) 55%, rgba(55,171,218,.78) 100%),
    var(--primary-900);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.wp-auth__brand::after {
  /* halo sutil */
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: var(--rounded-full);
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  pointer-events: none;
}
.wp-auth__brand-top { display: flex; align-items: center; gap: var(--sp-3); }
.wp-auth__logo { height: 40px; width: auto; }
.wp-auth__brand-copy { position: relative; z-index: 1; max-width: 30ch; }
.wp-auth__brand-copy h1 {
  font-family: var(--wp-font);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1.1;
  margin: 0 0 var(--sp-4);
}
.wp-auth__brand-copy p {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.wp-auth__brand-by {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.8);
}
.wp-auth__brand-by img { height: 26px; width: auto; }

/* --- Panel de formulario (derecha) ---------------------------------------- */
.wp-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-6);
}
.wp-auth__card {
  width: 100%;
  max-width: 400px;
}
.wp-auth__card > h2 {
  font-family: var(--wp-font);
  font-weight: 700;
  font-size: var(--fs-3xl);
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.wp-auth__lead {
  font-size: var(--fs-md);
  color: var(--text-3);
  margin: 0 0 var(--sp-8);
}

/* --- Botón Google --------------------------------------------------------- */
.wp-auth__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 12px var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--rounded-md);
  background: var(--white);
  color: var(--text-2);
  font-family: var(--wp-font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.wp-auth__google:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
  background: var(--primary-50);
}
.wp-auth__google svg { width: 20px; height: 20px; flex: none; }

/* --- Separador "o" -------------------------------------------------------- */
.wp-auth__or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-transform: lowercase;
}
.wp-auth__or::before,
.wp-auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Formulario correo/clave ---------------------------------------------- */
.wp-auth__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.wp-auth__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.wp-auth__field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.wp-auth__form input:not([type="checkbox"]) {
  width: 100%;
  padding: 11px var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--rounded-md);
  font-family: var(--wp-font-body);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wp-auth__form input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(55,171,218,.18);
}

.wp-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.wp-auth__remember {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-3);
}
.wp-auth__remember input { accent-color: var(--primary-500); }
.wp-auth__link {
  color: var(--primary-700);
  font-weight: 600;
  text-decoration: none;
}
.wp-auth__link:hover { color: var(--primary-500); text-decoration: underline; }

/* --- Botón primario ------------------------------------------------------- */
.wp-auth__submit {
  margin-top: var(--sp-2);
  width: 100%;
  padding: 12px var(--sp-4);
  border: none;
  border-radius: var(--rounded-md);
  background: var(--primary-700);
  color: #fff;
  font-family: var(--wp-font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.wp-auth__submit:hover { background: var(--primary-800); box-shadow: var(--shadow-md); }
.wp-auth__submit:active { background: var(--primary-900); }

/* --- Pie: registro -------------------------------------------------------- */
.wp-auth__foot {
  margin-top: var(--sp-8);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* --- Errores / mensajes --------------------------------------------------- */
.wp-auth__errors {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--rounded-sm);
  background: #fdecec;
  color: #a12a2a;
  font-size: var(--fs-sm);
}
.wp-auth__errors li + li { margin-top: var(--sp-1); }
.wp-auth__field-error {
  color: var(--error);
  font-size: var(--fs-xs);
  margin: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .wp-auth { grid-template-columns: 1fr; }
  .wp-auth__brand {
    padding: var(--sp-8) var(--sp-6);
    min-height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  .wp-auth__brand-copy { display: none; }
  .wp-auth__brand-by { display: none; }
  .wp-auth__panel { padding: var(--sp-8) var(--sp-5); }
}