/* CSS Responsive para el Selector de Productos */
/* Ajustes para móviles en vertical: "Producto" y su selector en la misma fila */

@media (max-width: 576px) {

    /* Contenedor del selector de producto en una sola fila (grid robusto) */
    #selectorProducto {
        display: grid;
        grid-template-columns: minmax(90px, 35%) 1fr;
        align-items: center;
        column-gap: 8px;
        row-gap: 0;
        margin-bottom: 10px;
        font-size: 14px;
        /* Fuente más pequeña para móviles */
    }

    /* Elimina saltos de línea forzados si existen */
    #selectorProducto br {
        display: none;
    }

    /* Título "Producto" más compacto y sin cortes de línea */
    #selectorProducto>label,
    #selectorProducto>b,
    #selectorProducto>strong,
    #selectorProducto>span,
    #selectorProducto>p,
    #selectorProducto label,
    #selectorProducto b,
    #selectorProducto strong,
    #selectorProducto span,
    #selectorProducto p {
        margin: 0 !important;
        font-weight: 600;
        white-space: nowrap;
        font-size: 13px;
        /* Label más pequeño */
    }

    /* Asegurar que el select ocupe el resto del ancho y vaya a la col 2 */
    #selectorProducto select,
    #selectorProducto #selectorProductoSelect {
        grid-column: 2;
        min-width: 0;
        width: 100%;
        font-size: 13px;
        /* Selector más pequeño */
        padding: 6px 8px;
        /* Padding reducido */
    }

    /* Primer hijo (texto del título) a la columna 1 */
    #selectorProducto :first-child {
        grid-column: 1;
    }

    /* Si el script envuelve el contenido, evitar que rompa la fila */
    #selectorProducto .selectorProductoWrapper,
    #selectorProducto .selector-producto-container,
    #selectorProducto>div {
        display: contents;
    }
}

/* Para tablets */
@media (max-width: 768px) and (min-width: 577px) {
    #selectorProducto {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    #selectorProducto>label {
        margin: 0;
        font-weight: 600;
        min-width: fit-content;
    }

    #selectorProducto select,
    #selectorProducto #selectorProductoSelect {
        flex: 1;
        max-width: none;
    }
}