@charset "UTF-8";
/* ══════════════════════════════════════════════════════
   LaboraYa — Transicion.css
   Animación al iniciar sesión (igual a TransicionScreen de la app):
   arco naranja girando + logo que crece + "Labora-Ya".
   Usa las variables --white, --orange y --gray-900 de cada página.
══════════════════════════════════════════════════════ */

.login-transicion {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: var(--white);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.login-transicion.show { opacity: 1; visibility: visible; }

/* Contenedor de 90 × 90 (como el Canvas de la app) */
.lt-logo-wrap {
  position: relative;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
}

/* Arco de 270° girando cada 1.2 s */
.lt-arco {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: ltGiro 1.2s linear infinite;
}
.lt-arco circle {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 202.6 67.6;   /* 75 % de la circunferencia (r = 43) */
}

/* Logo circular: crece de 0.6 a 1 en 350 ms */
.lt-logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(.6);
}
.login-transicion.show .lt-logo {
  animation: ltEscala .35s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* "Labora-Ya" */
.lt-marca {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem; font-weight: 700;
  color: var(--gray-900);
}
.lt-marca b { color: var(--orange); }

@keyframes ltGiro   { to { transform: rotate(360deg); } }
@keyframes ltEscala { to { transform: scale(1); } }