/* Estilo general del contenedor del caluwevaio */
.caluweva-container {
    display: block;
    flex-direction: column;
    align-items: center;
}

#caluweva-title {
    font-weight: bold;
   /* background-color: #f3f3f3; */ /* Color de fondo de los días de la semana */
    color: #0078d4; /* Color del texto de los días de la semana */  
	font-size: 1.5em;
}

/* Estilo para la cabecera del caluwevaio */
.caluweva-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 358px; /* Ajustar el ancho según el diseño */
    margin-bottom: 3px;
	max-width: 100%;
}

.caluweva .dayselected {
    color: white;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    width: 33px;
    height: 33px;
    margin: 0 auto;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 2;
    padding: 7px;
}

/* Estilo para los botones de la cabecera del caluwevaio */
.caluweva-header button {
    background-color: #0078d4; /* Color de fondo */
    border: none;
    color: white; /* Color del texto */
    padding: 5px 10px;
    cursor: pointer; /* Cursor de puntero */
}

.caluweva-header button:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

/* Estilo para la cuadrícula del caluwevaio */
.caluweva {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columnas para los días de la semana */
    gap: 1px;
    width: 358px; /* Ajustar el ancho para que coincida con la cabecera */
    max-width: 100%; /* Asegurarse de que se ajuste al contenedor */
}

/* Estilo para las celdas de los días del caluwevaio */
.caluweva div {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    cursor: pointer; /* Cursor de puntero */
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    overflow: hidden; /* Asegura que el pseudo-elemento no se desborde */
    color: #333; /* Color del texto predeterminado */
    font-weight: normal; /* Peso de fuente normal por defecto */
}

/* Estilo para los días del mes (no los encabezados) */
.caluweva div:not(.header) {
    position: relative; /* Necesario para el pseudo-elemento */
}

.caluweva div:not(.header)::before {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    width: 33px;
    height: 33px;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: -1;
    background-color: #0078d4;
}

/* Estilo para el hover en los días del mes */
.caluweva div:not(.header):not(.disabled-day):not(.empty-day):hover::before {
    opacity: 1; /* Mostrar el círculo al pasar el mouse */
}

/* Estilo para el texto del día al pasar el cursor */
.caluweva div:not(.header):not(.disabled-day):not(.empty-day):hover {
    color: #fff; /* Color del texto blanco al pasar el cursor */
    font-weight: bold; /* Texto en negrita al pasar el cursor */
    z-index: 2; /* Asegurarse de que el texto esté encima del círculo */
}

/* Asegurar que el texto esté encima del círculo */
.caluweva div:not(.header) {
    position: relative; /* Necesario para el z-index del texto */
}

/* Estilo para los encabezados de los días de la semana */
.caluweva .header {
    font-weight: bold;
    background-color: #f3f3f3; /* Color de fondo de los días de la semana */
    color: #0078d4; /* Color del texto de los días de la semana */
    cursor: default; /* No mostrar cursor de puntero en la cabecera */
}

/* Estilo para los casilleros vacíos (días no pertenecientes al mes actual) */
.caluweva div.empty-day {
    background-color: #f0f0f0; /* Color de fondo gris claro */
    color: #b0b0b0; /* Color del texto gris más claro */
    cursor: default; /* Mostrar cursor por defecto en los días vacíos */
}

/* Estilo para los días deshabilitados (anteriores a la fecha actual) */
.caluweva div.disabled-day {
    background-color: #e0e0e0; /* Color de fondo gris más oscuro */
    color:#a0a0a0; /* Color del texto gris más oscuro */
    cursor: not-allowed; /* Cursor de no permitido */
}

/* Estilo para el botón de mes anterior deshabilitado */
.caluweva-header button.disabled {
    background-color: #cccccc; /* Color de fondo gris para el botón deshabilitado */
    cursor: not-allowed; /* Cursor de no permitido */
    pointer-events: none; /* Deshabilitar todos los eventos del puntero */
}


/* Estilo para el día actual */
div .current-day {
   background-color: #cde5ff; /* Color de fondo verde pastel para el día actual */
   font-weight: bold; /* Hacer el texto en negrita */
   color: #333; /* Color del texto del día actual */
}