/* Menú contextual */
    #contextMenuViaje {
        position: absolute;
        display: none;
        background: #fff;
        border: 1px solid #ccc;
        padding: 4px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        min-width: 150px;
        margin-top: 50px;
        margin-left: 10px;
        color: #111;
        font-size: 1rem;
    }

    /* Opción dentro del menú */
    #contextMenuViaje div {
        padding: 8px 10px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    #contextMenuViaje div:hover {
        background: #f3f3f3;
    }

    #contextMenuViaje ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #contextMenuViaje li {
        padding: 8px 12px;
        cursor: pointer;
    }

    #contextMenuViaje li:hover {
        background: #f0f0f0;
    }


    /* Overlay para detectar clic fuera */
    #overlayMenu {
        position: absolute;
        inset: 0;
        display: none;
        z-index: 9998;
    }

    #contenedor-itinerario-mapa-viaje {
        max-height: 71vh;
        overflow-y: auto;
    }

    .off {
        display: none;
    }

    .showen-tab .off {
        display: block;
    }

    .showen-tab .on {
        display: none;
    }

    #contenedor-mapa-detalle {
        width: 100%;
        /* height: 86vh; */
    }

    #mapa-viaje {
        width: 100%;
        height: 100%;
        border: 1px solid #eee;
        /* height: 84vh; */
        position: absolute !important;
    }

    #contenedor-lugares {
        /* min-width: 270px; */
        border-right: 1px solid #ccc;
        background-color: #f8f9fa;
        position: relative;
        /* max-height: 73vh; 
      overflow-y: auto;*/
    }

    #search-results {
        /* max-width: 400px; */
        position: absolute;
        background-color: #fff;
        z-index: 10;
        width: 100%;
        box-shadow: 0px 2px 4px 0px #aaa;
        max-height: 500px;
        overflow-y: auto;
    }

    #search-results li:only-child {
        font-weight: 600;
    }

    .item-header {
        font-weight: bolder;
        font-size: 14px;
        padding: 11px;
        /* background-color: rgba(128, 90, 213, 0.3); */
        color: #222;
    }

    i.fav {
        color: var(--first-color);
    }

    .selectable {
        cursor: pointer;
        color: var(--first-color);
    }

    .selected {
        background-color: #007bff;
        color: white;
    }

    /* #contextMenu {
      position: absolute;
      background: white;
      border: 1px solid #ccc;
      display: none;
      padding: 5px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      margin-left: 6px;
      margin-top: -50px;
      font-size: 0.9rem;
    } */


    /* .dropdown-indicator-icon {
      right: 0.7rem;
      top: 0.7rem;
      padding: 0px 6px;
    } */

    .dropdown-indicator-icon:not(.collapsed) {
        rotate: 180deg;
    }

    .dropdown-indicator-icon.collapsed {
        rotate: 0deg;
    }

    #contenedor-mapa-buscador {
        position: sticky;
        height: 88vh;
        top: 55px;
        overflow: hidden;
    }

    #label-tabs-agregados,
    #label-actividades-agregadas {
        font-size: 1.1rem;
    }

    #input-buscador-lugar-mapa {
        border-width: 2px;
        outline: none;
    }

    input[type="text"]:focus {
        /* border-color: #805AD5EE; */
        /* Change border color on focus */
        box-shadow: 0 0 6px var(--first-color);
        /* Apply glowing box-shadow */
    }

    .activity-over .empty-element {
        display: none !important;
    }

    .container-itinerario-dias {
        min-height: 35px;
    }

    .empty-element {
        color: #BDBDBD !important;
        font-weight: 400;
    }

    .marcador-actividad-hover {
        transform: scale(1.4) translateY(-10px);
        /* background-color: var(--map-activity-color-highlight) !important; */
        /* border: 1px solid var(--hotel-color) !important; */
    }

    .marcador-actividad-hover .icon {
        /* color: var(--hotel-color) !important; */
        color: #FFF !important;
    }

    /* 
   .marcador-actividad-hover.marker-act:not(.highlight)::after {
      border-top: 9px solid var(--map-activity-color-highlight);
    } */

    .container-itinerario-dias>small:not(.empty-element) {
        cursor: move;
        cursor: grab;
        cursor: -webkit-grab;
        color: var(--hotel-color);
        /* border: 1px solid;
      border-color: transparent; */
        font-weight: 700;
        margin: 0.3rem;
    }

    .container-itinerario-dias>small:not(.empty-element):hover,
    .gu-mirror {
        /* border-color: var(--hotel-color); */
        border-radius: 4px;
        /* box-shadow: 0px 0px 5px 0px #03a9f499; */
        box-shadow: 0px 0px 5px 0px #0a58ca99;

        color: var(--hotel-color);
        border-radius: 6px;
        background-color: #0a58ca11;
    }

    /*
 * Property styles in unhighlighted state.
 */
    .marker-tab {
        align-items: center;
        background-color: #ffffff;
        border-radius: 50%;
        color: #263238;
        display: flex;
        font-size: 14px;
        gap: 15px;
        height: 30px;
        justify-content: center;
        padding: 4px;
        position: relative;
        position: relative;
        transition: all 0.3s ease-out;
        width: 30px;
    }

    .marker-tab::after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid #ffffff;
        content: '';
        height: 0;
        left: 50%;
        position: absolute;
        top: 90%;
        transform: translate(-50%, 0);
        transition: all 0.3s ease-out;
        width: 0;
        z-index: 1;
    }

    .marker-tab .icon {
        align-items: center;
        display: flex;
        justify-content: center;
        color: #ffffff;
    }

    .marker-tab .icon svg {
        height: 20px;
        width: auto;
    }

    .marker-tab .image-tab-icon {
        display: none;
        max-width: 150px;
    }

    .marker-tab .details {
        display: none;
        flex-direction: column;
        flex: 1;
    }

    .marker-tab .address {
        color: #9e9e9e;
        font-size: 10px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

    .marker-tab .features {
        align-items: flex-end;
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }

    .marker-tab .features>div {
        align-items: center;
        background: #f5f5f5;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        font-size: 10px;
        gap: 5px;
        padding: 5px;
    }

    /*
 * Property styles in highlighted state.
 */
    .marker-tab.highlight {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
        height: auto;
        padding: 8px 15px;
        max-width: 320px;
        width: auto;
    }

    .marker-tab.highlight::after {
        border-top: 9px solid #ffffff;
        top: 100%;
    }

    .marker-tab.highlight .details {
        display: flex;
    }

    .marker-tab.highlight .icon svg {
        /* width: 50px;
      height: 50px; */
        display: none;
    }

    .marker-tab.highlight .image-tab-icon {
        display: block;
        max-height: 120px;
    }

    .marker-tab .tab {
        color: #ffa000;
    }

    .marker-tab .bath {
        color: #03a9f4;
    }

    .marker-tab .size {
        color: #388e3c;
    }

    .marker-tab.highlight .icon i {
        display: none;
    }


    /*
 * Tab icon colors.
 */
    .tab-color {
        color: var(--tab-color);
    }

    .marker-tab.highlight:has(.fa-heart) .icon {
        color: var(--tab-color);
    }

    .marker-tab:not(.highlight):has(.fa-heart) {
        background-color: var(--tab-color);
    }

    .marker-tab:not(.highlight):has(.fa-heart)::after {
        border-top: 9px solid var(--tab-color);
    }

    /*
 * Property styles in unhighlighted state.
 */
    .marker-act {
        align-items: center;
        background-color: #ffffff;
        border-radius: 50%;
        color: #263238;
        display: flex;
        font-size: 14px;
        gap: 15px;
        height: 30px;
        justify-content: center;
        padding: 4px;
        position: relative;
        position: relative;
        transition: all 0.3s ease-out;
        width: 30px;
    }

    .marker-act::after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid #ffffff;
        content: '';
        height: 0;
        left: 50%;
        position: absolute;
        top: 90%;
        transform: translate(-50%, 0);
        transition: all 0.3s ease-out;
        width: 0;
        z-index: 1;
    }

    .marker-act .icon {
        align-items: center;
        display: flex;
        justify-content: center;
        color: #ffffff;
    }

    .marker-act .icon svg {
        height: 20px;
        width: auto;
    }

    .marker-act .image-act-icon {
        display: none;
        max-width: 150px;
    }

    .marker-act .details {
        display: none;
        flex-direction: column;
        flex: 1;
    }

    .marker-act .address {
        color: #9e9e9e;
        font-size: 10px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

    .marker-act .features {
        align-items: flex-end;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .marker-act .features>div {
        align-items: center;
        background: #f5f5f5;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        font-size: 10px;
        gap: 5px;
        padding: 5px;
    }

    /*
 * Property styles in highlighted state.
 */
    .marker-act.highlight {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
        height: auto;
        padding: 8px 15px;
        max-width: 320px;
        width: auto;
    }

    .marker-act.highlight::after {
        border-top: 9px solid #ffffff;
        top: 100%;
    }

    .marker-act.highlight .details {
        display: flex;
    }

    .marker-act.highlight .icon svg {
        width: 50px;
        height: 50px;
    }

    .marker-act.highlight .image-tab-icon {
        display: block;
        max-height: 120px;
    }

    .marker-act .act {
        color: #ffa000;
    }

    .marker-act .bath {
        color: #03a9f4;
    }

    .marker-act .size {
        color: #388e3c;
    }

    /*
 * Tab icon colors.
 */
    .act-color {
        color: var(--act-color);
    }

    .hotel-color {
        color: var(--hotel-color);
    }

    .map-activity-color {
        color: var(--map-activity-color);
    }

    .travel-color {
        color: var(--travel-color);
    }

    .marker-act.highlight:has(.fa-person-walking-luggage) .icon {
        color: var(--act-color);
    }

    .marker-act:not(.highlight):has(.fa-person-walking-luggage) {
        background-color: var(--act-color);
    }

    .marker-act:not(.highlight):has(.fa-person-walking-luggage)::after {
        border-top: 9px solid var(--act-color);
    }

    .marker-act.highlight .icon {
        color: var(--hotel-color);
        font-size: 2.5rem;
    }

    .marker-act:not(.highlight) {
        background-color: var(--map-activity-color);
    }

    .marker-act:not(.highlight)::after {
        border-top: 9px solid var(--map-activity-color);
    }

    /* .marker-act.highlight:has(.fa-truck-plane) .icon {
      color: var(--travel-color);
    } 

    .marker-act:not(.highlight):has(.fa-truck-plane) {
      background-color: var(--travel-color);
    }

    .marker-act:not(.highlight):has(.fa-truck-plane)::after {
      border-top: 9px solid var(--travel-color);
    } */

    .marker-act .details .name {
        font-weight: bold;
        font-size: 1.1rem;
    }

    .marker-act .details .description {
        margin-top: 0.2rem;
        font-size: 0.8rem;
    }

    /* .marker-act.highlight .icon svg {
      width: 50px;
      height: 50px;
      color: var(--hotel-color);
    } */

    #contenedor-actividades-agregadas li[data-type="1"] i {
        color: var(--travel-color);
    }

    #contenedor-actividades-agregadas li[data-type="2"] i {
        color: var(--hotel-color);
    }

    #contenedor-actividades-agregadas li[data-type="3"] i {
        color: var(--act-color);
    }

    #contenedor-input-search-lugar-mapa {
        position: absolute;
        z-index: 99;
        top: 1vw;
        left: 1vw;
        width: 98%;
    }

    #contenedor-input-search-lugar-mapa>div {
        max-width: 450px;
        /* max-width: 89vw; */
    }

    #contenedor-itinerario-mapa-viaje h6.bg-body-secondary {
        margin: 0px 10px;
    }

    #button-tips-viaje {
        /* position: absolute;
        z-index: 10;
        right: 0.4rem;
        top: 0.7rem; */
    }

    #contenedor-notas-viaje {
        height: 50vh;
    }

    #contenedor-medir-distancia-viaje {
        position: absolute;
        background-color: #FFF;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 10px 6px;
        box-shadow: 0px 1px 5px -2px #AAA;
        border-bottom: 1px solid #EEE;
        top: -50%;
        transition: all 0.5s ease-out;
    }

    #contenedor-medir-distancia-viaje.active {
        top: 0;
    }