/* =========================================================
   INDUSTRIAL 505 — auth.css
   Pantalla de inicio de sesión (panel administrativo)
   (usa las variables/tokens definidos en styles.css)
   ========================================================= */

body.auth-body {
  background: var(--off-white);
  min-height: 100vh;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .auth-shell { grid-template-columns: 1fr 1fr; }
}

/* ---------- Panel de marca (izquierda) ---------- */
.auth-brand-panel {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl);
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(29,78,137,0.22), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
@media (min-width: 960px) { .auth-brand-panel { display: flex; } }

.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px);
  pointer-events: none;
}

.auth-brand-top { position: relative; z-index: 1; }
.auth-brand-top .brand-word { color: var(--white); }

.auth-brand-mid { position: relative; z-index: 1; max-width: 420px; }
.auth-brand-mid .eyebrow { color: var(--safety); }
.auth-brand-mid .eyebrow::before { background: repeating-linear-gradient(45deg, var(--white) 0 4px, var(--safety) 4px 8px); }

.auth-brand-title {
  color: var(--white);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: uppercase;
  margin-top: var(--space-sm);
  line-height: 1.2;
}

.auth-brand-mid > p {
  margin-top: var(--space-sm);
  color: rgba(255,255,255,0.72);
  font-size: 0.96rem;
}

.auth-features {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
}
.auth-features svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--safety);
  margin-top: 1px;
}

.auth-brand-bottom {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}

/* ---------- Panel del formulario (derecha) ---------- */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-form-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
}
@media (min-width: 960px) { .auth-form-topbar { justify-content: flex-end; } }
@media (max-width: 959px) { .auth-form-topbar .brand { display: flex; } }
@media (min-width: 960px) { .auth-form-topbar .brand { display: none; } }

.back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--steel-gray);
}
.back-link:hover { color: var(--steel-blue); }
.back-link svg { width: 16px; height: 16px; }

.auth-form-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-card .eyebrow { margin-bottom: 6px; }
.auth-card h1 {
  font-size: 1.7rem;
  text-transform: uppercase;
}
.auth-sub {
  color: var(--steel-gray);
  font-size: 0.92rem;
  margin-top: 6px;
}

/* ---------- Alerta ---------- */
.auth-alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-top: var(--space-md);
}
.auth-alert.is-visible { display: flex; }
.auth-alert.error { background: #FCEEEC; color: #A8352A; }
.auth-alert.success { background: #EAF6EF; color: #1E7B45; }
.auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Formulario ---------- */
#login-form { margin-top: var(--space-lg); }

.field-group { margin-bottom: var(--space-md); }
.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 6px;
}

.field-input-wrap { position: relative; }
.field-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--fog);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--steel-blue);
  box-shadow: 0 0 0 3px rgba(29,78,137,0.13);
}
.field-input-wrap.has-toggle .field-input { padding-right: 44px; }

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--steel-gray-light);
  border-radius: 6px;
}
.toggle-password:hover { color: var(--steel-blue); background: var(--fog); }
.toggle-password svg { width: 18px; height: 18px; }

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--steel-gray);
  cursor: pointer;
}
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--steel-blue); cursor: pointer; }

.auth-foot-note {
  margin-top: var(--space-lg);
  font-size: 0.8rem;
  color: var(--steel-gray-light);
  text-align: center;
}

/* ---------- Botón con estado de carga ---------- */
.btn .btn-loading-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(10,35,66,0.3);
  border-top-color: var(--navy-2);
  animation: spin-auth 0.7s linear infinite;
  display: none;
}
.btn.is-loading .btn-loading-dot { display: inline-block; }
.btn.is-loading .btn-label { opacity: 0.7; }
.btn.is-loading { pointer-events: none; }
@keyframes spin-auth { to { transform: rotate(360deg); } }