/* Pantallas de acceso (login, primer administrador, segundo factor, acceso de
   emergencia, consentimiento OAuth). Sin nav: la tarjeta centrada sobre el
   lienzo, con un halo tenue del azul CLOUP.CO arriba. */

body {
  display: grid; place-items: center; min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  background: var(--bg);
}

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

/* Marca sobre la tarjeta: identifica el sistema antes de pedir nada. */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-5); }
.auth-brand__mark {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text);
  color: var(--bg); font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
}
.auth-brand__name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.auth-brand__tag { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; margin-left: -4px; }

.auth-card .card { background: var(--surface); padding: var(--space-6); box-shadow: var(--shadow-2); }
.auth-card h1 { font-size: var(--fs-lg); margin: 0 0 var(--space-4); }
.auth-card .lede { color: var(--muted); font-size: var(--fs-sm); margin: -0.5rem 0 var(--space-5); line-height: 1.55; }
.auth-card .field { margin-bottom: var(--space-3); }
/* Solo los campos de escritura: una casilla no es un campo de texto y con
   width:100% arrasaba la fila del consentimiento. */
.auth-card input:not([type="checkbox"]):not([type="radio"]) { width: 100%; height: var(--control-h); background: var(--bg); }
.auth-card .btn, .auth-card .btn-primary { height: var(--control-h); font-size: var(--fs-base); }
.auth-card form > button[type="submit"] { margin-top: var(--space-2); width: 100%; }
.auth-err {
  background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); color: var(--red);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm); margin-bottom: var(--space-4);
}
.auth-foot { margin-top: var(--space-5); text-align: center; font-size: var(--fs-xs); color: var(--muted); }

/* login.html: acceso federado con Microsoft, con salida a contraseña. */
.ms-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.or { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--fs-xs); margin: var(--space-4) 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.fallback-note { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.auth-switch { margin-top: var(--space-4); text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* two_factor.html */
.totp-secret { display: block; font-size: var(--fs-base); letter-spacing: 0.08em; text-align: center; padding: var(--space-3); margin: var(--space-3) 0; word-break: break-all; }
.hint { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--space-3); }

/* oauth_consent.html */
.consent-app { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin-bottom: var(--space-4); }
.consent-app__mark { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text); flex: none; }
.consent-app__id h1 { margin: 0; font-size: var(--fs-md); }
.consent-app__eyebrow { font-size: var(--fs-xs); color: var(--muted); display: block; }
.consent-app__host, .consent-app__id { font-size: var(--fs-xs); color: var(--muted); word-break: break-all; }
.consent-heading { font-size: var(--fs-sm); color: var(--muted); margin: var(--space-3) 0 var(--space-2); }
.consent-scopes { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.scope { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.scope__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.scope__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.scope__title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.scope__title em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); margin-left: 6px; }
.scope__title em.warn { color: var(--amber); }
.scope__desc { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.scope--toggle { cursor: pointer; }
.scope--toggle input { flex: none; margin: 3px 0 0; }
.consent-warn { font-size: var(--fs-xs); color: var(--amber); margin-bottom: var(--space-3); }
.consent-actions { display: flex; gap: var(--space-2); }
.consent-actions .btn, .consent-actions .btn-primary { flex: 1; height: var(--control-h); }
.consent-foot { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

/* El cascarón de acceso usa <main class="auth-card">: no es el marco de la app. */
main.auth-card { background: transparent; border: 0; margin: 0; min-height: 0; flex: none; }