@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@font-face {
    font-family: 'century';
    src: url('/wp-content/plugins/reserva-restaurante/centurygothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'century-bold';
    src: url('/wp-content/plugins/reserva-restaurante/centurygothic_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Estilos para el sistema de reservas */
#reserva-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-family: 'CENTURY GOTHIC', sans-serif;
	background:#fff;
padding:1vw;
	border-radius: 1rem;
}
.ui-datepicker-month {text-transform:uppercase;}
.calendario p {color:#133C66;font-size:1.5rem;}
.logotipo img {width:450px;display:block;margin:auto;padding-bottom:30px;padding-top:30px;}
#mensaje-seleccion div {
	color:#133C66;
}
#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;
}
.bronce {color:#B28336!important;font-family:'CENTURY GOTHIC', sans-serif;}
.negro {color:#000; font-weight:600;}
.circulo-container {
    text-align: center; /* Centra el texto debajo de los círculos */
    margin: 0 20px; /* Espaciado entre los círculos */
	
}
#restaurante {margin-bottom:10px!important;}
.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: #133C66; /* 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 */
}
#horario-restaurante {margin-bottom:50px;font-weight:600;}
#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:'CENTURY GOTHIC', sans-serif;font-size:1.2rem;}
#reserva-container .circulo.active {
    background-color: #133C66;
    color: #fff;
	margin:auto;
}


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

#reserva-container label {
    font-size: 1.3rem;
    margin-bottom: 10px;
    display: block;
    color:#133C66;
	font-family:'CENTURY GOTHIC', sans-serif;
	width:100%;
	font-weight:600;
	margin-top:10px;
}
.legal {font-size:14px;}
.legal a {color:#133C66;}
.legal p {font-family:'CENTURY GOTHIC', sans-serif;font-size:14px!important;}
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;
}

.azul {color:#0C3762;font-size:1.5rem;font-family:'CENTURY GOTHIC', sans-serif;font-weight:600;}
#reserva-container select {margin-bottom:50px;}
.azul-light {
	color:#0C3762;font-weight:600;
}
.light {
	font-weight:300;
}
#reserva-container button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #B18235;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
	transition: all .2s;
}

#reserva-container button:hover {
    background-color: #B18235;
	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: #133C66;  /* Mantengo el color blanco que ya estás usando */
    margin-bottom: 10px;
    text-align: center; /* Asegura que el texto del título esté centrado */
	font-family:'CENTURY GOTHIC', sans-serif;
}

/* 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: #B18235;
    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: #B18235;
    color: #fff;
    padding: 10px;
}

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

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

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


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

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

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

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

.custom-button:hover {
    background-color: #B18235 !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:'century', sans-serif!important;}
#mensaje-hora {font-family:'CENTURY GOTHIC', sans-serif!important;font-size:1.5rem;}

/* Cambiar el color de fondo del calendario */
    .ui-datepicker {
        background: #133C66; /* Fondo más claro */
        border: 1px solid #133C66; /* 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: #133C66; /* 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: #3b4930; /* Texto blanco */
        border: none; /* Sin borde */
        
        width: 30px; /* Ancho */
        height: 30px; /* Alto */
    }

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

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

    /* Cambiar el color del título del mes */
    .ui-datepicker-title {
        color: #133C66; /* Texto blanco */
    }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background:#133C66!important;}
.naranja {color:#B28336;}
#volver-atras {font-family:'CENTURY GOTHIC', sans-serif;}
#volver-atras:hover {cursor:pointer;}
#enviar-reserva {font-family:'CENTURY GOTHIC', sans-serif;text-transform:uppercase;}
#enviar-reserva:hover {cursor:pointer;}
.hora:hover {cursor:pointer;}

.swal-button {background: #133C66;font-family: 'CENTURY GOTHIC', sans-serif;font-size:1.5rem;}
.swal-button:hover {background: #133C66!important;}
#nuevos-campos h3 {color:#133C66;font-weight:600;}

@media (max-width:700px){
	.logotipo img {width:300px;}
	.nobr {display:none;}
}