/* ========= LAYOUT PANTALLA PARTIDA (HERO + LOGIN) ========= */

.auth-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* fallback */
  height: 100dvh;
  /* dynamic viewport */

  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin: 0;
}

body:not(.dark-mode) .auth-layout {
  background: radial-gradient(
    circle at top,
    #f9fafb 0,
    #e5e7eb 38%,
    #cbd5f5 100%
  );
}

body.dark-mode .auth-layout {
  background: radial-gradient(
    circle at top,
    #020617 0,
    #020617 35%,
    #020617 100%
  );
}

.auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.auth-hero-left {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* evita overflow raro en flex */
  max-width: none;
  /* clave: que el hero pueda crecer */
}

.auth-hero-lamp {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 15;
}

.auth-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.35)),
    var(--auth-hero-url, none);
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}

.auth-hero-layer {
  position: relative;
  z-index: 1;
  padding: 3rem clamp(2rem, 4vw, 3.5rem) 5.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f9fafb;
}

.auth-hero-top {
  position: relative;
  transform: translate(var(--hero-top-x, 0px), var(--hero-top-y, 0px));
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-badge i {
  font-size: 0.8rem;
}

.auth-hero-lead {
  font-size: 1.02rem;
  max-width: 28rem;
}

.auth-hero-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;

  position: relative;
  transform: translate(var(--hero-list-x, 0px), var(--hero-list-y, 0px));
}

.auth-hero-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
}

.auth-hero-list li::before {
  content: "✓";
  font-weight: 600;
  margin-top: 0.05rem;
}

/* === Más foto (hero) + panel derecho controlado tipo Koibox === */
@media (min-width: 992px) {
  .auth-main {
    /* ancho del panel derecho: ni enorme ni enano */
    flex: 0 0 clamp(600px, 36vw, 720px);
    /* márgenes simétricos alrededor de la card */
    padding: 2.5rem clamp(1rem, 2.6vw, 2.25rem);
  }

  .auth-hero-left {
    /* el hero se queda con “todo lo demás” */
    flex: 1 1 auto;
    max-width: none;
  }
}

/* HEADER DE LA CARD (MARCA + CLAIM) */
.auth-card-header {
  text-align: center;
}

/* Ocultamos el círculo del logo en la card de login */
.auth-logo-mark {
  display: none;
}

/* Título grande sobre la card ("Agend One") */
.auth-main-title {
  text-align: center;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  /* hazlo más grande o más pequeño si quieres */
  font-weight: 700;
  color: var(--brand-1, #4f46e5);
  /* mismo azul que el botón Entrar */
  margin-bottom: 1.5rem;
  /* separación con la card */
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .auth-main-title {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Título dentro de la card ("Iniciar sesión") */
.auth-card-header :is(h1, h2, h3) {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: inherit;
  /* usa el color de texto normal de la card */
}

.auth-card-header p {
  margin-bottom: 0;
}

/* ========= CARD / ANIMACIONES EXISTENTES ========= */

.auth-wrap {
  max-width: 460px;
  margin: 2.5rem auto;
  transition: max-width var(--flip-ms, 800ms)
    var(--flip-ease, cubic-bezier(0.22, 0.9, 0.22, 1));
}

#flipStage {
  perspective: 1200px;
  -webkit-perspective: 1200px;
}

#shell {
  position: relative;
  transition: height var(--flip-ms, 800ms)
    var(--flip-ease, cubic-bezier(0.22, 0.9, 0.22, 1));
  will-change: height;
}

#card3d {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform var(--flip-ms, 800ms)
    var(--flip-ease, cubic-bezier(0.22, 0.9, 0.22, 1));
  will-change: transform;
  transform: translateZ(0);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  align-content: start;
}

.face.back {
  transform: rotateY(180deg) translateZ(0.1px);
  -webkit-transform: rotateY(180deg) translateZ(0.1px);
}

.card-visual {
  background: var(--card);
  border-radius: var(--card-radius, 0.75rem);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: border-radius var(--flip-ms, 800ms)
    var(--flip-ease, cubic-bezier(0.22, 0.9, 0.22, 1));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  padding: 1.25rem;
}

/* En páginas auth: la topbar de base_auth no debe reservar altura */
body.auth-page
  .content[data-route-shell]
  > .d-flex.gap-2.align-items-center.mb-3.d-print-none {
  position: fixed;
  top: 1rem;
  left: 1rem;
  margin: 0 !important;
  z-index: 60;
  pointer-events: none;
  /* para que no bloquee clicks */
}

/* Pero la lámpara sí debe ser clicable */
body.auth-page [data-lamp-switch] {
  pointer-events: auto;
}

/* Ocultamos zonas vacías (tabs/spacer) que aquí no aportan nada */
body.auth-page .ao-topbar-tabs,
body.auth-page .ao-topbar-spacer {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-wrap,
  #shell,
  #card3d,
  .card-visual {
    transition: none !important;
  }
}

/* En auth: el primario NO pierde el gradiente al deshabilitarse */
body.auth-page .btn-primary:disabled,
body.auth-page .btn-primary.disabled {
  background-image: var(--brand-grad) !important;
  opacity: 0.78;
  /* “disabled” sin matar la marca */
  filter: none !important;
}

@supports (
  (-webkit-mask-image: -webkit-radial-gradient(white, black)) or
    (mask-image: radial-gradient(white, black))
) {
  .card-visual {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}