/* ===========================================================================
   Pantalla de carga de TAFUR SYSTEMS

   Se muestra al validar las credenciales y se retira cuando el escritorio
   ya esta armado. Como el ingreso recarga la pagina entera, el loader se
   pinta dos veces -- una antes de recargar y otra en la cabecera del
   documento nuevo -- y por eso todo lo que necesita para verse esta aqui,
   sin depender de ningun otro archivo ni de jQuery.

   Medidas tomadas del diseno original (lienzo de 1280x720).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Paleta.

   Los colores viven aqui y no repartidos por las reglas, para que el modo
   oscuro sea un puñado de valores y no una copia de la hoja entera.

   No usa los tokens --t-* del sistema a proposito: esta pantalla tiene que
   pintarse sin depender de theme-tokens.css, que se carga aparte.
   --------------------------------------------------------------------------- */

#tf-loader {
    --tf-fondo: #f5f3ef;
    --tf-rejilla: #e6e3de;
    --tf-tinta: #111623;
    --tf-azul: #1e5fd0;
    --tf-apagado: #8b8985;
    --tf-pie: #989693;
    --tf-riel: #dfdcd7;
}

/*
 * Modo oscuro. El fondo es la propia tinta de la marca (#111623), asi que
 * la pantalla se invierte sin salirse de la paleta.
 *
 * Dos valores no son simplemente el inverso del claro:
 *
 *   - el azul sube a #3B82F6, el mismo --t-primary que usa el resto del
 *     sistema en oscuro. El #1e5fd0 del diseno se queda en 3.1:1 sobre
 *     este fondo -- por debajo de AA, y "SYSTEMS" es justo la mitad de la
 *     marca; con #3B82F6 sube a 4.91:1.
 *   - la marca va en blanco puro, no en el hueso del fondo claro.
 *
 * Los textos secundarios suben a un gris claro (8:1 y 6.2:1 contra el
 * fondo); en el diseno claro son gris medio, que aqui seria ilegible.
 */
html.dark-mode #tf-loader {
    --tf-fondo: #111623;
    --tf-rejilla: #1d2434;
    --tf-tinta: #ffffff;
    --tf-azul: #3B82F6;
    --tf-apagado: #b0ada8;
    --tf-pie: #9a9793;
    --tf-riel: #262d3d;
}

#tf-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tf-fondo);
    /* rejilla de fondo: dos juegos de lineas de 1px cada 160px */
    background-image:
        linear-gradient(to right, var(--tf-rejilla) 1px, transparent 1px),
        linear-gradient(to bottom, var(--tf-rejilla) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px;
    opacity: 1;
    transition: opacity .45s ease;
    /* la rejilla deriva despacio hacia la derecha */
    animation: tf-rejilla 6s linear infinite;
}

#tf-loader[hidden] { display: none; }

/* estado de salida: primero se va el contenido, luego el fondo */
/* pointer-events: mientras se desvanece sigue siendo una capa a pantalla
   completa; sin esto se comeria los clics durante casi medio segundo justo
   cuando el escritorio ya esta listo para usarse */
#tf-loader.tf-saliendo { opacity: 0; pointer-events: none; }
#tf-loader.tf-saliendo .tf-centro {
    opacity: 0;
    transform: translateY(13px);   /* los 21px de reposo menos 8: sube al irse */
}

@keyframes tf-rejilla {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 160px 0, 160px 0; }
}

/*
 * En el diseno el bloque no esta centrado del todo: queda unos 21px por
 * debajo del centro del lienzo, lo que le da algo de aire por arriba. El
 * desplazamiento va en el transform porque la salida tambien lo usa.
 */
.tf-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(21px);
    transition: opacity .3s ease, transform .3s ease;
}


/* --- el icono: un comprobante que se escribe solo, en bucle --------------- */

.tf-icono {
    position: relative;
    width: 96px;
    height: 96px;
    border: 2.5px solid var(--tf-tinta);
    box-sizing: border-box;
    padding: 16px 10px 0;
}

/* el cuadrado azul que asoma por la esquina superior derecha */
.tf-icono::after {
    content: '';
    position: absolute;
    top: -13px;
    right: -13px;
    width: 26px;
    height: 26px;
    background-color: var(--tf-azul);
}

.tf-linea {
    height: 3px;
    margin-bottom: 10px;
    background-color: var(--tf-tinta);
    transform: scaleX(0);
    transform-origin: left center;
    animation: tf-escribe 2.2s ease-in-out infinite;
}

/* la primera linea es azul, como el total de un comprobante */
.tf-linea:nth-child(1) { width: 100%; background-color: var(--tf-azul); animation-delay: 0s; }
.tf-linea:nth-child(2) { width: 81%; animation-delay: .18s; }
.tf-linea:nth-child(3) { width: 86%; animation-delay: .36s; }
.tf-linea:nth-child(4) { width: 43%; animation-delay: .54s; }

/*
 * Cada linea se dibuja de izquierda a derecha, se queda un momento y
 * desaparece para que el ciclo vuelva a empezar. Los porcentajes reparten
 * ese recorrido dentro de los 2.2s del bucle.
 */
@keyframes tf-escribe {
    0%   { transform: scaleX(0); opacity: 1; }
    18%  { transform: scaleX(1); opacity: 1; }
    72%  { transform: scaleX(1); opacity: 1; }
    86%  { transform: scaleX(1); opacity: 0; }
    100% { transform: scaleX(0); opacity: 0; }
}


/* --- la marca ------------------------------------------------------------ */

/*
 * La familia y el tracking no son al gusto: se eligieron midiendo. Con esta
 * pila y peso 800 (en Windows cae en Arial Black), "TAFUR SYSTEMS" mide 721px
 * a 80px de cuerpo, contra los 719px del diseno. El line-height de .725 hace
 * que la caja abrace las mayusculas, para que los margenes de abajo sean
 * separaciones reales entre textos y no entre cajas con aire sobrante.
 */
.tf-marca {
    margin-top: 47px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: 800;
    line-height: .725;
    letter-spacing: -.027em;
    color: var(--tf-tinta);
    white-space: nowrap;
}

.tf-marca em {
    font-style: normal;
    color: var(--tf-azul);
}

.tf-rubro {
    margin-top: 51px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16.5px;
    font-weight: 500;
    line-height: .72;
    letter-spacing: .34em;
    /* el espaciado tambien queda despues de la ultima letra y descentra el
       texto; el sangrado lo devuelve al medio */
    text-indent: .34em;
    color: var(--tf-apagado);
    text-transform: uppercase;
}


/* --- la barra de avance -------------------------------------------------- */

.tf-riel {
    position: relative;
    width: 372px;
    height: 2px;
    margin-top: 48px;
    background-color: var(--tf-riel);
    overflow: hidden;
}

.tf-avance {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--tf-azul);
    animation: tf-avanza 1.8s cubic-bezier(.65, .05, .35, .95) infinite;
}

/*
 * Indeterminada a proposito: no sabemos cuanto falta, asi que el segmento
 * recorre el riel creciendo y encogiendo en vez de fingir un porcentaje.
 */
@keyframes tf-avanza {
    0%   { left: 0;    width: 4px; }
    45%  { left: 26%;  width: 112px; }
    100% { left: 100%; width: 18px; }
}


/* --- el texto de estado -------------------------------------------------- */

.tf-estado {
    margin-top: 34px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: .72;
    letter-spacing: .34em;
    text-indent: .34em;
    color: var(--tf-apagado);
    text-transform: uppercase;
    opacity: 1;
    transition: opacity .25s ease;
}

/* al cambiar de palabra se cruza un desvanecido, no un corte */
.tf-estado.tf-cambiando { opacity: 0; }


/* --- el pie -------------------------------------------------------------- */

.tf-pie {
    margin-top: 61px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: .72;
    letter-spacing: .28em;
    text-indent: .28em;
    color: var(--tf-pie);
    text-transform: uppercase;
}

.tf-pie span { margin: 0 10px; }


/* --- pantallas pequenas -------------------------------------------------- */

@media (max-width: 820px) {
    .tf-marca { font-size: 48px; margin-top: 34px; }
    .tf-icono { width: 72px; height: 72px; padding: 12px 8px 0; }
    .tf-icono::after { width: 20px; height: 20px; top: -10px; right: -10px; }
    .tf-linea { height: 2px; margin-bottom: 8px; }
    .tf-rubro { margin-top: 32px; font-size: 12px; letter-spacing: .26em; text-indent: .26em; }
    .tf-riel { width: 240px; margin-top: 32px; }
    .tf-estado { margin-top: 24px; font-size: 11px; }
    .tf-pie { margin-top: 40px; font-size: 11px; letter-spacing: .2em; text-indent: .2em; }
    .tf-pie span { margin: 0 6px; }
}

@media (max-width: 420px) {
    .tf-marca { font-size: 34px; }
    .tf-riel { width: 200px; }
    /* en un movil el pie no cabe en una linea y no aporta nada */
    .tf-pie { display: none; }
}

/* pantallas bajas: sin esto el bloque no entra y el pie queda cortado */
@media (max-height: 620px) {
    .tf-marca { margin-top: 30px; }
    .tf-rubro { margin-top: 30px; }
    .tf-riel { margin-top: 30px; }
    .tf-estado { margin-top: 22px; }
    .tf-pie { margin-top: 34px; }
}


/*
 * Accesibilidad: con el sistema configurado para reducir el movimiento se
 * deja la composicion quieta. Sigue siendo una pantalla de carga -- solo que
 * sin nada que se mueva.
 */
@media (prefers-reduced-motion: reduce) {
    #tf-loader { animation: none; }
    .tf-linea { animation: none; transform: scaleX(1); }
    .tf-avance { animation: none; left: 0; width: 100%; opacity: .35; }
}