/* Mapa de rutas Ulúa */
.rutas { padding-top: 10px; padding-bottom: 30px; }
.rutas-intro { color: var(--vz-texto); margin: 10px 0 16px; }
.rutas-herramientas { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 16px; }
.rutas-buscar { display: flex; flex-direction: column; flex: 1 1 260px; margin: 0; font-weight: 500; color: var(--vz-guinda); }
.rutas-buscar input { border: 1px solid var(--vz-borde); border-radius: 6px; padding: 8px 10px; font-family: var(--vz-fuente); font-size: 15px; }
.rutas-grupo { display: inline-flex; border: 1px solid var(--vz-dorado); border-radius: 6px; overflow: hidden; }
.rutas-grupo button { border: 0; background: #fff; color: var(--vz-guinda); padding: 8px 12px; font-family: var(--vz-fuente); font-size: 14px; cursor: pointer; }
.rutas-grupo button + button { border-left: 1px solid var(--vz-dorado); }
.rutas-grupo button.activo { background: var(--vz-guinda); color: #fff; }
.rutas-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.rutas-lista { list-style: none; margin: 0; padding: 0; max-height: 620px; overflow-y: auto; border: 1px solid var(--vz-borde); border-radius: 8px; }
.rutas-lista li { border-bottom: 1px solid var(--vz-borde); }
.rutas-lista li:last-child { border-bottom: 0; }
.ruta-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: #fff; padding: 10px 12px; cursor: pointer; font-family: var(--vz-fuente); transition: background var(--vz-transicion); }
.ruta-item:hover { background: var(--vz-gris-100); }
.ruta-item[aria-pressed="true"] { background: #f6ecf0; box-shadow: inset 4px 0 0 var(--vz-guinda); }
.ruta-color { flex: 0 0 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid #333; background-color: var(--c); }
.ruta-texto strong { display: block; color: var(--vz-guinda); font-size: 15px; }
.ruta-texto small { display: block; color: var(--vz-gris-600); font-size: 12.5px; line-height: 1.35; }
#rutas-mapa { height: 620px; border: 1px solid var(--vz-borde); border-radius: 8px; z-index: 0; }
.rutas-leyenda { font-size: 13px; color: var(--vz-gris-600); margin: 6px 2px 0; }
.rutas-hoteles { margin-top: 30px; }
.rutas-hoteles h2 { color: var(--vz-guinda); font-size: 22px; }
.rutas-hoteles ul { columns: 2; column-gap: 30px; padding-left: 18px; }
.rutas-hoteles li { margin-bottom: 4px; }
@media (max-width: 767px) {
    .rutas-layout { grid-template-columns: 1fr; }
    .rutas-lista { max-height: 260px; }
    #rutas-mapa { height: 420px; }
    .rutas-hoteles ul { columns: 1; }
}
.modo_nocturno .ruta-color { border-color: #fff !important; background-color: var(--c) !important; }
.modo_nocturno .leaflet-container, .modo_nocturno .leaflet-container * { color: revert !important; }
.btn-ruta-mapa { display: inline-block; background: var(--vz-guinda); color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; transition: background var(--vz-transicion); }
.btn-ruta-mapa:hover, .btn-ruta-mapa:focus { background: var(--vz-guinda-hover); color: #fff; text-decoration: none; }

.rutas-gps { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 14px; }
#rutas-gps-btn { border: 1px solid var(--vz-guinda); background: #fff; color: var(--vz-guinda); border-radius: 6px; padding: 9px 16px; font-family: var(--vz-fuente); font-size: 15px; cursor: pointer; }
#rutas-gps-btn[aria-pressed="true"] { background: var(--vz-guinda); color: #fff; }
#rutas-gps-estado { flex: 1 1 280px; margin: 0; font-size: 14px; color: var(--vz-texto); }
.rutas-gps-barra { display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--vz-gris-200); overflow: hidden; }
.rutas-gps-barra i { display: block; height: 100%; background: var(--vz-guinda); }

.rutas-secundario { padding-bottom: 30px; }
.rutas-subtitulo, .rutas-hoteles h2 { font-family: var(--vz-fuente); color: var(--vz-guinda); font-size: 20px; margin: 0 0 12px; }
.rutas-hoteles-col { margin-top: 0; }
.rutas-hoteles-col ul { columns: 1; font-size: 14px; }