/* Contenedor principal */
.acm-widget-card {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    transition: transform 0.2s ease;
    max-width: 1200px;
    
    /* --- FLEXBOX SYSTEM --- */
    display: flex;
    align-items: center;     /* Centrado verticalmente entre icono y texto */
    justify-content: center; /* Centrado horizontal del bloque */
    gap: 15px;               /* Espacio entre el icono y el texto */
    flex-direction: column;  /* Por defecto: Arriba (Columna) */
    text-align: center;      /* Por defecto: Centrado */
}

/* Reset de imagen: Quitamos márgenes viejos porque ahora usamos 'gap' */
.acm-icon {
    display: block;
    max-width: 80px;
    height: auto;
    margin: 0; 
}

/* Contenedor de Textos (Valor + Etiqueta) */
.acm-content {
    display: flex;
    flex-direction: column;
}

/* --- VARIACIONES DE ALINEACIÓN --- */

/* 1. Izquierda (Icono a la izquierda, texto a la derecha) */
.acm-layout-left {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start; /* Opcional: para que no se centre si la tarjeta es ancha */
}

/* 2. Derecha (Icono a la derecha, texto a la izquierda) */
.acm-layout-right {
    flex-direction: row-reverse;
    text-align: right;
    justify-content: flex-end;
}

/* 3. Abajo (Icono abajo, texto arriba) */
.acm-layout-bottom {
    flex-direction: column-reverse;
}

/* 4. Arriba (Default, explícito) */
.acm-layout-top {
    flex-direction: column;
}

/* Estilos de Texto */
.acm-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    display: inline-block;
}

.acm-label {
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 5px;
}

/* --- ANIMACIONES --- */
.acm-effect-blur { animation: acmBlurIn 1.5s ease-out forwards; }
@keyframes acmBlurIn {
    0% { opacity: 0; filter: blur(20px); transform: scale(0.9); }
    100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

.acm-effect-bounce { animation: acmBounceIn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
@keyframes acmBounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}
.acm-value span { text-align: center; }

/* --- SISTEMA DE REJILLA RESPONSIVE PARA GRUPOS --- */

.acm-group-container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--acm-cols, 3), 1fr);
}

/* Máximo 4 columnas. Si tienes 6, bajan a 4. Si tienes 2, se quedan en 2. */
@media (max-width: 1100px) {
    .acm-group-container {
        grid-template-columns: repeat(min(var(--acm-cols), 4), 1fr);
    }
}

/* Tablet Vertical (< 768px) */
/* Máximo 2 columnas para que no se aprieten. */
@media (max-width: 768px) {
    .acm-group-container {
        grid-template-columns: repeat(min(var(--acm-cols), 2), 1fr);
    }
}

/* Móvil (< 480px) */
/* Siempre 1 columna para legibilidad total. */
@media (max-width: 480px) {
    .acm-group-container {
        grid-template-columns: 1fr;
    }
}