/* Pantallas de acceso y de error (ronda L). Dos zonas: .login-formulario (maqueta) y .login-marca (mosaico de 4 fotos).
   Cambiar una foto: reemplazar el archivo app/static/img/login/login-mosaico-N.jpg (script scripts/optimizar_fotos_login.py)
   o apuntar su variable --foto-N; el encuadre se ajusta con --pos-N. La plantilla no cambia. Celdas: 1 alta, 2 y 3 derecha, 4 ancha. */
:root {
  /* Panel derecho (L2, L3): fondo blanco, sin línea divisoria, y respaldo de cada celda si una foto falla */
  --panel-fondo: #FFFFFF;
  --celda-fondo: #EEEEEE;
  --login-fondo-form: #FFFFFF;
  --login-texto-pie: #374151;
  --login-texto-version: #4B5563;
  /* Mosaico: archivo y encuadre (background-position) de cada celda */
  --foto-1: url("../img/login/login-mosaico-1.jpg"); --pos-1: center;
  --foto-2: url("../img/login/login-mosaico-2.jpg"); --pos-2: center;
  --foto-3: url("../img/login/login-mosaico-3.jpg"); --pos-3: center;
  --foto-4: url("../img/login/login-mosaico-4.jpg"); --pos-4: center;
}

body.pagina-acceso { display: flex; flex-direction: column; min-height: 100vh; background: var(--login-fondo-form); }
.login { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Maqueta del formulario */
.login-formulario { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; padding: 32px 24px 20px; background: var(--login-fondo-form); }
.login-caja { width: 100%; max-width: 400px; margin: auto; }
.login-logo { display: block; width: 200px; height: auto; margin: 0 0 24px; }
.login-caja .marca { font-size: 1.2rem; }
.login-pie { text-align: center; font-size: .85rem; }
.login-pie p { margin: 0; }
.login-empresa { color: var(--login-texto-pie); }
.login-version { margin-top: 2px !important; color: var(--login-texto-version); }

/* Panel de marca: mosaico tipo bento sobre fondo claro. Decorativo, sin texto */
.login-marca {
  position: relative; overflow: hidden; min-height: 0; padding: 20px;
  display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
  background: var(--panel-fondo);
}
.mosaico-celda { position: relative; overflow: hidden; border-radius: 16px; min-height: 0; background: var(--celda-fondo); }
.mosaico-celda::before {
  content: ""; position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  transition: transform 300ms ease;
}
.mosaico-celda:hover::before { transform: scale(1.03); }
.mosaico-1 { grid-column: 1; grid-row: 1 / 3; }
.mosaico-2 { grid-column: 2; grid-row: 1; }
.mosaico-3 { grid-column: 2; grid-row: 2; }
.mosaico-4 { grid-column: 1 / 3; grid-row: 3; }
.mosaico-1::before { background-image: var(--foto-1); background-position: var(--pos-1); }
.mosaico-2::before { background-image: var(--foto-2); background-position: var(--pos-2); }
.mosaico-3::before { background-image: var(--foto-3); background-position: var(--pos-3); }
.mosaico-4::before { background-image: var(--foto-4); background-position: var(--pos-4); }
@media (prefers-reduced-motion: reduce) {
  .mosaico-celda::before { transition: none; }
  .mosaico-celda:hover::before { transform: none; }
}

/* Menos de 900 px: sin panel de marca; el formulario ocupa todo */
@media (max-width: 899px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-marca { display: none; }
  .login-formulario { padding: 24px 16px 16px; }
}