@charset "utf-8";
/* CSS Document */

.head {
	width: 98%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	}

 header {
            background-image: linear-gradient(#02306c, #001c34); /* Color de fondo azul oscuro */
            color: #fff; /* Color del texto */
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
	 		margin-bottom: 50px;
        }

        /* Estilos para el logo */
        .logo {
            font-size: 24px;
            font-weight: bold;
        }

/* Estilos para el menú hamburguesa */
      
.dropdown {
    Position: relative;
    display: inline-block;
}

.dropdown-btn {
    background-color: #182065; /* Color del botón */
    color: #ffd500;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-btn span {
    font-size: 24px; /* Tamaño del icono */
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: rgba(39, 45, 94, 0.8); /* Fondo gris con baja opacidad */
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Mostrar el menú cuando el botón es clicado */
.dropdown:hover .dropdown-content {
    display: block;
}	

@media (max-width: 768px){
	.dropdown {
		padding-right: 40px;
	}
}




/*Estilo para calendario*/

       body {
    		font-family: 'Roboto', sans-serif;
    		background-color: #f4f4f4;
    		margin: 0;
    		padding: 0;
}

		.container {
    		max-width: 800px;
    		margin: 40px auto;
    		padding: 20px;
    		background-color: white;
    		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    		border-radius: 8px;
		}

        h1 {
    		font-family: "Optima LT Pro Medium";
    		text-align: center;
    		color: #182065;
    		padding-top: 80px;
		}

		hr {
			width: 50%;
			height: 0%;
			margin-bottom: 50px;
		}

        .calendar-container {
    		display: flex;
    		flex-wrap: wrap;
   			width: 98%;
    		height: calc(100vh - 100px);
    		padding: 20px;
        }

        .left-column {
            flex: 1;
            background-image: linear-gradient(#001c34, #02306c);
            color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            height: 80%;
            
        }

        .left-column h2 {
            font-size: 32pt;
            margin-bottom: 20px;
            color: #ffd500;
			font-family: "Optima LT Pro Medium";
			text-align: center;
        }

        .left-column p {
            font-size: 14pt;
            line-height: 1.5;
        }

        .right-column {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-left: 20px;
        }

        .date-info {
            background-image: linear-gradient(#ffd500, #e6a700);
            padding: 20px;
            border-radius: 10px;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .date-info h2 {
            font-size: 18pt;
			text-align: right;
			font-family: "Optima LT Pro Medium";
			color: #02306c;
        }

        .calendar-box {
            background-color: #174288;
            padding: 20px;
            border-radius: 10px;
            color: white;
            box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
			height: 60%;
        }

        .calendar-box table {
            width: 100%;
			background-color: #174288;
			color: #ffd500;
            font-size: 14pt;
            border-spacing: 10px;
        }

        .calendar-box td.day-cell {
            padding: 10px;
            text-align: center;
            border-radius: 5px;
			color: white;
        }

		.calendar-box th.day-header {
            padding: 10px;
            text-align: center;
            background-color: #fa327b; /* Cambia este color para los cuadros de las letras de los días */
            color: #ffd500; /* Cambia este color para las letras iniciales de los días */
            border-radius: 5px;
		}

        .current-day {
            background-color: #fa327b;
            color: white;
        }

        .highlighted-dates {
            background-color: #001c34;
            padding: 20px;
            border-radius: 10px;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .highlighted-dates h2 {
            font-size: 24pt;
            color: #ffd500;
            margin-bottom: 20px;
        }

        .date-button {
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 10px;
            color: white;
            font-size: 16pt;
            text-decoration: none;
            display: block;
            text-align: center;
            cursor: pointer;
        }

        /* Colores personalizados para cada botón */
        .date-button-1 {
            background-color: #fa317b;
        }

        .date-button-2 {
            background-color: #41d8bf;
        }

        .date-button-3 {
            background-color: #fcc005;
        }

        .date-button-4 {
            background-color: #9c54e6;
        }

        /* Cambios de color al hacer hover */
        .date-button:hover {
            opacity: 0.8;
        }

        @media (max-width: 768px) {
            .calendar-container {
				display: flex;
                flex-direction: 1 column;
				width: 80%;
				justify-content: center;
        	}
			
			.calendar-box {
				width: auto;
				height: auto;
			}
		         
			.left-column {
				width: auto;
				height: auto;
				margin-bottom: 50px;
				align-content: center;				
			}
			.left-column a {
            	font-size: 12pt;
            	line-height: 1.5;
        }
        }