/* áéíóú - Forzando UTF-8 */
html, body {
height: 100dvh;
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden; /* Para que no haya doble barra de scroll. Evita que la página entera haga scroll. El scroll solo debe existir en la tabla */
display: flex;
flex-direction: column; /* Organiza elementos uno debajo de otro */
font-size: 16px !important;
background-color: #d9ebf9;
box-sizing: border-box;
/* Esto impide que Android infle el texto arbitrariamente para móviles con cambios en tamaño predeterminado de letra (accesibilidad) */
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Pila de fuentes del sistema moderna. Android usará Roboto y iOS usará San Francisco */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* Mejora la renderización del texto */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
scroll-behavior: smooth;
}
input, button, textarea, select {
font-size: inherit; /* Hereda del body/html, e.g. 16px */
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
}
.button-custom {
width: 40px;
margin-left: 4px;
font-size: 1.3em;
cursor: pointer;
border: 1px solid #333;
border-radius: 4px;
background-color: #f0f0f0;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.1s, padding-top 0.1s;
height: 30px;
padding-bottom: 30px;
}
/* 🔴 Solución al tapado del área de notificaciones en algunos móviles -------------------------------- */
:root {
--android-sb-height: 0px;
--android-nav-height: 0px; /* JS lo calcula: 0 con gestos, ~48px con botones */
--vv-offset-top: 0px;
}
/* Solo aplicamos esto cuando detectamos Android por JS */
body.modo-android-manual {
/* 1. PARTE SUPERIOR (Tu lógica manual) */
/* IMPORTANTE: En Android ignoramos env(). Usamos SOLO lo que diga el plugin. */
padding-top: max(25px, var(--android-sb-height)) !important;
/* 3. LATERALES (Por si hay muescas/notches en horizontal o pantallas curvas) */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
/* Tu degradado para que el fondo de la barra se vea bonito */
/* background: linear-gradient(to bottom, #d9ebf9 0%, #d9ebf9 calc(100px + var(--vv-offset-top, 0px)), #F3F4F6 calc(100px + var(--vv-offset-top, 0px))) !important; */
background-color: #d9ebf9;
background-size: 100% 100%;
}
/* A veces Capacitor tarda unos milisegundos en cargar el plugin, y durante ese tiempo la app se ve mal. En tu CSS global, puedes añadir esto para que los elementos fixed (como tu cabecera) tengan una transición suave si cambian de altura: */
body, header, .offline-badge {
transition: padding-top 0.3s ease, top 0.3s ease;
background: #d9ebf9;
}
/* 🔴 Mensaje "Esperando conexión..." -------------------------------- */
.offline-badge {
position: fixed;
white-space: nowrap;
width: fit-content;
top: 50%;
left: 50%;
min-height: 37px;
transform: translate(-50%, -50%);
z-index: 99999;
background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #ff0000;
border-radius: 19px;
padding: 1px 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #ff0000;
font-weight: 800;
font-size: 18px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
animation: latido-centrado 3s infinite;
}
/* Ajuste para que el icono no se deforme */
.offline-badge svg {
flex-shrink: 0;
}
/* ⚠️ LA ANIMACIÓN DEBE INCLUIR EL CENTRADO */
/* Si no ponemos translateX(-50%) aquí, al animarse saltará a la derecha */
@keyframes latido-centrado {
0% {
transform: translate(-50%, calc(-50% + var(--vv-offset-top, 0px))) scale(1);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
50% {
transform: translate(-50%, calc(-50% + var(--vv-offset-top, 0px))) scale(1.05);
box-shadow: 0 6px 12px rgba(255, 68, 0, 0.3);
}
100% {
transform: translate(-50%, calc(-50% + var(--vv-offset-top, 0px))) scale(1);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
}
/* 🔴🔴 BLUR PARA: Menú, filtros y tabla al abrirse configuraciones*/
.elemento-desenfocado {
filter: blur(0.7px) grayscale(50%); /* Borroso y en blanco y negro */
opacity: 0.7; /* Semitransparente */
pointer-events: none; /* IMPORTANTE: Evita clics accidentales en la tabla */
transition: all 0.3s ease; /* Transición suave */
user-select: none; /* No deja seleccionar texto */
}
/* 🔴🔴 CONTENEDOR PRINCIPAL CONTROLES (Menú + Filtro horario + Configuración filtros + Configuración) */
.contenedor-principal-controles {
max-width: 727px;
width: calc(100% - 8px);
margin: 0 auto;
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(255, 255, 255);
box-shadow: 0 4px 18px 10px rgba(0, 0, 0, 0.05);
border-radius: 10px;
margin-top: 3px;
}
/* Para que el Slider respire un poco cuando el menú de arriba está oculto en modo normal */
body:not(.modo-edicion-tabla) .contenedor-principal-controles {
padding-top: 5px;
}
/* 🔴 MENÚ SUPERIOR (Oculto por defecto en uso normal) -------------------------------- */
/* Ocultar el menú superior por defecto en el uso normal */
#div-menu {
display: none;
padding: 4px;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
}
/* Mostrar el menú superior ÚNICAMENTE cuando entramos a editar favoritos */
#div-menu.mode-editing {
display: flex;
transition: background-color 0.3s ease;
}
/* 🟡 BOTONES -------------------------------- */
#btn-filtro-favoritos-toggle,
#btn-desmarcar-favoritos,
#btn-abrir-favoritos,
#btn-guardar-favoritos,
#btn-guia-edicion-favoritos {
width: 40px;
height: 30px;
justify-content: center;
align-items: center;
padding: 0;
margin-left: 4px;
font-size: 1.3em;
cursor: pointer;
border: 1px solid #333;
border-radius: 4px;
background-color: #f0f0f0;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.1s, padding-top 0.1s;
}
#btn-filtro-favoritos-toggle.activo {
/* background-color: #ff000042; */
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
padding-top: 2px;
border-color: #999;
}
/* Para borde rojo en los filtros Condiciones y Distancia Y Favoritos cuando estén activos */
.borde-rojo-externo {
box-shadow: 0 0 0 3px #ff0000 !important;
transition: box-shadow 0.3s ease;
}
/* Clase que aplicaremos por JS cuando el filtro sea distinto al valor por defecto */
#btn-filtro-favoritos-toggle.filtro-aplicado {
border-color: #ff0000 !important;
border-width: 1px !important;
box-shadow:
inset 0 0 0 2px #ff0000,
inset 1px 1px 3px rgba(0,0,0,0.4) !important;
}
#div-menu .nav-icon-container {
width: 34px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: all 0.2s ease;
}
#btn-desmarcar-favoritos:active .nav-icon-container {
background-color: #ffdada; /* Rojo suave al pulsar desmarcar todo */
}
/* 🟡 Lógica de visibilidad de botones--- */
.div-menu .group-edit {
display: none;
}
.div-menu.mode-editing .group-normal {
display: none !important;
}
.div-menu.mode-editing .group-edit {
display: flex;
}
/* 🟡 BUSCADOR -------------------------------- */
#buscador-wrapper {
display: flex;
position: relative;
}
#buscador-despegues-provincias {
padding: 5px;
border: 1px solid black;
border-radius: 4px;
width: 80px;
padding-right: 30px; /* Deja espacio para el botón de borrado */
transition: background-color 0.2s, border-color 0.2s;
background-color: #FFFFFF;
text-indent: 0px;
padding-left: 10px; /* Espacio general interno */
}
#buscador-despegues-provincias.filtrado {
border-color: #ff0000;
color: #1e293b;
box-shadow: inset 0 0 0 3px red, inset 1px 1px 3px rgba(0, 0, 0, .4) !important;
border: none !important;
}
/* Estilo del placeholder: gris, con sitio para el cursor a la izquierda */
#buscador-despegues-provincias::placeholder {
color: #888 !important;
opacity: 1;
/* Empuja el texto 12px a la derecha para que el cursor no lo tape */
text-indent: 12px;
transition: opacity 0.2s ease;
}
/* Comportamiento al entrar: el cursor aparece y el texto se va */
#buscador-despegues-provincias:focus::placeholder {
color: #888 !important;
}
.buscador-despegues-sin-resultados {
color: #ff0000 !important; /* Rojo (tu variable --tag-fix) */
font-weight: bold !important; /* Negrita */
transition: color 0.2s ease;
}
/* Quita los estilos nativos de iOS para inputs de búsqueda */
input[type="search"] {
-webkit-appearance: none; /* Elimina sombras y bordes nativos de Apple */
appearance: none;
border-radius: 0; /* O el radius que tú quieras, pero quita el defecto */
}
/* Quitar la "X" automática que sale en Chrome/Safari */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
display: none;
}
/* Necesario para posicionar la 'X' dentro del contenedor */
.buscador-con-boton {
position: relative;
}
/* Estilo de la X (el botón de limpiar) */
#limpiar-buscador {
position: absolute;
right: -1px; /* Ajusta la posición desde la derecha */
top: 50%; /* Centrado vertical */
transform: translateY(-50%);
display: none; /* se muestra solo si hay texto */
background: transparent;
border: none;
cursor: pointer;
font-size: 35px;
outline: none;
color: #999;
z-index: 10; /* Asegura que está por encima del input */
}
#limpiar-buscador:hover {
color: #555; /* Un poco más oscuro al pasar el ratón */
}
/* 🔴 FILTRO HORARIO -------------------------------- */
.div-filtro-horario {
display: flex;
justify-content: space-around;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
}
.div-slider-filtro-horario {
display: flex;
justify-content: center;
background-color: #0404ff1f;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
padding-bottom: 5px;
z-index: 50;
}
/* 🔴 FILTRO CONDICIONES Y DISTANCIA -------------------------------- */
.div-filtro-condiciones,
.div-filtro-distancia {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-shrink: 0;
width: 100%;
margin: 0 auto;
max-width: 780px;
box-sizing: border-box;
/* ESTADO OCULTO: Altura, opacidad y márgenes a cero */
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
margin-bottom: 0;
padding: 0 4px; /* Padding lateral se mantiene, pero no el vertical */
/* Le dice al navegador que prepare la GPU para cambios */
will-change: max-height, opacity;
/* Truco para activar aceleración de hardware */
transform: translateZ(0);
/* LA TRANSICIÓN */
transition:
max-height 0.3s ease-in-out,
opacity 0.2s ease,
margin-top 0.3s ease,
margin-bottom 0.3s ease,
padding 0.3s ease;
}
.div-filtro-condiciones.activo,
.div-filtro-distancia.activo {
max-height: 120px; /* Un valor superior al contenido real */
opacity: 1;
margin-top: 6px;
margin-bottom: 2px;
padding: 4px;
}
/* 🔴 CONFIGURACIÓN -------------------------------- */
.panel-titulo {
width: 100%;
text-align: center;
flex-shrink: 0;
font-weight: bold;
margin-top: -16px;
margin-bottom: 10px;
/* border-bottom: 1px solid #eee; */
padding-left: 30px;
padding-right: 30px;
box-sizing: border-box;
}
@media (max-width: 370px) {
.panel-titulo {
font-size: 1.3rem;
margin-top: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
.btn-cerrar-modal {
/* 1. Posicionamiento */
position: absolute;
top: 5px; /* Ajustado a 5px para igualar al otro */
right: 5px; /* Ajustado a 5px para igualar al otro */
z-index: 20;
/* 2. Tamaño y Forma (El círculo) */
width: 32px;
height: 32px;
border-radius: 50%;
/* 3. Centrado Perfecto (Flexbox) */
display: flex;
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
padding: 0; /* Importante quitar el padding antiguo */
margin: 0;
/* 4. Estilo Visual (Fondo, sombra, blur) */
background: rgba(255, 255, 255, 0.9); /* Fondo casi blanco semitransparente */
backdrop-filter: blur(2px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border: none;
/* 5. Texto (La X) */
color: #444; /* Gris oscuro para mejor contraste */
font-size: 28px; /* Reducido de 33 a 28 para que quepa bien en el círculo */
line-height: 1;
cursor: pointer;
/* 6. Truco para que la X quede centrada verticalmente en Android */
font-family: Arial, sans-serif;
}
/* Opcional: Efecto al pasar el ratón (si se usa en PC) */
.btn-cerrar-modal:hover {
background-color: #ffffff;
color: #000;
}
.div-configuracion {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
position: fixed;
top: max(20px, env(safe-area-inset-top)) !important;
left: 50%;
transform: translateX(-50%);
z-index: 9999 !important; /* Asegura que quede encima de todo (filtros, tabla, etc.) */
/* TAMAÑO Y FORMA DE "TARJETA" */
max-width: 400px; /* En PC se queda como una ventana modal elegante */
background: #ffffff !important;
background-color: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
border-radius: 10px;
box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.5);
border: 1px solid #ccc;
/* ESTADO CERRADO */
overflow: hidden;
overflow-y: hidden;
max-height: 0;
opacity: 0;
margin: 0;
padding: 0 4px;
pointer-events: none;
/* TRANSICIÓN CONSISTENTE */
transition:
max-height 0.3s ease-in-out,
opacity 0.2s ease,
margin 0.3s ease,
padding 0.3s ease;
transform: translate(-50%, var(--vv-offset-top, 0px)); /* Para que, si la usuaria sube la pantalla mientras hay modales abiertos (como el panel de configuración, menú de geolocalización o de conexión), no se salgan del marco de la pantalla */
}
.div-configuracion.activo {
opacity: 1 !important;
overflow-y: auto;
pointer-events: auto;
padding-top: 26px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 8px;
max-height: calc(100dvh - env(safe-area-inset-bottom) - 100px) !important;
-webkit-overflow-scrolling: touch;
}
/* --- EFECTO FADE-IN DE CONTENIDO INTERNO --- */
/* Hace que el contenido interno espere un poco a que el panel baje */
.div-configuracion > * {
transition: opacity 0.3s ease;
opacity: 0;
}
.div-configuracion.activo > * {
opacity: 1;
}
/* AJUSTE PARA PANTALLAS SUPERESTRECHAS (< 370px) */
@media (max-width: 370px) {
.div-configuracion {
width: 100% !important; /* Ocupar el 100% de la pantalla */
max-width: none !important; /* Quitar límite de anchura */
left: 0 !important; /* Pegado a la izquierda */
transform: none !important; /* Quitar el centrado matemático */
border-radius: 0 !important; /* Quitar esquinas redondeadas */
border: none !important; /* Quitar bordes grises */
transform: translateY(var(--vv-offset-top, 0px)) !important;
}
.div-configuracion.activo {
padding-right: 5px !important;
padding-left: 5px !important;
}
.btn-cerrar-modal {
right: 2px !important; /* Pegarlo más a la esquina */
top: 2px !important;
}
}
/* 🟡 PANEL TERCIARIO. Divs -------------------------------- */
.div-configuracion-subpanel {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
/* Agrupar los botones y hacerlos flexibles dentro de su columna */
.div-botones {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
margin-top: 4px;
padding-bottom: 3px;
align-items: center;
gap: 15px;
}
.enlaces-legales {
color: #666;
}
.enlaces-legales a {
color: #0078d4; /* El azul fuerte de tu nuevo icono */
text-decoration: none;
font-weight: bold;
}
.enlaces-legales a:hover {
text-decoration: underline;
}
.enlaces-legales .separador {
color: #9a9a9a;
}
.btn-accion {
height: 30px;
text-align: center;
box-sizing: border-box;
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #333;
border-radius: 10px;
}
/* 🔴 DIVs dentro de los paneles -------------------------------- */
.div-paneles-controles-sin-pips {
position: relative;
border: 1px solid rgb(51, 51, 51);
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin-bottom: 8px;
border-radius: 10px;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
border-width: 1px;
max-width: 365px;
min-width: 365px;
min-height: 90px;
background-color: #d9ebf9;
}
.div-paneles-controles-sin-pips label {
display: block;
text-align: center;
font-weight: bold;
height: 23px;
margin-top: -3px;
margin-bottom: 3px;
}
.div-paneles-controles {
position: relative;
border: 1px solid rgb(51, 51, 51);
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
margin-bottom: 8px;
border-radius: 10px;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
border-width: 1px;
max-width: 365px;
min-width: 365px;
min-height: 100px;
background-color: #d9ebf9;
}
.div-paneles-controles label {
display: block;
text-align: center;
font-weight: bold;
height: 23px;
margin-top: -3px;
margin-bottom: 3px;
}
.div-paneles-controles-transparente {
padding-bottom: 12px;
border-radius: 10px;
border-width: 1px;
max-width: 365px;
min-width: 365px;
height: 78px;
position: relative;
border: 0px solid #000;
margin-bottom: 5px;
}
.div-paneles-controles-botones {
position: relative;
border: 1px solid transparent;
padding-right: 2px;
padding-left: 7px;
border-radius: 4px;
border-width: 1px;
max-width: 365px;
min-width: 365px;
margin-bottom: 10px;
margin-top: 3px;
}
/* 🔴 PANELES DESPLEGABLES (ACORDEONES) EN CONFIGURACIÓN */
details.config-accordion {
position: relative;
border: 1px solid rgb(51, 51, 51);
border-radius: 10px;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
max-width: 365px;
min-width: 365px;
background-color: #d9ebf9;
box-sizing: border-box;
/* ALINEA EXACTAMENTE*/
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 8px !important;
}
details.config-accordion summary {
font-weight: bold;
cursor: pointer;
padding: 6px 15px;
list-style: none; /* Oculta la flecha nativa estándar */
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
outline: none;
}
details.config-accordion summary::-webkit-details-marker {
display: none; /* Oculta la flecha nativa en WebKit (Safari/Chrome) */
}
details.config-accordion summary::after {
content: '▼';
color: #0078d4;
transition: transform 0.3s ease;
}
details.config-accordion[open] summary::after {
transform: rotate(-180deg);
}
details.config-accordion .accordion-content {
padding: 0px 7px 12px 10px;
margin-top: 0px;
padding-top: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.linea-con-bt-info {
display: flex;
align-items: center; /* Centra verticalmente checkbox, texto y botón */
justify-content: flex-start; /* Alinea todo a la izquierda */
gap: 8px; /* Espacio automático entre el texto y el botón */
width: 100%;
}
#titulo-condiciones-slider {
position: absolute !important;
top: 62px;
left: 0 !important; /* Pegado a la izquierda del contenedor */
width: 100%; /* Forzamos que la caja ocupe el 100% de ancho */
display: flex !important;
justify-content: center;
align-items: center;
gap: 10px; /* Espacio entre texto e icono */
padding: 0 !important;
z-index: 15; /* Asegura que quede por encima si roza algo */
}
#titulo-distancia-slider {
position: absolute !important;
top: 60px;
left: 0 !important; /* Pegado a la izquierda del contenedor */
width: 100%; /* Forzamos que la caja ocupe el 100% de ancho */
display: flex !important;
justify-content: center;
align-items: center;
gap: 10px; /* Espacio entre texto e icono */
padding: 0 !important;
z-index: 15; /* Asegura que quede por encima si roza algo */
}
/* 🔴 MENÚ 2 EDICIÓN FAVORITOS -------------------------------- */
.div-menu2-edicion-favoritos {
display: none;
width: 100%;
box-sizing: border-box;
transition: all 0.3s ease;
padding: 4px;
flex-shrink: 0;
padding-left: 18px;
}
.div-menu2-edicion-favoritos.mode-editing {
display: flex;
align-items: center; /* Centrado vertical */
justify-content: space-between; /* Texto a la izq, Botón a la der */
}
#btn-finalizar-edicion-favoritos {
width: 180px;
margin-left: auto;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.1s, padding-top 0.1s;
align-self: center;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 1em;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
border: 1px solid #333;
margin-bottom: 4px;
}
/* 🔴🔴 CONTENEDOR PRINCIPAL TABLA (Contador despegues + Tabla) */
.contenedor-principal-tabla {
flex-grow: 1; /* Ocupa TODO el espacio restante verticalmente */
display: flex; /* Flexbox interno para organizar contador y tabla */
flex-direction: column; /* Pone contador arriba y tabla abajo */
overflow: hidden; /* Contiene el scroll dentro de este bloque */
min-height: 0; /* Truco vital de Flexbox para permitir el scroll interno en hijos */
max-width: 100%; /* NUNCA permitas que el contenedor sea más ancho que la ventana */
background: #d9ebf9;
}
/* 🔴 CONTADOR DESPEGUES -------------------------------- */
.contador-despegues {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
line-height: 1.3;
margin-top: 3px;
color: #666;
font-style: italic;
gap: 4px;
}
/* Borde y fondo cuando la tabla está filtrada */
.contador-badge-filtro {
background-color: #d9ebf9;
border: 3px solid #ff0000;
color: #333333;
border-radius: 10px;
height: 24px;
box-sizing: border-box;
padding: 0 5px; /* Ajuste lateral */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
vertical-align: middle;
}
/* 3. EL ICONO (Para evitar espacios fantasma) */
.contador-badge-filtro img {
display: block; /* Importante: elimina el espacio reservado para la "descendiente" de la letra */
}
/* 🔴 TABLA -------------------------------- */
.tabla-wrapper {
flex: 1; /* Ocupa todo el espacio vertical restante */
margin-left: 3px;
margin-bottom: 3px;
margin-right: 3px;
padding-right: 1px;
margin-top: 3px;
flex-grow: 1; /* Se estira para llenar el hueco dejado por el contador */
overflow: auto; /* Aquí aparecen las barras de scroll si hace falta */
height: 100%; /* Asegura que ocupe el contenedor */
width: auto;
box-sizing: border-box;
/* Ajustes para móviles. Sumamos los 56px del menú compacto al margen. */
-webkit-overflow-scrolling: touch;
padding-bottom: calc(env(safe-area-inset-bottom) + 3px) !important;
}
#tabla {
border-collapse: separate;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: max-content; /* Usamos max-content para que la tabla crezca lo necesario horizontalmente */
margin-bottom: 0; /* Añadimos margen inferior para asegurar que la última fila no roce el scrollbar horizontal */
white-space: nowrap;
}
th, td {
padding: 0; /* CAMBIO: Quito padding general para controlar altura exacta */
text-align: center;
vertical-align: middle;
box-sizing: border-box; /* CAMBIO: Importante para que los bordes no sumen tamaño extra */
width: 20px;
min-width: 20px;
max-width: 20px;
overflow: hidden; /* Corta el contenido si se pasa */
white-space: nowrap;
overflow: hidden;
-webkit-text-size-adjust: none !important;
text-size-adjust: none !important;
}
/* Ajustamos el Z-index de todas las celdas de la cabecera (incluida la fila de Días) a un valor muy alto para que NADA se monte encima. */
th {
position: sticky;
background-color: #ffffff;
z-index: 10; /* Subimos a 11 para mayor seguridad */
}
td {
height: 18px;
font-size: 16px !important;
line-height: 18px !important; /* Fuerza a que la línea mida exactamente lo mismo que la celda */
}
th.day-start {
border-left: 2px solid #000;
}
td div {
display: flex;
flex-direction: column;
justify-content: center; /* Centrado vertical */
align-items: center; /* Centrado horizontal */
height: 100%; /* El div debe ocupar toda la altura del td */
}
/* Mini-tablas por despegue */
#tabla tbody td.celda-condiciones-inicio {
border-top-right-radius: 10px;
}
#tabla tbody td.celda-condiciones-final {
border-bottom-right-radius: 10px;
}
body.modo-edicion-tabla #tabla tbody tr.fila-inicio-despegue td.columna-favoritos {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
body:not(.modo-edicion-tabla) #tabla tbody tr.fila-inicio-despegue td.columna-despegue {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/* Cabecera redondeada */
#tabla thead tr:nth-child(1) th:first-child {
border-top-left-radius: 10px;
}
#tabla thead tr:nth-child(1) th:last-child {
border-top-right-radius: 10px;
}
#tabla thead tr:nth-child(1) th[rowspan="2"]:first-child {
border-bottom-left-radius: 10px;
}
#tabla thead tr:nth-child(1) th:last-child[rowspan="2"] {
border-bottom-right-radius: 10px;
border-right: 2px solid #000 !important;
}
/* En edición de favoritos, la columna Despegue es la última visible: pintamos su borde derecho exterior */
body.modo-edicion-tabla #tabla tbody td.columna-despegue {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/* CLASE PARA FILAS DE DATOS NORMALES (20px) */
.celda-altura-20px {
height: 20px !important;
line-height: 20px !important;
font-size: 16px !important;
}
/* CLASE PARA FILAS FINAS (4px) */
.celda-altura-4px {
height: 8px !important;
line-height: 0 !important;
font-size: 0 !important;
padding: 0 !important;
}
/* Nuevo estilo para truncar Región y Provincia en Edición de Favoritos */
td div.texto-multilinea-2 {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important; /* estándar */
overflow: hidden !important;
white-space: normal !important;
word-break: break-word;
line-height: 1.2 !important;
height: auto !important; /* Anula el 100% genérico para que se centre verticalmente */
width: 100%;
max-width: 94px;
margin: 0 auto;
}
td div.nombre-despegue-limitado {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important; /* Máximo 2 líneas */
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important; /* Añade los puntos suspensivos (...) */
white-space: normal !important;
word-break: break-word;
line-height: 1.2 !important;
width: 100%;
max-width: 105px;
margin: 0 auto;
}
/* --- Reglas para el Modo Edición --- */
/* 1. Cambiamos el ancho de la columna de despegue */
body.modo-edicion-tabla .columna-despegue {
width: 135px !important;
min-width: 135px !important;
max-width: 135px !important;
}
/* 2. Cambiamos el comportamiento del texto dentro */
body.modo-edicion-tabla td div.texto-multilinea-2 {
max-width: none !important; /* Quitamos la restricción de 94px */
}
/* --------------------------------------------------- */
/* Reset de estilos para tablas dentro de los tooltips */
/* --------------------------------------------------- */
/* 1. Reseteo de la tabla contenedora */
table.tabla-tooltip-desglose {
table-layout: auto !important; /* CLAVE: Deja que las columnas se adapten al texto */
white-space: normal !important;
}
/* 2. Reseteo de las celdas */
.tabla-tooltip-desglose th,
.tabla-tooltip-desglose td {
width: auto !important;
min-width: auto !important;
max-width: none !important;
height: auto !important;
line-height: 1.4 !important;
overflow: visible !important;
white-space: nowrap !important; /* Evita que la hora se parta en dos líneas */
padding-left: 4px !important; /* Un poco de aire para que no se peguen los números */
padding-right: 4px !important;
}
/* 🟡 TABLA. Fijado de filas y columnas -------------------------------- */
/* Aplicamos estilo base a todos los TH de la cabecera para asegurar el contexto */
#tabla thead th {
/* Esto ayuda a asegurar que el sticky se aplica a un elemento con un contexto de caja claro */
display: table-cell;
background-color: #ffffff; /* Aseguramos que siempre hay fondo blanco */
box-sizing: border-box; /* Aseguramos que padding y borde no afecten la altura total para el cálculo del 'top' */
}
/* --- FILAS SUPERIORES (DÍAS Y HORAS) --- */
/* Fila 1: Días */
#tabla thead tr:nth-child(1) th {
position: sticky;
top: 0;
height: 30px; /* FIJO: Definimos altura exacta para que la siguiente fila sepa dónde pegarse */
z-index: 25;
/* Correcciones visuales */
background-clip: padding-box;
border-top: 0;
background-color: #f0f0f0;
}
/* Fila 2: Horas */
/* Su posición 'top' debe ser IGUAL a la altura de la fila 1 (30px) */
#tabla thead tr:nth-child(2) th {
position: sticky;
top: 30px; /* Se pega justo debajo de la fila 1 */
z-index: 20;
height: 20px; /* Altura de la fila de horas */
background-clip: padding-box;
}
/* --- COLUMNAS IZQUIERDAS (FAV, DESPEGUE, METEO) --- */
/* Columna Favoritos */
.columna-favoritos {
left: 0px;
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
z-index: 15; /* Por encima de las celdas de datos normales */
background-color: #ffffff; /* Necesario para tapar el contenido al hacer scroll lateral */
}
.columna-provincia-region {
background-color: #ffffff; /* Necesario para tapar el contenido al hacer scroll lateral */
}
/* Columna Despegue */
.columna-despegue {
position: sticky;
left: 0px; /* Se pega después de la columna favoritos (0 + 30px) */
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
padding-left: 3px;
z-index: 15;
background-color: #ffffff;
}
/* Columna Meteo (Iconos y Cabecera) */
.columna-meteo, .columna-simbolo-fija {
position: sticky;
left: 100px !important; /* Se pega después de despegue (30 + 110 = 140px) */
width: 33px !important;
min-width: 33px !important;
max-width: 33px !important;
z-index: 15 !important;
background-color: #ffffff;
}
/* Columna Condiciones */
.columna-condiciones {
position: sticky;
right: -31px !important;
width: 27px !important;
min-width: 27px !important;
max-width: 27px !important;
z-index: 15 !important;
background-color: #ffffff;
}
/* --- LA ESQUINA INTERSECCIÓN --- */
/* Las celdas que son A LA VEZ cabecera superior y columna izquierda */
/* Deben tener el Z-Index más alto para tapar todo lo demás */
thead .columna-favoritos,
thead .columna-despegue,
thead .columna-meteo {
position: sticky;
top: 0 !important; /* Fuerzan top 0 porque son parte de la primera fila */
z-index: 30 !important; /* El nivel más alto: tapan filas y columnas al cruzar */
background-color: #ffffff;
border-bottom: 2px solid #000 !important;
}
/* Corrección específica para los iconos de meteo (fila 2, 3 y 4 en la zona izquierda) */
/* Los iconos de meteo (viento, racha, dir) NO son th, son td, pero queremos que floten sobre los datos */
.columna-simbolo-fija {
position: sticky;
left: 100px !important;
z-index: 15 !important;
background-color: #ffffff;
}
/* 🟡 TABLA. Estilos especiales -------------------------------- */
/* FUERZA el color gris para las horas nocturnas fijas */
/* Usamos !important para anular la regla general `th { background-color: #ffffff; }` */
#tabla tr:nth-child(2) th.celda-noche {
background-color: rgb(214, 214, 214) !important;
}
/* Para ocultar con js celdas que son true en el resultado de la función esCeldaNoche(Date), que son la fila de horas de cabecera y las 3 filas de datos (velocidad, racha y direccion) */
body.solo-dia .celda-noche {
display: none !important;
}
/* Para las celdas que necesiten o no que se muestre mano al pasar encima */
tbody td.cursor-pointer {
cursor: pointer;
}
tbody td.no-cursor-pointer {
user-select: none;
cursor: default;
}
tbody td.cursor-pointer:hover {
background-color: #f0f0f0;
}
/* Estilos para la línea gruesa de separación */
.borde-grueso-izquierda { border-left: 2px solid #000 !important; }
.borde-grueso-derecha { border-right: 2px solid #000 !important; }
.borde-grueso-abajo { border-bottom: 2px solid #000 !important; }
.borde-grueso-arriba { border-top: 2px solid #000 !important; }
tr.fila-separador td, tr.fila-separador th { border-bottom: 2px solid #000 !important; }
tr.fila-inicio-despegue.favorito td {
border-top: 1px solid #000 !important;
}
/* Fechas */
.orientaciones-svg {
display: flex; /* Convierte el contenedor en un Flex Container */
gap: 0; /* Clave: Asegura 0 separación entre los items */
padding: 0; /* Asegura que el contenedor no añada espacio */
margin: 0; /* Asegura que el contenedor no añada espacio */
align-items: center;
justify-content: center;
}
.orientaciones-svg svg {
width: 20px;
height: 20px;
transform: scale(1.5);
transform-origin: center;
margin-right: -4.7px;;
margin-left: 0;
padding: 0;
vertical-align: top;
}
.flecha-viento {
width: 20px;
height: 20px;
transform-origin: center;
margin-top: -4px;
margin-bottom: -4px;
padding: 0;
}
span.grados {
font-size: 10px;
}
/* COLORES CELDAS */
.fondo-verde { background-color: #6befaf; }
.fondo-naranja { background-color: #f0c16a; }
.fondo-rojo { background-color: #fb796e; }
/* 🔴 SUGERENCIAS GLOBALES -------------------------------- */
/* Contenedor principal */
#sugerencias-globales {
display: none;
flex-direction: column;
align-items: center;
margin-top: 10px;
padding: 10px;
background-color: #f3f4f6;
border-radius: 8px;
box-sizing: border-box;
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
/* El texto de "No hay favoritos..." */
.sugerencia-aviso {
margin: 0 0 10px 0;
color: #555;
text-align: center;
}
/* La lista (ul) */
.sugerencia-lista {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center; /* Asegura que los items (li) se centren */
}
/* Cada tarjeta de despegue (li) */
.sugerencia-item {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #ddd;
box-sizing: border-box;
width: 100%;
max-width: 400px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* El texto del despegue */
.sugerencia-texto {
flex: 1;
margin-right: 10px;
line-height: 1.2;
text-align: left; /* El texto dentro de la tarjeta sí lo queremos a la izquierda */
}
/* El botón de añadir */
.sugerencia-btn {
flex: 0 0 auto;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
color: #333;
transition: background 0.2s;
background-color: #f0f0f0;
border: 1px solid #333;
border-radius: 5px;
width: 170px;
height: 30px;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
}
.sugerencia-btn:hover {
background-color: #0078d4;
color: #ffffff !important;
}
/* 🔴 SLIDERS -------------------------------- */
/* 🟡 SLIDERS. Modificación clases generales noUi -------------------------------- */
.noUi-horizontal {
margin-top: 44px !important;
height: 17px !important;
margin-left: 18px !important;
margin-right: 18px !important;
}
.noUi-horizontal .noUi-handle {
width: 28px !important; /* Antes 20px */
height: 28px !important; /* Antes 24px */
top: -7px !important; /* Antes -5px (lo centramos verticalmente) */
right: -14px !important; /* Antes -9px (mitad exacta del width para centrarlo) */
border: 1px solid #999 !important;
border-radius: 6px !important; /* Esquinas ligeramente más suaves */
box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; /* Ligera sombra para darle volumen */
}
.noUi-handle:after, .noUi-handle:before {
top: 6px !important; /* Antes 4px */
height: 14px !important; /* Altura de la raya */
width: 2px !important;
}
.noUi-handle:before {
left: 10px !important; /* Rayita izquierda */
}
.noUi-handle:after {
left: 15px !important; /* Rayita derecha (5px de separación) */
}
.noUi-horizontal .noUi-tooltip {
cursor:pointer !important;
font-weight: bold;
display: flex;
align-items: baseline; /* Alinea la base del número con la base de la "h" */
justify-content: center;
}
.noUi-touch-area {
cursor: pointer !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.noUi-handle .noUi-tooltip {
display: flex !important;
align-items: center !important;
padding: 3px;
}
/* 🟡 SLIDERS. Personalizados. Horario -------------------------------- */
#horario-slider.noUi-horizontal {
margin-top: 33px !important;
}
#horario-slider .noUi-tooltip {
background: transparent;
border: none !important;
align-items: baseline !important;
}
/* Añadimos la "h" automáticamente detrás del número */
#horario-slider.noUi-horizontal .noUi-tooltip::after {
content: "h";
font-weight: normal;
font-size: 0.85em;
margin-left: 2px;
color: #555;
}
#horario-slider .noUi-pips-horizontal {
padding: 0px !important;
height: 45px !important;
top: 145% !important;
left: -4px !important;
width: 100% !important;
}
#horario-slider .noUi-value {
/* Mantenemos tu estilo visual básico */
margin-top: 5px;
color: black;
font-weight: bold;
transform: none !important;
width: 71px;
height: 25px;
cursor: pointer;
z-index: 3;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
background-color: #f0f0f0;
border-radius: 5px;
border: 1px solid #999 !important;
width: 70px !important;
margin-left: 9px !important;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}
#horario-slider .noUi-value:hover {
background-color: #0078d4;
color: #ffffff;
font-weight: bold;
}
#horario-slider .noUi-connect {
background: #0078d4;
}
/* Hide the first and last pip markers while keeping labels */
#horario-slider .noUi-pips .noUi-marker:first-of-type,
#horario-slider .noUi-pips .noUi-marker:last-of-type {
display: none !important;
}
#horario-slider .noUi-marker-horizontal.noUi-marker-large {
height: 9px;
margin-top: -32px;
}
/* 🟡 SLIDERS. Personalizados. Configuración Horario -------------------------------- */
#configuracion-horario-slider.noUi-horizontal {
margin-top: 30px !important;
}
#configuracion-horario-slider .noUi-tooltip {
background: transparent;
border: none !important;
align-items: baseline !important;
}
/* Añadimos la "h" automáticamente detrás del número */
#configuracion-horario-slider.noUi-horizontal .noUi-tooltip::after {
content: "h";
font-weight: normal;
font-size: 0.85em;
margin-left: 2px;
color: #555;
}
#configuracion-horario-slider .noUi-pips-horizontal {
padding: 0px !important;
height: 45px !important;
top: 113% !important;
left: 0 !important;
width: 100% !important;
}
#configuracion-horario-slider .noUi-connect {
background: #0078d4;
}
#configuracion-horario-slider .noUi-marker-horizontal.noUi-marker-large {
height: 8px;
}
#configuracion-horario-slider .noUi-value-horizontal {
transform: translate(-50%, 20%);
}
/* 🟡 SLIDERS. Personalizados. Condiciones -------------------------------- */
#condiciones-slider .noUi-connect {
background: #0078d4;
}
#condiciones-slider.noUi-horizontal {
margin-top: 33px !important;
}
#condiciones-slider .noUi-pips-horizontal {
padding: 0px !important;
height: 45px !important;
top: 100% !important;
left: 0 !important;
width: 100% !important;
}
#condiciones-slider .noUi-value {
margin-top: -62px; /* separación pips y su texto*/
color: black;
padding-left: 0px;
}
#condiciones-slider {
border: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
#condiciones-slider .noUi-marker,
#condiciones-slider .noUi-marker-large {
height: 6px;
}
#condiciones-slider .noUi-tooltip {
background: transparent;
border: none;
}
/* 🟡 SLIDERS. Personalizados. Distancia -------------------------------- */
#distancia-slider .noUi-connect {
background: #0078d4;
}
#distancia-slider.noUi-horizontal {
margin-top: 33px !important;
}
#distancia-slider .noUi-pips-horizontal {
padding: 0px !important;
height: 45px !important;
top: 100% !important;
left: 0 !important;
width: 100% !important;
}
#distancia-slider .noUi-value {
margin-top: -62px; /* separación pips y su texto*/
color: black;
padding-left: 0px;
}
#distancia-slider {
border: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
#distancia-slider .noUi-marker,
#distancia-slider .noUi-marker-large {
height: 6px;
}
#distancia-slider .noUi-tooltip {
background: transparent;
border: none;
}
/* Añadimos la "km" automáticamente detrás del número */
#distancia-slider.noUi-horizontal .noUi-tooltip::after {
content: " km";
font-weight: normal;
font-size: 0.85em;
margin-left: 2px;
color: #555;
position: relative;
top: 1px;
}
/* Que desaparezca el cuadro y también el "km" cuando la función devuelve "" */
#distancia-slider.noUi-horizontal .noUi-tooltip:empty {
display: none !important;
}
/* 🟡 SLIDERS. Personalizados. Distancia. Botones localización origen -------------------------------- */
/* 1. Botón configuración origen */
.btn-icon-trigger {
border-radius: 20%;
width: 24px;
height: 24px;
font-size: 16px;
cursor: pointer;
line-height: 24px;
padding: 0;
transition: all 0.2s;
display: inline-block;
vertical-align: middle;
text-align: center;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
background-color: #f0f0f0;
border: 1px solid #333;
}
#btn-incluir-no-favs-distancia {
border-radius: 4px !important;
width: auto !important;
height: 24px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 1px solid #333 !important;
background-color: #f0f0f0 !important;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2) !important;
transition: all 0.2s;
font-size: 16px;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
#btn-incluir-no-favs-distancia.filtro-aplicado {
border-color: #ff0000 !important;
border-width: 1px !important;
box-shadow:
inset 0 0 0 2px #ff0000,
inset 1px 1px 3px rgba(0,0,0,0.4) !important;
background-color: #ff000042 !important;
}
/* Fondo Oscuro (Overlay) - Compartido por Menu y Mapa */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background: rgba(0,0,0,0.6);
z-index: 2147483647 !important;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(3px);
transform: translateY(var(--vv-offset-top, 0px));
}
/* Caja Blanca del Modal */
.modal-content {
background: white;
padding: 8px;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
position: relative;
display: flex;
flex-direction: column;
animation: fadeIn 0.3s ease;
}
/* Tamaños específicos */
.small-modal { width: 360px; }
.map-modal-size {
width: 90vw;
height: 85vh;
display: flex;
flex-direction: column;
overflow: auto;
box-sizing: border-box;
}
/* Cabecera del modal */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
padding: 5px;
}
.modal-header h3 { margin: 0; font-size: 1.1rem; color: #333; }
/* Botón X de cerrar */
.close-x {
position: absolute;
top: 5px;
right: 5px;
z-index: 20;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(2px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
color: #444;
font-size: 28px;
line-height: 1;
cursor: pointer;
font-family: Arial, sans-serif;
}
.close-x:hover, .close-x:active {
background-color: #ffffff;
color: #000;
}
/* Estilo botón auxiliar (ahora usado para el GPS) */
.btn-option {
background: white;
border: 2px solid #dee2e6;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
color: #333;
}
.btn-option:hover {
background: #e7f5ff;
border-color: #74c0fc;
transform: translateY(-3px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.modal-footer {
display: flex;
justify-content: space-between;
}
.btn-aceptar, .btn-cancelar {
border-radius: 6px;
border: none;
font-weight: bold;
cursor: pointer;
font-size: 14px;
}
.btn-cancelar { background-color: #999; color: white; }
/* Animación */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* 🟡 SLIDERS. Personalizados. Velocidad -------------------------------- */
#velocidad-slider .noUi-connects .noUi-connect:nth-child(1) { background: #f0c16a; }
#velocidad-slider .noUi-connects .noUi-connect:nth-child(2) { background: #6befaf; }
#velocidad-slider .noUi-connects .noUi-connect:nth-child(3) { background: linear-gradient(to right, #6befaf 66.6%, #f0c16a 66.6%); }
#velocidad-slider .noUi-connects .noUi-connect:nth-child(4) { background: #fb796e; }
#velocidad-slider .tooltip-label {
font-size: 0.8em;
font-weight: normal;
margin-top: 2px;
opacity: 0.8;
display: block !important;
margin-top: 0px;
}
/* 🟡 SLIDERS. Personalizados. Racha -------------------------------- */
#racha-slider .noUi-connects .noUi-connect:nth-child(1) {
background: linear-gradient(to right, #6befaf var(--racha-tolerable-pct), #f0c16a var(--racha-tolerable-pct));
}
#racha-slider .noUi-connects .noUi-connect:nth-child(2) { background: #fb796e; }
#racha-slider .tooltip-label {
font-size: 0.8em;
font-weight: normal;
margin-top: 2px;
opacity: 0.8;
}
/* 🟡 SLIDERS. Personalizados. Velocidad y Racha. Etiquetas tootips ----------- */
/* 1. Configuración del Contenedor (Tooltip) */
#velocidad-slider .noUi-tooltip,
#racha-slider .noUi-tooltip {
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: center !important;
font-weight: bold;
color: #000;
min-width: 60px;
line-height: 1.1;
z-index: 5;
}
/* 2. LA UNIDAD "km/h" */
#velocidad-slider .noUi-tooltip::after,
#racha-slider .noUi-tooltip::after {
content: "";
font-weight: normal;
font-size: 0.85em;
color: #555;
margin-left: 2px;
order: 2;
}
/* 3. LA ETIQUETA "Mín/Ideal/Máx" */
#velocidad-slider .noUi-tooltip::before,
#racha-slider .noUi-tooltip::before {
font-weight: normal;
font-size: 0.8em;
color: #333;
opacity: 0.9;
width: 100%;
text-align: center;
order: 3;
}
/* 4. ASIGNACIÓN DE TEXTOS A LAS ETIQUETAS */
#velocidad-slider .noUi-handle[data-handle="0"] .noUi-tooltip::before { content: "Mín"; }
#velocidad-slider .noUi-handle[data-handle="1"] .noUi-tooltip::before { content: "Ideal"; }
#velocidad-slider .noUi-handle[data-handle="2"] .noUi-tooltip::before { content: "Máx"; }
#racha-slider .noUi-handle[data-handle="0"] .noUi-tooltip::before { content: "Máx"; }
/* 5. ESTILOS DE ERROR (CONFLICTO) */
#velocidad-slider .noUi-tooltip.tooltip-error-conflict,
#racha-slider .noUi-tooltip.tooltip-error-conflict {
background: #ff4444 !important;
border: 1px solid #ff4444 !important;
color: white !important;
box-shadow: 0 2px 8px rgba(255, 68, 68, 0.5);
}
#velocidad-slider .noUi-tooltip.tooltip-error-conflict *,
#racha-slider .noUi-tooltip.tooltip-error-conflict * {
color: white !important;
background: transparent;
}
#velocidad-slider .noUi-tooltip.tooltip-error-conflict::after,
#racha-slider .noUi-tooltip.tooltip-error-conflict::after {
border-top-color: #ff4444 !important;
color: white !important;
}
/* 🟡 SLIDERS. Otros CSS -------------------------------- */
.noUi-tooltip.flash {
animation: flash-sombra 300ms ease-in-out;
}
@keyframes flash {
0% { background-color: var(--tooltip-bg); transform: scale(1); }
50% { background-color: #ff0; transform: scale(1); }
100% { background-color: var(--tooltip-bg); transform: scale(1); }
}
@keyframes flash-sombra {
0% {
background-color: var(--tooltip-bg, #FFF);
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
50% {
background-color: #FF4136;
box-shadow: 0 0 10px 4px #FF4136, 0 3px 6px -3px #BBB;
}
100% {
background-color: var(--tooltip-bg, #FFF);
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
}
/* 🔴 MENSAJES -------------------------------- */
.mensaje-modal {
display:flex;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
z-index: 9999999 !important;
position:fixed;
top:0;
left:0;
width:100vw;
height:100dvh;
justify-content:center;
align-items:center;
flex-direction:column;
text-align: left;
font-size: 1em;
background: rgb(237 237 237 / 75%);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(var(--vv-offset-top, 0px));
}
.mensaje-modal.visible {
visibility: visible;
opacity: 1;
}
.mensaje-modal .mensaje-modal-contenido {
padding: 15px;
max-width: 415px;
margin: 20px;
background: #fff;
border-radius: 8px;
box-shadow: -1px 4px 16px 8px rgba(0, 0, 0, 0.1);
}
.mensaje-no-modal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #ffffff;
border-radius: 8px;
box-shadow: 4px 4px 14px 5px rgba(0, 0, 0, 0.33);
padding-bottom: 7px;
padding-right: 0px;
padding-left: 0px;
padding-top: 5px;
font-size: 1em;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
position: fixed;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
max-width: 120px;
max-height: 90vh;
overflow-y: auto;
border: 6px solid #ff0000;
transform: translateY(var(--vv-offset-top, 0px));
}
.mensaje-no-modal p:not(:last-child) {
margin-bottom: 0em;
}
.mensaje-no-modal.visible {
visibility: visible;
opacity: 1;
}
.boton-mensajes.btn-secundario {
background-color: #999;
}
.boton-mensajes-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.boton-mensajes {
margin-top: 5px;
align-self: center;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 1em;
box-shadow: 1px 1px 3px rgba(0, 60, 120, 0.2);
border: 1px solid #333;
}
/* 🔴 GUÍAS CON DRIVER.JS -------------------------------- */
.driver-overlay {
pointer-events: auto !important;
cursor: default;
}
.driver-active-element {
pointer-events: none !important;
}
/* ==========================================================================
🛠️ CORRECCIONES DRIVER.JS (Guías visuales)
========================================================================== */
/* 1. CAJA PRINCIPAL (Límites estrictos y color) */
.driver-popover {
background-color: #fde047 !important; /* Azul cielo pálido */
color: #fd0093 !important;
border-radius: 12px !important;
border: 1px solid #bfdbfe !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
/* LA MAGIA: Nunca será más ancha ni más alta que la pantalla libre */
/* max-width: calc(100vw - 30px) !important; */
max-width: 330px !important;
max-height: calc(100dvh - 80px) !important; /* Deja espacio para el menú inferior */
display: flex !important;
flex-direction: column !important;
z-index: 2147483647 !important; /* Por encima de todo */
}
/* 2. TÍTULO */
.driver-popover-title {
font-family: inherit !important;
font-weight: 700 !important;
background-color: transparent !important;
color: #1e3a8a !important;
font-size: 18px !important;
margin-bottom: 8px !important;
}
/* 3. TEXTO EXPLICATIVO (Scroll automático si no cabe) */
.driver-popover-description {
font-size: 16px !important;
color: #000000 !important;
line-height: 1.4 !important;
/* Si la pantalla es pequeña, el texto hará scroll y los botones se quedarán fijos */
overflow-y: auto !important;
max-height: 45vh !important; /* Ocupará como máximo casi media pantalla */
padding-right: 5px !important;
}
/* 4. BOTONES "SIGUIENTE" / "CERRAR" (Siempre visibles) */
.driver-popover-footer {
margin-top: 15px !important;
flex-shrink: 0 !important; /* Prohíbe que el navegador aplaste los botones */
}
.driver-popover-footer button {
text-shadow: none !important;
}
.driver-popover-footer button.driver-popover-next-btn {
background-color: #007bff !important;
color: white !important;
font-size: 16px !important;
border-radius: 6px !important;
padding: 8px 16px !important;
font-weight: bold !important;
border: 1px solid #0056b3 !important;
}
.driver-popover-footer button.driver-popover-prev-btn {
background-color: #999 !important;
color: white !important;
font-size: 16px !important;
border-radius: 6px !important;
padding: 8px 16px !important;
font-weight: bold !important;
border: 1px solid #666 !important;
}
/* 5. CORRECCIÓN DE LA FLECHA APUNTADORA (Del mismo color que la caja) */
div.driver-popover-arrow {
display: none !important;
}
.driver-popover-arrow-side-top { border-bottom-color: #dbeafe !important; }
.driver-popover-arrow-side-bottom { border-top-color: #dbeafe !important; }
.driver-popover-arrow-side-left { border-right-color: #dbeafe !important; }
.driver-popover-arrow-side-right { border-left-color: #dbeafe !important; }
.driver-popover-close-btn {
position: absolute;
top: 5px;
right: 5px;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
padding: 0;
margin: 0;
cursor: pointer;
font-size: 28px;
font-family: Arial, sans-serif;
color: #444;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(2px);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* 🔴 CHECKBOX -------------------------------- */
label.custom-checkbox input[type="checkbox"] {
transform-origin: center;
transform: scale(1.2);
margin-right: 8px;
margin-left: 0;
cursor: pointer;
}
label.custom-checkbox {
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 6px;
display: inline-flex;
align-items: center;
margin-left: 4px;
cursor: pointer;
/* font-weight: bold */
}
/* 🔴 BOTONES RESET FILTRO -------------------------------- */
.btn-reset-filtro {
border-radius: 50%;
font-size: 25px;
cursor: pointer;
display: inline-flex;
}
/* 🔴 BOTONES AYUDA -------------------------------- */
.btn-info {
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
@media (min-width: 1025px) {
.btn-info:hover {
background-color: #0078d4;
color: #000;
}
}
.btn-info:active {
background-color: #0078d4;
color: #000;
}
.btn-arriba-izquierda {
position: absolute;
top: 10px;
left: 10px;
z-index: 20;
}
.btn-arriba-derecha {
position: absolute;
top: 8px;
right: 8px;
z-index: 20;
}
.btn-abajo-derecha {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 20;
}
.btn-abajo-izquierda {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 20;
}
.btn-inline {
display: flex;
transform: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
/* 🟡 Tema de los globos personalizado */
.tippy-box[data-theme~='meteo-custom'] {
background-color: #ffffff;
color: #000000;
border: 1px solid #000000;
box-shadow: 5px 4px 13px 3px rgba(0, 0, 0, 0.44);
border-radius: 8px;
font-size: 16px;
position: relative;
}
.tippy-box[data-theme~='meteo-custom'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #2c3e50; }
.tippy-box[data-theme~='meteo-custom'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #2c3e50; }
.tippy-box[data-theme~='meteo-custom'][data-placement^='left'] > .tippy-arrow::before { border-left-color: #2c3e50; }
.tippy-box[data-theme~='meteo-custom'][data-placement^='right'] > .tippy-arrow::before { border-right-color: #2c3e50; }
.tippy-box[data-theme~='meteo-custom'] a {
color: #3498db;
}
/* 🟡 Ventana de tippy */
.tippy-box {
box-sizing: border-box;
max-width: 400px !important;
max-height: 80vh !important;
display: flex !important;
flex-direction: column !important;
}
@media (max-width: 600px) {
.tippy-box {
max-width: calc(100vw - 20px) !important;
max-height: 85vh !important;
}
}
.tippy-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
overflow: hidden !important;
}
.tippy-scroll-area {
flex: 1;
overflow-y: auto !important;
padding: 15px 15px 15px 15px;
padding-right: 20px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.tippy-scroll-area::-webkit-scrollbar { width: 15px; }
.tippy-scroll-area::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.tippy-scroll-area::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; border: 2px solid #f1f1f1; }
.tippy-scroll-area::-webkit-scrollbar-thumb:hover { background: #444; }
.tippy-header {
width: 100%;
height: 0;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 50;
}
.tippy-close-btn {
position: absolute;
top: 5px;
right: 5px;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
padding: 0;
margin: 0;
cursor: pointer;
font-size: 28px;
font-family: Arial, sans-serif;
color: #444;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(2px);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* 🔴 MENSAJE CARGANDO... Estado base: Oculto y transparente */
.loader-container {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0s 0.2s;
transform: translateY(var(--vv-offset-top, 0px));
}
.loader-activo {
visibility: visible;
pointer-events: all;
opacity: 1;
transition: opacity 0.6s ease 0.3s, visibility 0s 0s;
cursor: wait;
}
.loader-container::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.loader-box {
position: relative;
background: #fff;
color: #333;
padding: 10px 20px;
border-radius: 50px;
font-size: 1.1em;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0,0,0,0.05);
display: flex;
align-items: center;
gap: 12px;
}
.spinner {
width: 30px;
height: 30px;
border: 2px solid #f3f3f3;
border-top: 2px solid #0078d4;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body.modo-edicion-tabla #btn-incluir-no-favs-distancia {
display: none !important;
}
.icono-emoji {
height: 1em;
width: 1em;
vertical-align: -0.15em;
display: inline-block;
border: none;
margin: 0 0.05em;
}
/* ==========================================================================
MENÚ INFERIOR COMPACTO (MATERIAL DESIGN 3)
========================================================================== */
.bottom-nav.compact-nav {
position: sticky;
bottom: 0;
left: 0;
width: calc(100% - 8px);
height: 48px;
min-height: 48px;
max-height: 48px;
flex-shrink: 0; /* Impide que el flex lo encoja */
flex-grow: 0; /* Impide que el flex lo agrande */
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: env(safe-area-inset-bottom);
z-index: 9999;
box-shadow: 0 4px 18px 10px rgba(0, 0, 0, 0.05);
border-radius: 10px;
max-width: 727px;
background-color: #ffffff;
padding-top: 2px;
margin: 0 auto;
margin-bottom: 3px;
}
body.modo-android-manual .bottom-nav.compact-nav {
height: 48px;
min-height: 48px;
max-height: 48px;
padding-bottom: env(safe-area-inset-bottom);
}
.compact-nav .nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20%; /* 5 botones = 20% cada uno */
height: 48px;
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
.compact-nav .nav-icon-container {
width: 48px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
transition: background-color 0.2s ease;
margin-bottom: 2px;
}
.compact-nav .nav-item svg {
width: 20px;
height: 20px;
}
/* .compact-nav .nav-item span {
font-weight: 600;
} */
/* ESTADO ACTIVO */
.compact-nav .nav-item.active { color: #000000; font-weight: bold;}
.compact-nav .nav-item.active .nav-icon-container { background-color: #c2e7ff; }
.compact-nav .nav-item.active svg { stroke: #001d35; }
/* ==========================================================================
BUSCADOR DESPLEGABLE INTEGRADO
========================================================================== */
#floating-search-container {
display: flex;
justify-content: center;
width: 100%;
overflow: hidden;
/* Estado visible: */
max-height: 60px;
opacity: 1;
padding-top: 4px;
padding-bottom: 12px;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease, padding 0.3s ease;
}
.floating-search-hidden {
/* Estado oculto: */
max-height: 0 !important;
opacity: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
pointer-events: none;
}
.div-filtro-distancia, .div-filtro-condiciones {
z-index: 9998;
}
/* ==========================================================================
FIX: ADAPTAR PANELES INTERNOS A LOS ACORDEONES
========================================================================== */
/* Cuando un panel entra dentro de un acordeón, le quitamos su ancho fijo
para que no desborde, y su borde/sombra para evitar el "efecto caja doble" */
.accordion-content .div-configuracion-subpanel {
width: 100%;
padding: 0;
}
.accordion-content .div-paneles-controles-sin-pips,
.accordion-content .div-paneles-controles {
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 15px !important; /* Espacio para que respiren los sliders */
}
/* El último elemento no necesita margen abajo */
.accordion-content .div-paneles-controles-sin-pips:last-child,
.accordion-content .div-paneles-controles:last-child {
margin-bottom: 0 !important;
}
/* Le damos un poco más de margen lateral interno al acordeón para que los
"tiradores" de los sliders tengan espacio y no rocen con la línea exterior */
details.config-accordion .accordion-content {
padding-left: 18px !important;
padding-right: 18px !important;
}
/* 🔴🔴 INICIO MAPA */
#map {
height: 100dvh;
width: 100%;
}
.label-large-despegues {
position: relative;
padding: 2px 3px 4px 3px;
border-radius: 5px;
white-space: nowrap;
background-color: #ffffff;
box-shadow: 0 3px 8px rgba(0, 0, 0, 1);
border: 1.8px solid #007AFF;
}
.label-large-despegues::after {
content: '';
position: absolute;
left: 0.1em; /* controla desplazamiento horizontal de la flecha */
bottom: -14px; /* saca la punta fuera del cuadro */
width: 0;
height: 0;
border-left: 13px solid transparent; /* dimensiones: Ancho del triángulo = border-left + border-right. Altura del triángulo = border-top */
border-right: 13px solid transparent;
border-top: 13px solid #007AFF; /* color del borde */
}
.label-large-despeguesmundo {
position: relative;
font-size: 1em;
padding: 2px 3px 4px 3px;
border-radius: 5px;
white-space: nowrap;
background-color: #dadada;
box-shadow: 0 3px 8px rgba(0, 0, 0, 1);
border: 1.8px solid #007AFF;
}
.label-large-despeguesmundo::after {
content: '';
position: absolute;
left: 0.1em; /* controla desplazamiento horizontal de la flecha */
bottom: -14px; /* saca la punta fuera del cuadro */
width: 0;
height: 0;
border-left: 13px solid transparent; /* dimensiones: Ancho del triángulo = border-left + border-right. Altura del triángulo = border-top */
border-right: 13px solid transparent;
border-top: 13px solid #007AFF; /* color del borde */
}
.dot {
width:18px;
height:18px;
border-radius:50%;
display:inline-block;
margin-right:6px;
vertical-align:middle;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
border:1px solid #888
}
.leaflet-marker-icon.custom-div-icon {
margin-left: -12px !important;
margin-top: -33px !important;
}
.info-panel {
background: rgb(255 255 255);
padding-left: 10px;
/* box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); */
z-index: 2000;
width: 284px;
max-width: 500px;
display: none; /* Ocultar por defecto. Si este index.html se está mostrando en el iframe de la página /mapa no quiero que se muestre este infopanel (el enlace a hikefly.es del mapa). Hay un javascript al final(document.addEventListener) que lo oculta si la URL no contiene https://hikefly.es/mapa/ */
transition: all 0.2s ease;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-top: 8px;
}
@media (max-width: 768px) {
.info-panel {
width: 302px;
}
}
.info-panel.retraido {
width: 124px;
height: 23px;
padding-top: 4.4px;
padding-bottom: 2.6px;
cursor: pointer;
line-height: 1.3;
}
@media (max-width: 768px) {
.info-panel.retraido {
padding-top: 2.4px !important;
padding-bottom: 4.6px !important;
}
}
#divOpciones {
overflow: hidden;
}
#divOpciones.oculto {
max-height: 0; /* se retrae hasta 0 */
}
.legend-item {
display: block;
align-items: center;
margin-bottom: 0px;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
}
.legend {
background: white;
padding: 6px 8px 0px 6px;
line-height: 1;
background: rgba(255, 255, 255, 1);
}
.legend-header {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.triangle {
display: inline-block;
width: 0;
height: 0;
margin-left: 6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #333; /* apunta hacia abajo inicialmente */
transition: transform 0.2s;
}
.legend.collapsed .triangle {
transform: rotate(180deg); /* apunta hacia arriba cuando está plegado */
}
.legend-content {
margin-top: 6px;
font-size: medium;
}
.legend.collapsed .legend-content {
display: none;
}
.leaflet-right .leaflet-control {
margin-right: 5px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 5px;
}
.layer-controls {
margin-top: 15px;
}
.layer-control {
margin-bottom: 10px;
}
.leaflet-control-scale-line {
font-size: 14px;
}
h3 {
margin-top: 0;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 30px !important;
height: 30px !important;
}
.leaflet-control-locate {
margin-top: 8px;
}
.leaflet-control-locate a {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
cursor: pointer;
}
.leaflet-left .leaflet-control {
margin-left: 3px;
}
.leaflet-top .leaflet-control {
margin-top: 3px;
}
.leaflet-bar button {
background-color: white !important;
}
.leaflet-control-attribution {
display: block !important;
font-size: 11px;
white-space: normal;
}
.leaflet-container a.leaflet-popup-close-button {
top: 3px;
right: 3px;
font-size: 20px;
font-weight: bold;
}
.info {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #FC6668;
color: #333;
padding: 1em;
z-index: 1000;
font-size: 1.5em;
border-radius: 4px;
font-weight: bold;
display: flex;
}
.choices {
width: 270px;
margin-bottom: 5px;
margin-top: 3px;
}
.choices.is-focused.is-open {
font-size: medium !important;
}
.choices__item {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
.choices__inner {
padding: 0px 0px; /* alto */
padding-bottom: 0px;
min-height: auto; /* evita altura mínima forzada */
font-size: medium;
}
.choices__inner,
.choices__list--dropdown,
.choices__list--dropdown .choices__item {
font-size: medium !important;
}
.choices__list {
font-size: medium;
}
.choices:last-child {
margin-bottom: 5px;
}
.choices__list--dropdown, .choices__list[aria-expanded] {
word-break: auto-phrase;
}
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
max-height: unset;
}
.choices__list--single {
display: inline-block !important;
padding: 0px 0px 0px 3px !important;
width: 88% !important;
}
.leaflet-popup-content {
font-size: 1em;
width: 230px;
line-height: 1;
margin: 5px 10px 5px 10px;
}
/* .leaflet-popup{
bottom: 28px !important;
left: -114px !important;
}
*/ .choices[data-type*=select-one]::after {
right: 0.2em !important;
top:45% !important;
border-width: 10px !important;
}
.choices[data-type*=select-one] .choices__inner {
padding-bottom: 1.5px;
}
.leaflet-popup-content-wrapper.popup-despegues {
background-color: #ffffff !important;
border: 2px solid #007AFF;
}
.leaflet-popup-tip.popup-despegues {
background-color: #007AFF !important;
}
.leaflet-popup.popup-despegues.leaflet-zoom-animated {
bottom: 28px !important;
}
.leaflet-popup-content-wrapper.popup-despeguesmundo {
background-color: #dadada !important;
border: 2px solid #007AFF;
}
.leaflet-popup-tip.popup-despeguesmundo {
background-color: #007AFF !important;
}
.leaflet-popup.popup-despeguesmundo.leaflet-zoom-animated {
bottom: 28px !important;
}
.leaflet-popup-content-wrapper.popup-despegueindividual {
background-color: #eddff5 !important;
border: 2px solid #007AFF;
}
.leaflet-popup-tip.popup-despegueindividual {
background-color: #007AFF !important;
}
.leaflet-popup.popup-despegueindividual.leaflet-zoom-animated {
bottom: 42px !important;
}
.estilobase-custom-cluster-mapadecalor {
/* Define la forma general del contenedor */
background-clip: padding-box;
border-radius: 50%; /* Para hacerlo circular */
text-align: center;
line-height: 1; /* Necesario para centrar el texto verticalmente */
color: white; /* Color del número */
font-weight: bold;
font-size: 12px; /* Ajusta según el tamaño */
}
.estilobase-custom-cluster-mapadecalor div {
/* Estilo para el div interno que contiene el número.
El color de fondo se establecerá dinámicamente en JavaScript */
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.flash-llamativo {
/* Define la sombra de inicio (invisible pero lista) */
box-shadow: 0 0 0px rgba(255, 69, 0, 0);
/* Aplica la animación */
animation: flashPulso 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Asegura que el borde original (legend) no moleste */
border: none !important;
}
/* 2. KEYFRAMES para la animación */
@keyframes flashPulso {
0% {
box-shadow: 0 0 0px rgba(255, 69, 0, 0);
}
30% {
/* Máxima visibilidad: sombra roja/naranja grande y brillante */
box-shadow: 0 0 15px 5px rgba(255, 69, 0, 0.8), /* Sombra exterior */
0 0 3px 1px rgba(255, 255, 255, 0.8); /* Borde interior blanco */
}
100% {
box-shadow: 0 0 0px rgba(255, 69, 0, 0); /* Vuelve a cero */
}
}
.leaflet-text-search-input {
font-size: 1em;
border: none;
width: 140px;
outline: none;
padding-top: 6.5px;
padding-bottom: 6.6px;
padding-left: 10px;
font-weight: bold;
}
.leaflet-text-search-input::placeholder {
color: black;
}
/* CONTENEDOR ROSA DE LOS VIENTOS (3x3 Grid) */
#rosaDeLosVientos {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 80px;
height: 80px;
border-radius: 5px;
margin-left: 22px;
/* overflow: hidden; Esto es clave para que los hijos respeten el radio del padre */
}
/* 2. Estilo del contenedor de cada dirección (LABEL) */
.filtro-orientacion {
display: flex;
justify-content: center;
align-items: center;
/* font-weight: bold; */
cursor: pointer;
position: relative;
border: 1px solid #00000000;
border-radius: 12px;
}
/* 🚀 NUEVA REGLA: Estilo del SPAN interno (El contenido visible que será el botón) */
.filtro-orientacion span {
padding: 0; /* Ya no necesitamos padding aquí, el flex lo centrará */
width: 100%; /* Ocupa todo el ancho disponible */
height: 100%; /* Ocupa todo el alto disponible */
display: flex; /* Centra el texto dentro del span */
justify-content: center;
align-items: center;
/* 🛑 APLICAR BORDES Y RADIOS AQUÍ para la forma del botón 🛑 */
border: 1px solid #ccc; /* Borde del botón */
border-radius: 3px; /* Bordes redondeados */
background-color: white; /* Fondo blanco por defecto */
color: black;
transition: all 0.2s ease; /* Transición suave para el cambio de estado */
box-sizing: border-box; /* Asegura que el padding/border no desborde el 100% */
}
/* 3. Posicionamiento en la Rejilla (Áreas de Grid existentes) */
/* ... (sigue igual) ... */
/* 4. Ocultar el checkbox nativo */
.filtro-orientacion input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* 5. Efecto al pasar el ratón */
.filtro-orientacion:hover span { /* Aplica el hover al span */
background-color: #f0f0f0;
}
/* 🛑 ESTADO ACTIVO (HUNDIDO): Aplica el estilo al SPAN adyacente al INPUT:CHECKED */
.filtro-orientacion input:checked + span {
background-color: #007aff;
color: white;
/* Efecto "hundido" */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
border-color: #007aff; /* Cambiar el color del borde para que coincida con el fondo */
}
.centro-rosa {
visibility: hidden;
display: flex; /* Usa Flexbox */
align-items: center; /* Centrado vertical */
justify-content: center;
grid-area: 2 / 2; /* Su posición en la rejilla */
/* Hereda las propiedades de flex, cursor, etc., del LABEL */
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
position: relative;
/* Estilo del contenido del centro (el 🧭) */
font-size: 1em;
}
/* 🛑 ESTADO ACTIVO DEL CENTRO 🛑 */
/* Cuando el checkbox maestro está marcado, aplica el estilo "hundido" al SPAN interno */
.filtro-maestro input:checked + span {
background-color: #007aff;
color: white;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
border-color: #007aff;
}
/* Estilo para el botón de fijar cuando está activo (hundido) */
#buttonFijar.activo-fijado {
background-color: #f0f0f0; /* Color un poco más oscuro que el fondo normal */
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.6), /* Sombra interior principal (más oscura) */
inset 0 0 10px rgba(0, 0, 0, 0.1); /* Ligero desenfoque para dar más profundidad */
border-color: #555;
transform: translateY(1px);
}
/* Asegura que el texto del icono se mantenga centrado y sin cambios de tamaño */
#buttonFijar #iconoFijar {
display: inline-block;
font-size: 1em;
line-height: 1;
cursor: pointer;
}
#buttonFijar {
font-size: 1.2em;
float: right;
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
}
#buttonCerrar {
font-size: 1.2em;
float: right;
width: 30px;
height: 30px;
padding: 0;
margin-left: 10px;
cursor: pointer;
}
#filtroMaestroOrientacion {
transform-origin: center;
transform: scale(1.2);
margin: 2px;
}
.labelMostrarOpciones {
font-weight: bold;
display: none;
padding-left: 5px;
}
/* Ajuste fino posición del la clase original para que coincida con el punto exacto.Original: -20px */
.leaflet-popup-tip-container {
margin-left: -18px !important;
}
/* 🛑 CONTROL "Desplegable de otros controles" */
/* 1. Estilo del Panel Desplegable (Caja Contenedora) */
.custom-control-panel {
/* Hacemos el contenedor invisible */
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
/* Mantenemos la organización vertical */
display: flex;
flex-direction: column;
align-items: flex-start; /* Alinea a la izquierda (donde están los otros controles) */
/* Posicionamiento */
position: relative;
margin-top: 0px;
}
/* 2. Estilo para el Wrapper (intermediario) */
.custom-control-panel .custom-control-wrapper {
width: auto; /* Dejar que se ajuste al contenido */
margin: 0;
padding: 0;
padding-top: 1px;
border: none;
}
/* 3. Estilo para los CONTROLES DE LEAFLET dentro del panel */
/* Aquí está la clave: Restauramos el 'look' de botón individual */
.custom-control-panel .leaflet-control-locate,
.custom-control-panel .leaflet-control-filelayer,
.custom-control-panel .leaflet-control-geocoder,
.custom-control-panel .leaflet-bar {
/* Restaurar la sombra estándar de Leaflet para que parezcan botones flotantes */
box-shadow: 0 1px 5px rgba(0,0,0,0.65) !important;
/* Margen entre botones (estándar suele ser 10px, pero en grupo puede ser 5px) */
margin-top: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
/* Bordes redondeados estándar */
border-radius: 4px !important;
border: none !important; /* Leaflet usa boxShadow, no border sólido usualmente */
/* Fondo blanco puro */
background-color: #fff !important;
}
.control-orientacion-container {
margin-bottom: 5px;
padding-bottom: 4px;
}
@media (max-width: 768px) {
.control-orientacion-container {
padding-bottom: 8px;
}
}
.control-vuelos-container {
/* Asegura que el padding no aumente el ancho total */
box-sizing: border-box;
display: block; /* La convierte en un elemento de bloque que ocupa toda la línea */
margin-bottom: 5px; /* Opcional: añade un pequeño espacio entre el texto y el slider */
}
.control-ultimovuelo-container {
margin-bottom: 5px;
}
/* Ajuste fino posición del la clase original para que coincida con el punto exacto.Original: -20px */
.leaflet-popup-tip-container {
margin-left: -18px !important;
}
.leaflet-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
.leaflet-control-layers label {
display: block;
font-size: 16px;
}
/* POPUP AJUSTADO AL CONTENIDO (Ubicación GPS) */
.popup-ajustado .leaflet-popup-content-wrapper {
width: auto !important;
min-width: 50px !important;
padding-right: 10px; /* Un poco de margen para que no pegue a la derecha */
}
.popup-ajustado .leaflet-popup-content {
width: auto !important;
margin: 8px 12px !important; /* Espaciado interno equilibrado */
white-space: nowrap !important; /* Evita que el texto salte de línea */
}
/* 🔴🔴 FIN MAPA */