/* CSS optimizado para el catálogo - reducir espaciado entre columnas */

/* Contenedor principal del catálogo */
.catalogo-compacto {
    margin: 0;
    padding: 0;
}

/* Cabecera de la tabla - reducir padding */
.catalogo-compacto .cabecera-tabla {
    margin-bottom: 0.25rem;
}

.catalogo-compacto .cabecera-tabla .row {
    margin: 0;
    padding: 0.25rem 0;
}

.catalogo-compacto .cabecera-tabla .row > div {
    padding: 0.25rem 0.5rem;
}

/* Lista de productos - reducir espaciado */
.catalogo-compacto .lista-productos {
    margin: 0;
    padding: 0;
}

/* Filas de productos - reducir padding vertical */
.catalogo-compacto .fila-producto {
    margin: 0;
    padding: 0.5rem 0 !important; /* Reducir de py-2 a py-1 */
    border-bottom: 1px solid #dee2e6;
}

.catalogo-compacto .fila-producto:last-child {
    border-bottom: none;
}

/* Columnas - reducir padding horizontal */
.catalogo-compacto .fila-producto > div {
    padding: 0 0.5rem !important; /* Reducir padding horizontal */
}

/* Optimización específica por columna */
.catalogo-compacto .col-5 {
    padding-left: 0.75rem !important; /* Un poco más a la izquierda */
    padding-right: 0.25rem !important;
}

.catalogo-compacto .fila-producto .col-2:not(:last-child) {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* Columna Acción (última col-2) - dar más espacio */
.catalogo-compacto .fila-producto .col-2:last-child {
    padding-left: 0.5rem !important;
    padding-right: 0.75rem !important; /* Más espacio a la derecha */
}

.catalogo-compacto .col-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* Badges - reducir tamaño y márgenes */
.catalogo-compacto .badge {
    font-size: 0.65em !important; /* Reducir de small a más pequeño */
    margin: 0 !important;
    padding: 0.25rem 0.4rem !important;
}

.catalogo-compacto .badge.bg-primary {
    margin-right: 0.25rem !important; /* Reducir de me-2 a me-1 */
}

/* Controles de cantidad - hacerlos más compactos */
.catalogo-compacto .cantidad-input {
    width: 30px !important; /* Reducir de 35px a 30px */
    height: 28px !important;
    padding: 0.125rem !important;
    font-size: 0.75rem !important;
}

.catalogo-compacto .btn-sm {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.75rem !important;
    min-width: 24px;
    height: 28px;
}

.catalogo-compacto .d-flex.justify-content-center {
    gap: 0.125rem !important; /* Reducir espacio entre botones */
}

/* Checkbox No sustituir - layout horizontal alineado con el checkbox */
.catalogo-compacto .form-check {
    margin: 0 !important;
    padding: 0;
    min-height: auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.catalogo-compacto .form-check-input {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0 !important;
}

.catalogo-compacto .form-check-label {
    font-size: 0.65rem !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Botones de añadir - hacerlos más compactos y estrechos */
.catalogo-compacto .btn[data-add-opcion],
.catalogo-compacto .btn[data-add-sin] {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.7rem !important;
    margin-top: 0.25rem;
    width: auto !important; /* Que ocupe solo el contenido */
    min-width: auto;
    white-space: nowrap;
}

/* Ajuste específico para columna Acción */
.catalogo-compacto .col-2:last-child .form-check {
    margin-bottom: 0.75rem !important; /* Más espacio antes del botón */
}

.catalogo-compacto .col-2:last-child .btn {
    margin-top: 0 !important; /* Sin margen superior */
}

/* Texto de productos - hacerlo más compacto */
.catalogo-compacto .small {
    font-size: 0.75rem !important; /* Reducir un poco más */
    line-height: 1.2 !important;
}

.catalogo-compacto .fw-semibold {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
}

/* Precios - optimizar visualización */
.catalogo-compacto .text-success {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* Responsive - mantener legibilidad en móviles */
@media (max-width: 768px) {
    .catalogo-compacto .fila-producto {
        padding: 0.75rem 0 !important; /* Un poco más en móvil */
    }
    
    .catalogo-compacto .fila-producto > div {
        padding: 0 0.25rem !important;
    }
    
    .catalogo-compacto .badge {
        font-size: 0.6em !important;
    }
    
    .catalogo-compacto .form-check-label {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 576px) {
    .catalogo-compacto .fila-producto {
        padding: 1rem 0 !important; /* Más espacio en móviles pequeños */
    }
    
    .catalogo-compacto .cantidad-input {
        width: 35px !important; /* Un poco más grande en móvil */
    }
}