/* ========================================
   COMPACTO TEXTO FIX - SOLUCIÓN DE DESBORDAMIENTO DE TEXTO
   ======================================== */

/* ========================================
   REGLAS ULTRA-ESPECÍFICAS PARA TRUNCAMIENTO EN MÓVIL
   ======================================== */

/* Móvil (max-width: 767px) - Máxima especificidad para truncamiento */
@media (max-width: 767px) {
    /* Forzar truncamiento en títulos de productos */
    html body .container #categorias-container .producto-card .producto-info .card-title,
    html body .container #categorias-container .categoria-card .categoria-info .card-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    /* Forzar truncamiento en descripciones de productos */
    html body .container #categorias-container .producto-card .producto-info .card-text,
    html body .container #categorias-container .categoria-card .categoria-info .card-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    /* Forzar truncamiento en precios de productos */
    html body .container #categorias-container .producto-card .producto-info .producto-precio,
    html body .container #categorias-container .producto-card .producto-info .producto-precio-compacto {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    /* Asegurar que los contenedores de información no se desborden */
    html body .container #categorias-container .producto-card .producto-info,
    html body .container #categorias-container .categoria-card .categoria-info {
        overflow: hidden !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Asegurar que las cards no se desborden */
    html body .container #categorias-container .producto-card,
    html body .container #categorias-container .categoria-card,
    html body .container #categorias-container .producto-card-compacta,
    html body .container #categorias-container .categoria-card-compacta {
        overflow: hidden !important;
    }
    
    /* Asegurar que los card-body no se desborden */
    html body .container #categorias-container .producto-card .card-body,
    html body .container #categorias-container .categoria-card .card-body,
    html body .container #categorias-container .producto-card-compacta .card-body,
    html body .container #categorias-container .categoria-card-compacta .card-body {
        overflow: hidden !important;
        min-width: 0 !important;
    }
}

/* ========================================
   REGLAS ADICIONALES PARA TABLET (768px a 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    /* Aplicar truncamiento también en tablet si es necesario */
    html body .container #categorias-container .producto-card .producto-info .card-title,
    html body .container #categorias-container .categoria-card .categoria-info .card-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    html body .container #categorias-container .producto-card .producto-info .card-text,
    html body .container #categorias-container .categoria-card .categoria-info .card-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    html body .container #categorias-container .producto-card .producto-info,
    html body .container #categorias-container .categoria-card .categoria-info {
        overflow: hidden !important;
        min-width: 0 !important;
    }
}

/* ========================================
   REGLAS DE EMERGENCIA - MÁXIMA ESPECIFICIDAD
   ======================================== */

/* Reglas de emergencia para cualquier tamaño de pantalla */
html body .container #categorias-container .producto-card .producto-info .card-title,
html body .container #categorias-container .categoria-card .categoria-info .card-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .container #categorias-container .producto-card .producto-info .card-text,
html body .container #categorias-container .categoria-card .categoria-info .card-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .container #categorias-container .producto-card .producto-info,
html body .container #categorias-container .categoria-card .categoria-info {
    overflow: hidden !important;
    min-width: 0 !important;
}

/* ========================================
   REGLAS ESPECÍFICAS PARA SOBRESCRIBIR BOOTSTRAP
   ======================================== */

/* Sobrescribir cualquier regla de Bootstrap que pueda interferir */
.card-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.card-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ========================================
   REGLAS FINALES DE SEGURIDAD
   ======================================== */

/* Asegurar que todos los elementos de texto se trunquen */
#categorias-container .card-title,
#categorias-container .card-text,
#categorias-container .producto-precio,
#categorias-container .producto-precio-compacto {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Asegurar que los contenedores no se desborden */
#categorias-container .producto-info,
#categorias-container .categoria-info {
    overflow: hidden !important;
    min-width: 0 !important;
}

#categorias-container .producto-card,
#categorias-container .categoria-card,
#categorias-container .producto-card-compacta,
#categorias-container .categoria-card-compacta {
    overflow: hidden !important;
}

#categorias-container .card-body {
    overflow: hidden !important;
    min-width: 0 !important;
}