:root {
  --offline-h: 0px; /* altura del banner offline cuando esté visible */
  /* Altura dinámica del banner inferior (instalación) para desplazar la UI */
  --banner-offset: 0px;
  /* Ajuste adicional solo en iOS instalado para despejar la barra del sistema */
  --ios-bottom-bump: 0px;
  /* Superficies ligeramente más oscuras para diferenciar bloques (Guardados) */
  --surface: #eaf1e8;        /* ~5-7% más oscuro que --bg */
  --surface-item: #e4ede1;   /* un paso más oscuro para filas internas */
}
@media (prefers-color-scheme: dark) {
  :root {
  /* Modo oscuro Waze: fondo gris oscuro, texto gris claro y acento azul cielo */
  --bg: #3c444c;
  --text: #bbb8b2;
  --accent: #5487A4;
  --surface: #2f363d;       /* ligeramente más oscuro que el fondo */
  --surface-item: #293038;   /* items un poco más oscuros aún */
  }
}
[data-theme="light"] {
  --bg: #ffffff;
  --text: #1a1a1a;
  --surface: #f3f3f3;       /* card más oscuro que el fondo blanco */
  --surface-item: #ededed;   
}
[data-theme="dark"] {
  --bg: #121212;
  --text: #eaeaea;
  --surface: #0f0f0f;       
  --surface-item: #0c0c0c;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
  /* Evitar scroll del fondo cuando hay modal abierto; permite scroll interno del modal */
  html.modal-open, html.modal-open body { overflow: hidden; }
  /* Desactivar interacciones del bottom sheet y drawer mientras hay modal */
  html.modal-open #bottom-sheet, html.modal-open #more-menu { pointer-events: none; }
  /* Ocultar visualmente el drawer mientras hay un modal abierto para evitar bugs de Chrome con selects nativos */
  html.modal-open #more-menu { transform: translateX(100%) !important; opacity: 0 !important; }
  /* Evitar gestos que disparen colapso del panel mientras hay modal */
  html.modal-open #bottom-sheet, html.modal-open #bottom-sheet .sheet-content { touch-action: none !important; }
  html.modal-open #bottom-sheet .sheet-content { overflow: hidden !important; }
  /* Si el menú inferior estaba abierto, fuerzalo oculto cuando haya modal */
  html.modal-open #bottom-sheet.menu-open + #more-menu { transform: translateY(100%) !important; opacity: 0 !important; pointer-events: none !important; }
  /* Evitar que el menú inferior reciba foco/active mientras se cierra el banner */
  html.banner-closing #more-menu, html.banner-closing #more-menu *, html.banner-closing #bottom-sheet, html.banner-closing #bottom-sheet * {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }
  html.banner-closing #more-menu a:focus, html.banner-closing #more-menu button:focus { outline: none !important; }
  html.banner-closing #more-menu a:active, html.banner-closing #more-menu button:active { outline: none !important; }
/* Remove blue/gray tap highlight and accidental text selection on interactive list items/buttons */
.history-item,
.history-item button,
.history-coords-abs,
.history-coords-abs button,
#favorites-header,
#clear-history {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
/* Clear history button: hide when panel is collapsed or when there are no items */
#clear-history {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 200ms ease;
}
[data-state="collapsed"] #clear-history {
  opacity: 0;
  pointer-events: none;
}
#clear-history.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Ensure interactive text is >=16px to avoid iOS auto-zoom on tap (only for history item buttons) */
.history-actions button {
  font-size: 1rem !important;
}
/* Top App Bar */
header {
  position: fixed;
  top: var(--hdr-top, 0px);
  left: 0;
  right: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--bg);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
html[data-theme="dark"] header { border-bottom-color: rgba(255,255,255,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
  header .app-title { display:flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; line-height: 1; white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; }
  /* Logo a la izquierda del título, mismo alto visual que el texto */
  header .app-title .app-logo { height: 25px; width: auto; display: inline-block; flex: 0 0 auto; vertical-align: middle; image-rendering: -webkit-optimize-contrast; aspect-ratio: 90 / 64; }
  /* Solo el nombre "Mapflip" debe parecer clicable y no seleccionable */
  #app-title-name { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -ms-user-select: none; }
  header .app-title .name { font-weight: 800; overflow: visible; text-overflow: clip; flex: 0 0 auto; }
  /* El subtítulo puede adaptarse y acortarse si falta espacio */
  header .app-title .sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header .app-title .sub { font-weight: 400; opacity: 0.85; }
  header .actions { display:flex; align-items:center; gap: 0px; flex: 0 0 auto; }
  /* Reducir sólo el espacio entre el botón de tema y el menú, sin tocar tamaños */
  #theme-toggle + #menu-button { margin-left: -10px; }
  header .icon-btn { width: 56px; height: 56px; display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; background: transparent; border: none; color: var(--text); cursor: pointer; -webkit-appearance: none; appearance: none; }
header .icon-btn:hover { background: rgba(0,0,0,0.06); }
  html[data-theme="dark"] header .icon-btn:hover { background: transparent; }
  /* Sin efecto visual de presionado: solo cambia el icono */
  header .icon-btn:hover { background: transparent; }
  header .icon-btn:active { background: transparent; box-shadow: none; transform: none; }
  header .icon { width: 48px; height: 48px; display:block; shape-rendering: geometricPrecision; }
/* Evitar resaltado/azul en iOS al tocar los iconos */
header .icon-btn,
header .icon-btn:focus,
header .icon-btn:active {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
  user-select: none;
}
header .app-title .divider { display:inline-block; width:1px; height: 14px; background: currentColor; opacity: 0.35; margin: 0 6px; transform: translateY(1px); }
/* iPhone 14 Pro Max (~430px) y similares: reducir subtítulo para priorizar nombre */
@media (max-width: 480px) {
  header .app-title .sub { font-size: 0.9rem; }
}
@media (max-width: 430px) {
  header .app-title .sub { font-size: 0.86rem; }
}
@media (max-width: 380px) {
  header { padding: 0 8px; }
  header .app-title { gap: 6px; }
  header .app-title .divider,
  header .app-title .sub { display: none; }
}
  /* Sin degradado superior: el App Bar ya marca separación */
  #map-canvas::before, #map-canvas::after { content: none !important; display: none !important; }
  /* Barra de carga global (fina bajo la Top Bar) */
  #global-loading-bar {
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--hdr-top, 0px) + var(--hdr-h, 56px) + var(--offline-h, 0px));
    height: 3px;
    z-index: 1200; /* por encima del header (600) */
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms linear;
  }
  #global-loading-bar.active { opacity: 1; }
  #global-loading-bar .bar {
    position: absolute; left: 0; top: 0; height: 100%; width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 240ms ease;
    background: var(--accent, #5487A4);
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
  }
  html[data-theme="dark"] #global-loading-bar .bar {
    box-shadow: 0 0 6px rgba(0,0,0,0.45);
  }
  /* Mantener el blur también en pantallas táctiles/pequeñas */
  /* Asegurar controles de Leaflet por encima del overlay */
  #map-canvas .leaflet-control-container,
  #map-canvas .leaflet-top,
  #map-canvas .leaflet-bottom,
  #map-canvas .leaflet-control { position: relative; z-index: 2000 !important; }
  /* Zoom específico aún más arriba y con eventos habilitados */
  #map-canvas .leaflet-control-zoom { z-index: 3000 !important; pointer-events: auto; }
  #map-canvas .leaflet-control-zoom a { pointer-events: auto; }

  /* === Control de zoom personalizado (slider vertical) === */
  #app-zoom-slider {
    position: fixed; /* fuera del canvas; por encima del mapa pero debajo del bottom sheet */
    right: 12px;
    /* top se calcula por JS para centrar en el área visible del mapa */
    width: 36px;
    height: 200px; /* alto total del contenedor (track ~160px) */
    z-index: 4; /* por encima del mapa (z=0) pero DETRÁS del bottom sheet (z=5) */
    display: none; /* visible sólo cuando corresponda */
  /* permitir gestos verticales, no interferir con pan-x del mapa */
  touch-action: pan-y;
  transition: opacity 160ms linear;
  }
  #app-zoom-slider .app-zs-inner {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 160px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.14), rgba(0,0,0,0.12));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.2);
  }
  html[data-theme="dark"] #app-zoom-slider .app-zs-inner {
    background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.16));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.35);
  }
  #app-zoom-slider .app-zs-thumb {
    position: absolute;
    left: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.10);
  }
  html[data-theme="dark"] #app-zoom-slider .app-zs-thumb {
    background: #101114;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
  }
  /* Reposicionar controles anclados arriba justo debajo del header visible */
  #map-canvas .leaflet-top { top: calc(var(--hdr-top, 0px) + var(--hdr-h, 36px) + var(--offline-h, 0px)) !important; }
  
  /* Smooth transition for CartoDB high-res tiles fade-in */
  #map-canvas .leaflet-layer.carto-tiles {
    transition: opacity 1s ease-in-out;
  }
  
  /* Oscurecer ligeramente los tiles en modo oscuro */
  html[data-theme="dark"] #map-canvas .leaflet-tile-pane {
    /* Invertir para fondo oscuro, mantener brillo y colores vivos - versión más clara */
    filter: invert(0.9) hue-rotate(180deg) saturate(1.15) contrast(0.95) brightness(1.15);
  }
  /* Ensure Leaflet popup pane sits on top of overlays so the small "Arrastra para ajustar" bubble is visible */
  #map-canvas .leaflet-pane.leaflet-popup-pane { z-index: 2147483600 !important; }
  /* Minimal style for the move pin popup to look compact */
  .leaflet-popup.move-pin-bubble .leaflet-popup-content-wrapper {
    padding: 6px 10px 6px 28px; border-radius: 8px; background: rgba(32,32,32,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.15);
  }
  .leaflet-popup.move-pin-bubble .leaflet-popup-content { margin: 4px 6px; font-size: 12px; }
  .leaflet-popup.move-pin-bubble .leaflet-popup-tip { background: rgba(32,32,32,0.92); width: 16px; height: 16px; }
  .leaflet-popup.move-pin-bubble a.leaflet-popup-close-button {
    top: 2px; left: 4px; right: auto;
    width: 22px; height: 22px; line-height: 22px; font-size: 16px;
    border-radius: 6px; background: transparent;
  }
  /* Theme-aware overrides so the small popup follows light/dark mode */
  html[data-theme="light"] .leaflet-popup.move-pin-bubble .leaflet-popup-content-wrapper {
    background: var(--surface);
    color: var(--text);
    border: 1px solid rgba(0,0,0,0.12);
  }
  html[data-theme="dark"] .leaflet-popup.move-pin-bubble .leaflet-popup-content-wrapper {
    background: #1e1e1e;
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.16);
  }
  html[data-theme="light"] .leaflet-popup.move-pin-bubble .leaflet-popup-tip { background: var(--surface); }
  html[data-theme="dark"] .leaflet-popup.move-pin-bubble .leaflet-popup-tip { background: #1e1e1e; }
@media (max-width: 540px) {
  /* Altura controlada por --overlay-h; no sobrescribir manualmente */
}
  .theme-toggle { background: transparent; border: none; color: var(--text); font-size: 1rem; cursor: pointer; }
  /* Language picker bottom sheet */
  #lang-picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.28); z-index: 9998; display: none; }
  #lang-picker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--bg); border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -8px 24px rgba(0,0,0,0.25); transform: translateY(100%); transition: transform 240ms ease; max-height: 72vh; display: flex; flex-direction: column; }
  #lang-picker.open { transform: translateY(0); }
  #lang-picker-backdrop.open { display: block; }
  #lang-header { padding: 14px 16px 8px; display:flex; align-items:center; justify-content: space-between; }
  #lang-title { font-weight: 800; font-size: 1.1rem; }
  #lang-close { appearance: none; border: none; background: rgba(0,0,0,0.06); color: var(--text); width: 36px; height: 36px; border-radius: 999px; cursor: pointer; }
  #lang-search { margin: 8px 16px 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--surface); color: var(--text); font-size: 16px; }
  #lang-list { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 6px 8px; }
  .lang-item { display:flex; align-items:center; gap: 10px; padding: 10px 10px; border-radius: 10px; cursor: pointer; }
  .lang-item:hover { background: rgba(0,0,0,0.06); }
  html[data-theme="dark"] .lang-item:hover { background: rgba(255,255,255,0.06); }
  .lang-item input[type="radio"] { width: 18px; height: 18px; }
  .lang-label { font-size: 1rem; }
#offline-banner {
  background-color: var(--accent);
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
}
/* Banner informativo de mantenimiento (se muestra por feature flag) */
#maintenance-banner {
  background-color: #ff6b6b; /* rojo suave por defecto */
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
}
#offline-banner.hidden {
  /* default hidden; JS will set inline-block when ready */
  display: none;
}
#maintenance-banner.hidden {
  display: none;
}
/* Hide install banner when dismissed (use !important to override inline display:flex) */
#install-banner.hidden {
  display: none !important;
}
  /* Animación del banner de instalación: entra/sale deslizándose desde abajo */
  #install-banner { 
    transform: translateY(100%); 
    transition: transform 280ms ease, visibility 0s 0s; 
    will-change: transform; 
    pointer-events: none;
    visibility: hidden;
  }
  #install-banner.visible { 
    transform: translateY(0); 
    pointer-events: auto;
    visibility: visible;
  }
  #install-banner.hiding { 
    transform: translateY(100%);
    transition: transform 280ms ease, visibility 0s 280ms;
    visibility: hidden;
  }
main {
  max-width: 640px;
  margin: 0 auto;
  /* El main vive dentro del bottom sheet: no necesita compensar el header fijo */
  padding: 0 1rem 2rem; /* sin padding superior para evitar espacio en blanco */
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* reducir un poco más la separación vertical */
}
label {
  font-weight: 600;
}
/* Dar un pequeño respiro entre la frase y el campo de texto */
#converter label {
  display: block;
  margin-bottom: 0.4rem;
  text-align: center;
}
input[type='text'],
select {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: var(--bg);
  color: var(--text);
}
  /* (Removed) input-with-paste; paste button is outside the input */
button {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--accent);
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
  /* convert button removed; spinner rules removed */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Shake animation for validation errors */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}
.shake {
  animation: shake 0.4s linear;
}
#result.hidden {
  display: none;
}
#output {
  width: calc(100% - 5rem);
  margin-right: 0.5rem;
}
#result {
  position: relative;
}
/* El botón de abrir Waze flota sobre el mapa. Se posiciona algo más abajo y se hace más grande. */
#open-waze {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 1.2rem 3rem;
  font-size: 1.3rem;
}
#open-waze:disabled {
  background-color: #bbb8b2;
  color: #fff;
}
/* Animación de respiración para el botón activado */
@keyframes breathing {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
#open-waze.active {
  animation: breathing 2s ease-in-out infinite;
}
/* Ajustar la imagen del mapa para que se centre y no se corte */

/* Contenedor de la dirección */
  .location-text {
  font-weight: 600;
  font-size: 1.1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.12rem; /* aún menos espacio antes del label "Convierte…" */
  color: var(--text);
  text-align: left;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
  /* Mantener márgenes constantes aunque esté vacío para evitar saltos */
  .location-text:empty { margin-top: 0.25rem; margin-bottom: 0.12rem; padding: 0 !important; }
/* Burbuja + animaciones tipo notificación */
.location-text.hidden { display: none; }
  .location-text.bubble {
  background: var(--surface);
  border: 0 solid rgba(0,0,0,0.18); /* borde más notorio tipo popup; ancho visible al mostrar */
    border-radius: 10px;
  padding: 0; /* padding interno en .bubble-inner para imitar popup Leaflet */
  box-shadow: 0 2px 12px rgba(0,0,0,0.20);
  will-change: transform, opacity;
  position: relative; /* para situar el botón de cierre */
}
.location-text.bubble:not(.show) { /* Evitar saltos: ocupa un mínimo estable sin mostrar contenido */
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  height: 0;
  overflow: hidden;
}
  /* Sin min-height para no añadir espacio en blanco cuando no hay burbuja */
  #location-text { min-height: 0; }
  .location-text.bubble .bubble-inner { overflow: hidden; visibility: hidden; padding: 10px 15px; }
  @keyframes app-bubble-in {
    0% { opacity: 0; transform: translateY(-16px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .location-text.bubble.entering { opacity: 0; transform: translateY(-10px); }
  .location-text.bubble.show { padding-top: 8px; padding-bottom: 8px; border-width: 1px; opacity: 1; transform: translateY(0); animation: app-bubble-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both; margin-top: 6px; margin-bottom: 13px; }
  /* Cola (punta) hacia el pin: doble triángulo para simular borde + relleno */
  .location-text.bubble.show::before,
  .location-text.bubble.show::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    pointer-events: none;
  }
  /* Triángulo de borde (debajo) */
  .location-text.bubble.show::before {
    bottom: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid rgba(0,0,0,0.18);
    z-index: 0;
  }
  /* Triángulo de relleno (encima) */
  .location-text.bubble.show::after {
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--surface);
    z-index: 1;
  }
  /* Evitar que la animación de entrada se reprograme después de un drag parcial */
  .location-text.bubble.show.anim-done { animation: none !important; }
  .location-text.bubble.show .bubble-inner { visibility: visible; }
/* Overlay: mantener el translateX(-50%) durante la animación y el estado visible */
#map-bubble.location-text.bubble.entering { transform: translate(-50%, -10px); }
  #map-bubble.location-text.bubble.show { transform: translate(-50%, 0); animation: app-bubble-in-overlay 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  #map-bubble.location-text.bubble.show.anim-done { animation: none !important; }
@keyframes app-bubble-in-overlay {
  0% { opacity: 0; transform: translate(-50%, -16px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
  /* Al arrastrar, apagar animaciones para que el transform inline responda al dedo */
  .location-text.bubble.dragging { animation: none !important; }
  #map-bubble.location-text.bubble.dragging { animation: none !important; }
.location-text.bubble.hide {
  padding-top: 0;
  padding-bottom: 0;
  transition: padding 2600ms linear, border-width 2600ms linear;
}
.location-text.bubble.hide .bubble-inner { max-height: 0; transition: max-height 2600ms linear; }
/* En modo oscuro, aclarar la burbuja para que se perciba como tarjeta */
  html[data-theme="dark"] .location-text.bubble {
  /* Opaque card-style surface in dark mode (no transparency) */
  background: #1e1e1e;
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .location-text.bubble.show { border-color: rgba(255,255,255,0.16); }
  /* Ajustar cola en modo oscuro para que combine con fondo/borde */
  html[data-theme="dark"] .location-text.bubble.show::before { border-top-color: rgba(255,255,255,0.16); }
  html[data-theme="dark"] .location-text.bubble.show::after { border-top-color: #1e1e1e; }
/* === Leaflet popup: modo oscuro para burbuja del pin === */
html[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: #1e1e1e;
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.16);
}
html[data-theme="dark"] .leaflet-popup-tip {
  background: #1e1e1e;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .leaflet-popup-content {
  color: var(--text);
}
html[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button {
  color: #bbb;
  background: transparent;
}
  /* ===== Banner superior (overlay fijo bajo la barra superior) ===== */
#map-bubble {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--hdr-top, 0px) + var(--hdr-h, 56px) + var(--offline-h, 0px) + 8px);
  width: calc(100% - 24px);
  max-width: 540px; /* ~15% menos para reforzar escala más compacta */
  z-index: 2147483000; /* por encima del mapa y del panel */
  pointer-events: auto;
  touch-action: none; /* permitir gesto de deslizar sin scroll del documento */
}
/* El overlay no necesita márgenes verticales externos; se controla con 'top' */
#map-bubble.location-text { margin: 0; }
#map-bubble.location-text.bubble.show { margin: 0; }
  /* Mostrar coords arriba en pequeño y el nombre debajo en negrita */
  .location-text { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .location-text .coords {
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
    /* Allow selecting coordinates to copy */
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -webkit-touch-callout: default;
    cursor: text;
  }
  /* Mejor contraste del texto de coordenadas en modo oscuro */
  html[data-theme="dark"] .location-text .coords { color: rgba(255,255,255,0.72); }
  .location-text .header-row { display:flex; align-items:center; justify-content: space-between; gap: 6px; width: 100%; margin-top: 4px; }
  .location-text .coords-group { display: flex; align-items: center; gap: 4px; }
  .location-text .place-name { font-size: 0.9rem; font-weight: 700; color: var(--text); text-align: center; }
  /* Banner superior: título estilo popup (alineado a la izquierda y un poco más ligero) */
  .location-text.bubble .place-name { font-size: 0.88rem; font-weight: 600; text-align: left; }
  /* Botón estilo "chip" para el banner superior (overlay fijo) */
  .location-text .share-btn { background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 14px; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; display:inline-flex; align-items:center; gap:6px; }
  /* Acción minimalista (solo texto azul) dentro de popups de Leaflet sobre el pin */
  .leaflet-popup-content .share-btn { background: transparent; border: none; color: var(--accent); padding: 0; border-radius: 0; font-size: 0.95rem; cursor: pointer; display: inline; }
  .leaflet-popup-content .share-btn:hover { text-decoration: underline; }
  /* Banner superior: botón compartir como enlace (consistente con popup del pin) */
  .location-text.bubble .share-btn { background: transparent; border: none; color: var(--accent); padding: 0; border-radius: 0; font-size: 0.78rem; cursor: pointer; display: inline; }
  .location-text.bubble .share-btn:hover { text-decoration: underline; }
  /* Botón de copiar coordenadas - solo icono */
  .location-text .copy-coords-btn {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0 6px !important;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: inherit;
    vertical-align: middle;
    line-height: 0;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    outline: none;
    box-shadow: none !important;
    flex-shrink: 0;
  }
  .location-text .copy-coords-btn:hover {
    opacity: 0.9;
  }
  .location-text .copy-coords-btn:focus {
    opacity: 0.9;
    outline: none;
  }
  .location-text .copy-coords-btn svg {
    display: block;
    pointer-events: none;
    width: 14px;
    height: 14px;
  }
  .location-text .bubble-close {
    position: absolute;
    top: -10px;
    left: -10px;
  width: 18px;
  height: 18px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid rgba(0,0,0,0.08);
    color: #888;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    cursor: pointer;
    z-index: 2;
  }
  /* Banner superior: botón cerrar un poco más arriba y menos a la izquierda */
  .location-text.bubble .bubble-close { top: 2px; left: -2px; right: auto; width: 20px; height: 20px; border-radius: 4px; background: transparent; border: none; color: #666; box-shadow: none; }
  /* Popup de Leaflet: botón cerrar alineado con overlay */
  .leaflet-container a.leaflet-popup-close-button { top: 2px; left: -2px; right: auto; }
  .location-text .bubble-close .icon-x { width: 12px; height: 12px; display:block; }
  .location-text .bubble-close:hover, .location-text .bubble-close:focus {
    color: #666;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    outline: none;
  }
  .location-text .share-btn .share-icon { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; }
  /* Ocultar icono en el popup (solo letras) si quedara alguno */
  .leaflet-popup-content .share-btn .share-icon { display: none; }
/* Placeholder de carga con animación de brillo */
.loading-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(-90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
}

/* Overlay de carga que se coloca encima del placeholder mientras se carga el mapa real */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
  z-index: 3;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

#history {
  margin-top: 0.25rem; /* subir Recientes un poco más */
}
#history h2 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem; /* compactar ligeramente el título */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Evitar selección de texto también en el encabezado de Guardados */
#favorites-header h2 {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
  #history-list,
  #favorites-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
  #history-list li,
  #favorites-list li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 0;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  position: relative;
}
.history-info {
  display: flex;
  flex-wrap: wrap; /* permitir que coords bajen de línea si el nombre es largo */
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0; /* permitir truncamiento si fuera necesario */
  flex: 1 1 auto; /* ocupar el espacio restante a la derecha del icono */
}
.history-info small {
  font-size: 0.85rem;
  color: #666;
  flex: 1 0 100%; /* descripción secundaria siempre en la siguiente línea */
}
  .history-icon {
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex: 0 0 32px;
  margin-top: 2px;
  user-select: none;
  font-size: 1.2rem;
}
  .history-info strong { font-size: 1.05rem; line-height: 1.2; color: var(--text); order: 1; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .history-coords-wrap { order: 2; }
  .history-info small { order: 3; }
  /* En Guardados, mostrar coords solo al expandir como tercera línea (debajo del segundo nombre) */
  #favorites-list .history-info small { order: 2; }
  #favorites-list .history-item.expanded .history-info .history-coords-wrap { display: block; order: 3; }

/* Coordenadas: por defecto absolutas arriba a la derecha, y si el nombre es muy largo, envueltas debajo */
.history-coords-abs {
  position: absolute;
  top: 12px;
  right: 0;
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
  display: none;
}
  /* Variante botón para editar en Guardados */
.history-coords-abs.edit-abs {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 4px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.history-coords-abs.edit-abs:hover { color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
.history-coords-abs.edit-abs svg { display: block; }
/* Mostrar coords absolutas cuando está expandido y NO requiere wrap */
.history-item.expanded:not(.coords-wrap) .history-coords-abs { display: block; }
/* Variante envuelta dentro del bloque de info (aparece debajo del título) */
.history-coords-wrap {
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
  display: none;
  flex: 1 0 100%;
}
.history-item.coords-wrap.expanded .history-coords-wrap { display: block; }

/* Área expandible con acciones */
  .history-item { list-style: none; }
  .history-extra {
  width: 100%;
  padding-left: 40px; /* icon 28 + gap 12 */
  margin-top: 6px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 180ms ease;
  flex-basis: 100%;
  order: 3;
}
  .history-item.expanded .history-extra { max-height: 800px; }
.history-actions {
  display: flex;
  gap: clamp(4px, 1.2vw, 8px);
  flex-wrap: nowrap; /* mantener una sola línea */
  justify-content: space-between;
  overflow-x: auto; /* si no cabe, permitir scroll horizontal en lugar de desbordar */
  -webkit-overflow-scrolling: touch;
  /* ocultar barra de desplazamiento visual */
  scrollbar-width: none; /* Firefox */
  touch-action: pan-x pan-y; /* permitir pan horizontal en la fila y vertical hacia el padre */
  margin-top: 8px;
}
.history-actions::-webkit-scrollbar { display: none; height: 0; background: transparent; }
  .history-actions button {
  background: none;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  padding: clamp(3px, 0.9vw, 6px) clamp(8px, 2.2vw, 12px);
  font-size: clamp(0.78rem, 2.6vw, 0.9rem); /* reducir en pantallas angostas para evitar cortes */
  color: var(--text);
  cursor: pointer;
  flex: 1 1 0;
  min-width: max-content; /* no más pequeño que su texto */
  white-space: nowrap; /* no partir el texto en dos líneas */
  overflow: hidden; /* evitar desbordes visuales */
}
  .history-actions button.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
  /* Favoritos: que las acciones usen todo el ancho y comiencen justo debajo del icono de menú */
  #favorites-list .history-extra { padding-left: 0; }
#favorites-list .history-actions { justify-content: flex-start; }

/* Estilo para las coordenadas dentro del título de ubicación */
.coords {
  color: #666;
  font-weight: normal;
}
  /* Ya no se muestran botones por ítem en Recientes */
/* Toasts */
#toast-container {
  position: fixed;
  /* Ajustar la posición del toast para que no se oculte tras el banner de instalación */
  bottom: calc(4rem + var(--banner-offset, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
}
.toast {
  background-color: var(--accent);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Card style for Favorites list */
.card-list {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
  padding: 0 12px;
  margin-top: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden; /* recortar bordes redondeados */
}
.card-list #favorites-list li {
  background: var(--surface-item);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.card-list #favorites-list li:last-child {
  border-bottom: none;
}
/* Estabilizar layout: usar grid para evitar que el título salte debajo del icono al expandir */
#history-list li,
#favorites-list li {
  display: grid;
  grid-template-columns: 40px 1fr; /* icono + contenido */
  column-gap: 12px;
  align-items: start;
}
/* Icono fijo en la primera columna */
.history-icon { grid-column: 1; grid-row: 1; flex: none; }
/* Bloque de info siempre en la segunda columna */
.history-info { grid-column: 2 / -1; grid-row: 1; }
/* Acciones debajo del contenido por defecto */
.history-extra { grid-column: 2 / -1; grid-row: 2; padding-left: 0; }
/* En guardados, que las acciones empiecen desde abajo del icono (toda la anchura) */
#favorites-list .history-extra { grid-column: 1 / -1; }
  /* ===== Bottom menu drawer (OVERLAYS the bottom panel) ===== */
:root { --drawer-width: 320px; }
.more-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-width);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid rgba(0,0,0,0.06);
  box-shadow: -18px 0 60px rgba(0,0,0,0.35);
  padding: calc(24px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom) + var(--ios-bottom-bump, 0px));
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  z-index: 2147483647;
}
.more-menu.pe-none, .more-menu.pe-none * { pointer-events: none !important; }
html[data-theme="dark"] .more-menu { background: rgba(18,18,18,0.86); border-left-color: rgba(255,255,255,0.12); box-shadow: -18px 0 60px rgba(0,0,0,0.6); }
html.drawer-open #more-menu { transform: translateX(0); opacity: 1; pointer-events: auto; }
  html.drawer-open header,
  html.drawer-open #map-canvas,
  html.drawer-open #app-zoom-slider,
  html.drawer-open #geo-fallback,
  html.drawer-open #maintenance-banner,
  html.drawer-open #offline-banner,
  html.drawer-open #bottom-sheet,
  html.drawer-open #install-banner { transform: translateX(calc(-1 * var(--drawer-width))); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
html.drawer-open #open-waze-floating { display: none !important; }
/* Mientras el menú esté abierto, desactivar interacciones del mapa y controles */
html.drawer-open #map-canvas { pointer-events: none !important; touch-action: none !important; }
html.drawer-open #app-zoom-slider { pointer-events: none !important; }
html.drawer-open #app-recenter-btn { pointer-events: none !important; }
.more-menu h3 { font-size: 0.95rem; font-weight: 700; margin: 4px 0 10px; opacity: 0.85; text-align: center; }
  .more-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .more-menu .menu-footer { margin-top: auto; padding-top: 8px; text-align: center; opacity: 0.7; font-size: 0.92rem; }
/* iOS-like grouped action buttons */
.more-menu li > a, .more-menu li > button {
  display: flex;              /* consistent vertical centering */
  align-items: center;        /* center text vertically */
  justify-content: flex-start;
  width: 100%;
  height: 48px;               /* fixed equal height */
  box-sizing: border-box;     /* include border in fixed height */
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: 0 14px;            /* vertical padding inside fixed height */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;             /* avoid line-height affecting height */
  white-space: nowrap;        /* keep on one line */
  overflow: hidden;           /* hide overflow */
  text-overflow: ellipsis;    /* truncate long labels */
  -webkit-appearance: none;   /* normalize buttons */
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* prevent blue tap highlight */
  outline: none;              /* remove default focus outline */
}
.more-menu li > a:focus, .more-menu li > button:focus { outline: none; }
html[data-theme="dark"] .more-menu li > a, html[data-theme="dark"] .more-menu li > button {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.more-menu li > a:hover, .more-menu li > button:hover { filter: brightness(1.02); }
.more-menu li > a:active, .more-menu li > button:active {
  transform: translateY(1px);
  background: inherit; /* avoid darker flash on iOS */
}
.more-menu li > a, .more-menu li > button { text-decoration: none; }
/* Subtle header area with inline close button */
  .more-menu .menu-header { display:flex; align-items:center; justify-content: center; gap:8px; margin: 0 4px 8px; position: relative; }
  .more-menu .menu-close { position: absolute; right: 10px; top: -28px; background: transparent; border: none; color: var(--text); width: 48px; height: 48px; border-radius: 12px; display:inline-flex; align-items:center; justify-content:center; cursor: pointer; }
.more-menu .menu-close:hover { background: rgba(0,0,0,0.06); }
html[data-theme="dark"] .more-menu .menu-close:hover { background: rgba(255,255,255,0.12); }
  /* Sticky toggle bar to reveal the menu when content is short */
  .more-toggle { display: none !important; }
  /* Dimmed backdrop behind the iOS-like sheet */
  .menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.32); opacity: 0; transition: opacity 200ms ease; pointer-events: none; z-index: 2147483646; }
  html.drawer-open #menu-backdrop { opacity: 1; pointer-events: auto; }
  /* Ensure backdrop sits below the menu which has 2147483647 when open */
  /* Do NOT lift the bottom sheet when the menu is open (overlay mode) */
  /* Hide the floating Navigate button while the menu is open (overlay above all) */
  #bottom-sheet.menu-open ~ #open-waze-floating { display: none !important; }
  /* ===== Settings modal ===== */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; z-index: 2147483647; }
  .modal-backdrop.open { display: flex; }
  .settings-modal { position: relative; width: min(92vw, 520px); background: var(--bg); color: var(--text); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); border: 1px solid rgba(0,0,0,0.12); max-height: min(86vh, 760px); display: flex; flex-direction: column; overflow: hidden; }
  .settings-modal header { position: static; display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 14px; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .settings-modal header h2 { font-size: 1.08rem; margin: 0; font-weight: 700; }
  /* Close button inline, large X next to title */
  .settings-modal header button {
    position: static;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text);
    line-height: 1;
    border-radius: 12px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 140ms ease, transform 80ms ease;
  }
  /* Dark theme: keep icon visible */
  html[data-theme="dark"] .settings-modal header button { color: #fff; }
  /* Ensure SVG inherits the color properly */
  .settings-modal header button, .settings-modal header button * { color: inherit; }
  .settings-modal header button svg, .settings-modal header button path { stroke: currentColor; }
  .settings-modal header button .icon-x { width: 28px; height: 28px; display:block; }
  .settings-modal header button path { stroke-width: 2.6; }
  .settings-modal header button:hover { background: rgba(0,0,0,0.06); }
  html[data-theme="dark"] .settings-modal header button:hover { background: rgba(255,255,255,0.12); }
  .settings-modal header button:active { transform: scale(0.98); }
  .settings-modal header button:focus { outline: none; }
  .settings-modal header button:focus-visible { box-shadow: 0 0 0 3px rgba(84,135,164,0.35); border-radius: 10px; }
  .settings-modal .content { padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow: visible; max-height: none; }
  .cu-list { display: flex; flex-direction: column; gap: 12px; }
  .cu-group { background: var(--surface); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden; }
  .cu-row { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; min-height: 44px; }
  .cu-row + .cu-row { border-top: 0.5px solid rgba(0,0,0,0.08); }
  .cu-label { font-size: 0.98rem; }
  .cu-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .cu-segmented { display: inline-flex; align-items: center; gap: 0; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 2px; }
  .cu-segmented input { display: none; }
  .cu-segmented label { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; min-width: 64px; border-radius: 8px; font-size: 0.95rem; color: var(--accent); cursor: pointer; user-select: none; }
  .cu-segmented input:checked + label { background: var(--accent); color: #fff; }
  .cu-status { font-size: 0.95rem; opacity: 0.9; }
  /* Show permission status under each permission title */
  .settings-modal .cu-group[aria-label="Permisos"] .cu-row { align-items: flex-start; }
  .settings-modal .cu-group[aria-label="Permisos"] .cu-label { display: flex; flex-direction: column; gap: 4px; }
  .settings-modal .cu-group[aria-label="Permisos"] .cu-label .cu-status { font-size: 0.9rem; opacity: 0.8; }
  .cu-btn { background: none; border: 1px solid rgba(0,0,0,0.15); color: var(--accent); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
  .cu-btn.destructive { color: #d8232a; border-color: rgba(216,35,42,0.35); }
  .settings-modal .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .settings-modal .options { display: flex; gap: 10px; align-items: center; }
  .settings-modal .danger { background: none; border: 1px solid rgba(0,0,0,0.15); color: var(--text); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
  .settings-modal .danger:hover { border-color: var(--accent); color: var(--accent); }
  /* Sections for a more scalable settings UI */
  .settings-modal .section-title { font-weight: 700; font-size: 0.95rem; opacity: 0.9; margin-top: 2px; }
  .settings-modal .section { border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
  .settings-modal .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .settings-modal .item .meta { display: flex; flex-direction: column; gap: 2px; }
  .settings-modal .item .meta .title { font-weight: 600; }
  .settings-modal .item .meta .desc { font-size: 0.9rem; opacity: 0.8; }
  .settings-modal .item .actions { display: flex; gap: 8px; align-items: center; }
  .settings-modal .status { font-size: 0.9rem; opacity: 0.9; }
  .settings-modal .status.ok { color: #1b9e3f; opacity: 1; }
  .settings-modal .status.warn { color: #c68500; opacity: 1; }
  .settings-modal .status.err { color: #c44747; opacity: 1; }
  /* Hide the floating navigate button while any modal is open */
  html.modal-open #open-waze-floating { display: none !important; }
  html.modal-open #app-nav-menu { display: none !important; }
    /* ===== Bottom Sheet (tipo Google Maps) ===== */
  .bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--banner-offset, 0px);
  /* Altura por defecto (semi‑expandido). En modo 1 NO restamos banner para no achicar el panel */
  height: 60vh;
  background: var(--bg);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  z-index: 5;
  /* Suavizar y acortar la animación para evitar sensación de rebote fuerte */
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1), bottom 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height, bottom;
  overflow: hidden;
}
  /* Evitar animar el bottom cuando cambia el banner; solo animar height para que no haga rebote */
  .bottom-sheet.no-bottom-trans { transition: height 250ms ease !important; }
  /* Pequeño rebote al tocar encabezados cuando está colapsado */
  .bottom-sheet.bounce { animation: app-sheet-bounce 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes app-sheet-bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-14px); }
    45% { transform: translateY(0); }
    70% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }
.sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 4px;
  cursor: grab;
  touch-action: none;
  position: relative; /* allow larger invisible hit area */
}
/* Larger invisible hit area without changing looks */
.sheet-handle::before {
  content: "";
  position: absolute;
  left: -12px;  /* a bit wider than the grabber */
  right: -12px;
  top: -16px;   /* extend area upward (doesn't cover content) */
  bottom: -6px; /* tiny extension downward for easier grab */
  /* transparent box to catch taps/drags */
  background: transparent;
}
.sheet-grabber {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #bbb8b2;
}
.sheet-content {
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain; /* captura el scroll dentro del panel */
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem 1rem;
  flex: 1 1 auto;
  position: relative; /* para stacking/z-index de elementos internos */
  touch-action: none;
}
.sheet-content[data-scroll-lock="expanded"] {
  overflow-y: auto;
  touch-action: pan-y;
}
.sheet-content.ios-scroll-auto {
  -webkit-overflow-scrolling: auto;
}
  /* Cabecera fija del panel (fuera del área scrollable) */
  .sheet-fixed { background: var(--bg); padding: 6px 0 8px; border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 10px -10px rgba(0,0,0,0.12); z-index: 2; }
  html[data-theme="dark"] .sheet-fixed { border-bottom-color: rgba(255,255,255,0.12); box-shadow: 0 4px 10px -10px rgba(0,0,0,0.6); }
  .sheet-fixed-inner { max-width: 640px; margin: 0 auto; padding: 0 1rem; }
  /* Visual hint: header surface (including converter label/area) can drag the sheet */
  .sheet-fixed, .sheet-fixed * { cursor: grab; }
    /* Estados del sheet: collapsed, half y expanded
Nota: la posición 'collapsed' muestra un poco más de contenido para que
el usuario vea información mínima sin expandir completamente. */
  /* Ajuste: en half y expanded, restar banner para mantener el borde superior consistente */
  .bottom-sheet[data-state="collapsed"] { height: clamp(104px, var(--collapsed-min, 128px), 156px); }
  .bottom-sheet[data-state="half"] { height: calc(56vh - var(--banner-offset, 0px)); }
  .bottom-sheet[data-state="expanded"] { height: calc(84vh - var(--nav-reserve, 0px) - var(--banner-offset, 0px)); }

  /* Botón del sheet ya no es sticky; usamos el botón flotante sobre el mapa */
  #result { position: relative; }
  #open-waze { position: relative; top: auto; left: auto; transform: none; z-index: 1; }
/* Floating open button overlayed above the map and above the bottom sheet */
#open-waze-floating {
  position: fixed; /* overlay relative to viewport so it can sit above the sheet */
  z-index: 2147483647; /* maximum practical stacking to be above everything */
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
  display: none; /* toggled to inline-flex when shown */
  background-color: var(--accent);
  color: #fff;
  border: none;
    /* Tamaño basado en variables para mantener nitidez (evitar transform scale en texto) */
  --btn-font: 1rem;
  --pad-v: 0.9rem;
    --pad-h: 1.2rem;
  /* Variables de respiración por escala (no cambia layout) */
  --breath-min: 0.98; /* escala mínima (más sutil) */
  --breath-max: 1.03; /* escala máxima (más sutil) */
  font-size: var(--btn-font);
  padding: var(--pad-v) var(--pad-h);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  cursor: pointer;
  will-change: transform, opacity;
  /* base scale for animations; can be bumped when sheet is collapsed */
  --btn-scale: 1;
  /* Interceptar gestos para reenviar el desplazamiento manualmente */
  touch-action: none;
  /* Mantener en una sola línea */
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  isolation: isolate;
}
  /* Respiración por escala; sin halo ni cambios de padding */
#open-waze-floating .app-label {
  padding: 0 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
#open-waze-floating .app-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0; /* usar gap del contenedor para separarlo */
  /* Tamaño chevron animable sin blur */
  --chev-size: 22px;
  --chev-delta: 2px;
  width: var(--chev-size);
  height: var(--chev-size);
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  flex: 0 0 auto;
}
/* Entrance animation */
@keyframes app-pop-in {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(calc(var(--btn-scale, 1) * 0.2)); }
  60% { opacity: 1; transform: translate(-50%, 0) scale(calc(var(--btn-scale, 1) * 1.04)); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(var(--btn-scale, 1)); }
}
/* Quick left-right "nope" animation (uses margin-left to avoid transform conflicts) */
@keyframes app-nope {
  0% { margin-left: 0; }
  20% { margin-left: -8px; }
  40% { margin-left: 8px; }
  60% { margin-left: -6px; }
  80% { margin-left: 6px; }
  100% { margin-left: 0; }
}
  /* Breathing por escala (mantiene translate, anima scale) */
  @keyframes app-breath-scale {
    0%   { transform: translate(-50%, 0) scale(calc(var(--btn-scale, 1) * var(--breath-min, 0.96))); }
    50%  { transform: translate(-50%, 0) scale(calc(var(--btn-scale, 1) * var(--breath-max, 1.06))); }
    100% { transform: translate(-50%, 0) scale(calc(var(--btn-scale, 1) * var(--breath-min, 0.96))); }
  }
  #open-waze-floating.showing { animation: app-pop-in var(--app-pop-in-dur, 320ms) ease-out forwards; }
  /* Duración por defecto un poco más lenta para que se note */
  #open-waze-floating { --app-breath-dur: 2600ms; }
  #open-waze-floating.breathing { animation: app-breath-scale var(--app-breath-dur) ease-in-out infinite; }
  #open-waze-floating.nope { animation: app-nope 620ms ease; }
  /* Also allow the in-panel navigate button to use the same nope animation */
  #open-waze.nope { animation: app-nope 620ms ease; }
  /* Amplitud ligeramente mayor con sheet colapsado (pero contenida) */
  #open-waze-floating.breath-strong {
    --breath-min: 0.97;
    --breath-max: 1.05;
  }
  @media (prefers-reduced-motion: reduce) {
    #open-waze-floating.breathing { animation: none; }
  }
  /* El chevron no cambia de tamaño; la respiración solo ajusta padding del botón (uniforme) */
/* Larger base scale when sheet is collapsed */
#open-waze-floating.big { --btn-scale: 1.12; }
  /* Asegurar que el pin herede el color actual (var(--accent)) correctamente */
  .app-marker .app-pin { color: var(--accent); }
  /* Pin drag visuals: lift while dragging, soft drop on release */
  .app-marker .app-pin.dragging {
    transform: translateY(-8px) scale(1.6);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4));
    transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 150ms ease;
  }
  .app-marker .app-pin.dropped {
    animation: pin-drop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes pin-drop {
    0% { transform: translateY(-8px) scale(1.6); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4)); }
    60% { transform: translateY(0) scale(0.95); }
    100% { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); }
  }
/* Voice Instructions Button Animation */
@keyframes pulse {
  0% { 
    transform: scale(1); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
  }
  50% { 
    transform: scale(1.05); 
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4); 
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
  }
}

  #voice-instructions-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,123,255,0.4);
}

  /* Small pin-anchored hint popup tweaks (auto-size + RTL) */
  .leaflet-popup.move-pin-bubble .leaflet-popup-content-wrapper {
    padding: 6px 10px 6px 28px; /* left space for close button */
    border-radius: 10px;
    max-width: min(80vw, 320px); /* autosize for longer text */
  }
  .leaflet-popup.move-pin-bubble .leaflet-popup-content {
    margin: 2px 4px;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal; /* wrap */
    word-break: break-word; /* break long words */
  }
  /* RTL: mirror padding so text doesn't get overlapped by close button */
  html[dir="rtl"] .leaflet-popup.move-pin-bubble .leaflet-popup-content-wrapper {
    padding: 6px 28px 6px 10px;
  }
  .leaflet-popup.move-pin-bubble .leaflet-popup-tip { width: 16px; height: 16px; }
  /* Larger close button with extra spacing from text (left-aligned to stay clear of the tip) */
  .leaflet-popup.move-pin-bubble a.leaflet-popup-close-button {
    top: 2px; left: 4px; right: auto;
    width: 22px; height: 22px;
    line-height: 22px; font-size: 16px;
    border-radius: 6px; background: transparent;
  }
  /* Make "Compartir mi ubicación" blue like a link (without underline) in the mini popup */
  .leaflet-popup.move-pin-bubble #share-pin-mini {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
  }
  .leaflet-popup.move-pin-bubble #share-pin-mini:hover,
  .leaflet-popup.move-pin-bubble #share-pin-mini:focus {
    text-decoration: none;
    outline: none;
  }