/* ============================================================
PANTALLA DE CARGA CON LA MARCA DEL CLIENTE
------------------------------------------------------------
Dos animaciones, según lo que tenga el tema:
TRAZO el contorno del isotipo se dibuja pieza por pieza. Exige
`img/isotipo_trazo.svg` en el tema (hoy: gesto, forero_lara).
RESPALDO el logo latiendo dentro de un anillo que gira. Funciona con
cualquier PNG o JPG, así que sirve para el resto de clientes.
El SVG del trazo se inyecta EN LÍNEA (ver core/templatetags/marca_tags.py):
dentro de un ![]()
estas reglas no alcanzarían a las figuras.
============================================================ */
.pantalla-carga {
position: fixed;
inset: 0;
z-index: 2000; /* por encima de los modales de Bootstrap (1055) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 26px;
padding: 24px;
/* Opaco a propósito. Con `backdrop-filter` el compositor deja pasar lo de
abajo a medias —se veía la página entera a través de la pantalla— y en un
teléfono de obra desenfocar todo el viewport cuesta caro para nada. */
background: #ffffff;
animation: carga-entrar .18s ease-out;
}
/* El `display: flex` de arriba le gana al atributo `hidden`, que es solo una
regla del navegador. Sin esto la pantalla saldría siempre puesta. */
.pantalla-carga[hidden] {
display: none;
}
[data-bs-theme="dark"] .pantalla-carga {
background: #0d1422;
}
@keyframes carga-entrar {
from { opacity: 0 }
to { opacity: 1 }
}
.pantalla-carga__texto {
margin: 0;
/* La familia va aquí y no se hereda del : la pestaña de espera que
abre `PantallaCarga.pestana()` es un documento suelto, sin Bootstrap,
y el texto salía en serif. */
font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
font-size: .95rem;
color: #475569;
text-align: center;
max-width: 30ch;
}
[data-bs-theme="dark"] .pantalla-carga__texto {
color: #94a3b8;
}
/* El aviso de red lenta. Aparece solo cuando la espera se alarga, así que va
más apagado que el rótulo: informa, no alarma. */
.pantalla-carga__aviso {
margin: -12px 0 0;
font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
font-size: .85rem;
line-height: 1.45;
color: #94a3b8;
text-align: center;
max-width: 34ch;
animation: carga-entrar .25s ease-out;
}
[data-bs-theme="dark"] .pantalla-carga__aviso {
color: #64748b;
}
.pantalla-carga__aviso[hidden] {
display: none;
}
/* ---------- animación de trazo ---------- */
.pantalla-carga__marca svg {
display: block;
height: 130px;
width: auto;
/* Las figuras llevan stroke="currentColor": el color se da con `color`,
no con `stroke`, porque el atributo del le gana a la herencia. */
color: var(--client-primary, #0d6efd);
}
[data-bs-theme="dark"] .pantalla-carga__marca svg {
color: var(--client-primary-light, #60a5fa);
}
.pantalla-carga__marca [pathLength] {
stroke-dasharray: 100; /* pathLength="100" normaliza todas las figuras */
stroke-dashoffset: 100;
animation: carga-trazar 2.8s ease-in-out infinite;
}
@keyframes carga-trazar {
0% { stroke-dashoffset: 100 }
42%, 70% { stroke-dashoffset: 0 }
100% { stroke-dashoffset: -100 }
}
/* ---------- respaldo: logo + anillo ---------- */
.pantalla-carga__marca--respaldo {
position: relative;
display: grid;
place-items: center;
width: 190px;
height: 190px;
}
.pantalla-carga__logo {
/* Sin alto explícito un SVG sin width/height colapsa a 0 dentro de un
contenedor grid; y con alto fijo todos los logos quedan del mismo
tamaño óptico, sean anchos o cuadrados. */
height: 46px;
width: auto;
max-width: 140px;
object-fit: contain;
animation: carga-latir 1.6s ease-in-out infinite;
}
.pantalla-carga__anillo {
position: absolute;
width: 172px;
height: 172px;
border-radius: 50%;
border: 3px solid rgba(100, 116, 139, .18);
border-top-color: var(--client-primary, #0d6efd);
animation: carga-girar 1s linear infinite;
}
[data-bs-theme="dark"] .pantalla-carga__anillo {
border-color: rgba(255, 255, 255, .12);
border-top-color: var(--client-primary-light, #60a5fa);
}
@keyframes carga-girar {
to { transform: rotate(360deg) }
}
@keyframes carga-latir {
0%, 100% { transform: scale(1) }
50% { transform: scale(1.055) }
}
/* ---------- móvil ---------- */
@media (max-width: 575.98px) {
.pantalla-carga__marca svg { height: 104px }
.pantalla-carga__marca--respaldo { width: 150px; height: 150px }
.pantalla-carga__anillo { width: 136px; height: 136px }
}
/* Quien pidió menos movimiento ve la marca quieta, pero la ve: la pantalla
sigue diciendo que hay algo en curso. */
@media (prefers-reduced-motion: reduce) {
.pantalla-carga,
.pantalla-carga__logo,
.pantalla-carga__anillo { animation: none }
.pantalla-carga__marca [pathLength] {
animation: none;
stroke-dashoffset: 0;
}
}