/* ================================================================
   BARRA DE STATS DE BÚSQUEDA IA
   Chips compactos con presupuesto, días y cantidad de opciones
================================================================ */

#explicacionIA {
    background: linear-gradient(135deg, #fdfaf3 0%, #faf6ec 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 12px !important;
    padding: 0.7rem 1.1rem !important;
    box-shadow: 0 2px 10px rgba(139, 29, 29, 0.04) !important;
    margin-bottom: 1.5rem !important;
}

    #explicacionIA .d-flex.align-items-center {
        gap: 0.85rem;
        flex-wrap: wrap;
    }

    /* Icono verde de check */
    #explicacionIA .fa-check-circle,
    #explicacionIA i.fas.fa-check-circle {
        font-size: 1.1rem !important;
        color: #16a34a !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    /* Contenedor de chips */
    #explicacionIA .small {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.85rem !important;
        line-height: 1;
    }

        /* Cada chip (presupuesto / días / opciones) */
        #explicacionIA .small > span {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.35rem 0.7rem;
            background: #ffffff;
            border: 1px solid rgba(139, 29, 29, 0.12);
            border-radius: 999px;
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            color: #2c2c2c;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

            #explicacionIA .small > span:hover {
                border-color: rgba(139, 29, 29, 0.3);
                box-shadow: 0 2px 6px rgba(139, 29, 29, 0.08);
                transform: translateY(-1px);
            }

            /* Ocultar separadores "•" del HTML original */
            #explicacionIA .small > span.mx-2 {
                display: none !important;
            }

        /* Variantes por contenido */
        #explicacionIA .small .fw-semibold:first-of-type {
            /* Presupuesto: acento dorado */
            color: #8B6914;
            background: linear-gradient(135deg, #fffbea 0%, #fef7d8 100%);
            border-color: rgba(212, 175, 55, 0.35);
        }

        #explicacionIA .small span:nth-of-type(3) {
            /* Días: acento bordó suave */
            color: #8B1D1D;
            background: linear-gradient(135deg, #fef5f5 0%, #fcebeb 100%);
            border-color: rgba(139, 29, 29, 0.2);
        }

        #explicacionIA .small .text-muted {
            /* Cantidad opciones: neutral */
            color: #5a5a5a !important;
            background: #f8f8f8;
            font-weight: 600 !important;
            border-color: rgba(0, 0, 0, 0.08);
        }

/* ================================================================
   MOBILE
================================================================ */

/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 768px) {
    #explicacionIA {
        padding: 0.6rem 0.85rem !important;
        margin-bottom: 1rem !important;
        border-radius: 10px !important;
    }

        /* Fila externa: check + bloque de chips */
        #explicacionIA .d-flex.align-items-center {
            gap: 0.5rem;
            align-items: flex-start !important;
            flex-wrap: nowrap !important;
        }

        #explicacionIA .fa-check-circle,
        #explicacionIA i.fas.fa-check-circle {
            font-size: 0.95rem !important;
            margin: 0.3rem 0 0 0 !important;
            flex-shrink: 0;
        }

        /* ✅ GRID 2 columnas: presupuesto + días arriba, opciones centrado abajo */
        #explicacionIA .small {
            flex: 1;
            display: grid !important;
            grid-template-columns: auto auto;
            justify-content: center; /* centra horizontalmente las columnas */
            gap: 0.4rem;
            font-size: 0.75rem !important;
        }

            /* Cada chip: ancho natural (no estirado) */
            #explicacionIA .small > span {
                padding: 0.3rem 0.6rem;
                font-size: 0.7rem !important;
                width: auto;
                justify-self: center;
            }

            /* Chip "Encontré X opciones": ocupa las 2 columnas y queda centrado */
            #explicacionIA .small .text-muted {
                grid-column: 1 / -1;
                justify-self: center;
            }
}
/* ================================================================
   ITINERARIO - HEADER MOBILE REORDENADO
   3 líneas: título / botones acción / chips
================================================================ */

/* ================================================================
   ITINERARIO - HEADER MOBILE REORDENADO + STATS COMPACTAS
================================================================ */

@media (max-width: 768px) {

    /* ============================================
       HEADER DE LAS CARDS (Itinerario / Tips / Día N)
       ============================================ */
    #contenedorItinerario .card-header {
        padding: 0.9rem 1rem !important;
    }

        /* Contenedor del header → layout vertical con más respiro */
        #contenedorItinerario .card-header .d-flex.justify-content-between.align-items-center {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 0.85rem !important; /* ⬅️ más espacio entre líneas */
        }

        /* ===== LÍNEA 1: Título + botón regenerar ===== */
        #contenedorItinerario .card-header > .d-flex > div:first-child {
            display: flex !important;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
        }

        #contenedorItinerario .card-header h5 {
            font-size: 0.95rem !important;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin: 0 !important;
            line-height: 1.3;
        }

            #contenedorItinerario .card-header h5 > i {
                font-size: 1rem;
            }

    #contenedorItinerario .btn-regenerar-itinerario {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        margin-left: 0.4rem;
        font-size: 0.85rem;
    }

    /* ===== LÍNEA 2: Botones acción (Resumen / Audio / Desplegar) ===== */
    #contenedorItinerario .card-header .d-flex.gap-2.align-items-center {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.6rem !important; /* ⬅️ más espacio entre botones */
        width: 100%;
        margin: 0 !important;
    }

    #contenedorItinerario .card-header .badge {
        margin: 0 !important;
        font-size: 0.72rem !important;
        padding: 0.4rem 0.75rem;
    }

    #contenedorItinerario .card-header .btn-outline-light {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.78rem !important;
        width: 34px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== LÍNEA 3: Chips del viaje ===== */
    #contenedorItinerario .ia-chips-inline {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.45rem; /* ⬅️ más aire entre chips */
        margin: 0 !important;
        width: 100%;
    }

    #contenedorItinerario .ia-chip-inline {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.65rem;
    }

    /* ============================================
       STATS PREMIUM - 2x2 GRID COMPACTO Y LIMPIO
       Sin labels (el icono + valor se explican solos)
       ============================================ */
    #contenedorItinerario .itinerario-stats-premium {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
        margin: 0 !important;
    }

    /* Cada stat: icono + valor en línea, sin label */
    #contenedorItinerario .itinerario-stat-premium {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.55rem !important;
        padding: 0.7rem 0.75rem !important;
        margin: 0 !important;
        min-width: 0; /* permite que el contenido se acomode */
        overflow: hidden;
    }

        #contenedorItinerario .itinerario-stat-premium i {
            font-size: 1.05rem;
            flex-shrink: 0;
        }

        #contenedorItinerario .itinerario-stat-premium span {
            font-size: 0.85rem !important;
            font-weight: 800;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        /* ✅ OCULTAR el label (DURACIÓN, GASTO, etc) — el icono ya dice qué es */
        #contenedorItinerario .itinerario-stat-premium small {
            display: none !important;
        }
}
/* ================================================================
   ACTIVIDAD DENTRO DEL DÍA - MOBILE COMPACTO
   Línea 1: número + hora
   Línea 2: icono + precio (puede ocupar varias líneas)
   Línea 3: icono + duración
   Resto: título, lugar, razón, detalles, advertencias
================================================================ */

@media (max-width: 768px) {

    /* Contenedor general */
    .actividad-horizontal {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
        padding: 0.85rem !important;
    }

        /* ===== LÍNEA 1: NÚMERO + HORA ===== */
        .actividad-horizontal .actividad-numero-badge {
            order: 1;
            align-self: flex-start;
        }

        .actividad-horizontal .actividad-hora {
            order: 2;
            align-self: flex-start;
            margin: 0;
        }

    /* Wrapper invisible para que número y hora queden en la misma fila */
    .actividad-horizontal {
        position: relative;
    }

        .actividad-horizontal::before {
            content: '';
            display: block;
            order: 0;
            height: 0;
        }

    /* Truco: usar grid para línea 1 con número + hora */
    .actividad-horizontal {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-areas:
            "numero hora"
            "titulo titulo"
            "precio precio"
            "duracion duracion"
            "contenido contenido";
        column-gap: 0.7rem;
        row-gap: 0.65rem;
        align-items: center;
    }

        .actividad-horizontal .actividad-numero-badge {
            grid-area: numero;
        }

        .actividad-horizontal .actividad-hora {
            grid-area: hora;
            font-size: 0.85rem;
        }

        /* ===== INFO DERECHA: PRECIO + DURACIÓN apilados como filas ===== */
        .actividad-horizontal .actividad-info-derecha {
            display: contents !important;
            /* hace que los hijos se ubiquen en el grid del padre */
        }

        /* ===== LÍNEA 2: ICONO + PRECIO (puede ocupar varias líneas) ===== */
        .actividad-horizontal .info-precio {
            grid-area: precio;
            display: flex !important;
            align-items: flex-start !important;
            gap: 0.5rem !important;
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            margin: 0 !important;
        }

            .actividad-horizontal .info-precio::before {
                content: "\f0d6"; /* fa-money-bill */
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                font-size: 0.95rem;
                color: #8B1D1D;
                flex-shrink: 0;
                margin-top: 0.1rem;
            }

            .actividad-horizontal .info-precio .precio-valor {
                font-size: 0.92rem !important;
                font-weight: 800 !important;
                color: #8B1D1D !important;
                line-height: 1.3 !important;
                white-space: normal !important; /* ✅ permite que el precio largo baje */
                word-break: break-word;
                flex: 1;
            }

            /* Ocultar el label "PRECIO" */
            .actividad-horizontal .info-precio .precio-label {
                display: none !important;
            }

        /* ===== LÍNEA 3: ICONO + DURACIÓN ===== */
        .actividad-horizontal .info-duracion {
            grid-area: duracion;
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            margin: 0 !important;
        }

            .actividad-horizontal .info-duracion::before {
                content: "\f017"; /* fa-clock */
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                font-size: 0.95rem;
                color: #6c757d;
                flex-shrink: 0;
            }

            .actividad-horizontal .info-duracion .duracion-valor {
                font-size: 0.85rem !important;
                font-weight: 600 !important;
                color: #495057 !important;
                line-height: 1.2 !important;
                white-space: nowrap;
            }

            /* Ocultar el label "DURACIÓN" */
            .actividad-horizontal .info-duracion .duracion-label {
                display: none !important;
            }

        /* ===== CONTENIDO: título, lugar, razón, detalles, advertencias ===== */
        .actividad-horizontal .actividad-contenido {
            grid-area: contenido;
            width: 100%;
            min-width: 0;
        }

            .actividad-horizontal .actividad-contenido .actividad-titulo {
                font-size: 0.95rem !important;
                font-weight: 700 !important;
                margin: 0 0 0.4rem 0 !important;
                line-height: 1.3 !important;
            }

            .actividad-horizontal .actividad-contenido .actividad-detalles {
                font-size: 0.78rem !important;
                margin-bottom: 0.5rem;
                flex-wrap: wrap;
            }

            .actividad-horizontal .actividad-contenido .actividad-razon-horizontal {
                font-size: 0.78rem !important;
                line-height: 1.4 !important;
                padding: 0.5rem 0.65rem;
                margin: 0.4rem 0;
            }

            .actividad-horizontal .actividad-contenido .actividad-extra-lista {
                margin-top: 0.45rem;
            }

            .actividad-horizontal .actividad-contenido .actividad-extra-item {
                font-size: 0.78rem !important;
                line-height: 1.4 !important;
                padding: 0.3rem 0;
            }
}
/* ================================================================
   TÍTULO DE ACTIVIDAD - DUPLICADO PARA MOBILE
   - Desktop: muestra el título original (dentro de .actividad-contenido)
   - Mobile: muestra el título nuevo (afuera, posicionado en línea 2)
================================================================ */

/* Por defecto (desktop): ocultar el título mobile */
.actividad-titulo-mobile {
    display: none;
}

@media (max-width: 768px) {

    /* Mobile: mostrar el título nuevo, ocultar el viejo */
    .actividad-titulo-mobile {
        display: block !important;
        grid-area: titulo;
        margin: 0 !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #212529;
    }

    .actividad-horizontal .actividad-contenido .actividad-titulo {
        display: none !important;
    }
}