/* =========================================
   1. ESTILOS BASE (Móvil First y Ajustes Globales)
   ========================================= */
.container {
    margin: 0 auto;
    padding: 0;
    height: 100%;
}

.pb-3, footer {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================= 
   2. CONTENEDOR PRINCIPAL
   ========================================= */
.turnos-container {
    background: rgba(240, 240, 240, 0.95);
    padding: 20px;
    margin-top: 66.75px !important;
    margin: 0 auto; /* Ajuste para separar del borde superior */
    box-shadow: 0px 10px 15px rgba(50, 50, 50, 0.2);
    width: 95%;
    max-width: 410px;
    min-height: calc(100vh - 120px);
    overflow-y: auto;
    box-sizing: border-box; /* 🔥 FIX */
}

/* =========================================
   3. TÍTULO
   ========================================= */
.welcome-title {
    font-family: 'Montserrat', sans-serif;
    /* Fuente adaptable */
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
    margin: 10px 0 20px 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

    .welcome-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #CDA434, #f39c12);
        border-radius: 2px;
    }

/* =========================================
   4. FILTROS (Selects)
   ========================================= */
.filtro-container {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    /* Quitamos max-width fijo para que se adapte al contenedor padre */
    margin: 10px auto;
}

.custom-select-options {
    max-height: 336px;
    z-index: 100; /* Aseguramos que se vea por encima */
}

/* =========================================
   5. LISTADO DE TURNOS
   ========================================= */
.turnos-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.turno-dia {
    background: #333;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 8px;
    text-align: center;
    border-radius: 5px;
    margin: 15px 0 0px;
}

.turno-item {
    display: flex;
    align-items: center; /* Centrado vertical */
    border-bottom: 1px solid #ddd;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 0;
    position: relative;
}

    .turno-item:last-child {
        margin-bottom: 15px;
    }

.turno-cancelado {
    display: none;
}

.turno-fijo {
    background-color: #e0f0ff;
    border-left: 5px solid #007bff;
}

/* --- ELEMENTOS INTERNOS DEL TURNO --- */

.hora {
    /* RESPONSIVIDAD: Un poco más angosto en móvil */
    min-width: 75px;
    text-align: center;
    margin-right: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
}

    .hora span {
        display: inline; 
        white-space: nowrap;
    }

.info {
    display: flex;
    flex-direction: column;
    
    flex: 1; /* Ocupa el espacio restante */
    min-width: 0;
}

.texto {
    font-size: 16px;
    color: #333;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email {
    font-size: 12px;
    color: #777;
    /* Evitar que un email largo rompa el diseño en móvil */
    word-break: break-word;
}

/* --- ACCIONES (Botones y Tags) --- */

/* AQUÍ ESTÁ LA CLAVE DE LA RESPONSIVIDAD:
   En móvil: width 100%
   En desktop (media query abajo): width 205px (tu estilo original)
*/
.button-danger, .data {
    width: 100%; /* Ocupa todo el ancho disponible dentro de .info */
    height: auto; /* Altura flexible según contenido */
    min-height: 25px;
    padding: 5px;
    font-size: 13px;
    border-radius: 6px;
    text-align: center;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    box-sizing: border-box; /* Para que el padding no sume al ancho */
}

.button-danger {
    color: #dc3545;
    background-color: #fff;
    border: 1px solid #dc3545;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    .button-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

.data {
    color: #091828;
    background-color: #809cba38;
}

/* =========================================
   6. MENÚ DE TRES PUNTOS
   ========================================= */
.menu-container {
    position: relative;
    display: inline-block;
    margin-left: auto;
    flex-shrink: 0; /* No encoger */
}

.menu-dots {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0 5px; /* Reducir padding lateral en móvil */
    color: #666;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 200; /* Z-index alto para evitar solapamientos */
    border-radius: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dropdown-menu li {
        padding: 4px 12px;
    }

        .dropdown-menu li:first-child {
            padding-top: 8px;
        }

        .dropdown-menu li:last-child {
            padding-bottom: 8px;
        }

        .dropdown-menu li a, .dropdown-item {
            text-decoration: none;
            color: #333;
            display: block;
            font-family: 'Montserrat', sans-serif !important;
            font-size: 14px;
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
            padding: 5px 0;
        }

            .dropdown-menu li a:hover, .dropdown-item:hover {
                background-color: #f5f5f5;
            }

.menu-container:hover .dropdown-menu,
.menu-container:focus-within .dropdown-menu {
    display: block;
}

/* =========================================
   7. MODALES (Heredando estilos del site.css + correcciones)
   ========================================= */
.modal {
    z-index: 2002 !important;
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    background-color: white;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    animation: modalopen 0.3s ease-out;
}
    .modal-content .headers {
        margin: 0 0 8px 0;
    }

.close-modal {
    position: absolute;
    right: 20px;
    top: 16px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

    .close-modal:hover {
        color: #333;
    }

.body-no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

@keyframes modalopen {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Estilos internos del modal (Detalle) */
.detalle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.info-modal {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0b233d;
}

.info-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #4f5464;
}

.nota-row {
    display: flex;
    flex-direction: column;
    background-color: #e4e4e4;
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
}

.nota-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0b233d;
}

.nota-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    color: #4f5464;
}


/* =========================================
   8. MEDIA QUERIES (ESCRITORIO)
   Aquí recuperamos TU ESTILO ORIGINAL exacto
   ========================================= */
@media (min-width: 768px) {
    .toggle-slider {
        width: 154px;
    }
    #listadoTurnos {
        width: 502px !important;
    }
    .turnos-container {
        /* En escritorio puede ser más ancho o quedarse fijo según prefieras */
        /* Si quieres que se vea igual que antes: max-width: 410px; */
        /* Si quieres que respire un poco más: */
        width: fit-content;
        min-width: 450px;
        max-width: 700px;
    }

    /* Recuperamos los anchos fijos originales */
    .button-danger, .data {
        width: 205px;
        height: 21px;
    }

    .hora {
        min-width: 90px;
        margin-right: 15px;
    }

    .info {
        padding-left: 15px;
    }

    .menu-dots {
        padding: 0 10px;
    }
}

.custom-select-trigger {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
}

.selected-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: -1px;
}

@media (max-width: 380px) {
    .email-detalle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

        .email-detalle-row .email-info {
            word-break: break-word;
            overflow-wrap: anywhere;
            width: 100%;
        }

    .turnos-list {
        max-width: 327px;
    }
}

@media (max-width: 367px) {
    .turnos-list {
        max-width: 309px;
    }
}

@media (max-width: 348px) {
    .turnos-list {
        max-width: 290px;
    }
}

@media (max-width: 330px) {
    .turnos-list {
        max-width: 280px;
    }
}


@media (min-width: 575px) {
    .navbar-nav .nav-link {
        width: auto;
    }
}

/* ANIMACIÓN DE AGENDA*/
#agenda-wrapper {
    position: relative;
}

#turnosContainer {
    width: 100%;
}

.agenda-slide-out {
    animation: slideOutLeft 0.25s ease forwards;
}

.agenda-slide-in {
    animation: slideInRight 0.25s ease forwards;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}