/*
 * Eagle DS — las pantallas de acceso (login, solicitar acceso, cuenta bloqueada).
 *
 * VERSIÓN: 2.3 · 20 Oct 2026
 *
 * HISTORIAL
 *   2.3  20 Oct 2026  Las pantallas de acceso cargan eagle-tokens.css (sus colores ya son tokens) y esos tokens ponen el
 *                     fondo de Bootstrap en el gris del ERP: los campos y tarjetas quedaban grises. Aquí vuelve a blanco.
 *   2.2  19 Oct 2026  Diseño anterior retirado: las páginas de acceso cargan esta hoja siempre; lo que pisaba del <style>
 *                     propio de cada una (91 declaraciones) se quitó de ahí.
 *   2.1  17 Oct 2026  El login ya no repite «Eagle ERP» bajo el logo de la tarjeta (Jorge).
 *   2.0  17 Oct 2026  EL PANEL ES LA FLOTA. De ocho opciones (cuatro de arte en SVG, cuatro con las fotos del sitio de
 *                     marketing eimportacion.com.mx), Jorge eligió «Nuestra flota»: la flota frente al centro de
 *                     distribución, con un velo marino que la deja leer. El logo sale del panel y va A COLOR en la tarjeta
 *                     del formulario, arriba de «Eagle ERP»; el texto de la marca baja hacia el pie del panel. Las
 *                     demás opciones y su selector se borraron.
 *   1.4  17 Oct 2026  Opciones con las fotos del sitio, a prueba. (1.3: opciones de arte en SVG, a prueba.)
 *   1.2  17 Oct 2026  El título y el pie de la tarjeta van centrados (Jorge).
 *   1.1  17 Oct 2026  También la página «Tu sesión expiró» (templates/csrf_failure.html, .card-csrf) lleva el panel de
 *                     marca y la tarjeta del login.
 *   1.0  17 Oct 2026  Primera versión (Jorge: «esto también hazle el rebranding»). Las tres plantillas de templates/auth
 *                     no heredan base.html, así que no les llega eagle-ds.css: esta hoja les da el mismo lenguaje.
 *                     A la izquierda, un panel de marca en el azul marino de la barra (logo blanco, la franja de
 *                     identidad roja y azul, un patrón geométrico tenue); a la derecha, el MISMO formulario de siempre
 *                     con los campos, textos y acciones intactos. En teléfono el panel se vuelve una cabecera.
 *                     Se carga después del <style> propio de cada plantilla.
 */
:root {
  --acc-navy: #163a5c; --acc-navy-2: #1f4e78; --acc-blue: #086db6; --acc-blue-600: #065d9c; --acc-red: #e01237;
  --acc-text: #14212e; --acc-text-2: #3f4d5c; --acc-text-3: #5f6c7b; --acc-border: #c3ccd7; --acc-bg: #f2f4f7;
  --acc-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { font-family: var(--acc-font); }
.bi, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: bootstrap-icons !important; }

body.eds-acceso {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); align-items: stretch; justify-items: stretch;
  min-height: 100vh; margin: 0; background: var(--acc-bg); color: var(--acc-text); -webkit-font-smoothing: antialiased;
}

/* ---- el panel de marca ---- */
.acc-brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px;
  padding: 48px 56px 40px; color: #fff; background: #00284b;
}
/* La flota frente al centro de distribución (foto del sitio de marketing, original de 1,200 px). El velo baja de
   transparente a marino sólido para que el texto, abajo, se lea sobre cualquier parte de la foto. */
.acc-foto { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: cover;
  background-image: linear-gradient(180deg, rgba(0, 40, 75, .35) 0%, rgba(0, 40, 75, .08) 26%, rgba(0, 40, 75, .55) 50%, rgba(0, 40, 75, .88) 70%, #00284b 90%), url("../img/acceso/flota.webp");
  background-position: center, 42% 30%; }
.acc-brand-t, .acc-brand-f { position: relative; z-index: 1; }
.acc-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--acc-red) 0 18%, var(--acc-blue) 18% 100%); }
.acc-brand-t { max-width: 460px; }
.acc-brand-t .acc-ceja { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .92; margin-bottom: 12px; }
.acc-brand-t .acc-ceja::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.acc-brand-t h1 { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; margin: 0 0 12px; color: #fff; }
.acc-brand-t p { font-size: 16px; line-height: 1.55; opacity: .82; margin: 0; }
.acc-brand-f { font-size: 12.5px; opacity: .65; }

/* ---- el formulario (el mismo de siempre) ---- */
body.eds-acceso > .login-container, body.eds-acceso > .registro-container, body.eds-acceso > .lockout-container {
  align-self: center; justify-self: center; width: calc(100% - 64px); max-width: 420px; margin: 40px 0;
  background: #fff; border-radius: 10px; border: 1px solid #dde3ea; box-shadow: 0 18px 50px rgba(11, 30, 52, .12); padding: 36px 36px 28px;
  animation: acc-in .4s cubic-bezier(.2, .8, .2, 1) both;
}
body.eds-acceso > .registro-container { max-width: 560px; }
@keyframes acc-in { from { opacity: 0; transform: translateY(10px); } }
/* el logo vive en la tarjeta, a color, arriba del título (2.0) */
body.eds-acceso .login-logo, body.eds-acceso .registro-logo { display: block; text-align: center; margin: 0 0 18px; }
body.eds-acceso .login-logo img, body.eds-acceso .registro-logo img { width: 150px; max-width: 60%; height: auto; }
/* en el login el logo ya dice quién es: el título «Eagle ERP» sobra (Jorge: «con el puro logo está bien»). El aviso de
   ambiente de pruebas no depende de él: es la franja naranja fija de arriba. */
/* oculto a la vista pero NO a los lectores de pantalla: el panel de marca es aria-hidden y sin este h2 la página no tendría título */
body.eds-acceso .login-title h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.eds-acceso .login-title, body.eds-acceso .registro-title { text-align: center; margin-bottom: 24px; }
body.eds-acceso .login-title h2, body.eds-acceso .registro-title h2, body.eds-acceso .lockout-title { font-size: 24px; font-weight: 600; color: var(--acc-text); letter-spacing: -.01em; }
body.eds-acceso .login-title p, body.eds-acceso .registro-title p { color: var(--acc-text-3); }
body.eds-acceso .form-label { color: var(--acc-text-2) !important; font-weight: 600; font-size: .82rem !important; }
body.eds-acceso .form-control, body.eds-acceso .form-select { border-radius: 6px; border-color: var(--acc-border); padding: 11px 14px; color: var(--acc-text); }
body.eds-acceso .input-group-text { border-radius: 6px 0 0 6px; border-color: var(--acc-border); background: #f5f7fa; color: var(--acc-text-3); }
body.eds-acceso .input-group > .form-control { border-radius: 0 6px 6px 0; }
body.eds-acceso .form-control:focus, body.eds-acceso .form-select:focus { border-color: var(--acc-blue); box-shadow: 0 0 0 3px rgba(8, 109, 182, .18); }
body.eds-acceso .input-group:focus-within .input-group-text { color: var(--acc-blue); border-color: var(--acc-blue); }
body.eds-acceso .btn-primary, body.eds-acceso .btn-login, body.eds-acceso .btn-registro, body.eds-acceso .btn-volver {
  background: var(--acc-blue) !important; border: 0 !important; border-radius: 6px !important; padding: 12px !important; font-weight: 600; letter-spacing: .01em; transition: background .15s, transform .1s;
}
body.eds-acceso .btn-primary:hover, body.eds-acceso .btn-login:hover, body.eds-acceso .btn-registro:hover, body.eds-acceso .btn-volver:hover { background: var(--acc-blue-600) !important; transform: none; }
body.eds-acceso .btn-primary:active, body.eds-acceso .btn-login:active { transform: translateY(1px); }
body.eds-acceso .btn-outline-secondary { border-color: var(--acc-border); color: var(--acc-text-2); border-radius: 6px; }
body.eds-acceso .btn-outline-secondary:hover { background: #f5f7fa; color: var(--acc-text); border-color: var(--acc-border); }
body.eds-acceso .alert { border: 0; border-left: 4px solid currentColor; border-radius: 6px; }
body.eds-acceso .alert-danger { background: #fdecef; color: #7a0a20; border-left-color: #b00e2e; }
body.eds-acceso .alert-warning { background: #fff4e0; color: #6b3209; border-left-color: #d97706; }
body.eds-acceso .alert-success { background: #e8f6ed; color: #0f5a2b; border-left-color: #15803d; }
body.eds-acceso .alert-info { background: #e7f1fb; color: #0a3f69; border-left-color: #0b5a96; }
body.eds-acceso .footer-text { text-align: center; color: var(--acc-text-3); border-top: 1px solid #e3e7ed; padding-top: 16px; margin-top: 24px; }
body.eds-acceso .footer-text p { margin: 0 0 2px; }
body.eds-acceso a { color: #0a5a95; }

/* ---- teléfono: el panel de marca se vuelve cabecera ---- */
@media (max-width: 900px) {
  body.eds-acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acc-brand { padding: 26px 22px 30px; }
  .acc-brand-t h1 { font-size: 26px; margin-top: 14px; }
  .acc-brand-t p, .acc-brand-f { display: none; }
  body.eds-acceso > .login-container, body.eds-acceso > .registro-container, body.eds-acceso > .lockout-container { width: calc(100% - 32px); margin: -18px 0 28px; padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { body.eds-acceso > * { animation: none !important; } }
body.eds-acceso .btn-back { background: var(--acc-blue) !important; border: 0 !important; border-radius: 6px !important; padding: 11px 18px !important; font-weight: 600; }
body.eds-acceso .btn-back:hover { background: var(--acc-blue-600) !important; transform: none; }
body.eds-acceso .info-box { background: #e7f1fb; color: #0a3f69; border: 0; border-left: 4px solid #0b5a96; border-radius: 6px; }
body.eds-acceso .lockout-info { background: #fff4e0; color: #6b3209; border: 0; border-left: 4px solid #d97706; border-radius: 6px; }
body.eds-acceso .lockout-icon, body.eds-acceso .lockout-icon .bi { color: var(--acc-navy-2); }
body.eds-acceso .lockout-container { text-align: left; }
/* registro y bloqueo traen su propio `padding` en el body: el panel de marca va a sangre */
body.eds-acceso { padding: 0 !important; }
@media (max-width: 900px) {
  .acc-brand { gap: 14px; justify-content: flex-start; }
  .acc-brand-t h1 { margin-top: 2px; }
}
/* el botón de «Volver al Login» traía su color de texto de la página: oscuro sobre azul, ilegible */
body.eds-acceso .btn-primary, body.eds-acceso .btn-login, body.eds-acceso .btn-registro, body.eds-acceso .btn-back,
body.eds-acceso .btn-primary *, body.eds-acceso .btn-back * { color: #fff !important; }

/* 1.1 · la página «Tu sesión expiró» (csrf_failure.html): misma tarjeta que el login, alineada a la izquierda */
body.eds-acceso { display: grid; }
body.eds-acceso > .card-csrf {
  align-self: center; justify-self: center; width: calc(100% - 64px); max-width: 420px; margin: 40px 0; text-align: left;
  background: #fff; border-radius: 10px; border: 1px solid #dde3ea; box-shadow: 0 18px 50px rgba(11, 30, 52, .12); padding: 36px 36px 28px;
  animation: acc-in .4s cubic-bezier(.2, .8, .2, 1) both;
}
body.eds-acceso > .card-csrf > img { display: block; width: 150px; height: auto; margin: 0 auto 18px; }
body.eds-acceso .card-csrf .icono { color: var(--acc-navy-2); }
body.eds-acceso .card-csrf h1 { font-size: 24px; font-weight: 600; color: var(--acc-text); letter-spacing: -.01em; margin: 8px 0 8px; }
body.eds-acceso .card-csrf p { color: var(--acc-text-2); }
body.eds-acceso .card-csrf .btn-eagle { background: var(--acc-blue); border-radius: 6px; padding: 12px 20px; color: #fff; width: 100%; justify-content: center; }
body.eds-acceso .card-csrf .btn-eagle:hover { background: var(--acc-blue-600); }
body.eds-acceso .card-csrf .nota { color: var(--acc-text-3); border-top: 1px solid #e3e7ed; padding-top: 16px; margin-top: 24px; }
@media (max-width: 900px) {
  body.eds-acceso > .card-csrf { width: calc(100% - 32px); margin: -18px 0 28px; padding: 26px 22px 22px; }
}
/* las páginas traen su `p { color: … }` propio (csrf_failure.html: gris): el panel de marca va siempre en blanco */
.acc-brand .acc-brand-t p, .acc-brand .acc-brand-t span, .acc-brand .acc-brand-f { color: #fff; }
.acc-brand .acc-brand-t h1 { color: #fff; font-size: 40px; }
@media (max-width: 900px) { .acc-brand .acc-brand-t h1 { font-size: 26px; } }

@media (max-width: 900px) { .acc-brand-t h1 { font-size: 28px; } .acc-brand { min-height: 190px; justify-content: flex-end; } }

/* 2.3: con eagle-tokens.css cargado, Bootstrap pinta campos y tarjetas con el gris del ERP; en el acceso van blancos. */
:root { --bs-body-bg: var(--eds-surface); }