/* Pantalla de carga inicial: el logo se dibuja (la R, la flecha que sale de la pata y las dos líneas menta),
   aparece "recepta" y una barra fina avanza hasta que la app está lista. Se va con un fundido. */
.carga-inicial {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background:
    radial-gradient(60vmax 60vmax at 30% 25%, rgba(43, 75, 255, 0.07), transparent 60%),
    radial-gradient(50vmax 50vmax at 75% 80%, rgba(20, 199, 154, 0.07), transparent 60%),
    var(--niebla, #f6f8fb);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.carga-inicial.lista { opacity: 0; visibility: hidden; }
.carga-inicial.lista .carga-contenido { transform: scale(1.04); }

.carga-contenido {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  transition: transform 0.45s ease;
}

/* Isotipo */
.carga-logo {
  width: 88px; height: 88px; overflow: visible;
  animation: carga-respira 2.4s ease-in-out 1.5s infinite;
  transform-origin: center;
}
.carga-logo path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.carga-logo .trazo-r { stroke: var(--cobalto, #2b4bff); animation: carga-dibujar 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards; }
.carga-logo .trazo-flecha { stroke: var(--cobalto, #2b4bff); animation: carga-dibujar 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.7s backwards; }
.carga-logo .trazo-menta { stroke: var(--menta, #14c79a); animation: carga-impulso 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.carga-logo .trazo-menta:nth-of-type(3) { animation-delay: 0.95s; }
.carga-logo .trazo-menta:nth-of-type(4) { animation-delay: 1.05s; }

/* Nombre */
.carga-nombre {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1;
  color: var(--tinta, #141a33);
  animation: carga-subir 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards;
}

/* Barra de progreso indeterminada */
.carga-barra {
  position: relative; width: 132px; height: 3px; border-radius: 3px; overflow: hidden;
  background: var(--perla, #e6eaf2);
  animation: carga-subir 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.95s backwards;
}
.carga-barra::after {
  content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, var(--cobalto, #2b4bff), var(--menta, #14c79a));
  animation: carga-avanzar 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Si tarda demasiado (sin conexión, falla al bajar la app) */
.carga-demora { margin: 4px 0 0; color: var(--pizarra, #6b7489); font-size: 0.9rem; text-align: center; animation: carga-subir 0.4s ease backwards; }
.carga-demora button {
  margin-top: 10px; padding: 8px 14px; border: 1px solid var(--perla, #e6eaf2); border-radius: 8px;
  background: var(--hoja, #fff); color: var(--cobalto, #2b4bff); font: inherit; font-weight: 600; cursor: pointer;
}

@keyframes carga-dibujar { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } }
@keyframes carga-impulso { from { stroke-dashoffset: 1; transform: translateX(-6px); opacity: 0; } }
@keyframes carga-subir { from { opacity: 0; transform: translateY(8px); } }
@keyframes carga-avanzar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes carga-respira { 50% { transform: scale(1.04); } }

/* Sin animaciones: el logo y el nombre aparecen quietos (el estado final es el normal) */
@media (prefers-reduced-motion: reduce) {
  .carga-inicial, .carga-inicial *, .carga-inicial *::after { animation: none !important; transition: none !important; }
  .carga-barra::after { left: 30%; }
}

/* Logo de la barra lateral: al pasar el mouse se dibuja igual que en la carga y "recepta" se tipea letra por letra */
.marca .letras > span { display: inline-block; }
.marca.animando .logo path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.marca.animando .trazo-r { animation: carga-dibujar 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.05s backwards; }
.marca.animando .trazo-flecha { animation: carga-dibujar 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.65s backwards; }
.marca.animando .trazo-menta { animation: carga-impulso 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards; }
.marca.animando .trazo-menta:last-of-type { animation-delay: 1s; }
.marca.animando .letras > span { animation: marca-tipear 0.01s steps(1) calc(1.15s + var(--i) * 0.085s) backwards; }
.marca.animando .letras::after {
  content: ''; display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; vertical-align: -0.12em; border-radius: 1px;
  background: var(--logo-acento, #14c79a); animation: marca-cursor 0.5s steps(1) infinite;
}
@keyframes marca-tipear { from { max-width: 0; opacity: 0; } }
@keyframes marca-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marca.animando *, .marca.animando .letras::after { animation: none !important; } .marca.animando .letras::after { display: none; } }

/* El lugar de la barra de desplazamiento queda reservado siempre: cuando aparece (al terminar de cargar), nada se corre */
html { scrollbar-gutter: stable; }