/* Estilos para el sistema de reservas */
#reserva-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-family: Arial, sans-serif;
	background:#fff;
padding:1vw;
	border-radius: 1rem;
}

.calendario p {color:#3B4930;font-size:1.5rem;}
.logotipo img {width:250px;display:block;margin:auto;padding-bottom:30px;padding-top:30px;}

#reserva-container h1 {
    font-size: 48px;
    font-weight: bold;
    color: #013123;
    margin-bottom: 20px;
}
.circulos {
    display: flex; /* Hace que los contenedores de círculo estén en fila */
    justify-content: center; /* Centra los círculos horizontalmente */
    align-items: center; /* Alinea verticalmente los elementos dentro del flex */
	margin:auto;
}

.circulo-container {
    text-align: center; /* Centra el texto debajo de los círculos */
    margin: 0 20px; /* Espaciado entre los círculos */
	
}

.circulo {
    display: flex; /* Permite centrar el número dentro del círculo */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    width: 50px; /* Ancho del círculo */
    height: 50px; /* Altura del círculo */
    border-radius: 50%; /* Hace que el div sea circular */
    background-color: #DF6F46; /* Color de fondo del círculo */
    color: white; /* Color del texto dentro del círculo */
    font-size: 20px; /* Tamaño de la fuente del número */
	margin:auto;
}

.info-reserva, .confirmar-reserva {
    display: block; /* Asegura que el texto ocupe toda la línea */
    margin-top: 10px; /* Espaciado entre el círculo y el texto */
}

#reserva-container .circulos {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

#reserva-container .circulo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ecf0f1;
    color: #2c3e50;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.circulos {font-family:'grifo_llight', sans-serif;font-size:1.2rem;}
#reserva-container .circulo.active {
    background-color: #DF6F46;
    color: #fff;
	margin:auto;
}


#reserva-container .circulo p {
    margin-top: 10px;
    font-size: 14px;
    color: #2c3e50;
}

#reserva-container label {
    font-size: 1.5rem;
    color: #34495e;
    margin-bottom: 10px;
    display: block;
    color:#013123;
	font-family:'grifo_llight', sans-serif;
	width:100%;
}
input {width:100%;}
#reserva-container select,
#reserva-container input[type="date"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    border: 1px solid #bdc3c7;
    border-radius: 5px;
	margin-top:10px;
}
#reserva-container select {margin-bottom:50px;}

#reserva-container button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #DF6F46;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
	transition: all .2s;
}

#reserva-container button:hover {
    background-color: #DF6F46;
	cursor:pointer;
	transform:scale(1.1);
}




/* --- Nuevos estilos para centrar el calendario y su título --- */

/* Centrar el título del calendario */
#reserva-container p {
    font-size: 1.5rem;;
    color: #DF6F46;  /* Mantengo el color blanco que ya estás usando */
    margin-bottom: 10px;
    text-align: center; /* Asegura que el texto del título esté centrado */
}

/* Centrar el calendario */
#datepicker {
    margin: 5px auto; /* Centra el calendario horizontalmente */
    display: inline-block; /* Elimina el ancho completo y permite centrar */
}

/* Estilos del calendario (jQuery UI Datepicker) */
.ui-datepicker {
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ui-datepicker-header {
    background-color: #2c3e50;
    color: #fff;
    padding: 10px;
}

.ui-state-default {
    background-color: #3498db;
    color: #fff;
}

.ui-state-hover {
    background-color: #2980b9;
}

.ui-state-active {
    background-color: #2c3e50;
}
/* Estilos para las horas disponibles */
.horarios-container {
    margin-top: 30px;
}
.horarios-container h2 {color:#DF6F46;}


.horarios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Grid de dos columnas */
    gap: 10px;
    margin: 20px 0;
}

.hora {
    padding: 10px;
    background-color: #DF6F46;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hora:hover {
    background-color: #DF6F46;
	opacity:.8;
    color: #fff;
	cursor:pointer!important;
}

.custom-button {
    background-color: #DF6F46 !important; /* Cambiar color de fondo */
    color: white !important; /* Cambiar color del texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px 20px; /* Relleno interno */
    font-size: 16px; /* Tamaño de fuente */
}

.custom-button:hover {
    background-color: #2e3b28 !important; /* Color al pasar el mouse */
}

#flechita i {font-size:2rem;animation: desaparecer 3s ease infinite;}

@keyframes desaparecer {
	0 % {
		opacity:1;
		transform:translateY(0px);
	}
	50% {
		opacity:0;
		transform:translateY(-10px);
	}
}

#reserva-container h1 h2 h3 button p label {font-family:'grifo_llight', sans-serif!important;}
#mensaje-hora {font-family:'grifo_llight', sans-serif!important;font-size:1.5rem;}

/* Cambiar el color de fondo del calendario */
    .ui-datepicker {
        background: #f9f9f9; /* Fondo más claro */
        border: 1px solid #DF6F46; /* Borde */
        color: #333; /* Color del texto */
        font-family: 'Arial', sans-serif; /* Fuente */
        border-radius: 5px; /* Bordes redondeados */
    }

    /* Cambiar el color de los días */
    .ui-datepicker td {
        padding: 5px; /* Espaciado */
    }

    /* Cambiar el color de los días seleccionados */
    .ui-datepicker .ui-datepicker-current-day a {
      
        color: #fff; /* Texto blanco */
      
    }

    /* Cambiar el color del texto al pasar el mouse */
    .ui-datepicker td a:hover {
        background: #DF6F46; /* Fondo al pasar el mouse */
        color: #fff; /* Texto blanco */
    }

    /* Cambiar el estilo de los botones de navegación */
    .ui-datepicker .ui-datepicker-prev, 
    .ui-datepicker .ui-datepicker-next {
        
        color: #DF6F46; /* Texto blanco */
        border: none; /* Sin borde */
        
        width: 30px; /* Ancho */
        height: 30px; /* Alto */
    }

    /* Cambiar el estilo de los encabezados */
    .ui-datepicker th {
        background: #DF6F46; /* Fondo */
        color: #fff; /* Texto blanco */
    }

    /* Cambiar el color de la cabecera */
    .ui-datepicker-header {
        background: #DF6F46; /* Fondo */
        color: #fff; /* Texto blanco */
    }

    /* Cambiar el color del título del mes */
    .ui-datepicker-title {
        color: #DF6F46; /* Texto blanco */
    }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background:#DF6F46!important;}

#volver-atras {font-family:'grifo_llight', sans-serif;}
#volver-atras:hover {cursor:pointer;}
#enviar-reserva {font-family:'grifo_llight', sans-serif;text-transform:uppercase;}
#enviar-reserva:hover {cursor:pointer;}
.hora:hover {cursor:pointer;}

.swal-button {background: #DF6F46;font-family: 'grifo_llight', sans-serif;font-size:1.5rem;}
.swal-button:hover {background: #DF6F46!important;}
#nuevos-campos h3 {color:#DF6F46;}