.form-container {
    max-width: 950px;
    margin: 5px auto;
    padding: 10px;
    background-color: #343a40 ; /*     #29189d; /* Cambiando el color de fondo del formulario */
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    /*border: 1px solid #e0e0e0;*/
}
.form-title {
    text-align: center;
    margin-bottom: 10px;
    color: white; /* Cambiando el color del título a blanco */
    font-size: 3.0em;
    font-weight: 500;
}
.form-group label {
    font-weight: 600;
    color: #cfe1d9; /* Cambiando el color de las etiquetas */
    margin-bottom: 2px;
    display: block;
}
.form-group .label-value { /* Estilo para los divs que actúan como labels */
    width: calc(100% - 12px);
    padding: 6px;
    margin-bottom: 5px;
    border: 1px solid #b0bec5;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.9em;
    background-color: #f9f9f9; /* Fondo para que parezca un input deshabilitado */
    color: #495057;
    line-height: 1.3;
    height: 30px;
    display: flex;
    align-items: center;
}
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    color: #FFFFFF;
    width: calc(100% - 12px);
    padding: 6px;
    margin-bottom: 5px;
    border: none; /* Eliminando el borde */
    border-bottom: 1px solid #b0bec5; /* Agregando solo el borde inferior */
    background-color: transparent; /* Fondo transparente */
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.9em;
    height: 30px;
}
/* Ocultar las flechas de incremento/decremento en el input type="number" */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
/* Fin de ocultar flechas */
.form-group textarea {
    resize: vertical;
}
.btn-primary {
    background-color: #1e88e5;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
}
.btn-primary:hover {
    background-color: #1565c0;
}
.btn-secondary {
    background-color: #78909c;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    margin-left: 5px;
}
.btn-secondary:hover {
    background-color: #546e7a;
}
.btn-dark-gray {
    background-color: #545b62; /* Un gris más oscuro */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    margin-left: 5px;
}
.btn-dark-gray:hover {
    background-color: #343a40;
}
.form-row {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
    align-items: center;
}
.form-row > div {
    flex-grow: 1;
}

.buscar-btn {
    background-color: #ff8c00; /* ¡AHORA SERÁ NARANJA! */
    color: white; /* El texto será BLANCO */
    border: 1px solid #ff8c00; /* El borde también será NARANJA */
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.0em;
    font-weight: 500;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* NOTA: Hemos QUITADO la línea "margin-top" de aquí para que se alinee */
}

.buscar-btn:hover {
    background-color: #e67e00; /* Un naranja un poco más oscuro al pasar el ratón */
    border-color: #e67e00; /* El borde también se oscurece al pasar el ratón */
}

.btn-buscar-factura {
    background-color: #28a745 !important;
    color: white;
    border: 1px solid #28a745 !important;
    padding: 7px 16px; /* ¡AJUSTE CLAVE! 7px arriba y 7px abajo */
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.0em; /* Asegúrate de que este sea el tamaño que quieres */
    font-weight: 500;
    /* height: 30px; Ya no necesitamos una altura fija si el padding lo define */
    display: inline-flex; /* Cambiamos a inline-flex para que se comporte como un botón normal */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    box-sizing: border-box; /* Súper importante para el padding */
}

.btn-buscar-factura:hover {
    background-color: #218838 !important;
    border-color: #218838 !important;
}


.button-group {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 5px;
}


#metodoPago option {
    color: white; /* Cambia esto al color que necesites */
    background-color: black; /* Si el fondo también es blanco y el texto no se ve */
}