/*
 * Loader de TML4YOU (Epic 20, Nelson 19/10; propuesta en el artefacto "Loader de TML4YOU"). El logo animado
 * (tml/img/tml4you-loader.svg) en 2 momentos:
 * 1. Al abrir el home: pantalla completa blanca, el logo al centro y "Cargando…". Una sola vez por sesion
 *    (html.tml-entered); las demas paginas no la tienen.
 * 2. Esperando una respuesta (TmlLoader.show): la pagina atras, atenuada, y una tarjeta blanca con el logo y lo que pasa.
 * El texto del logo es azul noche: en el tema oscuro el logo va siempre sobre blanco (la "tarjeta segura" de la Guia).
 * Lo maneja public/tml/tml-loader.js.
 */

/* 1. Al abrir */
.tml-loader-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background: #FFFFFF;
  transition: opacity .3s ease;
}
.tml-loader-splash.is-out { opacity: 0; pointer-events: none; }
/* Nelson (20/10): ya entro en esta sesion, no sale nunca (antes salia si la pagina tardaba mas de 0,4 s, encima de la
   pagina ya dibujada: se veia la pagina, el loader y otra vez la pagina) */
html.tml-entered .tml-loader-splash { display: none; }
.tml-loader-mark img { display: block; width: min(60vw, 220px); height: auto; }
.tml-loader-splash small {
  font: 500 .82rem/1.2 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  color: #475569;
}

/* 2. Esperando una respuesta */
.tml-loader-veil {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(247, 249, 252, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.tml-loader-veil.is-in { opacity: 1; }
.tml-loader-card {
  width: min(74vw, 260px);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 16px 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
}
.tml-loader-card img { display: block; width: 80%; height: auto; }
.tml-loader-card b {
  font: 600 .88rem/1.35 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  color: #0F172A;
  text-align: center;
}

/* Tema oscuro (la red social pone .theme-dark en el body) */
.theme-dark .tml-loader-splash { background: #0B1220; }
.theme-dark .tml-loader-splash .tml-loader-mark { background: #FFFFFF; border-radius: 18px; padding: 12px 14px; }
.theme-dark .tml-loader-splash small { color: #94A3B8; }
.theme-dark .tml-loader-veil { background: rgba(11, 18, 32, .72); }

/* Red social: el preloader de Framework7 ("Cargando" en una caja blanca sobre gris) no se ve; en su lugar, el loader nuevo */
body.tml-loader-spa .dialog.dialog-preloader { display: none !important; }
body.tml-loader-spa:has(.dialog.dialog-preloader.modal-in) .dialog-backdrop { opacity: 0 !important; visibility: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .tml-loader-splash, .tml-loader-veil { transition: none; }
}