/* ========= 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, .82), rgba(15, 23, 42, .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: .4rem;
          padding: .28rem .9rem;
          border-radius: 999px;
          background: rgba(15, 23, 42, .72);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          font-size: .78rem;
          text-transform: uppercase;
          letter-spacing: .06em;
}

.auth-badge i {
          font-size: .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: .45rem;
          margin-bottom: .25rem;
}

.auth-hero-list li::before {
          content: "✓";
          font-weight: 600;
          margin-top: .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: .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(.22, .9, .22, 1));
}

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

#shell {
          position: relative;
          transition: height var(--flip-ms, 800ms) var(--flip-ease, cubic-bezier(.22, .9, .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(.22, .9, .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, .75rem);
          box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
          transition: border-radius var(--flip-ms, 800ms) var(--flip-ease, cubic-bezier(.22, .9, .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 #lampSwitch {
          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: .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%;
          }
}