/* ========================================
   VISTA COMPACTA - REPLICA DEL DISEÑO ORIGINAL
   ======================================== */

/* Modificar el grid para mostrar 4 elementos por fila */
.categorias-container .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

/* Cambiar el tamaño de las columnas para vista compacta - SOLO para categorías */
#categorias-container .row .col-md-4,
#categorias-container .row .col-md-6,
.categorias-container .row .col-md-4,
.categorias-container .row .col-md-6 {
    flex: 0 0 auto !important;
    width: 33.333% !important; /* 3 elementos por fila en PC */
    max-width: 33.333% !important;
}

#categorias-container .row .col-sm-6,
.categorias-container .row .col-sm-6 {
    flex: 0 0 auto !important;
    width: 100% !important; /* 1 elemento por fila en móvil */
    max-width: 100% !important;
}

/* Cards de categorías compactas */
#categorias-container .categoria-card,
#categorias-container .categoria-card-compacta,
.categoria-card,
.categoria-card-compacta {
    transition: transform 0.2s, box-shadow 0.2s !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    height: auto !important;
    min-height: 70px !important;
    background: #ffffff !important;
    margin-bottom: 8px !important;
}

.categoria-card:hover,
.categoria-card-compacta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

#categorias-container .categoria-card .card-body,
#categorias-container .categoria-card-compacta .card-body,
.categoria-card .card-body,
.categoria-card-compacta .card-body {
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-direction: row !important;
}

.categoria-info {
    flex: 1 !important;
    min-width: 0 !important; /* Permite que el texto se trunque */
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.categoria-info .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.categoria-info .card-text {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    color: #6c757d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.categoria-imagen {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.categoria-imagen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* Cards de productos compactas */
#categorias-container .producto-card,
#categorias-container .producto-card-compacta,
.producto-card,
.producto-card-compacta {
    transition: transform 0.2s, box-shadow 0.2s !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    height: auto !important;
    min-height: 70px !important;
    background: #ffffff !important;
    margin-bottom: 8px !important;
}

.producto-card:hover,
.producto-card-compacta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

#categorias-container .producto-card .card-body,
#categorias-container .producto-card-compacta .card-body,
.producto-card .card-body,
.producto-card-compacta .card-body {
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-direction: row !important;
}

.producto-info {
    flex: 1 !important;
    min-width: 0 !important; /* Permite que el texto se trunque */
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.producto-info .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.producto-precio,
.producto-precio-compacto {
    font-size: 0.9rem !important;
    font-weight: bold !important;
    color: #007bff !important;
    margin: 2px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.producto-info .card-text {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    color: #666 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    max-height: 1.2em !important;
}

/* Asegurar que las descripciones de categorías también se trunquen */
.categoria-info .card-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.producto-imagen {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.producto-imagen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* Placeholder para imágenes compactas */
.placeholder-img,
.placeholder-img-compacto {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 2px dashed #dee2e6 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6c757d !important;
    font-size: 1.2rem !important;
}

.placeholder-img:hover,
.placeholder-img-compacto:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    border-color: #adb5bd !important;
}

/* ========================================
   RESPONSIVE DESIGN PARA FORMATO COMPACTO
   ======================================== */

/* Desktop grande (xl) - 3 columnas */
@media (min-width: 1200px) {
    #categorias-container .col-md-4,
    .categorias-container .col-md-4 {
        width: 33.333% !important; /* 3 elementos por fila */
        flex: 0 0 33.333% !important;
    }
    
    .categoria-card,
    .producto-card,
    .categoria-card-compacta,
    .producto-card-compacta {
        min-height: 80px !important;
    }
    
    .categoria-imagen,
    .producto-imagen {
        width: 60px !important;
        height: 60px !important;
    }
    
    .categoria-info .card-title,
    .producto-info .card-title {
        font-size: 1rem !important;
    }
    
    .producto-precio,
    .producto-precio-compacto {
        font-size: 0.9rem !important;
    }
}

/* Desktop (lg) - 3 columnas */
@media (min-width: 992px) and (max-width: 1199px) {
    #categorias-container .col-md-4,
    .categorias-container .col-md-4 {
        width: 33.333% !important; /* 3 elementos por fila */
        flex: 0 0 33.333% !important;
    }
    
    .categoria-card,
    .producto-card,
    .categoria-card-compacta,
    .producto-card-compacta {
        min-height: 80px !important;
    }
    
    .categoria-imagen,
    .producto-imagen {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Regla de tablet eliminada - ahora notebooks usan reglas de PC */

/* Móvil (sm) - 1 columna */
@media (max-width: 767px) {
    .categorias-container .col-md-4 {
        width: 100% !important; /* 1 elemento por fila en móvil */
    }
    
    .categoria-card,
    .producto-card,
    .categoria-card-compacta,
    .producto-card-compacta {
        min-height: 80px !important;
    }
    
    .categoria-card .card-body,
    .producto-card .card-body,
    .categoria-card-compacta .card-body,
    .producto-card-compacta .card-body {
        padding: 10px 16px !important;
        gap: 12px !important;
    }
    
    .categoria-imagen,
    .producto-imagen {
        width: 50px !important;
        height: 50px !important;
    }
    
    .categoria-info .card-title,
    .producto-info .card-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .producto-precio,
    .producto-precio-compacto {
        font-size: 0.9rem !important;
    }
    
    .categoria-info .card-text,
    .producto-info .card-text {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    .placeholder-img,
    .placeholder-img-compacto {
        font-size: 1.2rem !important;
    }
}

/* Móvil pequeño (xs) - 1 columna */
@media (max-width: 575px) {
    .categorias-container .col-md-4 {
        width: 100% !important; /* 1 elemento por fila en móvil pequeño */
    }
    
    .categoria-card,
    .producto-card,
    .categoria-card-compacta,
    .producto-card-compacta {
        min-height: 80px !important;
    }
    
    .categoria-card .card-body,
    .producto-card .card-body,
    .categoria-card-compacta .card-body,
    .producto-card-compacta .card-body {
        padding: 10px 16px !important;
        gap: 12px !important;
    }
    
    .categoria-imagen,
    .producto-imagen {
        width: 50px !important;
        height: 50px !important;
    }
    
    .categoria-info .card-title,
    .producto-info .card-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .producto-precio,
    .producto-precio-compacto {
        font-size: 0.9rem !important;
    }
    
    .categoria-info .card-text,
    .producto-info .card-text {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    .placeholder-img,
    .placeholder-img-compacto {
        font-size: 1.2rem !important;
    }
}

/* ========================================
   ANIMACIONES Y EFECTOS
   ======================================== */

/* Animación de entrada para las cards */
.categoria-card,
.producto-card,
.categoria-card-compacta,
.producto-card-compacta {
    animation: fadeInUp 0.3s ease-out !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto de hover mejorado */
.categoria-card:hover .categoria-info .card-title,
.producto-card:hover .producto-info .card-title,
.categoria-card-compacta:hover .categoria-info .card-title,
.producto-card-compacta:hover .producto-info .card-title {
    color: #007bff !important;
}

.categoria-card:hover .categoria-info .card-text,
.producto-card:hover .producto-info .card-text,
.categoria-card-compacta:hover .categoria-info .card-text,
.producto-card-compacta:hover .producto-info .card-text {
    color: #6c757d !important;
}

.producto-card:hover .producto-precio,
.producto-card:hover .producto-precio-compacto,
.producto-card-compacta:hover .producto-precio,
.producto-card-compacta:hover .producto-precio-compacto {
    color: #28a745 !important;
}

/* Transición suave para las imágenes */
.categoria-imagen img,
.producto-imagen img {
    transition: transform 0.3s ease !important;
}

.categoria-card:hover .categoria-imagen img,
.producto-card:hover .producto-imagen img,
.categoria-card-compacta:hover .categoria-imagen img,
.producto-card-compacta:hover .producto-imagen img {
    transform: scale(1.05) !important;
}

/* ========================================
   REGLAS FORZADAS PARA VISTA COMPACTA
   ======================================== */

/* Forzar layout horizontal en todas las cards */
#categorias-container .card-body,
.categorias-container .card-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
}

/* Forzar que el contenedor principal use flexbox */
#categorias-container .row,
.categorias-container .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

/* Forzar que las columnas sean exactamente 33.333% en PC */
@media (min-width: 992px) {
    #categorias-container .row .col-md-4,
#categorias-container .row .col-md-6,
.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.1rem !important;
    }
    
    /* Sobrescribir mb-4 específicamente en PC */
    #categorias-container .mb-4,
    .categorias-container .mb-4 {
        margin-bottom: 0.1rem !important;
    }
    
    /* Forzar 3 columnas en PC con máxima especificidad para sobrescribir reglas de móvil */
    body #categorias-container .row .col-md-4,
    body #categorias-container .row .col-md-6,
    body .categorias-container .row .col-md-4,
    body .categorias-container .row .col-md-6 {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
}

/* Reglas específicas para categorías - layout horizontal */
#categorias-container .categoria-card,
.categorias-container .categoria-card {
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
}

#categorias-container .categoria-card .card-body,
.categorias-container .categoria-card .card-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    width: 100% !important;
}

#categorias-container .categoria-info,
.categorias-container .categoria-info {
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#categorias-container .categoria-imagen,
.categorias-container .categoria-imagen {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    order: 2 !important;
}

#categorias-container .col-sm-6,
.categorias-container .col-sm-6 {
    width: 100% !important; /* 1 elemento por fila en móvil */
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Forzar que las imágenes estén a la derecha */
#categorias-container .card-img-top,
#categorias-container .categoria-imagen,
#categorias-container .producto-imagen,
.categorias-container .card-img-top,
.categorias-container .categoria-imagen,
.categorias-container .producto-imagen {
    order: 2 !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

/* Forzar que el contenido esté a la izquierda */
#categorias-container .categoria-info,
#categorias-container .producto-info,
.categorias-container .categoria-info,
.categorias-container .producto-info {
    order: 1 !important;
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Forzar alineación específica para categorías */
#categorias-container .categoria-info .card-title,
.categorias-container .categoria-info .card-title {
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ========================================
   REGLAS ULTRA ESPECÍFICAS PARA SOBRESCRIBIR TODO
   ======================================== */

/* Forzar 3 columnas en PC - máxima especificidad */
@media (min-width: 992px) {
    body #categorias-container .row .col-md-4,
    body #categorias-container .row .col-md-6,
    body .categorias-container .row .col-md-4,
    body .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.1rem !important;
    }
    
    /* Forzar que el contenedor use flexbox correctamente */
    body #categorias-container .row,
    body .categorias-container .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
}

/* Forzar layout horizontal - máxima especificidad */
body #categorias-container .categoria-card .card-body,
body .categorias-container .categoria-card .card-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    width: 100% !important;
}

/* Forzar alineación de categorías - máxima especificidad */
body #categorias-container .categoria-info,
body .categorias-container .categoria-info {
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    order: 1 !important;
}

/* Forzar alineación del título de categoría - máxima especificidad */
body #categorias-container .categoria-info .card-title,
body .categorias-container .categoria-info .card-title {
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
}

body #categorias-container .categoria-imagen,
body .categorias-container .categoria-imagen {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    order: 2 !important;
}

/* Reglas específicas para móvil - máxima especificidad */
@media (max-width: 767px) {
    body #categorias-container .row .col-md-4,
    body #categorias-container .row .col-md-6,
    body .categorias-container .row .col-md-4,
    body .categorias-container .row .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Forzar layout horizontal en móvil para categorías */
    body #categorias-container .categoria-card .card-body,
    body .categorias-container .categoria-card .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 16px !important;
        width: 100% !important;
    }
    
    body #categorias-container .categoria-info,
    body .categorias-container .categoria-info {
        flex: 1 !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        order: 1 !important;
    }
    
    body #categorias-container .categoria-imagen,
    body .categorias-container .categoria-imagen {
        flex-shrink: 0 !important;
        width: 50px !important;
        height: 50px !important;
        order: 2 !important;
    }
}

/* ========================================
   REGLAS ULTRA AGRESIVAS PARA SOBRESCRIBIR BOOTSTRAP
   ======================================== */

/* Forzar 3 columnas en PC - reglas ultra específicas */
@media (min-width: 992px) {
    html body #categorias-container .row .col-md-4,
    html body #categorias-container .row .col-md-6,
    html body .categorias-container .row .col-md-4,
    html body .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.1rem !important;
    }
    
    /* Forzar layout horizontal en categorías */
    html body #categorias-container .categoria-card .card-body,
    html body .categorias-container .categoria-card .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 16px !important;
        width: 100% !important;
        text-align: left !important;
    }
    
    /* Forzar alineación del texto a la izquierda */
    html body #categorias-container .categoria-info .card-title,
    html body .categorias-container .categoria-info .card-title {
        text-align: left !important;
        align-self: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #212529 !important;
    }
}

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

/* Forzar 3 columnas con selectores más específicos */
@media (min-width: 992px) {
    .container #categorias-container .row .col-md-4,
    .container #categorias-container .row .col-md-6,
    .container .categorias-container .row .col-md-4,
    .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.1rem !important;
    }
    
    /* Forzar layout horizontal con selectores más específicos */
    .container #categorias-container .categoria-card .card-body,
    .container .categorias-container .categoria-card .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 16px !important;
        width: 100% !important;
        text-align: left !important;
    }
    
    /* Forzar alineación del texto con selectores más específicos */
    .container #categorias-container .categoria-info .card-title,
    .container .categorias-container .categoria-info .card-title {
        text-align: left !important;
        align-self: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #212529 !important;
    }
}

/* ========================================
   REGLAS FINALES PARA PC - MÁXIMA ESPECIFICIDAD
   ======================================== */

/* ========================================
   REGLAS PARA PC - MÁXIMA ESPECIFICIDAD
   ======================================== */

/* PC - Pantallas grandes (más de 1200px) */
@media (min-width: 1200px) {
    html body .container #categorias-container .row .col-md-4,
    html body .container #categorias-container .row .col-md-6,
    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;
        display: block !important;
        float: left !important;
    }
    
    /* Limpiar floats */
    html body .container #categorias-container .row::after,
    html body .container .categorias-container .row::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* PC - Pantallas medianas (768px a 1199px) - Incluye notebooks */
@media (min-width: 768px) and (max-width: 1199px) {
    html body .container #categorias-container .row .col-md-4,
    html body .container #categorias-container .row .col-md-6,
    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;
        display: block !important;
        float: left !important;
    }
    
    /* Limpiar floats */
    html body .container #categorias-container .row::after,
    html body .container .categorias-container .row::after {
        content: "";
        display: table;
        clear: both;
    }
}