/* Asegúrate de que el body sea un contenedor flex y ocupe toda la altura de la ventana */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* Utiliza un contenedor para el calendario con un ancho máximo y centrado horizontalmente */
#calendario {
    background-color: #ffffff;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    /* Esto limitará el ancho del calendario al ancho del área azul */
    box-sizing: border-box;
    /* Esto asegura que el padding y border estén incluidos en el ancho total */
}

/* tabla del calendario */
#diasc {
    border-collapse: separate;
    border-spacing: 4px;
    color: black;
    margin: 0 auto;
    /* Centra el calendario horizontalmente */
    width: 60%;
}

#diasc th,
#diasc td {
    font: normal 14pt arial;
    width: 40px;
    height: 25px;
    text-align: center;
    font-size: 20px;
    color: black;
    cursor: pointer;
    /* Cambia el cursor a un puntero */
    transition: background-color 0.3s;
    /* Transición para el efecto hover */
    border-radius: 50%;
}

#diasc th {
    color: #333333 !important;
    background-color: #F3D4B7 !important;
    border-radius: 10%;
    padding: 5px;
}

/* Efecto hover circular */
#diasc td:hover {
    background-color: lightgray;
    /* Cambia el color de fondo al pasar el ratón por encima */
    border-radius: 50%;
    /* Hace que el borde sea circular */
}


/*cabecera del calendario*/
#anterior {
    float: left;
    font: bold 12pt arial;
    padding: 0.5em;
    cursor: pointer;
}

#posterior {
    float: right;
    font: bold 12pt arial;
    padding: 0.5em;
    cursor: pointer;
}

#anterior:hover {
    color: blue;
    text-decoration: underline;
}

#posterior:hover {
    color: blue;
    text-decoration: underline;
}

#titulos {
    font: normal 14pt "arial black";
}

/* Posibilidad de citas mensajes */
.manana-naranja {
    background: #fff;
    border: 2px solid #EFB956;
    color: #EFB956;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}

.tarde-verde {
    background: #fff;
    border: 2px solid #61B964;
    color: #61B964;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}

.manana-naranja:hover,
.tarde-verde:hover {
    background: #fff;
}

.seleccionado-azul {
    background-color: #fff;
    border: 2px solid #428FE0;
    color: #428FE0;
}

.manana-naranja,
.tarde-verde,
.seleccionado-azul {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display: block;
    float: left;
    height: 8px;
    margin-right: 10px;
    margin-top: 2px;
    width: 8px;
    padding: 2px;
}

/* Cita Propuesta: */
.contenidoCentrado {
    text-align: left;
}

.centrado {
    margin: auto;
}

.separarArribaMas {
    margin-top: 30px;
}

.separarAbajoMas {
    margin-bottom: 30px;
}

h2.cita-propuesta {
    border-right: 3px solid #f4d4b4;
    border-left: 3px solid #f4d4b4;
    color: #333333;
    font-size: 14pt;
    margin-bottom: 20px;
    padding: 10px;
    position: relative;
    line-height: normal;
}

#contenido-texto {
    clear: left;
    padding-top: 10px;
}

/* Seleccionar empleado */
h2.seleccion-empleado {
    background: none;
    color: #333333;
    display: inline-block;
    font-size: 14pt;
    padding: 10px;
    line-height: normal;
    margin-bottom: 20px;
    border-bottom: 5px solid #f4d4b4;
    /* Barra debajo del texto */
}

/* Seleccionar horario */
h2.seleccion-horario {
    background: none;
    color: #333333;
    display: inline-block;
    font-size: 14pt;
    padding: 10px;
    line-height: normal;
    margin-bottom: 20px;
    border-bottom: 5px solid #f4d4b4;
    /* Barra debajo del texto */
}


#contenedor {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Estilos para el horario */
#horas {
    width: 100%;
    border-spacing: 10px 10px;
}

/* Espaciado calendario-horario */
.horario {
    width: 350px;
    margin: 0 auto;
    /* Centra horizontalmente el contenedor */
    text-align: center;
    /* Centra horizontalmente el texto dentro del contenedor */
}

/* CURSOR SELECCIONABLE PARA LAS CELDAS */
td {
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 10px;
    /* Añade un poco de espacio alrededor del texto dentro de cada celda */
}

/* TAMAÑO HORAS */
#horas td {
	background-color: #fafafa;
    font-size: 20px;
    padding: 10px;
    padding-left: 20px;
    /* Borde gris */
    box-shadow: 2px 2px 10px rgb(86 85 85 / 23%);
    border-radius: 10px;
    /* Añade bordes redondeados a las celdas */
    margin: 10px;
    /* Añade un margen alrededor de las celdas */
}

#horas td:hover {
    background-color: lightgray;
}


/* ESTILOS ALERTA GIF */
.overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 1);

}

.overlay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}

/* Centra todo el contenido dentro de .empleados */
.empleados {
    margin: 20px 0;
    /* Añade un margen arriba y abajo */
    display: flex;
    /* Usa Flexbox */
    justify-content: center;
    /* Centra los empleados horizontalmente */
    text-align: center;
    /* Centra horizontalmente el contenido */
}

#empleadosTable {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	border-spacing: 10px 10px;
}

.empleado {
    flex: 1 0 auto;
    margin: 5px;
    /* Añade un pequeño margen alrededor de cada empleado para separarlos */
    padding: 10px;
    /* Añade un poco de espacio alrededor del texto dentro de cada empleado */
    background-color: #fafafa;
    font-size: 20px;
    box-shadow: 2px 2px 10px rgb(86 85 85 / 23%);
    border-radius: 5px;
    cursor: pointer;
    /* Cambia el cursor a un puntero cuando se pasa el ratón por encima */
}

.empleado:hover {
    background-color: rgb(212 236 236);
    box-shadow: 0 0 0 5px #d4ececbd;
    color: #000000;
}