/* css/screens/auth.css */
/* Fondo del login: la aurora de la marca (brand/tokens.css) con las cuatro manchas
   de la gama RGB. Más tenue que en la landing para que la tarjeta se siga leyendo.
   Ya respeta prefers-reduced-motion desde tokens.css. */
.auth-aurora { opacity:.32; }

.auth-card {
    position:relative; z-index:2; width:100%; max-width:368px; display:flex; flex-direction:column; gap:13px;
    background: var(--card); border:1px solid transparent; border-radius:4px; padding:36px 26px 28px;
    box-shadow:0 20px 50px rgba(0,0,0,.45),
      0 0 60px -10px color-mix(in srgb, var(--gize-r2) 28%, transparent);
    animation:authFadeUp var(--duration-rare) var(--ease-drawer) both;
  }

/* Borde con la gama RGB alrededor de toda la tarjeta. Quieto a propósito: el único
   anillo que gira en la pantalla es el del botón "Ingresar" (BRAND.md, regla 1).
   Misma técnica de máscara que .gize-btn: solo se pinta el borde de 1,5 px. */
.auth-card::before {
    content:""; position:absolute; inset:-1px; padding:1.5px; border-radius:inherit; pointer-events:none;
    background:conic-gradient(from 210deg, var(--gize-r1), var(--gize-r2), var(--gize-r3), var(--gize-r4), var(--gize-r1));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }

.auth-brand-ic {
    width:52px; height:52px; margin:0 auto 2px;
    display:flex; align-items:center; justify-content:center;
    animation:authFadeUp var(--duration-rare) var(--ease-drawer) .05s both;
  }

.auth-brand-ic img { width:100%; height:100%; display:block; }

/* La palabra GIZE va siempre como SVG (brand/BRAND.md), nunca escrita con una fuente. */
.auth-logo { display:flex; justify-content:center; animation:authFadeUp var(--duration-rare) var(--ease-drawer) .1s both; }

.auth-logo img { height:26px; width:auto; display:block; }

.auth-sub { text-align:center; font-size:10.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.18em; margin-bottom:6px; animation:authFadeUp var(--duration-rare) var(--ease-drawer) .15s both; }

.auth-field { position:relative; opacity:0; animation:authFadeUp var(--duration-rare) var(--ease-drawer) forwards; }

.auth-role-group { display:flex; gap:8px; }

.auth-role-opt {
    flex:1; display:flex; align-items:center; justify-content:center;
    background:var(--card-2); border:1px solid var(--border); border-radius:4px;
    padding:12px 10px; color:var(--txt-3); font-size: var(--text-body); font-weight:600; cursor:pointer;
    transition: var(--transition-tap), box-shadow .18s;
  }

.auth-role-opt:hover { border-color:var(--txt-3); color:var(--txt-2); }

.auth-role-opt.active { color:var(--txt); border-color:var(--blue); background:var(--card); box-shadow:0 0 0 4px var(--glow); }

.auth-role-opt:focus-visible { outline:2px solid var(--green-2); outline-offset:2px; }

.auth-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; display:flex; color:var(--txt-3); pointer-events:none; transition:color .15s; }

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

.auth-field:focus-within .auth-ic { color: var(--green-2); }

.auth-toggle-pass {
    position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:4px; color: var(--txt-3); cursor:pointer; transition: var(--transition-tap);
  }

.auth-toggle-pass svg { width:var(--icon-md); height:var(--icon-md); }

.auth-toggle-pass:hover { color: var(--txt); background: var(--card-2); }

.auth-toggle-pass:focus-visible { outline:2px solid var(--green-2); outline-offset:2px; }

.auth-msg {
    font-size: var(--text-body); line-height:1.45; text-align:center; color:var(--gize-danger); background:var(--gize-danger-bg);
    border:1px solid color-mix(in srgb, var(--gize-danger) 32%, transparent); border-radius:4px; padding:10px 12px; opacity:0; animation:authFadeUp var(--duration-rare) var(--ease-drawer) forwards, authShake .4s ease .05s;
  }

.auth-msg.ok { color:var(--gize-success); background:var(--gize-success-bg); border-color:color-mix(in srgb, var(--gize-success) 35%, transparent); animation:authFadeUp var(--duration-rare) var(--ease-drawer) forwards; }

@media (max-width:380px) {
    .auth-card { padding:28px 20px 22px; max-width:100%; }
    .auth-logo img { height:22px; }
  }