body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    /* background-color: #ffff; */ /* Comentado o eliminado si el fondo del body ya se maneja globalmente */
}

*, *:before, *:after {
    box-sizing: inherit;
}

.ovulation-scroll-container {
    min-height: 100vh;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Cambiado para alinear al inicio si el contenido es mucho */
    padding: 80px 15px 40px 15px; /* Ajustado el padding superior para el navbar fijo */
    position: relative;
    z-index: 1; /* Ajustado para estar debajo del navbar si es necesario */
    background-color: #ffffff; /* Asegurar fondo blanco para esta sección específica */
}
.ovulation-calendar-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #d94fbc;
    margin-bottom: 0.2em;
    text-align: center;
    letter-spacing: 1px;
}
.ovulation-calendar-subtitle {
    color: #4a90e2;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2em;
    text-align: center;
}
.cycle-length-input {
    margin-bottom: 1.2em;
    text-align: center;
}
.cycle-length-input label {
    color: #4a90e2;
    font-weight: 600;
    margin-right: 0.5em;
}
.cycle-length-input input {
    width: 60px;
    border-radius: 6px;
    border: 1px solid #d94fbc;
    padding: 0.3em 0.5em;
    font-size: 1em;
    text-align: center;
}
.calendar-box {
    background: linear-gradient(135deg, #4a90e2 0%, #d94fbc 100%);
    border-radius: 22px;
    padding: 1.5em 2em 2em 2em;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    color: #fff;
    min-width: 340px;
    max-width: 370px;
    width: 100%; /* Para mejor responsividad */
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.7em;
}
.calendar-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.calendar-table th {
    color: #fff;
    font-weight: 600;
    padding-bottom: 0.3em;
}
.calendar-table td {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    transition: background 0.2s, transform 0.1s ease-out, box-shadow 0.2s;
    font-size: 1.1em;
    position: relative;
}
.calendar-table td:hover {
    background: rgba(255,255,255,0.18);
}
.calendar-table td:active {
    transform: scale(0.92);
}
.calendar-table .selected {
    background: #fff !important; /* Asegurar que el fondo blanco tenga prioridad */
    color: #d94fbc !important; /* Asegurar que el color del texto tenga prioridad */
    font-weight: bold;
    box-shadow: 0 0 0 2px #d94fbc;
}
.calendar-table .period-day {
    background: #fcb1e0 !important;
    color: #b1006e !important;
    font-weight: bold;
    border: 2px solid #d94fbc;
}
.calendar-table .ovulation-day {
    background: #a4508b !important;
    color: #fff !important;
    font-weight: bold;
    border: 2px solid #7934f3;
}
.calendar-table .fertile-day {
    background: #b3e0ff !important;
    color: #005c99 !important;
    font-weight: bold;
    border: 2px solid #4a90e2;
}
.calendar-table .selected.period-day,
.calendar-table .selected.ovulation-day,
.calendar-table .selected.fertile-day {
    border: 3px solid #d94fbc !important; /* O un color distintivo para selección */
    background: #fff !important;
    color: #d94fbc !important; /* O el color original del día especial */
}
.calendar-table .today {
    box-shadow: inset 0 0 0 2px #4a90e2; /* Un borde interior para no afectar el tamaño */
    font-weight: bold;
}
#calendar-body {
    transition: opacity 0.3s ease-in-out;
}
#calendar-body.fade-out {
    opacity: 0;
}
/* Estilo básico para tooltips */
.calendar-table td[title] {
    position: relative;
    /* cursor: pointer; */ /* Ya está en .calendar-table td */
}

.calendar-table td[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.calendar-table td[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 110%; /* Ajustado para que la flecha no se superponga con el texto */
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.75);
    z-index: 10;
}
.calendar-table .future-period-day {
    background: rgba(252, 177, 224, 0.7) !important;
    color: #b1006e !important;
    font-weight: bold;
    border: 2px dashed #d94fbc;
}

.calendar-table .future-fertile-day {
    background: rgba(179, 224, 255, 0.7) !important;
    color: #005c99 !important;
    font-weight: bold;
    border: 2px dashed #4a90e2;
}

.calendar-table .future-ovulation-day {
    background: rgba(164, 80, 139, 0.7) !important;
    color: #fff !important;
    font-weight: bold;
    border: 2px dashed #7934f3;
}

.cycle-phase-container {
    margin-top: 2.5em;
    width: 100%;
    max-width: 900px;
    padding: 0 15px;
}

.cycle-phase-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1em;
    text-align: left;
}

.ovulation-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5em;
    width: 100%;
}

.ovulation-result-card { /* Este es el estilo para las tarjetas de la grid */
    padding: 1.5em 1em;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 150px;
    border: 1px solid transparent;
}

.card-date {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.2em;
    line-height: 1.1;
}

.card-label {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.8em;
}

.card-icon {
    font-size: 2.2rem;
    opacity: 0.7;
}

/* Colores específicos para cada tarjeta */
.card-current-period {
    background-color: #ffebee;
    border-color: #ffcdd2;
}
.card-current-period .card-date { color: #c62828; }

.card-fertile {
    background-color: #fffde7;
    border-color: #fff9c4;
}
.card-fertile .card-date { color: #f57f17; }

.card-ovulation {
    background-color: #fff3e0;
    border-color: #ffe0b2;
}
.card-ovulation .card-date { color: #e65100; }

.card-next-period {
    background-color: #fce4ec;
    border-color: #f8bbd0;
}
.card-next-period .card-date { color: #ad1457; }

.tip-of-the-day-card {
    margin-top: 2em;
    background: #e3f2fd;
    border-radius: 14px;
    padding: 1.2em 1.5em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    color: #0d47a1;
    font-size: 1.1rem;
    text-align: center;
    border: 1px solid #bbdefb;
    width: 100%; /* Para que ocupe el ancho disponible en la grid o contenedor */
    max-width: 900px; /* Coincide con cycle-phase-container */
    margin-left: auto; /* Centrar si es más angosto que el contenedor */
    margin-right: auto; /* Centrar */
}
.tip-of-the-day-card strong {
    color: #0d47a1;
    display: block;
    margin-bottom: 0.3em;
}

/* Ajustes responsivos */
@media (max-width: 900px) {
    /* .ovulation-results ya no existe, los estilos responsivos se aplican a .ovulation-results-grid si es necesario */
}

@media (max-width: 500px) {
    .calendar-box { 
        min-width: 90vw; 
        max-width: 98vw; 
        padding: 1em 0.5em 1.5em 0.5em; /* Ajuste de padding para pantallas pequeñas */
    }
    .ovulation-result-card { /* Aplicado a las tarjetas de la grid */
        min-width: 0; /* Permitir que se encoja */
        width: 90%; /* Ocupar un buen porcentaje */
        margin-left: auto;
        margin-right: auto;
    }
    .cycle-phase-title {
        text-align: center;
    }
    .ovulation-calendar-title {
        font-size: 1.8rem; /* Reducir tamaño de fuente en móviles */
    }
    .ovulation-calendar-subtitle {
        font-size: 1rem;
    }
    .calendar-header {
        font-size: 1.1rem;
    }
    .calendar-table td {
        width: 35px; /* Reducir tamaño de celdas */
        height: 35px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .ovulation-results-grid {
        grid-template-columns: 1fr; /* Una columna en móviles muy pequeños */
    }
}

/* Estilo para el loader (si decides añadir uno visualmente) */
#calendar-loader-element {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 10000; /* Muy alto para estar encima de todo */
    display: none; /* Oculto por defecto */
}