body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0; /* Eliminar el padding del body */
    background-color: #f0f0f0;
    height: 100vh; /* Altura completa de la ventana */
}

.calendar-container {
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    display: flex;
    flex-direction: column; /* Colocar los elementos en columna */
}

.grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 columnas */
    border: 1px solid #ccc; /* Borde alrededor de la cuadrícula */
    height: 100%; /* Usar altura completa */
}

.header, .week, .day {
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc; /* Borde fino para cada celda */
    text-align: center;
    background-color: #fff; /* Fondo blanco para mejorar la visibilidad */
}

.header {
    background-color: #ddd;
    font-weight: bold;
}

.week {
    background-color: #ccc;
}

.day {
    display: flex;
    flex-direction: column; /* Apilar tareas verticalmente */
    justify-content: flex-start; /* Alinear tareas al inicio */
    align-items: center; /* Centrar tareas horizontalmente */
    padding: 5px; /* Espaciado interno */
    min-height: 100px; /* Mínima altura para las celdas de los días */
    height: auto; /* Permitir que crezca según el contenido */
}

/* Alternar el fondo de las filas para mejorar la visibilidad */
.day:nth-child(odd) {
    background-color: #f9f9f9; /* Fondo gris claro para filas impares */
}

.task {
    padding: 10px; /* Espaciado interno de las tareas */
    margin: 5px 0; /* Margen entre tareas */
    border-radius: 5px;
    width: 90%; /* Ajustar para que ocupe la mayoría del espacio */
    text-align: center; /* Centrar texto en las tareas */
    color: white; /* Texto blanco por defecto */
}

/* Colores por persona */
.task.blue {
    background-color: #007bff; /* Azul para las tareas de la Persona 1 */
}

.task.red {
    background-color: #dc3545; /* Rojo para las tareas de la Persona 2 */
}

h1 {
    font-size: 2.5em; /* Tamaño de fuente más grande */
    text-align: center; /* Centrar el título */
    color: #007bff; /* Color azul */
    margin-bottom: 20px; /* Espaciado debajo del título */
    font-weight: bold; /* Hacer el texto negrita */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Sombra sutil para el texto */
}

.header-container {
    display: flex;
    justify-content: center; /* Centrar el título */
    align-items: center; /* Centrar verticalmente */
    position: relative; /* Permitir la posición absoluta del info */
    padding: 10px 0; /* Espacio interno */
}

.version-info {
    position: absolute; /* Posición absoluta */
    top: 10px; /* Ajustar posición desde el top */
    right: 20px; /* Ajustar posición desde el lado derecho */
    font-size: 0.9em; /* Tamaño de fuente más pequeño */
    color: #666; /* Color del texto */
}

.legend {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 0 15px; /* Espacio entre elementos de la leyenda */
}

.color-box {
    width: 20px; /* Ancho del cuadro de color */
    height: 20px; /* Alto del cuadro de color */
    border-radius: 3px; /* Bordes redondeados */
    margin-right: 5px; /* Espacio entre el cuadro y el texto */
}

.blue {
    background-color: #007bff; /* Azul para la Persona 1 */
}

.red {
    background-color: #dc3545; /* Rojo para la Persona 2 */
}