/* * Author: Software Digital Solucion */


.sds-force-ghost {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sds-plg-wrapper { 
    width: 100%; 
    max-width: 1100px; 
    margin: 0 auto; 
    font-family: sans-serif; 
}

/* Contenedor de pestañas: GAP 0 para unión total */
.sds-plg-tabs { 
    display: flex !important; 
    position: relative;
    z-index: 15;
    gap: 0 !important;
}

/* PESTAÑAS: Fondo blanco, bordes finos y línea base */
.sds-plg-wrapper .sds-plg-tab { 
    padding: 15px 20px !important; 
    min-width: 140px !important; 
    text-align: center !important; 
    border: none !important;
    border-right: 1px solid #e0e0e0 !important; 
    border-bottom: 4px solid #f0f0f0 !important; 
    background-color: #ffffff !important; 
    color: #2c3e50 !important; 
    cursor: pointer !important; 
    border-radius: 0 !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important;
    font-size: 13px !important;
    opacity: 1 !important; 
    margin-right: 0 !important;
    display: inline-block !important;
    transition: all 0.3s ease;
}

.sds-plg-wrapper .sds-plg-tab:last-child {
    border-right: none !important;
}

/* Efecto hover suave */
.sds-plg-wrapper .sds-plg-tab:hover:not(.active) {
    background-color: #f9f9f9 !important;
    border-bottom-color: #d0d0d0 !important;
}

/* PESTAÑA ACTIVA: Línea azul reina */
.sds-plg-wrapper .sds-plg-tab.active { 
    background-color: #ffffff !important; 
    color: #007385 !important; 
    border-bottom: 4px solid #007385 !important; 
    opacity: 1 !important;
}

/* CAJA PRINCIPAL */
.sds-plg-box { 
    background: #ffffff !important; 
    padding: 25px; 
    border-radius: 0 10px 10px 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    margin-top: -1px; 
}

/* GRID */
.sds-plg-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr 1fr auto !important; 
    grid-column-gap: 15px; 
    align-items: end; 
    width: 100%;
}

.sds-plg-grid.is-tour-mode { 
    grid-template-columns: 1fr 1fr 1fr auto !important; 
}

.is-tour-mode .sds-plg-ghost { 
    visibility: hidden !important; 
    pointer-events: none !important; 
}

/* CONTENEDOR DE GRUPO: Forzamos overflow visible para la flechita */
.sds-plg-group { 
    position: relative !important; 
    display: flex !important; 
    flex-direction: column !important; 
    overflow: visible !important;
}

.sds-plg-label { margin-bottom: 8px; font-weight: bold; color: #444; font-size: 14px; }

/* INPUT DEL BUSCADOR */
.sds-plg-input { 
    width: 100% !important; 
    padding: 12px 35px 12px 15px !important; 
    border: 1px solid #dddddd !important; 
    border-radius: 6px !important; 
    height: 50px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

/* FLECHITA HACIA ABAJO: Reforzada con z-index y posición absoluta */
.sds-plg-group:first-child::after {
    content: "▼" !important;
    position: absolute !important;
    right: 15px !important;
    top: 45px !important; /* Ajuste preciso para el input de 50px */
    font-size: 10px !important;
    color: #007385 !important;
    pointer-events: none !important;
    z-index: 999 !important;
    display: block !important;
}

/* BOTÓN BUSCAR CON COLOR #1B6D96 */
.sds-plg-btn { 
    min-width: 160px !important; 
    height: 50px !important; 
    background-color: #1b6d96 !important; 
    background: #1b6d96 !important;
    color: #ffffff !important; 
    border: none !important; 
    border-radius: 6px !important; 
    cursor: pointer !important; 
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 15px !important;
    transition: background 0.3s ease !important;
}

.sds-plg-btn:hover {
    background-color: #155575 !important;
}

/* --- MEGA MENÚ AJAX --- */
.sds-plg-ajax { 
    position: absolute !important; 
    top: 105% !important; 
    left: 0 !important; 
    width: 800px !important; 
    background: #ffffff !important; 
    z-index: 9999 !important; 
    border-radius: 8px !important; 
    display: none; 
    padding: 25px !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    grid-column-gap: 20px !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.3) !important;
}

/* TITULOS DE CATEGORÍAS EN AZUL CORPORATIVO */
.sds-plg-ajax b, 
.sds-plg-ajax strong,
.sds-plg-header,
.sds-plg-ajax .sds-header-title { 
    color: #007385 !important; 
    display: block !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* --- RESPONSIVE DESIGN --- */

/* 1. TABLET (Breakpoints intermedios) */
@media (min-width: 769px) and (max-width: 1024px) {
    .sds-plg-wrapper {
        padding: 0 15px;
    }

    .sds-plg-grid, .sds-plg-grid.is-tour-mode {
        grid-template-columns: 1fr 1fr !important;
        grid-row-gap: 20px;
    }

    .sds-plg-btn {
        grid-column: span 2;
        width: 100% !important;
    }

    .sds-plg-ajax {
        width: calc(100vw - 60px) !important;
        max-width: 750px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 2. MÓVIL (Celulares y pantallas pequeñas) */
@media (max-width: 768px) {
    .sds-plg-wrapper {
        padding: 0 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    .sds-plg-grid, .sds-plg-grid.is-tour-mode {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .sds-plg-btn {
        grid-column: span 1;
        width: 100% !important;
        margin-top: 15px !important;
    }

    /* PESTAÑAS MÓVIL: Reparto exacto */
    .sds-plg-tabs {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .sds-plg-wrapper .sds-plg-tab {
        flex: 1 1 0% !important; /* Fuerza a repartir el 100% entre las 3 */
        min-width: 0 !important;
        font-size: 11px !important;
        padding: 15px 2px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .sds-plg-box {
        padding: 20px 15px !important;
        border-radius: 0 0 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .is-tour-mode .sds-plg-ghost {
        display: none !important;
    }

    /* Mega Menú en Móvil: Se despliega empujando el contenido */
    .sds-plg-ajax {
        width: 100% !important;
        position: relative !important;
        top: 10px !important;
        grid-template-columns: 1fr !important;
        box-shadow: none !important;
        border: 1px solid #eee !important;
        padding: 15px !important;
        left: 0 !important;
    }
}




/* 1. Redondeamos la esquina superior izquierda del primer botón (TOURS) */
.sds-plg-wrapper .sds-plg-tab:first-child {
    border-top-left-radius: 12px !important;
}

/* 2. Redondeamos la esquina superior derecha del último botón (PLANES) */
.sds-plg-wrapper .sds-plg-tab:last-child {
    border-top-right-radius: 12px !important;
    border-right: none !important; /* Mantenemos tu regla de quitar el borde derecho */
}

/* 3. Ajuste de la caja blanca de abajo para que encaje con las curvas */
.sds-plg-box {
    /* Cambiamos el radius superior izquierdo a 0 si la primera pestaña está activa, 
       pero para que se vea bien siempre, lo ideal es esto: */
    border-radius: 0 12px 12px 12px !important; 
}




/* 1. Quitamos el margen que le dimos al título individualmente */
.sds-plg-header { 
    margin-top: 0 !important; 
    margin-bottom: 10px !important;
}

/* 2. Aplicamos el margen al CONTENEDOR del grupo (Nodo) */
.sds-plg-nodo-group {
    margin-top: 25px !important; /* Espacio entre bloques verticales */
    display: block !important;
}

/* 3. TRUCO DE INGENIERO: El primer grupo de cada columna NO debe tener margen superior 
      para que las cabeceras del menú queden perfectamente alineadas arriba */
.sds-plg-ajax > .sds-plg-nodo-group:nth-child(-n+3) {
    margin-top: 0 !important;
}




/* Contenedor del buscador para posicionar la flecha */
.sds-plg-group.sds-plg-relative {
    position: relative !important;
}

/* Creamos la flechita con CSS puro */
.sds-plg-group::after {
    content: "" !important;
    position: absolute !important;
    right: 15px !important; /* Distancia desde la derecha */
    top: 55% !important;   /* Centrado vertical aproximado */
    transform: translateY(-50%) !important;
    width: 0 !important; 
    height: 0 !important; 
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #007385 !important; /* El color azul de tu marca */
    pointer-events: none !important; /* Para que no estorbe al hacer clic */
    z-index: 10 !important;
}

/* Ajuste del padding del input para que el texto no pise la flecha */
.sds-plg-autocomplete {
    padding-right: 35px !important;
    cursor: pointer !important;
}



/* Clase para rotar la flecha cuando el menú esté activo */
.sds-plg-group.is-open::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.sds-plg-group {
    cursor: pointer !important;
}

/* Y nos aseguramos de que el input herede ese cursor */
.sds-plg-group input {
    cursor: pointer !important;
}