/* calendario-popup.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: #f0f2f5;
}

.btn-abrir-calendario {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-abrir-calendario:hover {
    background-color: #0056b3;
}

.calendario-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.calendario-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.calendario-popup {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 380px; /* Ancho máximo para PC, se ajusta en móviles */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.calendario-popup-overlay.visible .calendario-popup {
    transform: scale(1);
}

.calendario-header {
    display: flex;
    justify-content: space-between; /* Mantiene el wrapper a la izq. y la X a la der. */
    align-items: center;
    padding: 12px 15px; /* Padding general del header */
    /* Aseguramos suficiente padding a la derecha para que la X no colisione con el contenido del wrapper */
    padding-right: 45px; /* Aumenta este valor si la X es más ancha o necesitas más espacio */
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    position: relative; /* Necesario para el posicionamiento absoluto de la X */
}

.calendario-nav-titulo-wrapper {
    display: flex;
    align-items: center;
    /* justify-content: space-between;  Quitamos esto para que los elementos se agrupen naturalmente */
    flex-grow: 1; /* Ocupa el espacio disponible, empujando la X (si no fuera absoluta) */
}
.mes-anio-actual {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    text-align: center;
    flex-grow: 1; /* El título se expande para centrarse entre los botones de nav */
    margin: 0 8px; /* Ajusta este margen para dar más o menos espacio alrededor del título */
                   /* Puedes ser más específico: margin-left: 8px; margin-right: 8px; */
}

.btn-nav {
    background: none;
    border: none;
    padding: 8px; /* Padding del botón en sí */
    cursor: pointer;
    color: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.btn-nav:hover {
    background-color: #e9ecef;
    color: #000;
}

.btn-cerrar-calendario {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #777;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    top: 50%;
    right: 15px; /* Distancia desde el borde derecho del .calendario-header */
    transform: translateY(-50%);
    z-index: 10;
}
.btn-cerrar-calendario:hover {
    background-color: #e9ecef;
    color: #000;
}


.calendario-grid-nombres-dias,
.calendario-grid-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.calendario-grid-nombres-dias {
    padding: 10px 5px 5px;
    font-size: 0.85em;
    font-weight: 500;
    color: #6c757d;
    border-bottom: 1px solid #f1f1f1;
}

.calendario-grid-nombres-dias span {
    padding: 5px 0;
}

.calendario-grid-dias {
    padding: 5px; /* Espacio alrededor de la cuadrícula de días */
}

.calendario-grid-dias .dia-celda {
    padding: 0; /* El padding se manejará en el botón interno */
    height: 42px; /* Altura fija para las celdas */
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendario-grid-dias .dia-btn {
    width: 36px;
    height: 36px;
    border: none;
    background-color: transparent;
    border-radius: 50%; /* Círculos para los días */
    font-size: 0.95em;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, border 0.2s;
}

.calendario-grid-dias .dia-btn:hover:not(.dia-vacio):not(.dia-deshabilitado) {
    background-color: #e9ecef; /* Un hover sutil */
}

.calendario-grid-dias .dia-btn.dia-vacio {
    cursor: default;
    pointer-events: none;
}

.calendario-grid-dias .dia-btn.dia-otro-mes {
    color: #adb5bd; /* Días de otros meses atenuados */
}


.calendario-grid-dias .dia-btn.dia-seleccionado {
    background-color: #28a745; /* Verde para seleccionado */
    color: white;
    border: 2px solid #1e7e34;
}
.calendario-grid-dias .dia-btn.dia-seleccionado:hover {
    background-color: #218838;
}


.calendario-footer {
    padding: 10px 15px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: center; /* Centrar el botón "Hoy" */
}
.calendario-grid-dias .dia-btn.dia-rango-inicio,
.calendario-grid-dias .dia-btn.dia-rango-fin {
    background-color: #28a745; /* Verde para inicio y fin del rango */
    color: white;
    border-radius: 50%; /* Asegurar que sea círculo si no es por defecto */
    font-weight: bold;
    position: relative;
    z-index: 2; /* Para que se vea sobre .dia-en-rango */
}

.calendario-grid-dias .dia-btn.dia-rango-inicio:hover,
.calendario-grid-dias .dia-btn.dia-rango-fin:hover {
    background-color: #1e7e34; /* Verde más oscuro al pasar el mouse */
}


/* Ajustes para que los extremos del rango se unan visualmente con los días intermedios */
/* Si el día de inicio también es el único en el rango (o el de fin), no necesita estos ajustes. */


/* Si el rango es de un solo día, los extremos deben ser circulares */
.dia-celda.rango-inicio-celda.rango-fin-celda .dia-btn {
    border-radius: 50% !important; /* Forzar círculo */
}


.btn-hoy:hover {
    background-color: #5a6268;
}


/* Media Queries para Adaptabilidad */
@media (max-width: 420px) {
    .calendario-popup {
        max-width: 100%;
        width: calc(100% - 20px); /* Ligeramente menos que el ancho total */
        margin: 10px;
        height: auto; /* Permitir que la altura se ajuste */
    }

    .mes-anio-actual {
        font-size: 1em;
    }

    .calendario-grid-dias .dia-celda {
        height: 38px;
    }

    .calendario-grid-dias .dia-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9em;
    }

    .calendario-grid-nombres-dias {
        font-size: 0.75em;
        padding: 8px 3px 4px;
    }
}
/* ... otros estilos ... */

.calendario-footer {
    padding: 15px; /* Aumentamos un poco el padding para dar más espacio al botón grande */
    border-top: 1px solid #e9ecef;
    display: flex; /* Mantenemos flex para facilitar la alineación si fuera necesario */
}

/* Estilos para el NUEVO botón "Continuar" */
.btn-continuar { /* Renombramos de .btn-hoy a .btn-continuar */
    width: 100%; /* Ocupa todo el ancho disponible del footer */
    padding: 12px 20px; /* Padding interno del botón, más generoso */
    font-size: 1em;    /* Tamaño de fuente */
    font-weight: 500;  /* Un poco más de peso en la fuente */
    background-color: #007bff; /* Tono azul solicitado (corregido #007bff ya que #007bf no es un hex válido completo) */
    color: white;
    border: none;
    border-radius: 8px; /* Bordes un poco más redondeados */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
    box-sizing: border-box; /* Para que el padding no aumente el ancho total */
}

.btn-continuar:hover {
    background-color: #0056b3; /* Un azul más oscuro para el hover */
}

/* Eliminamos los estilos antiguos de .btn-hoy si ya no se usan en otro lado */
/* .btn-hoy { ... } */
/* .btn-hoy:hover { ... } */


/* Media Queries para Adaptabilidad */
@media (max-width: 420px) {
    /* ... otros ajustes ... */
    .calendario-footer {
        padding: 12px; /* Ajustar padding del footer en móviles */
    }

    .btn-continuar {
        padding: 10px 15px; /* Padding del botón más compacto en móviles */
        font-size: 0.95em;
    }
}

.calendario-grid-dias .dia-btn.dia-hoy-fuerte {
    background-color: #007bff; /* Azul fuerte original */
    color: white;
    font-weight: bold;
    position: relative; 
    z-index: 1; /* Por si acaso, aunque los de rango tendrán mayor z-index */
}
.calendario-grid-dias .dia-btn.dia-hoy-fuerte:hover {
    background-color: #0056b3;
}

/* NUEVO: Estilo TENUE para el día actual DESPUÉS de una primera selección */
.calendario-grid-dias .dia-btn.dia-hoy-tenue {
    background-color: #cfe2ff; /* Un azul más pálido */
    color: #004085;      /* Texto azul oscuro para contraste */
    border: 1px solid #b8daff; /* Un borde sutil */
    font-weight: normal; /* Puede ser normal o bold, según preferencia */
    position: relative;
    z-index: 1;
}
.calendario-grid-dias .dia-btn.dia-hoy-tenue:hover {
    background-color: #b8daff;
}
.dia-celda.rango-inicio-celda .dia-btn.dia-rango-inicio {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Celda que contiene el botón de fin de rango */
.dia-celda.rango-fin-celda .dia-btn.dia-rango-fin {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Clases de RANGO (deben tener mayor especificidad o z-index para sobrescribir a .dia-hoy-tenue si es necesario) */
.calendario-grid-dias .dia-btn.dia-rango-inicio,
.calendario-grid-dias .dia-btn.dia-rango-fin {
    background-color: #28a745; /* Verde */
    color: white;
    border-radius: 50%;
    font-weight: bold;
    position: relative;
    z-index: 3; /* Más alto que dia-hoy-fuerte y dia-hoy-tenue */
}

.calendario-grid-dias .dia-btn.dia-en-rango {
    background-color: #d4edda; /* Verde muy claro */
    color: #155724;
    border-radius: 0;
    position: relative;
    z-index: 2; /* Entre dia-hoy y los extremos del rango */
}



/* Si el día actual fuerte está DENTRO de un rango, el rango gana */
.calendario-grid-dias .dia-btn.dia-hoy-fuerte.dia-rango-inicio,
.calendario-grid-dias .dia-btn.dia-hoy-fuerte.dia-rango-fin,
.calendario-grid-dias .dia-btn.dia-hoy-fuerte.dia-en-rango {
    /* Los estilos de rango ya deberían sobrescribir background-color y color.
       Si no, puedes añadir !important con precaución o ser más específico.
       El z-index de las clases de rango ya es mayor. */
}