/* Estilos compartidos de las pantallas de autenticacion (login y setup) */
body.auth-body {
   display: grid;
   place-items: center;
   min-height: 100dvh;
   padding: 24px 16px;
   box-sizing: border-box;
   overflow: hidden;
}

/* ----- Cielo: constelacion + petalos ----- */
.auth-sky {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
}

.auth-sky svg {
   width: 100%;
   height: 100%;
}

.auth-sky .constellation-lines line {
   stroke: rgba(124, 92, 255, 0.22);
   stroke-width: 1;
}

.auth-sky .constellation-stars circle {
   fill: #cfd3ff;
   animation: auth-twinkle 4.5s ease-in-out infinite;
   animation-delay: var(--twinkle-delay, 0s);
}

@keyframes auth-twinkle {
   0%, 100% { opacity: 0.35; }
   50%      { opacity: 1; }
}

.petal {
   position: absolute;
   top: -30px;
   width: 12px;
   height: 12px;
   border-radius: 60% 0 60% 60%;
   background: linear-gradient(135deg, rgba(255, 155, 189, 0.9), rgba(255, 155, 138, 0.55));
   filter: drop-shadow(0 0 4px rgba(255, 155, 189, 0.4));
   animation: petal-drift 16s linear infinite;
}

.petal.p1 { left: 12%; animation-delay: 0s; }
.petal.p2 { left: 30%; width: 9px; height: 9px; animation-delay: 4s; animation-duration: 19s; }
.petal.p3 { left: 58%; animation-delay: 8s; animation-duration: 14s; }
.petal.p4 { left: 76%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 21s; }
.petal.p5 { left: 90%; width: 8px; height: 8px; animation-delay: 11s; animation-duration: 17s; }

@keyframes petal-drift {
   0%   { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; }
   10%  { opacity: 0.85; }
   88%  { opacity: 0.85; }
   100% { transform: translateY(105vh) translateX(-70px) rotate(300deg); opacity: 0; }
}

/* ----- Marca ----- */
.auth-wrap {
   position: relative;
   z-index: 1;
   display: grid;
   justify-items: center;
   gap: 22px;
   width: 100%;
   max-width: 400px;
}

.auth-brand {
   display: grid;
   justify-items: center;
   gap: 10px;
   text-align: center;
}

.auth-planet {
   position: relative;
   display: grid;
   place-items: center;
   width: 76px;
   height: 76px;
   border-radius: 50%;
   background: radial-gradient(circle at 32% 28%, var(--primary-strong), var(--primary) 72%);
   box-shadow: 0 0 34px rgba(124, 92, 255, 0.45);
}

.auth-planet::before {
   content: "";
   position: absolute;
   inset: -12px;
   border: 1px solid rgba(124, 92, 255, 0.35);
   border-radius: 50%;
   transform: rotate(-18deg) scaleY(0.82);
}

.auth-planet::after {
   content: "";
   position: absolute;
   top: 4px;
   right: 6px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--cool-strong);
   box-shadow: 0 0 8px rgba(146, 218, 232, 0.8);
}

.auth-kanji {
   font-family: "Zen Kaku Gothic New", sans-serif;
   font-size: 34px;
   font-weight: 900;
   color: white;
   text-shadow: 0 1px 6px rgba(20, 10, 60, 0.45);
}

.auth-brand h1 {
   margin: 4px 0 0;
   font-size: 2rem;
   font-weight: 900;
   letter-spacing: -0.02em;
}

.auth-stardot {
   color: var(--warm);
   font-size: 0.5em;
   vertical-align: 0.8em;
}

.auth-brand p {
   margin: 0;
   color: var(--ink-soft);
   font-size: 0.92rem;
}

/* ----- Tarjeta ----- */
.auth-card {
   display: grid;
   gap: 16px;
   width: 100%;
   padding: 28px 26px;
   box-sizing: border-box;
   border: 1px solid var(--line-strong);
   border-radius: var(--r-xl);
   background: rgba(22, 27, 46, 0.82);
   backdrop-filter: blur(14px);
   box-shadow: var(--shadow-3);
}

.auth-card h2 {
   margin: 0;
   font-size: 1.05rem;
   font-weight: 700;
}

.field {
   display: grid;
   gap: 6px;
}

.field-label {
   color: var(--ink-soft);
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.field-wrap {
   position: relative;
   display: block;
}

.field-wrap svg {
   position: absolute;
   top: 50%;
   left: 13px;
   width: 16px;
   height: 16px;
   transform: translateY(-50%);
   color: var(--ink-dim);
   pointer-events: none;
}

.field-wrap input {
   width: 100%;
   padding: 12px 13px 12px 40px;
   box-sizing: border-box;
   border: 1px solid var(--line-strong);
   border-radius: var(--r-md);
   background: var(--paper);
   color: var(--ink);
   font: inherit;
   transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

/* Boton para mostrar/ocultar la contrasena */
.field-wrap input[type="password"],
.field-wrap input[data-has-toggle] {
   padding-right: 44px;
}

.toggle-pass {
   position: absolute;
   top: 50%;
   right: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   padding: 0;
   border: none;
   border-radius: var(--r-sm);
   background: transparent;
   color: var(--ink-dim);
   cursor: pointer;
   transform: translateY(-50%);
   transition: color 150ms var(--ease), background 150ms var(--ease);
}

.toggle-pass:hover {
   color: var(--ink);
   background: rgba(255, 255, 255, 0.05);
}

.toggle-pass svg {
   position: static;
   width: 17px;
   height: 17px;
   transform: none;
   pointer-events: none;
   color: inherit;
}

.toggle-pass svg[hidden] {
   display: none;
}

.field-wrap input::placeholder {
   color: var(--ink-faint);
}

.field-wrap input:focus-visible {
   outline: none;
   border-color: var(--primary);
   box-shadow: 0 0 0 3px var(--primary-soft);
}

.auth-submit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 4px;
   padding: 13px;
   border: none;
   border-radius: var(--r-md);
   background: linear-gradient(135deg, var(--primary), var(--primary-strong));
   color: white;
   font: inherit;
   font-weight: 800;
   letter-spacing: 0.01em;
   cursor: pointer;
   box-shadow: 0 6px 18px rgba(124, 92, 255, 0.3);
   transition: filter 180ms var(--ease), transform 100ms var(--ease);
}

.auth-submit:hover { filter: brightness(1.08); }
.auth-submit:active { transform: scale(0.98); }
.auth-submit:disabled { opacity: 0.6; cursor: progress; }

.auth-error {
   margin: 0;
   padding: 10px 13px;
   border: 1px solid var(--danger);
   border-radius: var(--r-md);
   background: var(--danger-soft);
   color: var(--danger);
   font-size: 0.85rem;
}

.auth-error[hidden] { display: none; }

.auth-foot {
   margin: 0;
   color: var(--ink-faint);
   font-size: 0.72rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
   .petal,
   .auth-sky .constellation-stars circle {
      animation: none;
   }
}