/*
 * Login page · inbodas — pantalla [inbodas_login] que sustituye al
 * wp-login.php nativo. Misma identidad editorial que el resto del front.
 */

/* Fondo full-bleed con imagen propia para login + recuperar.
 *
 * Estrategia: apagamos el ::before del body (gradiente cálido global) +
 * vaciamos el background del body (color crema que tapa pseudo-elementos
 * detrás) + creamos un ::after con la imagen a z-index 0, y subimos el
 * contenido del body a z-index 1 para que quede por encima. */
body.ib-login-page,
body.ib-login-page.brx-body {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Reset también del main contenedor por si Bricks le pone padding */
body.ib-login-page #brx-content,
body.ib-login-page main#brx-content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100svh;
}
body.ib-login-page::before {
  background: transparent !important;
  display: none !important;
}
body.ib-login-page::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(15,12,8,0.05) 0%, rgba(15,12,8,0.15) 100%),
    url('https://cheques.inbodas.com/wp-content/uploads/2026/06/test.jpg') center center / cover no-repeat !important;
}
/* Subimos solo el main por encima del ::after (no usamos `* { position: relative }`
 * porque rompería el `position:absolute` de los skip-links de accesibilidad
 * que el tema mete como hijos directos del body). */
body.ib-login-page > main,
body.ib-login-page > #brx-content {
  position: relative;
  z-index: 1;
}

/* Skip links del tema — en login/recuperar no aportan (no hay header ni
 * footer separados; el contenido es un solo card). Los retiramos del DOM. */
body.ib-login-page .skip-link {
  display: none !important;
}

/* Login/recuperar son pantallas autocontenidas — sin header ni footer Bricks
 * (la página tiene su propio logo dentro del card que enlaza a Home).
 * Ocultamos también las secciones internas por si Bricks las renderiza
 * separadas del wrapper outer. */
body.ib-login-page #brx-header,
body.ib-login-page #brx-footer,
body.ib-login-page #brxe-hdrsec1,
body.ib-login-page #brxe-ftrsec1 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Logo dentro del card — enlace a Home, centrado, sobre la imagen */
.inbodas-public.login .login-logo {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 22px;
  text-decoration: none;
  transition: filter .25s ease;
}
.inbodas-public.login .login-logo:hover { filter: brightness(1.05); }
.inbodas-public.login .login-logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 200px;
}
/* Centra el logo respecto al card aunque el contenido sea left-aligned */
.inbodas-public.login .login-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.inbodas-public.login { min-height: 100svh; }
.inbodas-public.login main {
  display: flex; align-items: center;
  min-height: 100svh;
}

/* Liquid glass coherente con el resto del sistema (cards del dashboard,
 * portal-canvas, etc.). El blur del card hace de "frosted glass" sobre
 * la imagen de fondo lila. */
.inbodas-public.login .login-card {
  position: relative;
  max-width: 480px; margin: 0 auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 18px;
  padding: 40px 36px 36px;
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 12px 24px -8px rgba(15, 12, 8, 0.08),
    0 32px 64px -20px rgba(15, 12, 8, 0.20);
}
.inbodas-public.login .login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: -1;
  pointer-events: none;
}
.inbodas-public.login .login-card > * { position: relative; }
@media (min-width: 768px) {
  .inbodas-public.login .login-card { padding: 48px 44px 40px; }
}

.inbodas-public.login .display-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--ink);
  margin: 14px 0 0;
}
.inbodas-public.login .display-title em {
  font-style: italic; font-weight: 600; color: var(--olive-deep);}
.inbodas-public.login .lede {
  font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--inksoft);
  margin: 18px 0 24px;
}

/* Feedback inline unificado para login y recuperar.
 *   data-state="success" → borde coral (positivo).
 *   data-state="error"   → borde coral más saturado + bg con tinte.
 *   sin data-state       → estado neutro (mientras envía).
 * .is-error se conserva como alias legacy. */
/* Feedback (estilo blockquote editorial coherente con cheque-message) */
.inbodas-public.login .login-feedback,
.inbodas-public.login .login-error {
  background: rgba(255, 255, 255, 0.45);
  border-left: 3px solid var(--olive);
  border-radius: 4px 8px 8px 4px;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color .25s ease, background .25s ease;
}
.inbodas-public.login .login-feedback[data-state="error"],
.inbodas-public.login .login-feedback.is-error,
.inbodas-public.login .login-error {
  border-left-color: var(--olive-deep);
  background: rgba(239, 68, 77, 0.10);
}
.inbodas-public.login .login-feedback[data-state="success"] {
  border-left-color: var(--olive);
  background: rgba(255, 255, 255, 0.55);
}

/* Las card-view son hijas directas de .m-stagger y por defecto reciben
 * `opacity: 0; animation: inbMRise` de la regla del sistema. Forzamos
 * opacity 1 final para que su contenido sea visible después del stagger
 * (sobre todo cuando se cambia de vista por JS y el inbMRise ya terminó). */
.inbodas-public.login .card-view {
  opacity: 1 !important;
  animation: ibCardFade .25s ease-out both;
}
@keyframes ibCardFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inbodas-public.login .login-form {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: 8px;
}
.inbodas-public.login .login-field {
  display: flex; flex-direction: column; gap: 6px;
}
.inbodas-public.login .login-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--inksoft);
}
.inbodas-public.login .login-field input {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  padding: 10px 0 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 0;
  color: var(--ink);
  outline: none;
  transition: border-color .25s ease;
}
.inbodas-public.login .login-field input:focus {
  border-bottom-color: var(--ink);
}
.inbodas-public.login .login-field input:hover:not(:focus) {
  border-bottom-color: rgba(15, 12, 8, 0.35);
}
.inbodas-public.login .login-field input::placeholder {
  color: var(--inkmute); opacity: 0.6;
}

.inbodas-public.login .login-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin: -4px 0 4px;
}
.inbodas-public.login .login-remember {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; color: var(--inksoft);
  cursor: pointer;
}
.inbodas-public.login .login-remember input[type="checkbox"] {
  accent-color: var(--olive);
  width: 16px; height: 16px;
}
.inbodas-public.login .login-lost {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--olive-deep);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
  transition: color .25s ease;
}
.inbodas-public.login .login-lost:hover { color: var(--ink); }

.inbodas-public.login .login-form .cta {
  align-self: stretch;
  justify-content: center;
  margin-top: 8px;
}

.inbodas-public.login .login-foot {
  margin: 24px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; color: var(--inksoft);
  text-align: center;
}
.inbodas-public.login .login-foot a {
  color: var(--olive-deep);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.inbodas-public.login .login-foot a:hover { color: var(--ink); }