.success-message {

    color: green;

    font-weight: bold;

}



.error-message {

    color: red;

    font-weight: bold;

}



.service-booking-form{

    font-size: 14px;

    display: flex; 

    flex-wrap: wrap;

}



.contenedor_formulario{

    flex: 1;

    padding: 20px;

}

.summary-column{

    flex:2;

    padding: 20px; 

    border-left: 1px solid #ccc;

    display: flex;

}

.summary-column-2{

    width: 100%;    

    /*border-radius: 50px;*/

    display: flex;    

    flex-direction: column;

    padding: 0px 40px;

}

.titulo-summary-2{    

    background-color: #1886e3; 

    width: 100%; 

    /*border-top-left-radius: 50px; 

    border-top-right-radius: 50px;*/

    height: max-content;

    padding-bottom: 0px; 

}

.titulo-summary-2 p{

    text-align: center; 

    font weight: 600; 

    font-size: 32px; 

    color: white; 

    padding: 10px;   

    width: 100%;

}

.datos_de_reserva{

    width: 100%; 

    padding: 20px; 

    display: flex; 

    flex-wrap: wrap;    

}

.datos_de_reserva_2{

    border-bottom: 1px solid #ccc; 

    /*border-bottom-left-radius: 50px; 

    border-bottom-right-radius: 50px;*/

}

.datos_de_reserva_internos{     

    padding: 0px 10px; 

    margin: 0px 10px;

    flex: 1;

}

.titulo_datos{

    width: 100%; 

    border-bottom: 1px solid #ccc;

    margin: 0px;

    padding: 0px;

}



.titulo_datos span{

    white-space: nowrap;

    padding-bottom: 0px;    

    font-size: 18px;

    font-weight: 700;

}

.datos_de_reserva_internos div{

    width: 100%;            

    padding: 10px 5px;

    margin-top: 10px;    

}



.datos_de_reserva_internos div p{

    /*line-height: 2px;*/

    margin: 0;

    padding: 0;

}

.contenedor_datos{

    padding: 0px;

    margin: 0px;

}

/* Media query para móviles (ej. pantallas menores a 768px) */
@media (max-width: 768px) {
    .service-booking-form {
        flex-direction: column; /* Apila elementos verticalmente */
    }
    
    .summary-column {
        flex: none; /* Quita el crecimiento flexible */
        width: 100%;
        border-left: none;
        border-top: 1px solid #ccc; /* Añade borde superior en móvil */
        padding: 10px; /* Reduce padding para móviles */
    }
    
    .contenedor_formulario {
        flex: none;
        width: 100%;
        padding: 10px; /* Reduce padding para móviles */
    }
    
    /* Opcional: Ajustar elementos internos para móviles */
    .form-column, .summary-column-2 {
        width: 100% !important;
    }
}



/*

label{

    white-space: nowrap;

}

.formulario_reserva{

    font-size: 14px;

}

.formulario_reserva button {  

  font-size: 14px;             

}

.formulario_reserva input {  

  font-size: 14px;

  padding: 8px;

}

.formulario_reserva input::placeholder {  

  font-size: 14px;

  padding: 8px;

}

.formulario_reserva select {

  font-size: 14px;

}

.formulario_reserva select option {

  font-size: 14px;

}

.formulario_reserva select option:checked {

  font-size: 14px;

}







    .calendar-container {

        max-height: 90vh;

        margin: 20px auto;

        padding: 10px;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        align-items: center;

        border: 1px solid #ccc;

    }



    .calendar-header {

        text-align: center;

        margin-bottom: 20px;

    }



    .calendar-header select {

        padding: 5px;

        margin: 5px;

    }



    .calendar-table {

        width: 95%;

        margin: 0 auto;

        border-collapse: collapse;

        text-align: center;

    }



    .calendar-header-row th {

        background-color: #004e74;

        color: white;

        padding: 10px;

    }



    .calendar-cell {

        border: 1px solid #ddd;

        height: 100px;

        vertical-align: top;

        padding: 5px;

        position: relative;

    }



    .calendar-cell.empty-cell {

        background-color: #f9f9f9;

    }



    .calendar-cell div {

        margin-top: 5px;

        background-color: #004e74;

        color: white;

        padding: 3px;

        border-radius: 4px;

        cursor: pointer;

    }



    .calendar-cell div:hover {

        background-color: #003352;

    }

*/