/* patch_frontend_splash_e_icono_celulas: colores atados a los tokens de app.css (--bg, --m2, --m3);
   sin modo oscuro porque el de app.css está desactivado. */
/* Splash de inicio · Control Monterrey
   Todas las variables llevan prefijo --splash-* para no chocar con design-tokens.css.
   IMPORTANTE: --splash-fondo, --splash-mii* y --splash-miii* deben apuntar a las
   variables del sistema (ver INSTRUCCIONES, paso 2). Los hex quedan como respaldo. */
:root {
  /* paleta del sistema (design-tokens) */
  --splash-fondo: var(--bg, #ECEAE3);   /* fondo del tablero */
  --splash-logo: #1C2322;        /* grafito: "Monterrey" */
  --splash-logo-bajada: #3E4A47; /* texto secundario */
  --splash-logo-ovalo: #66716E;  /* texto tenue */
  --splash-cel: #CFE0DD;         /* acento suave, un punto más oscuro */
  --splash-cel-borde: #2F5F5E;   /* acento */
  --splash-nuc: #2F5F5E;
  --splash-nuc-in: #E6EEED;
  --splash-org-r: #2A5496;
  --splash-org-g: #8A5100;
  --splash-tinta: #1C2322; --splash-gris: #66716E; --splash-linea: #E4E2DB;
}

/* ---------- Splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--splash-fondo);
  transition: opacity .9s ease, visibility .9s;
}
#splash.oculto { opacity: 0; visibility: hidden; }
.emblema { width: min(86vw, 460px); height: auto; overflow: visible; }

/* el óvalo se dibuja solo */
.trazo-ovalo { fill: none; stroke: #fff; stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: trazar 2s cubic-bezier(.45,.05,.35,1) .4s forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

.logo-ovalo { fill: var(--splash-logo-ovalo); }
.logo-texto { fill: var(--splash-logo); }
.bajada { fill: var(--splash-logo-bajada); }

/* "Monterrey" se escribe de izquierda a derecha */
.pluma { transform: translateX(-820px); animation: escribir 2.2s cubic-bezier(.55,.1,.35,1) 1.2s forwards; }
@keyframes escribir { to { transform: translateX(0); } }

.bajada { opacity: 0; animation: aparecer 1.2s ease 3.4s forwards; }
@keyframes aparecer { to { opacity: 1; } }


/* cada célula es una residencia (colores de design-tokens) */
:root { --splash-mii: var(--m2, #3C6E71); --splash-mii-soft: var(--m2-bg, #E6EFEE); --splash-miii: var(--m3, #8A5A44); --splash-miii-soft: var(--m3-bg, #F3EAE4); }
.celula-a { --splash-cel: var(--splash-mii-soft); --splash-cel-borde: var(--splash-mii); --splash-nuc: var(--splash-mii); --splash-nuc-in: var(--splash-mii-soft); }
.celula-b { --splash-cel: var(--splash-miii-soft); --splash-cel-borde: var(--splash-miii); --splash-nuc: var(--splash-miii); --splash-nuc-in: var(--splash-miii-soft); }
/* la tercera: grafito neutro, en los tonos del logo */
:root { --splash-graf: #3E4A47; --splash-graf-soft: #E4E2DB; }
.celula-c { --splash-cel: var(--splash-graf-soft); --splash-cel-borde: var(--splash-graf); --splash-nuc: var(--splash-graf); --splash-nuc-in: var(--splash-graf-soft); }

/* células */
.cel-cuerpo { fill: var(--splash-cel); stroke: var(--splash-cel-borde); stroke-width: 2.4; stroke-linejoin: round; }
.nuc { fill: var(--splash-nuc); stroke: var(--splash-cel-borde); stroke-width: 1.2; }
.nuc-in { fill: none; stroke: var(--splash-nuc-in); stroke-width: 1.3; }
.org-r { fill: var(--splash-org-r); stroke: var(--splash-cel-borde); stroke-width: .8; }
.org-g { fill: var(--splash-org-g); stroke: var(--splash-cel-borde); stroke-width: .7; }
.celula { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.55);
  animation: brotar .85s cubic-bezier(.3,1.4,.5,1) forwards; }
.celula-a { animation-delay: 3.1s; }
.celula-b { animation-delay: 3.4s; }
.celula-c { animation-delay: 3.7s; }
@keyframes brotar { to { opacity: 1; transform: scale(1); } }
/* mientras carga, los núcleos laten suave */
.nucleo { transform-box: fill-box; transform-origin: center; animation: latir 2.2s ease-in-out 4.6s infinite; }
.celula-b .nucleo { animation-delay: 4.9s; }
.celula-c .nucleo { animation-delay: 5.2s; }
@keyframes latir { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .pluma, .celula, .bajada, .trazo-ovalo { animation: none; transform: none; opacity: 1; stroke-dashoffset: 0; }
  .nucleo { animation: none; }
}

/* ya vista en esta sesión: el <head> de index.html marca <html class="sin-splash"> antes de pintar */
.sin-splash #splash { display: none; }