/* STREAMING_CHUNK:Definiendo variables CSS globales para el plugin... /
:root {
--lcp-text-color: inherit; / Hereda el color del tema por defecto /
--lcp-num-color: #0073aa;  / Azul clásico de WordPress por defecto */
--lcp-font-size: 1rem;
--lcp-font-weight-label: 600;
--lcp-font-weight-num: 700;
--lcp-gap: 8px;
}

/* STREAMING_CHUNK:Estilizando el contenedor principal y los elementos... */
.lcp-counter-wrapper {
display: inline-flex;
font-family: inherit;
}

.lcp-counter-item {
display: flex;
align-items: center;
gap: var(--lcp-gap);
font-size: var(--lcp-font-size);
line-height: 1.5;
}

.lcp-label {
color: var(--lcp-text-color);
font-weight: var(--lcp-font-weight-label);
}

.lcp-number {
color: var(--lcp-num-color);
font-weight: var(--lcp-font-weight-num);
display: inline-block;
transition: color 0.3s ease;
}

/* STREAMING_CHUNK:Creando animaciones de estado (Carga y Actualización)... */

/* Estado de carga (Pulse sutil antes de que el JS actualice el número real) */
.lcp-number.lcp-loading {
opacity: 0.6;
animation: lcp-pulse 1.5s infinite;
}

@keyframes lcp-pulse {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}

/* Animación cuando el número se actualiza exitosamente desde la API REST */
.lcp-number.lcp-updated {
animation: lcp-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes lcp-pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); color: #46b450; /* Verde éxito momentáneo */ }
100% { transform: scale(1); }
}