/* ========================================
   COMPACTO OVERRIDE - REGLAS DE EMERGENCIA
   ======================================== */

/* Forzar 3 columnas con selectores directos */
@media (min-width: 992px) {
    .col-md-4 {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
    
    #categorias-container .row .col-md-6 {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
    
    /* Forzar que el contenedor use flexbox correctamente */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
    
    /* Reglas específicas para el contenedor de categorías */
    #categorias-container .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
    
    #categorias-container .row .col-md-4,
    #categorias-container .row .col-md-6 {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
        padding: 0 0.375rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Forzar layout horizontal en todas las cards */
    .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }
    
    /* Forzar alineación del texto en todos los títulos */
    .card-title {
        text-align: left !important;
        align-self: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Reglas específicas para categorías */
@media (min-width: 992px) {
    .categoria-card .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }
    
    .categoria-info {
        flex: 1 !important;
        text-align: left !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
    }
    
    .categoria-imagen {
        flex-shrink: 0 !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Reglas específicas para categorías - alineación vertical */
    .categoria-card .categoria-info {
        align-items: flex-end !important;
        padding-bottom: 12px !important;
        justify-content: flex-start !important;
        height: 100% !important;
    }
    
    .categoria-card .categoria-info .card-title {
        align-self: flex-end !important;
        margin-bottom: 0 !important;
        margin-top: auto !important;
    }
}

/* ========================================
   REGLAS ULTRA ESPECÍFICAS PARA FORZAR 3 COLUMNAS
   ======================================== */

@media (min-width: 992px) {
    /* Forzar 3 columnas con máxima especificidad */
    html body .container #categorias-container .row .col-md-4,
    html body .container #categorias-container .row .col-md-6 {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
        padding: 0 0.375rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Forzar flexbox en el contenedor */
    html body .container #categorias-container .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
    
    /* Reglas ultra específicas para alineación de categorías */
    html body .container #categorias-container .categoria-card .categoria-info {
        align-items: flex-end !important;
        padding-bottom: 8px !important;
    }
    
    html body .container #categorias-container .categoria-card .categoria-info .card-title {
        align-self: flex-end !important;
        margin-bottom: 0 !important;
    }
}

/* ========================================
   REGLAS DE EMERGENCIA PARA ALINEACIÓN VERTICAL
   ======================================== */

@media (min-width: 992px) {
    /* Forzar alineación vertical con selectores ultra específicos */
    html body .container #categorias-container .categoria-card .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: 100% !important;
    }
    
    html body .container #categorias-container .categoria-card .categoria-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-bottom: 12px !important;
        height: 100% !important;
    }
    
    html body .container #categorias-container .categoria-card .categoria-info .card-title {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        align-self: flex-start !important;
    }
}

/* ========================================
   REGLAS FINALES PARA ALINEACIÓN VERTICAL
   ======================================== */

@media (min-width: 992px) {
    /* Estandarizar altura de todas las cards */
    .categoria-card,
    .producto-card {
        min-height: 80px !important;
        height: 80px !important;
    }
    
    /* Reglas finales para forzar alineación vertical */
    .categoria-card .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: 100% !important;
    }
    
    .categoria-card .categoria-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-bottom: 12px !important;
        height: 100% !important;
    }
    
    .categoria-card .categoria-info .card-title {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        align-self: flex-start !important;
    }
}

/* ========================================
   PROTECCIÓN DEL HEADER - NO AFECTAR LAYOUT
   ======================================== */

/* Proteger el header de las reglas de vista compacta */
header .row .col-md-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
}

header .row .col-md-6:first-child {
    text-align: left !important;
}

header .row .col-md-6:last-child {
    text-align: right !important;
}

/* ========================================
   REGLAS PARA MÓVIL - ALINEACIÓN IZQUIERDA
   ======================================== */


@media (max-width: 991px) {
    /* Reducir espaciado entre cards en móvil - Sobrescribir mb-4 */
    #categorias-container .row .col-md-4,
    #categorias-container .row .col-md-6,
    .categorias-container .row .col-md-4,
    .categorias-container .row .col-md-6,
    #categorias-container .mb-4,
    .categorias-container .mb-4 {
        margin-bottom: 0.25rem !important; /* Reducir drásticamente el espaciado */
    }
    
    /* Forzar alineación a la izquierda en móvil */
    .categoria-card .categoria-info {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .categoria-card .categoria-info .card-title {
        text-align: left !important;
        align-self: flex-start !important;
    }
    
    .categoria-card .categoria-info .card-text {
        text-align: left !important;
        align-self: flex-start !important;
    }
}