/* CSS para corregir el problema de color en elementos span */

/* Corregir específicamente el span problemático en orden.php */
.input-group-prepend span.input-group-text[style*="display: grid"][style*="width: 102px"] {
    display: inline-flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: fit-content !important;
    padding: 6px 10px !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Corregir spans con display grid que tienen ancho fijo */
.input-group-text.bg-white.font-12 {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 80px !important;
    max-width: 120px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
}

/* Asegurar que el contenido interno se ajuste al texto */
.input-group-text.bg-white.font-12 small,
.input-group-text.bg-white.font-12 div {
    width: auto !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Corregir spans con display inline-block para que se ajusten al contenido */
span[style*="display: inline-block"] {
    width: auto !important;
    max-width: fit-content !important;
}

/* Corregir spans con display grid para que se ajusten al contenido */
span[style*="display: grid"] {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Específico para spans de tipo de pago */
.input-group-prepend .input-group-text {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 80px !important;
    max-width: 120px !important;
    padding: 6px 10px !important;
    text-align: left !important;
}

/* Asegurar que los textos dentro se ajusten */
.input-group-prepend .input-group-text small {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    font-size: 10px !important;
}

.input-group-prepend .input-group-text .font-medium {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    font-size: 9px !important;
}

/* Corregir spans con colores de fondo dinámicos */
span[style*="border: 1px solid"] {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 4px 8px !important;
}

/* Responsive: En pantallas pequeñas, permitir más flexibilidad */
@media (max-width: 768px) {
    .input-group-text.bg-white.font-12,
    .input-group-prepend .input-group-text {
        min-width: 70px !important;
        max-width: 100px !important;
        font-size: 9px !important;
    }
    
    .input-group-prepend .input-group-text small {
        font-size: 8px !important;
    }
    
    .input-group-prepend .input-group-text .font-medium {
        font-size: 7px !important;
    }
}

/* Asegurar que los bordes de color se mantengan */
span[style*="border: 1px solid"]:not([style*="border-left: 0px"]) {
    border-width: 1px !important;
    border-style: solid !important;
}

/* Para inputs que siguen a estos spans */
input[style*="border-left: 0px"] {
    border-left: 0px !important;
}