/* =========================================================================
   carga_ia.css — Pantalla de carga de la IA: el gato negro analista frente a
   su gráfica (js/ia_trabajos.js). La usan index.html y reporte.html.
   ========================================================================= */
/* Aparece tras un instante: si la respuesta ya estaba guardada, ni se ve */
.carga-ia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px 6px;
    text-align: center;
    animation: cargaIaAparece 260ms ease 350ms both;
}

.carga-ia-gato {
    width: min(280px, 82%);
}

.carga-ia-gato .cg {
    display: block;
    width: 100%;
    height: auto;
}

.carga-ia-titulo {
    font-weight: 700;
    font-size: calc(15px * var(--escala-texto, 1));
}

.carga-ia-paso {
    color: var(--texto-2);
    min-height: 1.4em;
}

.carga-ia-reloj {
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
}

.carga-ia-nota {
    color: var(--texto-3);
    max-width: 380px;
}

.carga-ia-compacta {
    flex-direction: row;
    text-align: left;
    gap: 12px;
    padding: 8px 4px;
}

.carga-ia-compacta .carga-ia-gato {
    width: 116px;
    flex: 0 0 116px;
}

@keyframes cargaIaAparece {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* La gráfica del gato toma los colores del tema (claro u oscuro) */
.cg-pantalla {
    fill: var(--superficie-2);
    stroke: var(--borde);
    stroke-width: 1.5;
}

.cg-rejilla {
    stroke: var(--borde);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.cg-sube rect {
    fill: var(--sube);
}

.cg-baja rect {
    fill: var(--baja);
}

.cg-mecha {
    stroke-width: 1.6;
    stroke-linecap: round;
}

.cg-sube .cg-mecha {
    stroke: var(--sube);
}

.cg-baja .cg-mecha {
    stroke: var(--baja);
}

/* Las velas crecen una tras otra desde su base */
.cg-vela {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: cgVela 2.8s ease-in-out infinite;
}

@keyframes cgVela {
    0% {
        transform: scaleY(0.12);
        opacity: 0.35;
    }
    30%,
    82% {
        transform: scaleY(1);
        opacity: 1;
    }
    100% {
        transform: scaleY(0.12);
        opacity: 0.35;
    }
}

/* La línea de tendencia se dibuja y apunta hacia arriba */
.cg-linea,
.cg-flecha {
    stroke: var(--acento);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cg-linea {
    stroke-dasharray: 100;
    animation: cgLinea 2.8s ease-in-out infinite;
}

.cg-flecha {
    animation: cgFlecha 2.8s ease-in-out infinite;
}

@keyframes cgLinea {
    0% {
        stroke-dashoffset: 100;
    }
    60%,
    85% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 100;
    }
}

@keyframes cgFlecha {
    0%,
    50% {
        opacity: 0;
    }
    62%,
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* El gato: la cola se mece, la cabeza mira la gráfica, parpadea y la
   patita toca la moneda, que brinca y gira */
.cg-cola {
    transform-box: view-box;
    transform-origin: 96px 149px;
    animation: cgCola 2.6s ease-in-out infinite;
}

@keyframes cgCola {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg);
    }
}

.cg-cabeza {
    transform-box: view-box;
    transform-origin: 128px 104px;
    animation: cgCabeza 5.6s ease-in-out infinite;
}

@keyframes cgCabeza {
    0%,
    100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

.cg-pupilas {
    animation: cgMirar 5.6s ease-in-out infinite;
}

@keyframes cgMirar {
    0%,
    40%,
    100% {
        transform: translateX(-3px);
    }
    55%,
    85% {
        transform: translateX(1.5px);
    }
}

.cg-ojos {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: cgParpadeo 4.8s ease-in-out infinite;
}

@keyframes cgParpadeo {
    0%,
    93%,
    100% {
        transform: scaleY(1);
    }
    96% {
        transform: scaleY(0.12);
    }
}

.cg-patita {
    transform-box: view-box;
    transform-origin: 160px 118px;
    animation: cgPatita 1.4s ease-in-out infinite;
}

@keyframes cgPatita {
    0%,
    100% {
        transform: rotate(0deg);
    }
    35% {
        transform: rotate(-12deg);
    }
    55% {
        transform: rotate(5deg);
    }
}

.cg-moneda-arriba {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: cgMoneda 1.4s ease-in-out infinite;
}

@keyframes cgMoneda {
    0%,
    45%,
    100% {
        transform: translateY(0) scaleX(1);
    }
    65% {
        transform: translateY(-16px) scaleX(0.2);
    }
    80% {
        transform: translateY(-6px) scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .carga-ia,
    .cg-vela,
    .cg-linea,
    .cg-flecha,
    .cg-cola,
    .cg-cabeza,
    .cg-pupilas,
    .cg-ojos,
    .cg-patita,
    .cg-moneda-arriba {
        animation: none;
    }

    .cg-linea {
        stroke-dashoffset: 0;
    }
}

/* "Ya está listo" con su botón (los avisos flotantes no reciben clics) */
.notificacion-ia {
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
}

/* El aviso es del color del texto: su botón va al revés para que se lea */
.notificacion-ia .btn {
    flex: 0 0 auto;
    background: var(--fondo);
    color: var(--texto);
    border-color: transparent;
}