/* ── Transición entre apartados: el logo blanco se revela en azul ──────────────────
   Acotada al área de #mainContent (posición y tamaño los calcula componentes/carga-vista.js
   sobre el rect real: depende del layout, sidebar fija o barra inferior en móvil).
   Fondo = token de superficie (--navy-2), NO un blanco fijo: en el oscuro el logo blanco se ve
   desde el inicio y en el claro queda invisible hasta que el azul lo revela; mismo efecto en
   los dos temas. Hoja propia de este componente. */
.ovl-vista {
  position: fixed;
  z-index: 10003;                 /* sobre la vista, bajo mxConfirmar (9800 en su capa) y el toast */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.ovl-vista.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.ovl-vista-logo { position: relative; width: min(280px, 68vw); aspect-ratio: 20 / 3; }
.ovl-vista-logo img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain;
}
.ovl-vista-logo img:last-child { clip-path: inset(0 100% 0 0); filter: brightness(1.9); }
.ovl-vista.visible .ovl-vista-logo img:last-child { animation: logoCarga 1.4s ease-in-out forwards; }
@keyframes logoCarga { to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  .ovl-vista, .ovl-vista-logo img:last-child { transition: none; animation-duration: .01ms; }
}