/* Estilos frontend - Calendario de Fechas */

.ec-calendar { 
    max-width: 980px; 
    margin: 0 auto; 
}

/* === Fila Desktop (4 columnas correctas) === */
.ec-row { 
    display: grid; 
    grid-template-columns: 96px 200px 1fr 120px; 
    gap: 16px; 
    align-items: center; 
    padding: 12px 16px; 
    border-bottom: 1px solid rgba(0,0,0,0.06); 
}

.ec-row:nth-child(odd) { background: rgba(0,0,0,0.02); }

.ec-col { display:flex; flex-direction:column; }

.ec-date { 
    text-align:center; 
    font-weight:700; 
}

.ec-month { 
    font-size:12px; 
    text-transform:uppercase; 
    letter-spacing:0.06em; 
}

.ec-day { 
    font-size:28px; 
    line-height:1; 
}

.ec-time { 
    font-size:12px; 
    color: rgba(0,0,0,0.6); 
}

.ec-location { font-size:14px; }

.ec-country { font-weight:600; }

.ec-city { color: rgba(0,0,0,0.65); }

.ec-notes .ec-place { 
    font-size:16px; 
    margin-bottom:6px; 
}

.ec-notes-text { 
    color: rgba(0,0,0,0.7); 
}

/* === Ajuste de la columna de acción === */
.ec-action {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* Botón Reservar */
.ec-action .ec-reserve-button {
    padding: 8px 12px;
    font-size: 14px;
    width: auto;
    display: inline-block;
    white-space: nowrap;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.ec-action .ec-reserve-button:hover {
    background: #006799;
}

/* === Responsive === */
@media (max-width:720px) {

    /* Corrección: SOLO UNA DEFINICIÓN RESPONSIVE */
    .ec-row { 
        grid-template-columns: 72px 1fr; 
        grid-template-rows: auto auto auto;
        align-items: start;
    }

    .ec-location { order: 2; }
    .ec-notes { 
        order: 3; 
        grid-column: 1 / -1; 
        margin-top:6px;
    }
    .ec-action { 
        order:4; 
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-top: 10px;
    }
}

/* ===== Modal ===== */
.ec-modal {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    backdrop-filter: blur(2px);
}

.ec-modal-inner {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    animation: ecModalFade 0.2s ease-out;
}

.ec-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

/* Animación */
@keyframes ecModalFade {
    from { opacity:0; transform: translateY(-10px); }
    to   { opacity:1; transform: translateY(0); }
}

.ec-notes-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.ec-notes-text.expanded {
    -webkit-line-clamp: unset;
    max-height: none;
}

.ec-more-toggle {
    cursor: pointer;
    color: #0073aa;
    font-size: 13px;
    margin-top: 4px;
    user-select: none;
}
.ec-more-toggle:hover {
    text-decoration: underline;
}