/* Reset - Elimina márgenes y estandariza el box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color:  #03376b;
}

/* Header - Fondo con gradiente */
header {
    width: 100%;
    padding: 45px 0;
        
}
.app {
    background: white;
    max-width: 1050px;
    margin: 20px auto;
    border-radius: 65px;
    padding: 90px 0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}   
.pendientes {
    font-size: 22px;
    color: #333;
    justify-content: center;
    display: flex;
    margin-top: -50px;
    margin-bottom: 30px;
}

/* Contenedor principal del Header */
.containerheader {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 520px;
    flex-wrap: wrap;
}

.h1header {
    font-size: 22px;
    color: rgb(255, 255, 255);
}

/* Navegación */
nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

nav ul li a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 65px;
    transition: all 0.3s ease;
    font-size: 18px;
    
}

/* Efecto Hover en enlaces */
nav ul li a:hover {
   color:  #95c5f3;
}


.resumen-tareas {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 1px;
}
.card-resumen {
    background: #f4f4f4;
    padding: 30px 85px;
    border-radius: 10px;
    text-align: center;
    min-width: 150px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-resumen p {
    font-size: 16px;
    margin-bottom: 20px;
}
.card-resumen span {
    font-size: 32px;
    font-weight: bold;
}
.card-resumen:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.calendario {
    width: 1000px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 10px;
}

.calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendario-header button {
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
}

.calendario-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr); /* 👈 6 filas fijas */
    height: 200px; /* 👈 altura fija */
    gap: 5px;
}

.dia {
    background: white;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
}
#mesActual {
    margin-bottom: 40px;
}
/* Estilo para el día actual */
.dia.actual {
    position: relative;
}

.dia.actual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: #0078d4;
    border-radius: 50%;
    z-index: 0;
}

.dia.actual span {
    position: relative;
    z-index: 1;
    color: white;
}

/* Ajuste para que los números se vean bien */
.dia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
}
/* Estilo para días con tareas */
.dia.tiene-tarea {
    position: relative;
}

.dia.tiene-tarea::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: #d9534f; /* rojo */
    border-radius: 50%;
    z-index: 0;
}

.dia.tiene-tarea span {
    position: relative;
    z-index: 1;
    color: white;
}

/* Si un día es actual y tiene tarea, puede predominar el azul (día actual) sobre el rojo.
   Si prefieres que se vea combinado o que predomine el rojo, ajusta el orden de las clases.
   Aquí el día actual (azul) se pinta después, así que se verá azul aunque tenga tarea.
   Si quieres que el rojo sea visible, puedes combinar o cambiar el orden de renderizado.
   Por ahora, mantendremos el día actual con prioridad visual. */

/* Indica que los días con tareas son interactivos */
.dia.tiene-tarea {
    cursor: pointer;
}
/* Tooltip personalizado para el calendario */
.calendario-tooltip {
    position: absolute;
    background: #ffffff;
    border: 1px solid #0078d4;
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 280px;
    z-index: 1000;
    pointer-events: none; /* Permite que el mouse pase a través del tooltip */
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.tooltip-item {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #ccc;
}

.tooltip-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tooltip-item strong {
    color: #03376b;
    display: block;
    margin-bottom: 4px;
}

.tooltip-instruccion {
    color: #555;
    font-style: italic;
    word-break: break-word;
}

/* Asegura que los días con tareas muestren cursor pointer */
.dia.tiene-tarea {
    cursor: pointer;
}
.tooltip-materia {
    color: #a10d0d;
    font-style: italic;
    display: block;
    margin-top: 2px;
}
/* ============================================= */
/* DISEÑO RESPONSIVO PARA MÓVILES (INDEX)        */
/* ============================================= */
@media screen and (max-width: 768px) {
    /* Fondo blanco en toda la página */
    body {
        background-color: #ffffff;
    }

    /* Header mantiene fondo azul y se ajusta */
    header {
        padding: 20px 0;
        background-color: #03376b;  /* Aseguramos fondo azul */
    }

    .headerbox {
        background-color: #03376b;
    }

    /* Contenedor del header: eliminamos padding lateral excesivo */
    .containerheader {
        padding: 0 20px;
        justify-content: space-between;
    }

    .h1header {
        font-size: 20px;
    }

    nav ul {
        gap: 0.8rem;
    }

    nav ul li a {
        font-size: 16px;
        padding: 0.3rem 0.6rem;
    }

    /* La app (contenedor blanco) ocupa casi todo el ancho */
    .app {
        max-width: 100%;
        margin: 0;
        border-radius: 0;           /* Quitamos bordes redondeados grandes */
        padding: 30px 15px;
        box-shadow: none;
        background: white;
    }

    /* Título "Pendientes" */
    .pendientes {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 20px;
    }

    /* Tarjetas de resumen (Encargadas / En progreso) */
    .resumen-tareas {
        flex-direction: row;
        gap: 15px;
        margin-top: 0;
    }

    .card-resumen {
        padding: 20px 10px;
        min-width: 0;
        flex: 1;
    }

    .card-resumen p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .card-resumen span {
        font-size: 28px;
    }

    /* Calendario: ancho completo y ajuste de grid */
    .calendario {
        width: 100%;
        padding: 10px 0;
        margin: 20px 0;
    }

    .calendario-header {
        margin-bottom: 20px;
    }

    #mesActual {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .calendario-dias span {
        font-size: 14px;
    }

    .calendario-grid {
        height: auto;
        gap: 2px;
    }

    .dia {
        min-height: 35px;
        padding: 8px 0;
        font-size: 14px;
    }

    /* Círculos más pequeños para día actual y tareas */
    .dia.actual::after,
    .dia.tiene-tarea::after {
        width: 28px;
        height: 28px;
    }

    /* Tooltip en móvil: ajustar ancho máximo */
    .calendario-tooltip {
        max-width: 220px;
        font-size: 13px;
        padding: 10px 12px;
    }

    /* Ocultar hover de tarjetas en móvil (opcional) */
    .card-resumen:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================= */
/* DISEÑO RESPONSIVO PARA MÓVILES (INDEX)        */
/* ============================================= */
@media screen and (max-width: 768px) {
    /* Fondo blanco y estructura flexible para centrar contenido */
    body {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        min-height: 100vh;          /* Ocupa al menos toda la altura de la pantalla */
        margin: 0;
        padding: 0;
    }

    /* Header mantiene fondo azul y se ajusta */
    header {
        padding: 20px 0;
        background-color: #03376b;
        flex-shrink: 0;             /* No se encoge */
    }

    .headerbox {
        background-color: #03376b;
    }

    /* Contenedor del header: eliminamos padding lateral excesivo */
    .containerheader {
        padding: 0 20px;
        justify-content: space-between;
    }

    .h1header {
        font-size: 20px;
    }

    nav ul {
        gap: 0.8rem;
    }

    nav ul li a {
        font-size: 16px;
        padding: 0.3rem 0.6rem;
    }

    /* La app se centra verticalmente en el espacio restante */
    .app {
        max-width: 100%;
        width: 100%;
        margin: auto 0;             /* Centrado vertical automático */
        border-radius: 0;
        padding: 30px 15px;
        box-shadow: none;
        background: white;
        flex: 0 1 auto;             /* No crece, no se encoge más de lo necesario */
    }

    /* Título "Pendientes" */
    .pendientes {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 20px;
    }

    /* Tarjetas de resumen (Encargadas / En progreso) */
    .resumen-tareas {
        flex-direction: row;
        gap: 15px;
        margin-top: 0;
    }

    .card-resumen {
        padding: 20px 10px;
        min-width: 0;
        flex: 1;
    }

    .card-resumen p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .card-resumen span {
        font-size: 28px;
    }

    /* Calendario: ancho completo y ajuste de grid */
    .calendario {
        width: 100%;
        padding: 10px 0;
        margin: 20px 0;
    }

    .calendario-header {
        margin-bottom: 20px;
    }

    #mesActual {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .calendario-dias span {
        font-size: 14px;
    }

    .calendario-grid {
        height: auto;
        gap: 2px;
    }

    .dia {
        min-height: 35px;
        padding: 8px 0;
        font-size: 14px;
    }

    /* Círculos más pequeños para día actual y tareas */
    .dia.actual::after,
    .dia.tiene-tarea::after {
        width: 28px;
        height: 28px;
    }

    /* Tooltip en móvil: ajustar ancho máximo */
    .calendario-tooltip {
        max-width: 220px;
        font-size: 13px;
        padding: 10px 12px;
    }

    /* Ocultar hover de tarjetas en móvil (opcional) */
    .card-resumen:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Ajustes para pantallas muy pequeñas (ej: iPhone SE) */
@media screen and (max-width: 480px) {
    .containerheader {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    nav ul {
        justify-content: center;
    }

    .resumen-tareas {
        flex-direction: column;
        gap: 10px;
    }

    .card-resumen {
        padding: 15px;
    }

    .calendario-header h3 {
        font-size: 16px;
    }

    .calendario-dias span {
        font-size: 12px;
    }

    .dia {
        min-height: 30px;
        font-size: 13px;
    }

    .dia.actual::after,
    .dia.tiene-tarea::after {
        width: 24px;
        height: 24px;
    }
}