/* =========================================================
   Viaje. Piel de cristal sobre la disciplina de Uber.
   Regla de oro de rendimiento: el cristal caro solo vive en
   superficies quietas. Si el mapa se mueve, el efecto baja
   a cristal barato hasta que el dedo suelte.
   ========================================================= */

/* ---------- fuentes locales, nada externo al arrancar ---------- */
@font-face {
  font-family: "Jakarta";
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- tokens: NEGRO Y PLATA ----------
   Un solo tema, oscuro. El metal es un degradado con reflejo; los
   textos metalicos llevan el suyo, con menos caida, o las palabras
   del medio de un titulo largo se apagan. */
:root {
  --plata: #BCC7CE;
  --plata-luz: #EAF1F5;
  --plata-media: #8D979E;
  --sobre-metal: #080B0D;

  --verde: #BCC7CE;         /* el nombre se queda; el valor ya es plata */
  --verde-hondo: #8D979E;

  --lienzo: #08090B;
  --tinta: #E9EFF2;
  --tinta-suave: #C3CBD1;
  --apagado: #9BA5AC;
  --tenue: #6A737A;
  --pelo: rgba(188, 199, 206, 0.16);
  --pelo-flojo: rgba(188, 199, 206, 0.07);

  --vidrio: rgba(15, 18, 21, 0.95);
  --vidrio-denso: rgba(22, 25, 30, 0.95);

  /* ---------- LIQUID GLASS ----------
     El cristal de Apple no es "un rectangulo oscuro medio transparente".
     Son tres cosas a la vez:
       1. deja pasar lo de detras, desenfocado y con MAS color del que
          tiene (por eso el saturate alto, no solo el blur);
       2. el borde refracta: un filo de luz arriba y otro mas flojo
          abajo, que es lo que le da grosor;
       3. tiene un brillo especular que corre por encima.
     Cuanto menos relleno lleve, mejor: el material se ve por el borde y
     por lo que deforma, no por lo oscuro que sea. */
  --lg-cara: linear-gradient(140deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.035) 46%,
      rgba(255, 255, 255, 0.085) 100%);
  --lg-borde: rgba(255, 255, 255, 0.16);
  --lg-desenfoque: blur(20px) saturate(1.9);
  --lg-relieve:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.42),
      inset 0 -1px 0.5px rgba(255, 255, 255, 0.09),
      inset 0 0 14px rgba(255, 255, 255, 0.05);
  --lg-sombra: 0 1px 2px rgba(0, 0, 0, 0.34), 0 6px 20px rgba(0, 0, 0, 0.22);
  --vidrio-borde: rgba(234, 241, 245, 0.16);
  --vidrio-brillo: rgba(234, 241, 245, 0.1);
  --vidrio-sombra: rgba(0, 0, 0, 0.6);

  --casing: rgba(0, 0, 0, 0.75);
  --tiles-filtro: none;

  --metal: linear-gradient(148deg,
      #6E777E 0%, #B9C4CB 16%, #F2F7FA 34%,
      #C6D0D7 52%, #7E878E 72%, #AEB9C0 88%, #6A737A 100%);
  --metal-texto: linear-gradient(150deg,
      #A9B4BB 0%, #E4EBEF 22%, #FFFFFF 42%,
      #D3DCE2 60%, #9FA9B0 82%, #CBD5DB 100%);

  --rojo: #D9534F;

  --sombra-baja: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 22px rgba(0, 0, 0, 0.45);
  /* lo que flota SOBRE el mapa lleva esta, corta y ceñida */
  --sombra-flota: 0 1px 3px rgba(0, 0, 0, 0.5);
  --sombra-alta: 0 1px 2px rgba(0, 0, 0, 0.7), 0 -2px 46px rgba(0, 0, 0, 0.6);

  --alto-barra: 58px;        /* la barra de abajo, siempre puesta */
  --alto-colapsado: 210px;
  --alto-medio: calc(46vh - var(--alto-barra) / 2);
  --alto-abierto: calc(88vh - var(--alto-barra));
  --r-panel: 26px;
  --r: 15px;
  --r-chico: 11px;
  --safe-abajo: env(safe-area-inset-bottom, 0px);
  --safe-arriba: env(safe-area-inset-top, 0px);

  --muelle-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --t-panel: 350ms;
  --t-corto: 150ms;
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--lienzo);
  color: var(--tinta);
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

svg { width: 100%; height: 100%; display: block; }

/* Leaflet dimensiona SU svg con atributos (width="600" height="908").
   La regla de arriba los pisa y lo deja en 0x0 con overflow hidden:
   la ruta existe, tiene color y grosor, y no se pinta NADA. Aqui se
   devuelve el control a Leaflet. Mismo caso que el stroke-width de
   la ruta, mas abajo. */
.leaflet-pane svg,
.leaflet-container svg {
  width: auto;
  height: auto;
}

/* trazo geometrico de 2pt con juntas redondeadas, como Uber */
svg path, svg circle, svg rect, svg line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mono {
  font-family: "Manrope", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.svg-filtros { position: absolute; width: 0; height: 0; pointer-events: none; }

.oculto { display: none !important; }

:focus-visible {
  outline: 2.5px solid var(--verde);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- el mapa ----------
   #mundo es la ventana (recorta y, en 3D, pone la perspectiva) y
   #mapa es el suelo que se inclina dentro. En plano los dos miden
   lo mismo y no se nota que existan dos cajas. */
#mundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--lienzo);
}

#mapa {
  position: absolute;
  inset: 0;
  background: var(--lienzo);
}

.leaflet-container { background: var(--lienzo); font: inherit; }

/* El mapa va monocromo a proposito, como el de Uber: asi el unico
   color de la pantalla es la ruta, el pin y el punto del usuario.
   OJO: el filtro va en cada tile, NUNCA en .leaflet-tile-pane. Un
   filter sobre el pane crea un contexto de contencion propio y
   descoloca los transforms de Leaflet: los tiles acaban en un sitio
   y los pines en otro. */
/* Solo cuando el mapa es OpenStreetMap: los estilos de Mapbox ya
   vienen monocromos y filtrar cada tile es trabajo de composicion
   en cada fotograma, justo lo que no queremos en un telefono viejo. */
body.mapa-osm .leaflet-tile { filter: var(--tiles-filtro); }

.leaflet-control-attribution {
  background: var(--vidrio) !important;
  color: var(--tenue) !important;
  font-size: 10px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px 0 0 0;
  padding: 1px 6px !important;
}

.leaflet-control-attribution a { color: var(--apagado) !important; }

/* Velo de arriba. Sin el, el nombre del sitio y los filtros caen justo
   encima de las etiquetas del mapa y no se lee ni una cosa ni la otra.
   Es un degradado, no una barra: el mapa se sigue viendo. */
.velo-alto {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--safe-arriba) + 120px);
  z-index: 2;
  pointer-events: none;
  /* Mas flojo y mas largo que antes. Con todo el cristal claro por
     encima, un velo fuerte se leia como una banda negra con un canto
     duro; asi solo apoya lo que flota, que es para lo que esta. */
  background: linear-gradient(to bottom,
    rgba(8, 9, 11, 0.58) 0%,
    rgba(8, 9, 11, 0.3) 48%,
    rgba(8, 9, 11, 0) 100%);
}

/* Sobre el mapa claro estos velos negros ensucian la mitad de la
   pantalla. Se bajan, pero no se quitan: el cristal oscuro de las
   pastillas necesita algo debajo o sus letras blancas caen sobre una
   calle en blanco y no se leen. */
body.mapa-claro .velo-alto { opacity: 0.5; }
body.mapa-claro .velo-mapa { opacity: 0.22; }

/* velo suave para que el cristal tenga sobre que apoyarse */
.velo-mapa {
  position: fixed;
  inset: auto 0 0 0;
  height: 46vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--lienzo) 0%, transparent 100%);
  opacity: 0.5;
}

/* =========================================================
   CRISTAL
   ========================================================= */
.btn-cristal,
.panel-fondo {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--pelo);
  box-shadow:
    inset 0 1px 0 var(--vidrio-brillo),
    var(--sombra-baja);
}

/* mientras el dedo arrastra el mapa, el cristal caro se apaga.
   esto es lo que salva los telefonos viejos. */
body.mapa-vivo .btn-cristal,
body.mapa-vivo .panel-fondo {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: var(--sombra-baja);
}

body.mapa-vivo .panel-fondo::before { opacity: 0; }

/* =========================================================
   LA FORMA DEL MAPA
   Tu cara arriba a la izquierda, los filtros debajo, la columna
   de ruedas a la derecha, los amigos abajo a la izquierda y la
   barra de cinco pegada al fondo. En negro y plata.
   ========================================================= */

/* ---------- tu cara, arriba a la izquierda ---------- */
.cara-alta {
  position: fixed;
  z-index: 6;
  top: calc(var(--safe-arriba) + 11px);
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 2px;
  background: var(--metal);
  box-shadow: var(--sombra-flota);
  transition: transform var(--t-corto) ease;
}

.cara-alta:active { transform: scale(0.94); }

.cara-foto {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #14181C;
}

/* La silueta llena el circulo y se corta con el, como una foto.
   Va RELLENA de plata: la regla global de svg deja todo en contorno y
   la dejaba como un dibujo de alambre. */
.cara-silueta { width: 100%; height: 100%; display: block; }
.cara-silueta.oculto { display: none; }
.cara-silueta circle,
.cara-silueta path {
  fill: url(#platagente);
  stroke: none;
}

.cara-ini {
  color: var(--plata-luz);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cara-ini.oculto { display: none; }

/* ---------- el sitio que estas mirando ----------
   Va pegado a tu cara, como en Snap: la cara dice quien eres y esto
   dice donde estas. Se corta con puntos suspensivos antes de llegar
   al tiempo, que manda en su esquina. */
.lugar-alto {
  position: fixed;
  z-index: 6;
  top: calc(var(--safe-arriba) + 13px);
  left: 60px;
  right: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 36px;
  pointer-events: none;
  animation: lugar-entra 260ms var(--muelle-panel) both;
}

.lugar-alto.oculto { display: none; }

.lugar-alto b,
.lugar-alto i {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* halo negro: el nombre va sobre el mapa, sin pastilla detras */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.8);
}

.lugar-alto b {
  font-size: 15px;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -0.015em;
}

.lugar-alto i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--plata-media);
}

.lugar-alto i:empty { display: none; }

@keyframes lugar-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- el tiempo de ahora ---------- */
.tiempo {
  position: fixed;
  z-index: 6;
  top: calc(var(--safe-arriba) + 16px);
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-flota);
}

.tiempo.oculto { display: none; }
.ti-ic { font-size: 12.5px; line-height: 1; }
.ti-gr {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ---------- la fila de filtros ---------- */
.filtros {
  position: fixed;
  z-index: 5;
  top: calc(var(--safe-arriba) + 60px);
  left: 0;
  right: 0;
  display: flex;
  gap: 7px;
  padding: 2px 12px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 31px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  position: relative;
  isolation: isolate;
  background: var(--lg-cara);
  -webkit-backdrop-filter: var(--lg-desenfoque);
  backdrop-filter: var(--lg-desenfoque);
  border: 1px solid var(--lg-borde);
  box-shadow: var(--lg-relieve), var(--lg-sombra);
  color: var(--tinta);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--t-corto) ease;
}

.filtro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    transparent 56%);
}

/* el elegido no lleva brillo encima del metal: lo apagaria */
.filtro.activo::before { content: none; }

.filtro svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.filtro:active { transform: scale(0.95); }

/* el elegido se viste de metal, como el resto de la marca */
.filtro.activo {
  background: var(--metal);
  border-color: transparent;
  color: var(--sobre-metal);
}

.chip-modo {
  display: flex;
  gap: 3px;
  padding: 4px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--pelo);
  align-self: flex-start;
}

.modo {
  padding: 7px 17px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--apagado);
  transition: color var(--t-corto) ease, background var(--t-corto) ease;
}

.modo.activo {
  background: var(--metal);
  color: var(--sobre-metal);
}

/* ---------- la columna de la derecha ----------
   Va pegada al borde, como en Snap: se sale un poco de la pantalla
   a proposito, asi el mapa respira y el pulgar la alcanza igual. */
.flotantes {
  position: fixed;
  z-index: 5;
  right: 8px;
  bottom: calc(var(--alto-barra) + var(--safe-abajo) + 22px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  transition: bottom var(--t-panel) var(--muelle-panel),
              opacity var(--t-corto) ease;
}

/* con el viaje abierto el mapa deja de ser el protagonista */
body:not(.sin-panel) .flotantes,
body:not(.sin-panel) .pie-amigos {
  opacity: 0;
  pointer-events: none;
}

/* la rueda: el boton redondo de toda la pantalla del mapa */
.rueda {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  color: var(--tinta);
  /* el material, igual que todo lo demas que flota */
  background: var(--lg-cara);
  -webkit-backdrop-filter: var(--lg-desenfoque);
  backdrop-filter: var(--lg-desenfoque);
  border: 1px solid var(--lg-borde);
  box-shadow: var(--lg-relieve), var(--lg-sombra);
  transition: transform var(--t-corto) ease;
}

.rueda::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 52%);
}

.rueda:active { transform: scale(0.93); }

.rueda svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.rueda-cara {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--metal);
  color: var(--sobre-metal);
  font-size: 16px; font-weight: 800;
}

/* el de la ubicacion cambia de cara segun me vean o no */
.ic-ubi-no { display: none; }
body.fantasma .ic-ubi-si { display: none; }
body.fantasma .ic-ubi-no { display: block; }
.ic-ubi-no .tachon { stroke-width: 2.1; }

/* el globito que explica por que esta tachado */
.rueda-con-globo { position: relative; display: flex; align-items: center; }

.globo {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-flota);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  animation: globo-entra 240ms var(--muelle-panel) both;
}

/* el pico que apunta a la rueda */
.globo::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left-color: #1B1F24;
}

.globo.oculto { display: none; }

@keyframes globo-entra {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- el estilo del mapa: claro, oscuro, satelite ----------
   Sale a la izquierda de su rueda, en columna y con una muestra del
   color de cada mapa. El puesto va marcado: un ciclo a ciegas no dice
   donde estas. */
.rueda-con-capas { position: relative; display: flex; align-items: center; }

.capas-menu {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: var(--r);
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-flota);
  animation: globo-entra 220ms var(--muelle-panel) both;
}

.capas-menu.oculto { display: none; }

.capa-op {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 600;
  transition: background var(--t-corto) ease, color var(--t-corto) ease;
}

.capa-op.activa {
  background: var(--pelo);
  color: var(--tinta);
}

/* la muestra: un circulito con la cara de ese mapa */
.capa-mues {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 1px solid var(--pelo);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.capa-mues.capa-claro    { background: linear-gradient(150deg, #F6F7F8, #D9DEE2); }
.capa-mues.capa-oscuro   { background: linear-gradient(150deg, #2A3036, #101317); }
.capa-mues.capa-satelite { background: linear-gradient(150deg, #4E6B3A, #2A4358 60%, #7A6A4A); }

.capa-op.activa .capa-mues { border-color: var(--plata); }

/* Sobre el satelite el fondo cambia con la foto: verde, mar, tejado.
   Sin un halo oscuro detras, el nombre de la tienda desaparece justo
   encima de una nube o de una playa. */
body.mapa-satelite .bu-eti b,
body.mapa-satelite .bu-eti i {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}

/* la brujula: rayas alrededor, aguja roja al norte */
.brujula {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-flota);
  transition: transform var(--t-corto) ease;
}

.brujula:active { transform: scale(0.93); }

.bru-n {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: 0.02em;
}

/* las rayitas del borde, hechas con un degradado repetido para no
   meter doce elementos en el arbol por pura decoracion */
.bru-rayas {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      var(--plata) 0deg 3deg,
      transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%, #000 100%);
  mask: radial-gradient(circle, transparent 66%, #000 68%, #000 100%);
  opacity: 0.9;
}

.bru-aguja {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -4px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-bottom: 6px solid var(--rojo);
}

/* ---------- abajo a la izquierda: los amigos ---------- */
.pie-amigos {
  position: fixed;
  z-index: 5;
  left: 10px;
  bottom: calc(var(--alto-barra) + var(--safe-abajo) + 14px);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: bottom var(--t-panel) var(--muelle-panel),
              opacity var(--t-corto) ease;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-flota);
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform var(--t-corto) ease;
}

.pastilla:active { transform: scale(0.96); }

.pastilla svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- la barra de abajo ---------- */
/* ---------- la barra de abajo: cristal oscuro ----------
   Cristal de verdad: el mapa se ve pasar por debajo, movido y
   apagado, con un filo de luz arriba y la sombra propia debajo.
   No es una barra negra con transparencia. */
.barra-baja {
  position: fixed;
  z-index: 9;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--alto-barra) + var(--safe-abajo));
  padding-bottom: var(--safe-abajo);
  display: flex;
  align-items: stretch;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      rgba(30, 36, 43, 0.62) 0%,
      rgba(12, 15, 19, 0.78) 55%,
      rgba(8, 10, 13, 0.86) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(0.72);
  backdrop-filter: blur(28px) saturate(1.9) brightness(0.72);
  box-shadow:
    inset 0 1px 0 rgba(234, 241, 245, 0.14),   /* el filo de luz de arriba */
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 -12px 30px rgba(0, 0, 0, 0.45);
}

/* el brillo que corre por el borde de arriba, como en un canto pulido */
.barra-baja::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(234, 241, 245, 0.42) 32%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(234, 241, 245, 0.42) 68%,
    transparent 100%);
  pointer-events: none;
}

/* y el reflejo interior, muy tenue, que le da grosor al cristal */
.barra-baja::after {
  content: "";
  position: absolute;
  inset: 1px 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.055) 0%,
    transparent 100%);
  pointer-events: none;
}

/* Con el dedo en el mapa el cristal caro se apaga, como en el resto de
   la app: en un telefono viejo un desenfoque de 28 px en cada
   fotograma es lo que hace que el mapa vaya a tirones. */
body.mapa-vivo .barra-baja {
  -webkit-backdrop-filter: blur(10px) brightness(0.72);
  backdrop-filter: blur(10px) brightness(0.72);
}

.pest {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  color: var(--tenue);
  transition: color var(--t-corto) ease, transform var(--t-corto) ease;
}

.pest:active { transform: scale(0.93); }

.pest-ic { display: grid; place-items: center; height: 24px; }

.pest svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.pest-tx { font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; }

/* la pestana en la que estas se enciende, y su icono va relleno */
.pest.activa { color: var(--plata-luz); }
.pest.activa .pest-ic {
  filter: drop-shadow(0 0 7px rgba(234, 241, 245, 0.32));
}
.pest.activa .ic-lleno path { fill: currentColor; stroke: none; }
.pest.activa .ic-lleno .hueco { fill: var(--lienzo); stroke: none; }

.pest .chincheta { top: 4px; right: 22%; }

/* ---------- marcadores del mapa ---------- */
.pin-yo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--plata-luz);
  border: 3.5px solid var(--lienzo);
  box-shadow: 0 2px 9px rgba(14, 22, 33, 0.4);
}

.pin-yo::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  opacity: 0;
  animation: latido 2.6s ease-out infinite;
}

@keyframes latido {
  0%   { transform: scale(0.55); opacity: 0.65; }
  70%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}

/* pin de destino: cuadrado negro con punta, como el de Uber */
.pin-destino {
  width: 26px;
  height: 33px;
  color: var(--tinta);
  animation: caer 320ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.pin-destino svg path { fill: currentColor; stroke: none; }

@keyframes caer {
  0%   { transform: translateY(-26px) scale(0.7); opacity: 0; }
  60%  { transform: translateY(3px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Los vehiculos del mapa son los mismos del carrusel, de perfil. No
   se giran con el rumbo (quedarian boca abajo): el JS los voltea
   segun vayan hacia un lado o hacia el otro. */
.coche-mapa {
  filter: drop-shadow(0 2px 4px rgba(14, 22, 33, 0.3));
  will-change: transform;
}

/* Carro del mapa: sprite cenital que gira con la calle. La
   transicion suaviza el giro para que no de tirones al doblar. */
.coche-mapa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.coche-mapa > svg {
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 50% 50%;
}

.coche-mapa {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
}

@media (prefers-reduced-motion: reduce) {
  .coche-mapa > img { transition: none; }
}

/* =========================================================
   PANEL DE TRES ALTURAS
   ========================================================= */
.panel {
  position: fixed;
  z-index: 6;
  left: 0; right: 0;
  bottom: calc(var(--alto-barra) + var(--safe-abajo));
  height: var(--alto-colapsado);
  /* fondo propio, sin depender del hijo: sobre un mapa oscuro un
     panel medio transparente no se lee, el mapa se cuela entre el
     texto. El cristal se queda solo en el borde y el brillo. */
  background: linear-gradient(180deg, #131619 0%, #0B0D10 100%);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: var(--sombra-alta);
  transition: height var(--t-panel) var(--muelle-panel),
              transform var(--t-panel) var(--muelle-panel);
  touch-action: none;
}

/* El mapa es el heroe: el panel del viaje NO estorba de entrada, se
   sube desde la pestana Viajes. Sale entero de la pantalla en vez de
   esconderse con display:none para que la subida se vea. */
body.sin-panel .panel { transform: translateY(102%); pointer-events: none; }
body.sin-panel .panel,
body.sin-panel .agarre { visibility: hidden; }

body.panel-medio .panel { height: var(--alto-medio); }
body.panel-abierto .panel { height: var(--alto-abierto); }
body.arrastrando .panel { transition: none; }

.agarre { position: relative; z-index: 2; display: block; width: 100%; padding: 11px 0 7px; }

.agarre-linea {
  display: block; width: 38px; height: 4px; margin: 0 auto;
  border-radius: 3px; background: var(--pelo);
}

.panel-cuerpo {
  position: relative; z-index: 2;
  height: calc(100% - 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px 22px;
}

body:not(.panel-abierto) .panel-cuerpo { overflow-y: hidden; }

.bloque { display: flex; flex-direction: column; gap: 13px; }
.oculto { display: none !important; }

/* ---------- buscador ---------- */
.saludo {
  margin: 2px 0 0; font-size: 25px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--tinta);
}

.buscador {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 15px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
  text-align: left;
  transition: transform var(--t-corto) ease;
}

.buscador:active { transform: scale(0.988); }
.lupa { width: 19px; height: 19px; flex: 0 0 19px; color: var(--apagado); }
.buscador-txt { flex: 1; font-size: 16.5px; font-weight: 600; color: var(--apagado); }

.ahora {
  font-size: 13px; font-weight: 600; color: var(--tinta);
  background: var(--vidrio-denso); border: 1px solid var(--pelo);
  padding: 5px 11px; border-radius: 999px;
}

/* ---------- lugares guardados ---------- */
.guardados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.lugar {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 13px 2px; text-align: left;
  border-bottom: 1px solid var(--pelo-flojo);
  transition: opacity var(--t-corto) ease;
}

.guardados li:last-child .lugar { border-bottom: none; }
.lugar:active { opacity: 0.55; }

.lugar-ic {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--pelo-flojo); color: var(--plata);
}

.lugar-ic svg { width: 18px; height: 18px; }
.lugar-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lugar-tit { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lugar-sub { font-size: 13px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lugar-eta { font-size: 13px; color: var(--tenue); }

/* ---------- resumen de ruta ---------- */
.ruta-resumen {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: var(--r);
  background: var(--pelo-flojo); border: 1px solid var(--pelo);
}

.ruta-puntos { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 0; }
.pt { width: 8px; height: 8px; border-radius: 50%; }
.pt-a { background: var(--plata-luz); }
.pt-b { background: var(--plata-media); border-radius: 2px; }
.pt-linea { width: 1.5px; height: 15px; background: var(--pelo); }
.ruta-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ruta-de, .ruta-a { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruta-de { color: var(--apagado); }
.ruta-a { font-weight: 600; }
.btn-cambiar { font-size: 13px; font-weight: 600; color: var(--plata-luz); padding: 6px 4px; }

/* ---------- vehiculos: una fila que se desliza ----------
   En vertical, seis opciones obligaban a bajar para llegar al boton
   de pedir. En fila cabe todo de una vez. */
.carrusel { margin: 0 -18px; overflow: hidden; }

.opciones {
  display: flex; gap: 9px;
  padding: 2px 18px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.opciones::-webkit-scrollbar { display: none; }

.veh {
  flex: 0 0 auto; width: 98px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px 11px;
  border-radius: var(--r);
  border: 1.5px solid var(--pelo);
  background: transparent;
  transition: border-color var(--t-corto) ease,
              background var(--t-corto) ease,
              transform var(--t-corto) var(--muelle-panel);
}

.veh:active { transform: scale(0.97); }
.veh.elegido { border-color: var(--plata); background: rgba(188, 199, 206, 0.09); }

.veh-ic { width: 66px; height: 34px; }

.veh-ic img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: 0.34;
  filter: grayscale(0.85) brightness(0.9);
  transition: opacity var(--t-corto) ease, filter var(--t-corto) ease,
              transform var(--t-corto) var(--muelle-panel);
}

.veh.elegido .veh-ic img { opacity: 1; filter: brightness(1.04); transform: scale(1.06); }

.veh-tit { font-size: 12.5px; font-weight: 600; color: var(--apagado); white-space: nowrap; }
.veh.elegido .veh-tit { color: var(--tinta); }
.veh-precio { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--tinta); }

/* ---------- pago ---------- */
.pago {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 2px; text-align: left;
  border-top: 1px solid var(--pelo-flojo);
  border-bottom: 1px solid var(--pelo-flojo);
}

.pago-ic { width: 21px; height: 21px; flex: 0 0 21px; color: var(--plata); }
.pago-txt { flex: 1; font-size: 14.5px; font-weight: 600; }
.pago-chev { width: 15px; height: 15px; color: var(--tenue); }

/* ---------- boton principal, en metal ---------- */
.cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 16px; margin-top: 2px;
  border-radius: var(--r);
  background: var(--metal);
  color: var(--sobre-metal);
  font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: 0 2px 14px rgba(188, 199, 206, 0.13);
  transition: transform var(--t-corto) cubic-bezier(0.34, 1.4, 0.64, 1), filter var(--t-corto) ease;
}

.cta:active { transform: scale(0.98); filter: brightness(0.92); }

.cta-eta {
  font-size: 13.5px; font-weight: 700; opacity: 0.55;
  padding-left: 12px; border-left: 1px solid rgba(8, 11, 13, 0.28);
}

/* ---------- ruta dibujada en el mapa ---------- */
.leaflet-overlay-pane path.ruta-casing {
  fill: none; stroke: var(--casing); stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.85;
}

.leaflet-overlay-pane path.trazo-ruta {
  fill: none; stroke: var(--plata-luz); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
  animation: trazar 420ms ease-out forwards;
}

@keyframes trazar { to { stroke-dashoffset: 0; } }

/* ---------- aviso de ubicacion ---------- */
.aviso-ubi {
  position: fixed; z-index: 6;
  /* debajo de la fila de filtros: encima se los comia enteros */
  top: calc(var(--safe-arriba) + 100px);
  left: 14px; right: 14px;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.35;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-baja);
  animation: bajar-aviso 320ms var(--muelle-panel) both;
}

@keyframes bajar-aviso {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.aviso-ic { width: 20px; height: 20px; flex: 0 0 20px; color: var(--plata); }
.aviso-txt { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.35; }

.aviso-btn {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  background: var(--metal); color: var(--sobre-metal);
  font-size: 13px; font-weight: 700;
}

.aviso-btn:active { transform: scale(0.96); }

/* ---------- pantallas anchas: el panel se hace tarjeta ---------- */
@media (min-width: 720px) {
  .panel {
    left: 22px; bottom: 22px; right: auto;
    width: 396px; height: auto;
    max-height: calc(100vh - 132px);
    border-radius: var(--r-panel);
  }
  body.panel-medio .panel, body.panel-abierto .panel { height: auto; }
  .panel-fondo { border-radius: var(--r-panel); border-bottom: 1px solid var(--pelo); }
  .panel-cuerpo { height: auto; max-height: calc(100vh - 176px); overflow-y: auto; padding-top: 20px; }
  body:not(.panel-abierto) .panel-cuerpo { overflow-y: auto; }
  .agarre { display: none; }
  .flotantes, body.panel-medio .flotantes { bottom: 34px; }
  body.panel-abierto .flotantes { opacity: 1; pointer-events: auto; }
}

/* =========================================================
   PANTALLA DE ORDENADOR: EL MENU SE PONE DE PIE

   En el telefono el menu es una barra abajo, que es donde llega el
   pulgar. En un ordenador no hay pulgar y ese borde queda lejisimos
   del raton, ademas de robarle alto a lo unico que importa, que es el
   mapa. Asi que a partir de 1000 px la barra se levanta y se convierte
   en una columna de iconos pegada al borde izquierdo, como la de
   Instagram: solo iconos, sin letras, y el de la seccion en la que
   estas encendido.
   ========================================================= */
@media (min-width: 1000px) {
  :root {
    /* la barra de abajo deja de existir: todo lo que reservaba sitio
       para ella (el panel, las ruedas, los amigos) recupera ese alto */
    --alto-barra: 0px;
    --riel: 74px;
  }

  /* SIN FONDO. Una barra de cristal de lado a lado le comia un dedo de
     mapa y no hacia falta: los iconos se leen solos sobre el mapa
     oscuro. Lo unico que queda es un velo muy flojo detras de ellos,
     para el caso de que abajo caiga una calle clara. */
  .barra-baja {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--riel);
    height: auto;
    padding: var(--safe-arriba) 0 0;
    flex-direction: column;
    /* centrados en vertical: a media altura es donde cae la mano en
       cualquier pantalla, sea un portatil o un monitor grande */
    justify-content: center;
    gap: 10px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    pointer-events: none;        /* el mapa se arrastra POR DEBAJO */
  }

  /* ni filo de luz ni reflejo: no hay canto que pulir */
  .barra-baja::before,
  .barra-baja::after { content: none; }

  /* iconos y nada mas: la palabra debajo era para el telefono, donde el
     dedo tapa el icono. Con raton se ve el icono entero y sobra */
  /* Ni barra ni pastilla oscura: SIN FONDO, como pidio el jefe. Lo que
     hay debajo del icono es cristal de verdad, que se ve porque deforma
     el mapa y por su filo de luz, no porque tape nada. */
  .pest {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 50%;
    gap: 0;
    pointer-events: auto;        /* los iconos si se tocan */
    position: relative;
    isolation: isolate;
    background: var(--lg-cara);
    -webkit-backdrop-filter: var(--lg-desenfoque);
    backdrop-filter: var(--lg-desenfoque);
    border: 1px solid var(--lg-borde);
    box-shadow: var(--lg-relieve), var(--lg-sombra);
    transition: background var(--t-corto) ease, color var(--t-corto) ease,
                transform var(--t-corto) ease;
  }

  .pest::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(160deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.05) 28%,
      transparent 54%);
  }

  /* la seccion en la que estas: el cristal se enciende, no se rellena */
  .pest.activa {
    background: linear-gradient(140deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.18) 100%);
    border-color: rgba(255, 255, 255, 0.3);
  }

  body.mapa-vivo .pest {
    -webkit-backdrop-filter: blur(9px) saturate(1.4);
    backdrop-filter: blur(9px) saturate(1.4);
  }

  .pest-tx { display: none; }

  /* la cuenta ES una entrada del menu, no una cara suelta flotando
     encima del mapa. Va la ultima, como en Instagram.
     Se escribe con el padre delante a proposito: la regla que la
     esconde en el telefono vive mas abajo en el fichero, y sin este
     peso de mas ganaria ella y el boton no saldria nunca. */
  .barra-baja .solo-riel { display: flex; }
  .pest svg { width: 25px; height: 25px; }
  .pest .chincheta { top: 12px; right: 24%; }

  /* con raton se puede avisar antes de tocar */
  .pest:hover { color: var(--tinta-suave); }
  .pest:active { transform: scale(0.9); }

  /* Todo lo que vivia pegado al borde izquierdo se corre a la derecha
     del riel. Sin esto la cara y los filtros quedan DEBAJO del menu. */
  /* La cara de arriba se va: la cuenta ya es una entrada del riel, y
     dos botones para lo mismo es un boton de mas. El nombre del sitio
     se queda, que ese si dice algo, y ocupa su hueco. */
  .cara-alta   { display: none; }
  .lugar-alto  { left: calc(var(--riel) + 16px); }

  /* Y "Añadir amigos" tambien: buscar y seguir gente vive en Chat,
     junto a las conversaciones, como en Instagram. Suelto encima del
     mapa no lo encontraba nadie. */
  .pie-amigos  { display: none; }

  .filtros     { left: var(--riel); padding-left: 16px; }
  .velo-alto   { left: var(--riel); }
  .panel       { left: calc(var(--riel) + 22px); }
  .velo-mapa   { left: var(--riel); }
}

/* =========================================================
   FLUJO DEL PEDIDO
   ========================================================= */

/* ---------- buscando chofer ---------- */
.buscando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
}

.pulso {
  position: relative;
  width: 74px;
  height: 74px;
  margin-bottom: 6px;
}

.pulso span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--verde);
  opacity: 0;
  animation: onda 2.1s ease-out infinite;
}

.pulso span:nth-child(2) { animation-delay: 0.7s; }
.pulso span:nth-child(3) { animation-delay: 1.4s; }

@keyframes onda {
  0%   { transform: scale(0.35); opacity: 0.75; }
  80%  { transform: scale(1);    opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}

.pulso::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: var(--verde);
}

.buscando-tit {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.buscando-sub {
  margin: 0;
  font-size: 14px;
  color: var(--apagado);
  text-align: center;
}

.cta-flojo {
  width: 100%;
  padding: 15px;
  border-radius: var(--r);
  border: 1px solid var(--pelo);
  font-size: 15px;
  font-weight: 600;
  color: var(--apagado);
  transition: transform var(--t-corto) ease, color var(--t-corto) ease;
}

.cta-flojo:active { transform: scale(0.98); color: var(--tinta); }

/* ---------- chofer asignado ---------- */
.chofer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 13px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
}

.chofer-foto {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--lienzo);
  display: grid;
  place-items: center;
}

.chofer-foto svg { width: 24px; height: 24px; }

.chofer-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chofer-nom { font-size: 15.5px; font-weight: 700; }
.chofer-car { font-size: 13px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chofer-nota { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
.estrella { width: 15px; height: 15px; color: #F2A93B; }
.estrella svg path { fill: currentColor; stroke: none; }

.llegada {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 2px;
  border-bottom: 1px solid var(--pelo-flojo);
}

.llegada-et { font-size: 14px; color: var(--apagado); }
.llegada-min { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.acciones { display: flex; gap: 9px; }

.accion {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: var(--r);
  border: 1px solid var(--pelo);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform var(--t-corto) ease, background var(--t-corto) ease;
}

.accion:active { transform: scale(0.97); background: var(--pelo-flojo); }
.accion-ic { width: 20px; height: 20px; color: var(--tinta); }
.accion-ic svg path, .accion-ic svg circle { fill: currentColor; stroke: none; }
.accion-ic svg path[d^="M8.3"] { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- final del viaje ---------- */
.fin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0 4px;
}

.fin-et { font-size: 13px; color: var(--apagado); }
.fin-precio { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.fin-sub { font-size: 13.5px; color: var(--apagado); }

.fin-pregunta { margin: 6px 0 0; text-align: center; font-size: 15px; }
.fin-pregunta b { font-weight: 700; }

.estrellas { display: flex; justify-content: center; gap: 8px; padding: 2px 0 4px; }

.est {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--pelo);
  transition: transform var(--t-corto) var(--muelle-panel), color var(--t-corto) ease;
}

.est svg { width: 32px; height: 32px; }
.est svg path { fill: currentColor; stroke: none; }
.est.on { color: #F2A93B; }
.est:active { transform: scale(0.9); }

/* =========================================================
   HOJA DE CUENTA Y MENU
   ========================================================= */
.hoja { position: fixed; inset: 0; z-index: 20; }
.hoja.oculto { display: none !important; }

.hoja-fondo {
  position: absolute;
  inset: 0;
  background: rgba(14, 22, 33, 0.42);
  opacity: 0;
  transition: opacity 260ms var(--muelle-panel);
}

.hoja.abierta .hoja-fondo { opacity: 1; }

.hoja-caja {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 18px calc(22px + var(--safe-abajo));
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border-top: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-alta);
  transform: translateY(100%);
  transition: transform 320ms var(--muelle-panel);
  max-height: 88vh;
  overflow-y: auto;
}

.hoja.abierta .hoja-caja { transform: none; }

.hoja-alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
}

.hoja-alto h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

.hoja-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pelo-flojo);
}

.hoja-x svg { width: 16px; height: 16px; }
.hoja-x svg path { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }

.hoja-yo {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--pelo-flojo);
}

.hoja-foto {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--lienzo);
  display: grid;
  place-items: center;
}

.hoja-foto svg { width: 25px; height: 25px; }
.hoja-foto svg path, .hoja-foto svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; }

.hoja-datos { display: flex; flex-direction: column; }
.hoja-nom { font-size: 16.5px; font-weight: 700; }
.hoja-sub { font-size: 13.5px; color: var(--apagado); }

.hoja-op {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 2px;
  text-align: left;
  border-bottom: 1px solid var(--pelo-flojo);
  transition: opacity var(--t-corto) ease;
}

.hoja-op:active { opacity: 0.55; }

.hoja-op-ic {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pelo-flojo);
  color: var(--tinta-suave);
}

.hoja-op-ic svg { width: 19px; height: 19px; }
.hoja-op-txt { flex: 1; display: flex; flex-direction: column; }
.hoja-op-tit { font-size: 15px; font-weight: 600; }
.hoja-op-sub { font-size: 12.5px; color: var(--apagado); }
.hoja-chev { width: 15px; height: 15px; color: var(--tenue); }

.hoja-salir {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border-radius: var(--r);
  border: 1px solid var(--pelo);
  font-size: 15px;
  font-weight: 600;
  color: var(--risk-txt, #C21D10);
}

.hoja-salir:active { transform: scale(0.98); }

/* =========================================================
   NEGOCIOS EN EL MAPA, ESTILO SNAP MAP
   ========================================================= */
.burbuja {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}

.bu-foto {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tono, #7B8794);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 2px 7px rgba(14, 22, 33, 0.28);
  display: grid;
  place-items: center;
}

.bu-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bu-ini {
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

/* anillo de color: el negocio tiene historia del dia */
.burbuja.con-historia .bu-foto {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2.5px var(--tono, #7B8794),
              0 2px 8px rgba(14, 22, 33, 0.3);
}

.bu-eti {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  pointer-events: none;
}

.bu-eti b {
  font-size: 11px;
  font-weight: 700;
  color: var(--plata-luz);
  /* halo NEGRO: sobre el mapa oscuro un halo blanco hace que las
     letras parezcan de neon */
  text-shadow: 0 1px 3px #05070A, 0 0 7px #05070A, 0 0 12px rgba(5, 7, 10, 0.9);
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bu-eti i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--apagado);
  text-shadow: 0 1px 3px #05070A, 0 0 7px #05070A;
}


/* ---------- visor de la historia ---------- */
.historia { position: fixed; inset: 0; z-index: 30; }
.historia.oculto { display: none !important; }

.hi-fondo {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.historia.abierta .hi-fondo { opacity: 1; }

.hi-caja {
  position: absolute;
  inset: calc(var(--safe-arriba) + 16px) 14px calc(var(--safe-abajo) + 16px);
  border-radius: 22px;
  overflow: hidden;
  background: #12181F;
  display: flex;
  flex-direction: column;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 300ms var(--muelle-panel), opacity 240ms ease;
}

.historia.abierta .hi-caja { transform: none; opacity: 1; }

.hi-barras {
  height: 3px;
  margin: 10px 12px 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}

.hi-barra { display: block; height: 100%; width: 0; background: #FFFFFF; }

.hi-alto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}

.hi-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.hi-quien { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hi-quien b { font-size: 14.5px; font-weight: 700; color: #fff; }
.hi-quien i { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.62); }

.hi-x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.hi-x svg { width: 15px; height: 15px; }
.hi-x svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

.hi-lienzo {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 96px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.hi-lienzo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hi-lienzo img.oculto { display: none; }

.hi-pie { display: flex; gap: 9px; padding: 12px 14px calc(14px + var(--safe-abajo)); }

.hi-accion {
  flex: 1;
  padding: 13px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #12181F;
  font-size: 14.5px;
  font-weight: 700;
}

.hi-accion.secundaria {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hi-accion:active { transform: scale(0.98); }

/* =========================================================
   MAPA DE CALOR
   Escala de Snap: azul poco, amarillo algo, naranja bastante, rojo
   mucho. Las manchas se suman entre ellas con blend, asi dos zonas
   pegadas calientan mas, igual que en Snap Map.
   ========================================================= */

/* apagado desde el boton */
body.sin-calor .calor { opacity: 0; }

/* con el mapa en movimiento el calor se atenua: son las manchas mas
   caras de componer y es lo primero que hace tiron en un telefono */
body.mapa-vivo .calor { opacity: calc(0.18 + var(--f, 0.5) * 0.2); }

/* el boton, encendido */
#btn-calor[aria-pressed="true"] svg path {
  stroke: #E8823F;
}

#btn-calor svg path {
  fill: none;
  stroke: var(--apagado);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-corto) ease;
}

.capa-calor {
  /* el lienzo entero se funde al encender y apagar */
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
body.con-calor .capa-calor { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .capa-calor { transition: none; }
}

/* ---------- el calor manda: sin burbujas encima ----------
   Un mapa de calor con las burbujas de los negocios por delante no
   se lee. Al encenderlo se retiran, y con ellas sus etiquetas. */
body.con-calor .burbuja { opacity: 0; pointer-events: none; }
body.con-calor .coche-mapa { opacity: 0.35; }

.burbuja { transition: opacity 260ms ease; }
.coche-mapa { transition: opacity 260ms ease; }

/* ---------- leyenda de la escala ---------- */
.leyenda {
  position: fixed;
  z-index: 6;
  left: 14px;
  bottom: calc(var(--alto-barra) + var(--safe-abajo) + 82px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-baja);
  animation: bajar-aviso 300ms var(--muelle-panel) both;
}

.leyenda.oculto { display: none; }

.ley-tit { font-size: 12px; font-weight: 700; color: var(--tinta); }

.ley-barra {
  display: block;
  width: 132px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    #2878F0 0%, #40C8EC 22%, #60E080 40%,
    #C8F05C 54%, #F5F04A 66%, #F0A03C 80%,
    #E04A28 90%, #8A1E12 100%);
}

.ley-pies { display: flex; justify-content: space-between; }
.ley-pies i { font-style: normal; font-size: 10.5px; color: var(--apagado); }

body.panel-medio .leyenda { bottom: calc(var(--alto-medio) + var(--safe-abajo) + 16px); }
body.panel-abierto .leyenda { opacity: 0; pointer-events: none; }

/* =========================================================
   SUBIR HISTORIA
   ========================================================= */

/* ---------- componer ---------- */
.componer { position: fixed; inset: 0; z-index: 32; }
.componer.oculto { display: none !important; }

.comp-fondo {
  position: absolute; inset: 0;
  background: rgba(6, 8, 11, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.comp-caja {
  position: absolute;
  inset: calc(var(--safe-arriba) + 14px) 14px calc(var(--safe-abajo) + 14px);
  border-radius: 22px;
  background: #101316;
  border: 1px solid var(--pelo);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px calc(14px + var(--safe-abajo));
  overflow: hidden;
}

.comp-alto { display: flex; align-items: center; justify-content: space-between; }
.comp-alto h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

.comp-vista {
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0A0C0F;
  display: grid;
  place-items: center;
}

.comp-vista img { width: 100%; height: 100%; object-fit: contain; display: block; }

.comp-texto {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
  font: inherit;
  font-size: 15px;
  color: var(--tinta);
  outline: none;
}

.comp-texto::placeholder { color: var(--tenue); }
.comp-texto:focus { border-color: var(--plata-media); }

.comp-nota { margin: 0; font-size: 12px; color: var(--tenue); text-align: center; }

.aviso-ubi-txt {
  margin: 0;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(217, 83, 79, 0.14);
  border: 1px solid rgba(217, 83, 79, 0.34);
  color: #F2A5A2;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.aviso-ubi-txt.oculto { display: none; }

/* ---------- burbuja de persona ---------- */
.burbuja.persona .bu-foto { border-radius: 50%; }
.burbuja.persona .bu-eti i { color: var(--plata-media); }

/* ---------- sin conexion ----------
   No se esconde el mapa ni se bloquea nada: se avisa y se sigue. El
   GPS funciona sin datos y el mapa del barrio esta guardado. */
.sin-red-barra {
  position: fixed;
  z-index: 8;
  top: 0; left: 0; right: 0;
  display: none;
  align-items: center;
  gap: 9px;
  padding: calc(var(--safe-arriba) + 9px) 16px 9px;
  background: #3A2A12;
  border-bottom: 1px solid rgba(240, 176, 80, 0.3);
  color: #F3D9A8;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

body.sin-red .sin-red-barra { display: flex; }
body.sin-red .barra-alta { top: calc(var(--safe-arriba) + 56px); }

.sr-punto {
  width: 8px; height: 8px; flex: 0 0 8px;
  border-radius: 50%;
  background: #E8A33F;
  animation: latir-red 1.8s ease-in-out infinite;
}

@keyframes latir-red { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* el boton de pedir cambia de texto solo, pero se marca que va por SMS */
body.sin-red .cta { background: linear-gradient(148deg, #C9A227 0%, #F0DC9A 34%, #C9A227 100%); }

/* =========================================================
   LO SOCIAL: amigos en el mapa, perfil y agregar
   ========================================================= */

/* La burbuja de una persona tiene que distinguirse de un local DE UN VISTAZO.
   Con el mismo borde blanco que los negocios, un amigo parecia una farmacia.
   Lleva aro de plata de verdad, va un poco mas grande y se apoya en el mapa
   con su sombra. */
.burbuja.amigo,
.burbuja.amigo .bu-foto { width: 50px; height: 50px; }

.burbuja.amigo .bu-foto {
  border: 0;
  background:
    linear-gradient(var(--tono, #7B8794), var(--tono, #7B8794)) padding-box,
    linear-gradient(150deg, #F2F6F8 0%, #9AA6AE 38%, #EAF1F5 62%, #6E7A82 100%) border-box;
  border: 3px solid transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
}

.burbuja.amigo .bu-ini { font-size: 20px; }
.burbuja.amigo .bu-eti { top: 54px; }
.burbuja.amigo .bu-eti i { color: var(--plata-media); font-size: 9.5px; }

/* el aviso de solicitudes sin responder */
.chincheta {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #D9534F;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--lienzo);
}

.chincheta.oculto { display: none; }
#btn-amigos { position: relative; }

/* ---------- la hoja ---------- */
.hoja-am { position: fixed; inset: 0; z-index: 22; }
.hoja-am.oculto { display: none !important; }

.am-fondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 11, 0.62);
  opacity: 0;
  transition: opacity 260ms var(--muelle-panel);
}

.hoja-am.abierta .am-fondo { opacity: 1; }

.am-caja {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 8px 18px calc(22px + var(--safe-abajo));
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: linear-gradient(180deg, #131619 0%, #0B0D10 100%);
  border-top: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-alta);
  transform: translateY(100%);
  transition: transform 320ms var(--muelle-panel);
}

.hoja-am.abierta .am-caja { transform: none; }

.am-alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
}

.am-alto h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- yo y el interruptor ---------- */
.am-yo {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0 10px;
}

.am-foto {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: #fff;
  overflow: hidden;
}

.am-foto.grande { width: 50px; height: 50px; flex: 0 0 50px; font-size: 20px; }
.am-foto img { width: 100%; height: 100%; object-fit: cover; }

.am-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.am-txt b { font-size: 15.5px; font-weight: 700; }
.am-txt i { font-style: normal; font-size: 12.5px; color: var(--apagado); }

/* El interruptor de si me ven. A la vista siempre: apagarlo tiene que
   ser tan facil como encenderlo. */
.interruptor {
  width: 52px; height: 30px; flex: 0 0 52px;
  border-radius: 999px;
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.int-bola {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--plata-media);
  transition: transform 240ms var(--muelle-panel), background 200ms ease;
}

.interruptor.on { background: rgba(188, 199, 206, 0.24); border-color: var(--plata); }
.interruptor.on .int-bola { transform: translateX(22px); background: var(--plata-luz); }

.am-estado {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--tenue);
  padding-left: 63px;
}

.am-estado.visible { color: var(--plata); }

/* ---------- buscar ---------- */
.am-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
}

.am-busca input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--tinta);
  background: none;
  border: none;
  outline: none;
}

.am-busca input::placeholder { color: var(--tenue); }

/* ---------- listas ---------- */
.am-titulo {
  margin: 18px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.am-titulo.oculto { display: none; }

.am-lista { list-style: none; margin: 0; padding: 0; }

.am-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pelo-flojo);
}

.am-fila:last-child { border-bottom: none; }

.am-acciones { display: flex; gap: 7px; }

.am-si, .am-no, .am-quitar {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.am-si { background: var(--metal); color: var(--sobre-metal); }
.am-no { background: var(--pelo-flojo); color: var(--apagado); border: 1px solid var(--pelo); }
.am-si:disabled { opacity: 0.45; }

.am-quitar {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
}

.am-quitar svg { width: 13px; height: 13px; }
.am-quitar svg path { fill: none; stroke: var(--apagado); stroke-width: 2; stroke-linecap: round; }

.am-vacio {
  padding: 16px 0;
  font-size: 13.5px;
  color: var(--tenue);
  line-height: 1.5;
}

#busca-resultado .am-fila { border-bottom: none; }


/* =========================================================
   QUE SE VE SEGUN EL FILTRO DE ARRIBA
   Filtrar con clases en el body en vez de quitar y poner capas
   de Leaflet: el mapa no parpadea y vuelve al instante.
   ========================================================= */

/* Amigos: solo personas. Fuera los negocios y los carros. */
body.fil-amigos .burbuja:not(.amigo) { opacity: 0; pointer-events: none; }
body.fil-amigos .coche-mapa { opacity: 0.18; pointer-events: none; }

/* Popular: solo lo que tiene historia del dia. */
body.fil-popular .burbuja:not(.con-historia) { opacity: 0; pointer-events: none; }

/* Visitados: tus lugares, y nada mas encima. */
body.fil-visitados .burbuja:not(.visitado) { opacity: 0; pointer-events: none; }
body.fil-visitados .coche-mapa { opacity: 0.18; pointer-events: none; }

/* la burbuja de un lugar tuyo: aro de plata partido, sin foto */
.burbuja.visitado .bu-foto {
  border-style: dashed;
  border-color: var(--plata-media);
  background: rgba(20, 24, 28, 0.92);
}
.burbuja.visitado .bu-ini { color: var(--plata-luz); }
.burbuja.visitado .bu-eti i { color: var(--plata-media); font-size: 9.5px; }

/* Con el mapa claro puesto, las etiquetas negras del mapa piden
   texto oscuro: si no, el nombre del negocio se pierde en el blanco. */
body.mapa-claro .bu-eti b { color: #0B0E11; text-shadow: 0 1px 2px rgba(255,255,255,0.85); }
body.mapa-claro .bu-eti i { color: #4A545C; text-shadow: 0 1px 2px rgba(255,255,255,0.85); }


/* =========================================================
   NADA DE ZOOM POR DOBLE TOQUE
   El meta viewport no basta en iOS: Safari sigue acercando con dos
   toques si el elemento no lo prohibe. Esto es lo que de verdad lo
   apaga, y de paso quita el retardo de 300 ms al tocar.
   ========================================================= */
html, body { touch-action: manipulation; }

/* El mapa se lo gestiona TODO Leaflet, pellizco incluido. Poniendo
   aqui "pinch-zoom" se le estaba dando permiso al NAVEGADOR para
   ampliar la pagina encima del mapa, que es justo lo que no queremos. */
#mapa, .leaflet-container { touch-action: none; }

/* y la pagina no rebota ni arrastra al documento de detras */
html, body { overscroll-behavior: none; }

/* los botones no se acercan ni se seleccionan por insistir */
button, .filtro, .rueda, .pastilla, .pest, .casilla {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}


/* La inicial vive DEBAJO de la foto: si la foto carga, la tapa; si no
   llega, se queda ella. Asi no hay parpadeo ni hueco blanco. */
.bu-foto { position: relative; }
.bu-foto img {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* =========================================================
   DE LEJOS, SOLO LOS PUNTOS
   ========================================================= */
/* EL MAPA SE LIMPIA AL ALEJAR.
   Dos rampas que escribe app.js en cada paso del zoom:
     --eti   los nombres  (1 cerca, 0 lejos)
     --burb  las burbujas (1 cerca, 0 lejos, un poco despues)
   Primero se van los nombres, despues las burbujas enteras, y abajo del
   todo queda el mapa con su calor. Acercando vuelven por el mismo
   camino, suavemente. */
/* El nombre y su categoria se van por separado: primero el detalle
   fino, despues el nombre. Asi la limpieza es una cascada y no un
   interruptor. */
.bu-eti b {
  opacity: var(--eti, 1);
  transition: opacity 90ms linear;
}

.bu-eti i {
  opacity: var(--sub, 1);
  transition: opacity 90ms linear;
}

.burbuja {
  opacity: var(--burb, 1);
  transition: opacity 160ms linear;
}

/* apagadas del todo: fuera del arbol, que son 135 nodos */
body.sin-burbujas .burbuja { display: none; }

/* Los carros de los choferes se van con ellas: de lejos son ruido. */
.coche-mapa {
  opacity: var(--burb, 1);
  transition: opacity 160ms linear;
}
body.sin-burbujas .coche-mapa { display: none; }

/* a media rampa ya estorban menos si son mas chicas */
body.zoom-lejos .bu-eti b { font-size: 10.5px; }
body.zoom-lejos .bu-eti i { font-size: 8.5px; }

/* y la burbuja se encoge, que de lejos son muchas y se tapan */
body.zoom-lejos .burbuja,
body.zoom-lejos .bu-foto { width: 30px; height: 30px; }
body.zoom-lejos .burbuja.amigo,
body.zoom-lejos .burbuja.amigo .bu-foto { width: 36px; height: 36px; }
body.zoom-lejos .bu-ini { font-size: 13px; }

.burbuja, .bu-foto { transition: width 200ms ease, height 200ms ease; }

/* El amigo aguanta mas que un negocio: de lejos es justo lo que buscas.
   Ni el ni su nombre se apagan del todo con la rampa. */
.burbuja.amigo { opacity: max(0.75, var(--burb, 1)); }
.burbuja.amigo .bu-eti b { opacity: max(0.6, var(--eti, 1)); }
body.sin-burbujas .burbuja.amigo { display: block; }
body.zoom-lejos .burbuja.amigo .bu-eti b { font-size: 11px; }


/* =========================================================
   EL ZOOM, SUAVE
   Leaflet anima el zoom en 250 ms con una curva que frena mucho al
   final: se siente pesado. Con 150 ms y una curva que sale rapido y
   asienta, el pellizco responde al dedo en vez de ir detras de el.
   ========================================================= */
.leaflet-zoom-anim .leaflet-zoom-animated {
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.22, 1) !important;
}

/* El plano de las losas se sube a su propia capa del compositor: la
   tarjeta grafica mueve una textura ya hecha en vez de repintar el
   mapa en cada fotograma. Es lo que separa "suave" de "casi suave". */
.leaflet-tile-pane {
  will-change: transform;
  transform: translateZ(0);
}

/* Las burbujas cambian de tamano al cruzar el zoom de los nombres.
   Se hace con transform, no con width/height: animar el tamano obliga
   al navegador a recolocar 135 elementos en cada fotograma, y eso es
   justo lo que hacia el zoom lento. */
body.zoom-lejos .burbuja,
body.zoom-lejos .bu-foto { width: 46px; height: 46px; }
body.zoom-lejos .burbuja.amigo,
body.zoom-lejos .burbuja.amigo .bu-foto { width: 50px; height: 50px; }
body.zoom-lejos .bu-ini { font-size: 19px; }

body.zoom-lejos .burbuja {
  transform: scale(0.64);
  transform-origin: 50% 50%;
}
body.zoom-lejos .burbuja.amigo { transform: scale(0.74); }

.burbuja { transition: transform 180ms ease, opacity 160ms linear; }
.bu-foto { transition: none; }

/* mientras el mapa se mueve o hace zoom, nada de transiciones encima:
   son 135 elementos animandose a la vez sobre una animacion */
body.mapa-vivo .burbuja { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
  .burbuja { transition: none; }
}


/* =========================================================
   LA CAMARA
   A pantalla completa, con la fila de filtros abajo y el disparo
   en el medio. Todo por encima de todo lo demas.
   ========================================================= */
.camara {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  opacity: 0;
  transition: opacity 220ms ease;
}

.camara.abierta { opacity: 1; }
.camara.oculto { display: none !important; }

#cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transition: filter 200ms ease;
}

/* la camara de delante se ve como un espejo, que es como uno se mira */
#cam-video.espejo { transform: scaleX(-1); }

/* velo de arriba y abajo para que los botones se lean sobre cualquier foto */
.cam-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0,0,0,0.62) 0%, transparent 30%);
}

.cam-x,
.cam-girar {
  position: absolute;
  top: calc(var(--safe-arriba) + 14px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18, 21, 25, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(234, 241, 245, 0.16);
  color: var(--plata-luz);
  transition: transform var(--t-corto) ease;
}

.cam-x { left: 14px; }
.cam-girar { right: 14px; }
.cam-x:active, .cam-girar:active { transform: scale(0.92); }

.cam-x svg, .cam-girar svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.cam-aviso {
  position: absolute;
  top: calc(var(--safe-arriba) + 70px);
  left: 20px; right: 20px;
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r);
  background: rgba(18, 21, 25, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--pelo);
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}

.cam-aviso.oculto { display: none; }

/* ---------- el pie: filtros, disparo y nombre ---------- */
.cam-pie {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--safe-abajo) + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cam-filtros {
  display: flex;
  gap: 13px;
  width: 100%;
  /* medio ancho menos medio boton: asi el primero y el ultimo tambien
     pueden quedar en el centro de la pantalla */
  padding: 6px calc(50% - 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cam-filtros::-webkit-scrollbar { display: none; }

.cam-filtro {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  scroll-snap-align: center;
  border-radius: 50%;
  padding: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: transform var(--t-corto) ease, background var(--t-corto) ease;
}

.fil-muestra {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* una muestra de color sobre la que se ve el filtro sin abrir la foto */
  background: linear-gradient(140deg, #F0C27B 0%, #4B9FE1 45%, #2E9E6B 100%);
}

.cam-filtro.activo {
  background: var(--metal);
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.5);
}

.cam-disparo {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 120ms ease;
}

.cam-disparo:active { transform: scale(0.93); }

.disp-aro {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3.5px solid rgba(255, 255, 255, 0.92);
}

.disp-bola {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.cam-nombre {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* con la camara abierta no se ve nada del mapa por debajo */
body.con-camara .barra-baja,
body.con-camara .flotantes,
body.con-camara .pie-amigos,
body.con-camara .filtros,
body.con-camara .cara-alta,
body.con-camara .tiempo,
body.con-camara .lugar-alto { opacity: 0; pointer-events: none; }


/* =========================================================
   EL CHAT
   Dos pantallas: con quien hablas y la conversacion.
   ========================================================= */
.chat {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: var(--lienzo);
  opacity: 0;
  transition: opacity 220ms ease;
}

.chat.abierta { opacity: 1; }
.chat.oculto { display: none !important; }

/* El hueco de "elige una conversacion" es SOLO del ordenador: en el
   telefono la lista y la conversacion se turnan y no hay mitad vacia. */
.ch-nada { display: none; }

.ch-lista,
.ch-hilo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.ch-lista.oculto,
.ch-hilo.oculto { display: none; }

/* ---------- la cabecera ---------- */
.ch-alto {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(var(--safe-arriba) + 14px) 14px 12px;
  border-bottom: 1px solid var(--pelo-flojo);
  background: linear-gradient(180deg, #14181C 0%, #0C0F12 100%);
}

.ch-alto h2 {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -0.02em;
}

.ch-atras {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; place-items: center;
  color: var(--tinta);
}
.ch-atras svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ch-quien { min-width: 0; display: flex; flex-direction: column; }
.ch-quien b {
  font-size: 15.5px; font-weight: 700; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-quien i {
  font-style: normal; font-size: 11.5px; color: var(--plata-media);
}

.ch-foto {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--plata-media);
  color: #0B0E11;
  font-size: 16px; font-weight: 800;
}
.ch-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- la lista ---------- */
.ch-hilos {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 6px 0 calc(var(--safe-abajo) + 14px);
  overflow-y: auto;
}

.ch-hilo-fila {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  text-align: left;
  transition: background var(--t-corto) ease;
}

.ch-hilo-fila:active { background: rgba(255, 255, 255, 0.05); }

.ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-txt b {
  font-size: 15px; font-weight: 700; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-txt i {
  font-style: normal; font-size: 13px; color: var(--apagado);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-txt i.flojo { color: var(--tenue); }

.ch-lado {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.ch-hace { font-size: 11px; color: var(--tenue); }

.ch-bola {
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--rojo);
  color: #fff;
  font-size: 11px; font-weight: 800;
}

.ch-vacio {
  margin: 40px 30px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--apagado);
}
.ch-vacio.oculto { display: none; }

/* ---------- la conversacion ---------- */
.ch-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overscroll-behavior: contain;
}

.msj {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 7px;
}

.msj.mio  { align-self: flex-end;   align-items: flex-end; }
.msj.suyo { align-self: flex-start; align-items: flex-start; }

.msj-cuerpo {
  padding: 9px 13px;
  border-radius: 17px;
  font-size: 14.5px;
  line-height: 1.4;
  word-break: break-word;
}

/* el mio en metal, el suyo en cristal: se distingue de un vistazo */
.msj.mio .msj-cuerpo {
  background: var(--metal);
  color: var(--sobre-metal);
  font-weight: 600;
  border-bottom-right-radius: 6px;
}

.msj.suyo .msj-cuerpo {
  background: #1B2026;
  color: var(--tinta);
  border: 1px solid var(--pelo-flojo);
  border-bottom-left-radius: 6px;
}

.msj-foto { display: block; max-width: 100%; border-radius: 12px; }

.msj-hora { font-size: 10.5px; color: var(--tenue); padding: 0 4px; }

/* ---------- escribir ---------- */
.ch-escribir {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px calc(var(--safe-abajo) + 12px);
  border-top: 1px solid var(--pelo-flojo);
  background: linear-gradient(180deg, #101418 0%, #0A0D10 100%);
}

#ch-texto {
  flex: 1;
  height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pelo);
  color: var(--tinta);
  font-size: 14.5px;
  font-family: inherit;
}

#ch-texto::placeholder { color: var(--tenue); }
#ch-texto:focus { outline: none; border-color: rgba(188, 199, 206, 0.4); }

.ch-enviar {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--metal);
  color: var(--sobre-metal);
  transition: transform var(--t-corto) ease, opacity var(--t-corto) ease;
}

.ch-enviar:active { transform: scale(0.92); }
.ch-enviar:disabled { opacity: 0.5; }

.ch-enviar svg {
  width: 20px; height: 20px;
  fill: currentColor; stroke: none;
  margin-left: -2px;
}

/* con el chat abierto no se ve el mapa por debajo */
body.con-chat .barra-baja,
body.con-chat .flotantes,
body.con-chat .pie-amigos,
body.con-chat .filtros,
body.con-chat .cara-alta,
body.con-chat .tiempo,
body.con-chat .lugar-alto { opacity: 0; pointer-events: none; }


/* =========================================================
   NADA DE ZOOM POR DOBLE TOQUE
   El meta viewport no basta en iOS: Safari sigue acercando con dos
   toques si el elemento no lo prohibe. Esto es lo que de verdad lo
   apaga, y de paso quita el retardo de 300 ms al tocar.
   ========================================================= */
html, body { touch-action: manipulation; }

/* El mapa se lo gestiona TODO Leaflet, pellizco incluido. Poniendo
   aqui "pinch-zoom" se le estaba dando permiso al NAVEGADOR para
   ampliar la pagina encima del mapa, que es justo lo que no queremos. */
#mapa, .leaflet-container { touch-action: none; }

/* y la pagina no rebota ni arrastra al documento de detras */
html, body { overscroll-behavior: none; }

/* los botones no se acercan ni se seleccionan por insistir */
button, .filtro, .rueda, .pastilla, .pest, .casilla {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}


/* La inicial vive DEBAJO de la foto: si la foto carga, la tapa; si no
   llega, se queda ella. Asi no hay parpadeo ni hueco blanco. */
.bu-foto { position: relative; }
.bu-foto img {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* =========================================================
   DE LEJOS, SOLO LOS PUNTOS
   ========================================================= */
/* EL MAPA SE LIMPIA AL ALEJAR.
   Dos rampas que escribe app.js en cada paso del zoom:
     --eti   los nombres  (1 cerca, 0 lejos)
     --burb  las burbujas (1 cerca, 0 lejos, un poco despues)
   Primero se van los nombres, despues las burbujas enteras, y abajo del
   todo queda el mapa con su calor. Acercando vuelven por el mismo
   camino, suavemente. */
.bu-eti {
  opacity: var(--eti, 1);
  transition: opacity 90ms linear;
}

.burbuja {
  opacity: var(--burb, 1);
  transition: opacity 160ms linear;
}

/* apagadas del todo: fuera del arbol, que son 135 nodos */
body.sin-burbujas .burbuja { display: none; }

/* Los carros de los choferes se van con ellas: de lejos son ruido. */
.coche-mapa {
  opacity: var(--burb, 1);
  transition: opacity 160ms linear;
}
body.sin-burbujas .coche-mapa { display: none; }

/* a media rampa ya estorban menos si son mas chicas */
body.zoom-lejos .bu-eti b { font-size: 10.5px; }
body.zoom-lejos .bu-eti i { font-size: 8.5px; }

/* y la burbuja se encoge, que de lejos son muchas y se tapan */
body.zoom-lejos .burbuja,
body.zoom-lejos .bu-foto { width: 30px; height: 30px; }
body.zoom-lejos .burbuja.amigo,
body.zoom-lejos .burbuja.amigo .bu-foto { width: 36px; height: 36px; }
body.zoom-lejos .bu-ini { font-size: 13px; }

.burbuja, .bu-foto { transition: width 200ms ease, height 200ms ease; }

/* El amigo aguanta mas que un negocio: de lejos es justo lo que buscas.
   Ni el ni su nombre se apagan del todo con la rampa. */
.burbuja.amigo { opacity: max(0.75, var(--burb, 1)); }
.burbuja.amigo .bu-eti { opacity: max(0.55, var(--eti, 1)); }
body.sin-burbujas .burbuja.amigo { display: block; }
body.zoom-lejos .burbuja.amigo .bu-eti b { font-size: 11px; }


/* =========================================================
   EL ZOOM, SUAVE
   Leaflet anima el zoom en 250 ms con una curva que frena mucho al
   final: se siente pesado. Con 150 ms y una curva que sale rapido y
   asienta, el pellizco responde al dedo en vez de ir detras de el.
   ========================================================= */
.leaflet-zoom-anim .leaflet-zoom-animated {
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.22, 1) !important;
}

/* El plano de las losas se sube a su propia capa del compositor: la
   tarjeta grafica mueve una textura ya hecha en vez de repintar el
   mapa en cada fotograma. Es lo que separa "suave" de "casi suave". */
.leaflet-tile-pane {
  will-change: transform;
  transform: translateZ(0);
}

/* Las burbujas cambian de tamano al cruzar el zoom de los nombres.
   Se hace con transform, no con width/height: animar el tamano obliga
   al navegador a recolocar 135 elementos en cada fotograma, y eso es
   justo lo que hacia el zoom lento. */
body.zoom-lejos .burbuja,
body.zoom-lejos .bu-foto { width: 46px; height: 46px; }
body.zoom-lejos .burbuja.amigo,
body.zoom-lejos .burbuja.amigo .bu-foto { width: 50px; height: 50px; }
body.zoom-lejos .bu-ini { font-size: 19px; }

body.zoom-lejos .burbuja {
  transform: scale(0.64);
  transform-origin: 50% 50%;
}
body.zoom-lejos .burbuja.amigo { transform: scale(0.74); }

.burbuja { transition: transform 180ms ease, opacity 160ms linear; }
.bu-foto { transition: none; }

/* mientras el mapa se mueve o hace zoom, nada de transiciones encima:
   son 135 elementos animandose a la vez sobre una animacion */
body.mapa-vivo .burbuja { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
  .burbuja { transition: none; }
}


/* =========================================================
   LA CAMARA
   A pantalla completa, con la fila de filtros abajo y el disparo
   en el medio. Todo por encima de todo lo demas.
   ========================================================= */
.camara {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  opacity: 0;
  transition: opacity 220ms ease;
}

.camara.abierta { opacity: 1; }
.camara.oculto { display: none !important; }

#cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transition: filter 200ms ease;
}

/* la camara de delante se ve como un espejo, que es como uno se mira */
#cam-video.espejo { transform: scaleX(-1); }

/* velo de arriba y abajo para que los botones se lean sobre cualquier foto */
.cam-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0,0,0,0.62) 0%, transparent 30%);
}

.cam-x,
.cam-girar {
  position: absolute;
  top: calc(var(--safe-arriba) + 14px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18, 21, 25, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(234, 241, 245, 0.16);
  color: var(--plata-luz);
  transition: transform var(--t-corto) ease;
}

.cam-x { left: 14px; }
.cam-girar { right: 14px; }
.cam-x:active, .cam-girar:active { transform: scale(0.92); }

.cam-x svg, .cam-girar svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.cam-aviso {
  position: absolute;
  top: calc(var(--safe-arriba) + 70px);
  left: 20px; right: 20px;
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r);
  background: rgba(18, 21, 25, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--pelo);
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}

.cam-aviso.oculto { display: none; }

/* ---------- el pie: filtros, disparo y nombre ---------- */
.cam-pie {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--safe-abajo) + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cam-filtros {
  display: flex;
  gap: 13px;
  width: 100%;
  /* medio ancho menos medio boton: asi el primero y el ultimo tambien
     pueden quedar en el centro de la pantalla */
  padding: 6px calc(50% - 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cam-filtros::-webkit-scrollbar { display: none; }

.cam-filtro {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  scroll-snap-align: center;
  border-radius: 50%;
  padding: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: transform var(--t-corto) ease, background var(--t-corto) ease;
}

.fil-muestra {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* una muestra de color sobre la que se ve el filtro sin abrir la foto */
  background: linear-gradient(140deg, #F0C27B 0%, #4B9FE1 45%, #2E9E6B 100%);
}

.cam-filtro.activo {
  background: var(--metal);
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.5);
}

.cam-disparo {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 120ms ease;
}

.cam-disparo:active { transform: scale(0.93); }

.disp-aro {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3.5px solid rgba(255, 255, 255, 0.92);
}

.disp-bola {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.cam-nombre {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* con la camara abierta no se ve nada del mapa por debajo */
body.con-camara .barra-baja,
body.con-camara .flotantes,
body.con-camara .pie-amigos,
body.con-camara .filtros,
body.con-camara .cara-alta,
body.con-camara .tiempo,
body.con-camara .lugar-alto { opacity: 0; pointer-events: none; }


/* =========================================================
   EL CHAT
   Dos pantallas: con quien hablas y la conversacion.
   ========================================================= */
.chat {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: var(--lienzo);
  opacity: 0;
  transition: opacity 220ms ease;
}

.chat.abierta { opacity: 1; }
.chat.oculto { display: none !important; }

.ch-lista,
.ch-hilo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.ch-lista.oculto,
.ch-hilo.oculto { display: none; }

/* ---------- la cabecera ---------- */
.ch-alto {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(var(--safe-arriba) + 14px) 14px 12px;
  border-bottom: 1px solid var(--pelo-flojo);
  background: linear-gradient(180deg, #14181C 0%, #0C0F12 100%);
}

.ch-alto h2 {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -0.02em;
}

.ch-atras {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; place-items: center;
  color: var(--tinta);
}
.ch-atras svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ch-quien { min-width: 0; display: flex; flex-direction: column; }
.ch-quien b {
  font-size: 15.5px; font-weight: 700; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-quien i {
  font-style: normal; font-size: 11.5px; color: var(--plata-media);
}

.ch-foto {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--plata-media);
  color: #0B0E11;
  font-size: 16px; font-weight: 800;
}
.ch-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- la lista ---------- */
.ch-hilos {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 6px 0 calc(var(--safe-abajo) + 14px);
  overflow-y: auto;
}

.ch-hilo-fila {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  text-align: left;
  transition: background var(--t-corto) ease;
}

.ch-hilo-fila:active { background: rgba(255, 255, 255, 0.05); }

.ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-txt b {
  font-size: 15px; font-weight: 700; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-txt i {
  font-style: normal; font-size: 13px; color: var(--apagado);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-txt i.flojo { color: var(--tenue); }

.ch-lado {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.ch-hace { font-size: 11px; color: var(--tenue); }

.ch-bola {
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--rojo);
  color: #fff;
  font-size: 11px; font-weight: 800;
}

.ch-vacio {
  margin: 40px 30px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--apagado);
}
.ch-vacio.oculto { display: none; }

/* ---------- la conversacion ---------- */
.ch-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overscroll-behavior: contain;
}

.msj {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 7px;
}

.msj.mio  { align-self: flex-end;   align-items: flex-end; }
.msj.suyo { align-self: flex-start; align-items: flex-start; }

.msj-cuerpo {
  padding: 9px 13px;
  border-radius: 17px;
  font-size: 14.5px;
  line-height: 1.4;
  word-break: break-word;
}

/* el mio en metal, el suyo en cristal: se distingue de un vistazo */
.msj.mio .msj-cuerpo {
  background: var(--metal);
  color: var(--sobre-metal);
  font-weight: 600;
  border-bottom-right-radius: 6px;
}

.msj.suyo .msj-cuerpo {
  background: #1B2026;
  color: var(--tinta);
  border: 1px solid var(--pelo-flojo);
  border-bottom-left-radius: 6px;
}

.msj-foto { display: block; max-width: 100%; border-radius: 12px; }

.msj-hora { font-size: 10.5px; color: var(--tenue); padding: 0 4px; }

/* ---------- escribir ---------- */
.ch-escribir {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px calc(var(--safe-abajo) + 12px);
  border-top: 1px solid var(--pelo-flojo);
  background: linear-gradient(180deg, #101418 0%, #0A0D10 100%);
}

#ch-texto {
  flex: 1;
  height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pelo);
  color: var(--tinta);
  font-size: 14.5px;
  font-family: inherit;
}

#ch-texto::placeholder { color: var(--tenue); }
#ch-texto:focus { outline: none; border-color: rgba(188, 199, 206, 0.4); }

.ch-enviar {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--metal);
  color: var(--sobre-metal);
  transition: transform var(--t-corto) ease, opacity var(--t-corto) ease;
}

.ch-enviar:active { transform: scale(0.92); }
.ch-enviar:disabled { opacity: 0.5; }

.ch-enviar svg {
  width: 20px; height: 20px;
  fill: currentColor; stroke: none;
  margin-left: -2px;
}

/* con el chat abierto no se ve el mapa por debajo */
body.con-chat .barra-baja,
body.con-chat .flotantes,
body.con-chat .pie-amigos,
body.con-chat .filtros,
body.con-chat .cara-alta,
body.con-chat .tiempo,
body.con-chat .lugar-alto { opacity: 0; pointer-events: none; }


/* El aviso de que el navegador tiene la pagina ampliada. */
.aviso-zoom {
  position: fixed;
  z-index: 60;
  left: 12px; right: 12px;
  bottom: calc(var(--safe-abajo) + 74px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 15px;
  background: var(--vidrio-denso);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-baja);
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.4;
}

.aviso-zoom b { color: #FFFFFF; }

.aviso-zoom button {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--metal);
  color: var(--sobre-metal);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
}


/* =========================================================
   EL GLOBO
   El final del zoom out. Se funde encima del mapa plano segun la
   variable --globo, que escribe globo.js con el zoom.
   ========================================================= */
/* OJO: esta clase NO puede llamarse ".globo".
   Ya existia un ".globo" (la burbujita de "No se comparte la ubicacion",
   mas arriba) y el lienzo se llevaba SUS reglas: border-radius de 999px
   y una animacion con fill-mode "both" cuyo ultimo fotograma deja la
   opacidad en 1 para siempre. Resultado: un ovalo negro a pantalla
   completa, encima del mapa y sin forma de quitarlo. El mapa parecia
   roto y no lo estaba. */
.globo-mundo {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lienzo);
  opacity: var(--globo, 0);
  pointer-events: none;
  transition: opacity 220ms linear;
}

/* con el globo entero, es el que recibe los toques */
body.con-globo .globo-mundo { pointer-events: auto; }

/* y lo del mapa plano estorba: se retira */
body.con-globo .burbuja,
body.con-globo .coche-mapa,
body.con-globo .capa-calor,
body.con-globo .pin-yo { opacity: calc(1 - var(--globo, 0)); }

body.con-globo .lugar-alto { opacity: calc(1 - var(--globo, 0)); }

/* =========================================================
   EL MATERIAL, APLICADO

   Una sola clase para todo lo que flota: ruedas, pastillas, filtros,
   pestanas. Asi el material es el MISMO en toda la aplicacion y se
   cambia en un sitio.
   ========================================================= */
.lg {
  position: relative;
  background: var(--lg-cara);
  -webkit-backdrop-filter: var(--lg-desenfoque);
  backdrop-filter: var(--lg-desenfoque);
  border: 1px solid var(--lg-borde);
  box-shadow: var(--lg-relieve), var(--lg-sombra);
  isolation: isolate;
}

/* el brillo especular: una franja de luz que cruza el cristal por
   arriba y se apaga enseguida. Sin esto el cristal parece plastico. */
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 52%);
  opacity: 0.9;
  z-index: -1;
}

/* Reacciona al dedo, como el de Apple: se hunde un pelin y el cristal
   se aclara, como si la luz se concentrara donde tocas. */
.lg:active { transform: scale(0.94); }
.lg:active::before { opacity: 1; }

/* Con el mapa en movimiento el desenfoque caro se apaga: es la regla de
   oro de rendimiento de esta aplicacion y el material no la rompe. */
body.mapa-vivo .lg {
  -webkit-backdrop-filter: blur(9px) saturate(1.4);
  backdrop-filter: blur(9px) saturate(1.4);
}

/* =========================================================
   EL MAPA CLARO, A LO SNAPCHAT

   El claro estaba "muy blanco": era light-v11, gris sobre blanco, sin
   mar ni parques. Ahora la base es streets-v12, que si trae tierra
   templada, agua y verde. Aqui se le quita lo que le sobra (viene mas
   saturado y con etiquetas de colorines) y, sobre todo, SE DA LA VUELTA
   AL CRISTAL: en Snapchat las pastillas del mapa claro son blancas con
   letra oscura, no negras. Un cristal oscuro sobre un mapa claro es una
   mancha; uno claro se apoya en el mapa y se lee.
   ========================================================= */
body.mapa-claro {
  /* el material, en su version clara */
  --lg-cara: linear-gradient(140deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.72) 48%,
      rgba(255, 255, 255, 0.8) 100%);
  /* El filo era blanco, y sobre un mapa claro un filo blanco no es un
     filo: es nada. Las pastillas se quedaban en fantasmas encima de las
     calles. En claro el canto se dibuja con una linea gris muy floja y
     con la sombra, que es como se separa el papel del papel. */
  --lg-borde: rgba(11, 14, 17, 0.09);
  --lg-relieve:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
      inset 0 -1px 0.5px rgba(11, 14, 17, 0.05);
  --lg-sombra: 0 1px 2px rgba(11, 14, 17, 0.12), 0 6px 18px rgba(11, 14, 17, 0.16);

  /* y la tinta, que ahora va encima de blanco */
  --tinta: #14181C;
  --tinta-suave: #3B444B;
  --apagado: #667079;
  --tenue: #8A939B;
  --pelo: rgba(11, 14, 17, 0.1);
  --lienzo: #EFEDE8;          /* el color de la tierra, para los huecos */
}

/* El brillo especular es luz sobre cristal oscuro. Sobre cristal claro
   solo lo ensucia: se apaga. */
body.mapa-claro .lg::before,
body.mapa-claro .rueda::before,
body.mapa-claro .filtro::before,
body.mapa-claro .pest::before { content: none; }

/* El claro va TAL CUAL sale de Mapbox: el streets-v12 de toda la vida,
   con el mar azul, los parques verdes y las autopistas naranjas. Aqui
   habia un saturate(0.68) brightness(1.05) que lo dejaba lavado; el
   jefe lo dijo dos veces, "esta muy blanco", y el culpable era ese
   filtro, no el estilo. Sin filtro ademas se ahorra composicion en
   cada fotograma, que es lo que mas cuesta en un telefono viejo. */
body.mapa-claro .leaflet-tile { filter: none; }

/* Los velos negros no pintan nada sobre un mapa claro: se vuelven luz.
   Van MAS FLOJOS que antes. Con el mapa a todo color, un velo blanco
   fuerte se comia el azul del mar en la mitad de arriba de la pantalla
   y volvia a dejarlo todo blanco por otra via. Lo justo para que las
   pastillas tengan sobre que apoyarse, ni un punto mas. */
body.mapa-claro .velo-alto {
  opacity: 1;
  background: linear-gradient(to bottom,
    rgba(250, 250, 248, 0.62) 0%,
    rgba(250, 250, 248, 0.3) 45%,
    rgba(250, 250, 248, 0) 100%);
}
body.mapa-claro .velo-mapa { opacity: 0.18; }

/* la pastilla elegida se da la vuelta: oscura sobre las blancas */
body.mapa-claro .filtro.activo {
  background: #14181C;
  border-color: transparent;
  color: #F4F7F9;
}

/* y la seccion en la que estas, en el riel */
body.mapa-claro .pest.activa {
  background: #14181C;
  border-color: transparent;
  color: #F4F7F9;
}

/* Lo que quedaba oscuro suelto sobre el mapa claro: la pastilla del
   tiempo, la brujula y la barra de abajo del telefono. Una mancha negra
   sobre un mapa claro canta muchisimo; en Snapchat todo eso es blanco. */
body.mapa-claro .tiempo,
body.mapa-claro .brujula {
  background: var(--lg-cara);
  -webkit-backdrop-filter: var(--lg-desenfoque);
  backdrop-filter: var(--lg-desenfoque);
  border: 1px solid var(--lg-borde);
  box-shadow: var(--lg-relieve), var(--lg-sombra);
  color: var(--tinta);
}

body.mapa-claro .barra-baja {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.9) 55%,
    rgba(255, 255, 255, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(11, 14, 17, 0.06),
    0 -8px 24px rgba(11, 14, 17, 0.1);
}

/* el filo de luz de la barra, que era blanco sobre negro, se apaga */
body.mapa-claro .barra-baja::before { opacity: 0.25; }
body.mapa-claro .barra-baja::after { content: none; }

/* En el telefono la pestana activa no puede ser una pastilla negra: ahi
   no hay pastilla, es el icono suelto. Se pinta la tinta y ya. */
body.mapa-claro:not(.riel) .barra-baja .pest.activa {
  background: none;
  color: var(--tinta);
}

/* la cara de arriba: circulo claro con la silueta oscura */
body.mapa-claro .cara-foto {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(11, 14, 17, 0.18);
}
body.mapa-claro .cara-silueta circle,
body.mapa-claro .cara-silueta path { fill: #8A939B; }

/* El nombre del sitio llevaba una sombra negra para despegarse del mapa
   oscuro. Sobre el claro esa sombra lo emborrona: se cambia por una
   blanca, que es la que separa letra oscura de mapa claro. */
body.mapa-claro .lugar-alto b,
body.mapa-claro .lugar-alto i {
  color: var(--tinta);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95),
               0 0 10px rgba(255, 255, 255, 0.8);
}
body.mapa-claro .lugar-alto i { color: var(--apagado); }

/* El boton de cuenta del riel no existe en el telefono: alli la cuenta
   se abre desde la cara de arriba, que si esta. */
.solo-riel { display: none; }

/* "Añadir amigos" suelto sobre el mapa se retira TAMBIEN del telefono.
   Buscar a alguien, seguirlo y escribirle son la misma cosa, y esa cosa
   vive en Chat, como en Instagram. El boton sigue en el HTML porque es
   el que abre la hoja: lo que se quita es su sitio en pantalla, no la
   funcion. */
.pie-amigos { display: none; }

/* el cartelito de la red de seguridad (rescate.js) */
.aviso-rescate {
  position: fixed;
  z-index: 40;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--vidrio-denso);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra-flota);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   LA LLUVIA (clima.js)

   Va por encima del mapa y por DEBAJO de todo lo demas: el agua no
   puede taparte un boton ni comerse un toque. De ahi el z-index bajo y
   el pointer-events: none.
   ========================================================= */
.clima {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* Con tormenta el mapa se apaga un punto, como cuando se cierra el
   cielo de verdad. Es lo que hace que el agua se crea. */
body.con-tormenta .leaflet-tile-pane {
  filter: brightness(0.82) saturate(0.85);
  transition: filter 600ms ease;
}
body.con-lluvia:not(.con-tormenta) .leaflet-tile-pane {
  filter: brightness(0.93);
  transition: filter 600ms ease;
}

/* Sobre el mapa claro el aguacero no puede dejarlo negro: se toca menos */
body.mapa-claro.con-tormenta .leaflet-tile-pane {
  filter: brightness(0.9) saturate(0.7);
}
/* Llover no es descolorir: con lluvia floja el mapa claro solo baja
   un punto de luz. El saturate(0.68) que habia aqui era otra puerta
   trasera por la que el mapa volvia a salir lavado. */
body.mapa-claro.con-lluvia:not(.con-tormenta) .leaflet-tile-pane {
  filter: brightness(0.95);
}

/* mientras se arrastra, ni filtros ni agua: la regla de siempre */
body.mapa-vivo .leaflet-tile-pane { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .clima { display: none; }
  body.con-tormenta .leaflet-tile-pane,
  body.con-lluvia .leaflet-tile-pane { filter: none; }
}

/* =========================================================
   EL MAPA EN 3D

   Leaflet es plano y siempre lo sera: no hay forma de pedirle a
   Mapbox una losa "inclinada". Lo que se hace es tumbar el SUELO
   entero con perspectiva de CSS, igual que se tumba una foto, y
   volver a poner de pie lo que es un cartel (las burbujas y el pin
   del destino). Los carros NO se levantan: son sprites vistos desde
   arriba y tumbados sobre la calle es justo como se ven bien.

   Dos cosas que costaron y conviene no volver a romper:

   1) La perspectiva va en #mundo y la inclinacion en #mapa, y el
      centro de giro de los dos cae EN EL MISMO PUNTO (el centro de
      abajo de la pantalla). Si no coinciden, las cuentas para saber
      donde tocaste dejan de valer.

   2) transform-style: preserve-3d tiene que llegar desde #mapa hasta
      el marcador, o el rotateX de vuelta de la burbuja no la levanta:
      la aplasta otra vez. Y preserve-3d lo mata un overflow:hidden,
      que es justo lo que trae .leaflet-container; por eso aqui se le
      quita y quien recorta pasa a ser #mundo.

   El suelo se sale de la pantalla por arriba y por los lados a
   proposito: al inclinarse, lo de lejos encoge, y sin ese margen se
   verian huecos. Eso son losas de mas, asi que el 3D NO viene
   encendido: se enciende con el boton y se apaga solo cuando el mapa
   esta lejos, donde ademas no aporta nada.
   ========================================================= */
body.mapa-3d {
  --pitch: 30deg;
  --contra: -30deg;
}

body.mapa-3d #mundo {
  perspective: 1100px;
  perspective-origin: 50% 100%;
}

body.mapa-3d #mapa {
  top: -78%;
  left: -16%;
  right: -16%;
  overflow: visible;             /* recorta #mundo; ver la nota (2) */
  transform: rotateX(var(--pitch));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

/* la cadena del 3D, de la caja al marcador */
body.mapa-3d .leaflet-map-pane,
body.mapa-3d .leaflet-pane,
body.mapa-3d .leaflet-marker-icon {
  transform-style: preserve-3d;
}

/* ---------- lo que se pone de pie ----------
   El giro es el contrario y exacto: la burbuja mira otra vez a la
   camara. Gira desde su base, asi que queda flotando sobre el punto
   en vez de tumbada encima, que es como se ve en Snapchat. */
body.mapa-3d .burbuja,
body.mapa-3d .pin-destino > svg {
  transform: rotateX(var(--contra));
  transform-origin: 50% 100%;
}

/* el pin cae con una animacion propia: que no se lleve por delante
   el giro de su svg */
body.mapa-3d .pin-destino { transform-style: preserve-3d; }

/* de lejos las burbujas encogen; en 3D encogen Y siguen de pie */
body.mapa-3d.zoom-lejos .burbuja {
  transform: rotateX(var(--contra)) scale(0.64);
  transform-origin: 50% 100%;
}
body.mapa-3d.zoom-lejos .burbuja.amigo {
  transform: rotateX(var(--contra)) scale(0.74);
}

/* ---------- el horizonte ----------
   El suelo se acaba en algun sitio, y ese canto se ve. Encima va una
   bruma que lo funde, que es lo que hace el ojo con la distancia de
   verdad. Corta: solo la franja de arriba, o volveriamos a lavar el
   mapa que tanto costo poner a color. */
body.mapa-3d #mundo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 24%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bruma-alta) 0%,
    var(--bruma-baja) 58%,
    transparent 100%);
}

body.mapa-3d {
  --bruma-alta: rgba(10, 13, 17, 0.92);
  --bruma-baja: rgba(10, 13, 17, 0.34);
}

body.mapa-3d.mapa-claro {
  --bruma-alta: rgba(196, 224, 243, 0.95);
  --bruma-baja: rgba(214, 234, 247, 0.36);
}

body.mapa-3d.mapa-satelite {
  --bruma-alta: rgba(23, 30, 38, 0.9);
  --bruma-baja: rgba(23, 30, 38, 0.3);
}

/* ---------- el boton ---------- */
.rueda-3d { position: relative; }

.rueda-eti {
  position: absolute;
  right: -1px;
  bottom: -1px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 5px;
  background: var(--tinta);
  color: var(--lienzo);
  opacity: 0.55;
}

.rueda-3d[aria-pressed="true"] {
  color: var(--lienzo);
  background: var(--tinta);
  border-color: transparent;
}

.rueda-3d[aria-pressed="true"] .rueda-eti {
  opacity: 1;
  background: var(--verde);
  color: #06210F;
}

/* Quien pide menos movimiento no quiere un mapa girando: se queda
   plano aunque el boton este puesto. */
@media (prefers-reduced-motion: reduce) {
  body.mapa-3d #mapa {
    top: 0; left: 0; right: 0;
    transform: none;
  }
  body.mapa-3d #mundo::after { content: none; }
  body.mapa-3d .burbuja,
  body.mapa-3d .pin-destino > svg { transform: none; }
  body.mapa-3d.zoom-lejos .burbuja { transform: scale(0.64); }
  body.mapa-3d.zoom-lejos .burbuja.amigo { transform: scale(0.74); }
}


/* =========================================================
   29-AGO-2026. LO QUE PIDIO EL JEFE MIRANDO LA PANTALLA DE PC

   Cuatro cosas, y todas se resuelven aqui abajo para no ir tocando
   veinte sitios del fichero:
     1. el menu del ordenador SIN FONDO: solo los botones;
     2. el perfil, arriba y separado del menu, con su foto;
     3. con el mapa claro NINGUNA ventana puede ser oscura;
     4. en el ordenador, lo que en el telefono sube desde abajo se
        abre como un cuadro en el centro de la pantalla.
   ========================================================= */

/* ---------------------------------------------------------
   1 y 2. EL RIEL DEL ORDENADOR
   --------------------------------------------------------- */
@media (min-width: 1000px) {
  /* La banda blanca del modo claro se comia el borde izquierdo del
     mapa. Esa regla es para la barra del TELEFONO, que ahi si es una
     barra; aqui no hay barra, hay seis botones sueltos. */
  body.mapa-claro .barra-baja,
  .barra-baja {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  /* El perfil sale del menu: va arriba del todo, en la misma columna,
     y con un hueco de verdad por debajo para que se lea como lo que
     es, tu cuenta, y no como una seccion mas. */
  .barra-baja .solo-riel {
    position: fixed;
    top: calc(var(--safe-arriba) + 14px);
    left: calc((var(--riel) - 46px) / 2);
    width: 46px;
    height: 46px;
    padding: 2px;
    background: var(--metal);
    border: 0;
    box-shadow: var(--sombra-flota);
  }

  /* sobre metal no pinta nada un filo de luz de cristal */
  .barra-baja .solo-riel::before { content: none; }

  /* la foto, o la inicial sobre tu color, llenando el circulo */
  .pest-cara {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #14181C;
    color: var(--plata-luz);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .pest-cara img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* con foto o inicial, el monigote sobra */
  .solo-riel.con-cara .pest-ic { display: none; }
  .solo-riel:not(.con-cara) .pest-cara { display: none; }

  /* Los botones sobre el mapa claro.

     La regla que apagaba la pastilla de la seccion activa se escribio
     para el TELEFONO, donde el menu no tiene pastillas: alli el icono
     va suelto y basta con pintar la tinta. En el ordenador si hay
     pastilla, y esa regla dejaba justo el boton de la seccion en la
     que estas sin fondo y sin borde, o sea invisible. Aqui se le
     devuelve el cuerpo: los cinco en blanco y el de la seccion en
     negro, que es como se dice "estas aqui" sobre un mapa claro. */
  body.mapa-claro .pest {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 14, 17, 0.08);
    box-shadow: 0 1px 2px rgba(11, 14, 17, 0.12), 0 6px 16px rgba(11, 14, 17, 0.14);
    color: var(--tinta-suave);
  }

  body.mapa-claro .barra-baja .pest.activa,
  body.mapa-claro:not(.riel) .barra-baja .pest.activa {
    background: #14181C;
    border-color: transparent;
    color: #F4F7F9;
  }
}

/* ---------------------------------------------------------
   3. CON EL MAPA CLARO, NADA OSCURO

   El tema claro solo le habia dado la vuelta al cristal de los
   botones. Las ventanas (cuenta, amigos, chat, capas, el panel del
   viaje) seguian pintadas con los tokens del tema oscuro, asi que
   sobre un mapa claro se abria un agujero negro. Aqui se les da la
   vuelta a TODOS los tokens de superficie, que es lo que hace que
   una ventana sea clara u oscura.
   --------------------------------------------------------- */
body.mapa-claro {
  --vidrio: rgba(255, 255, 255, 0.96);
  --vidrio-denso: rgba(255, 255, 255, 0.97);
  --vidrio-borde: rgba(11, 14, 17, 0.1);
  --vidrio-brillo: rgba(11, 14, 17, 0.05);
  --vidrio-sombra: rgba(11, 14, 17, 0.18);
  --pelo-flojo: rgba(11, 14, 17, 0.05);

  --sombra-baja: 0 1px 2px rgba(11, 14, 17, 0.1), 0 8px 22px rgba(11, 14, 17, 0.14);
  --sombra-flota: 0 1px 3px rgba(11, 14, 17, 0.18);
  --sombra-alta: 0 1px 2px rgba(11, 14, 17, 0.12), 0 -2px 46px rgba(11, 14, 17, 0.16);

  /* El texto y los iconos "metalicos" son un degradado de plata: sobre
     blanco desaparecen. En claro el metal se vuelve grafito. */
  --metal: linear-gradient(148deg,
      #C9D2D8 0%, #8D979E 18%, #5A646B 40%,
      #79838A 58%, #465057 70%, #6A737A 84%, #98A2A9 100%);
  --metal-texto: linear-gradient(150deg,
      #4A545C 0%, #20262B 30%, #39424A 55%, #6A737A 100%);
  --sobre-metal: #F4F7F9;

  --verde: #2F6F4F;          /* el pulso de "buscando chofer" */
  --verde-hondo: #1F4B36;
  --casing: rgba(255, 255, 255, 0.9);
}

/* Los velos de detras de cada ventana eran casi negros: sobre el mapa
   claro se ven como una nube de tormenta. Se quedan en gris humo, lo
   justo para que la ventana se despegue del mapa. */
body.mapa-claro .hoja-fondo,
body.mapa-claro .am-fondo,
body.mapa-claro .comp-fondo { background: rgba(28, 36, 45, 0.32); }

/* la caja de amigos llevaba su degradado negro escrito a mano */
body.mapa-claro .am-caja {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
  border-top-color: var(--vidrio-borde);
}

/* el chat ocupa la pantalla entera y se pintaba del color del lienzo,
   que en claro ya es claro; lo que faltaba era el color de la letra */
body.mapa-claro .chat { background: #F7F8FA; color: var(--tinta); }
body.mapa-claro .ch-alto,
body.mapa-claro .ch-pie { border-color: var(--pelo); }

/* La cabecera del chat llevaba su degradado negro escrito a mano, asi
   que en claro quedaba una franja negra con letra negra encima: el
   titulo no se leia. */
body.mapa-claro .ch-alto {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
}
body.mapa-claro .ch-alto h2,
body.mapa-claro .ch-alto .hoja-x svg path { color: var(--tinta); stroke: var(--tinta); }
body.mapa-claro .ch-pie { background: #FFFFFF; }

/* Las burbujas del chat. La suya se pintaba de un azul casi negro con
   la letra clara del tema oscuro: sobre blanco quedaba texto oscuro
   sobre fondo oscuro y no se leia una palabra. La mia iba en metal, que
   sobre blanco tampoco se lee. */
body.mapa-claro .msj.suyo .msj-cuerpo {
  background: #EDEFF2;
  color: var(--tinta);
  border-color: rgba(11, 14, 17, 0.06);
}

body.mapa-claro .msj.mio .msj-cuerpo {
  background: #14181C;
  background-image: none;
  color: #F4F7F9;
}

body.mapa-claro .msj-hora { color: var(--tenue); }

/* la caja de escribir y el boton de enviar */
body.mapa-claro .ch-escribir {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
  border-top-color: var(--pelo);
}

body.mapa-claro #ch-texto {
  background: rgba(11, 14, 17, 0.045);
  border-color: var(--pelo);
  color: var(--tinta);
}

body.mapa-claro .ch-enviar {
  background: #14181C;
  background-image: none;
  color: #F4F7F9;
}

/* el menu de capas y el panel del viaje */
body.mapa-claro .capas-menu { border-color: var(--vidrio-borde); }
body.mapa-claro .panel-fondo { background: var(--vidrio-denso); }

/* El panel del viaje se pinta su propio degradado negro para que el
   mapa no se cuele entre las letras. Sobre el mapa claro ese negro es
   la mancha mas grande de la pantalla, y encima la letra ya es oscura:
   el saludo y los sitios guardados no se leian. */
body.mapa-claro .panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
  border: 1px solid var(--vidrio-borde);
  border-bottom: 0;
}

body.mapa-claro .agarre-linea { background: rgba(11, 14, 17, 0.18); }

/* la fila de "Viaje / Mandado" y el buscador se apoyaban en el pelo
   claro del tema oscuro, que sobre blanco no se ve */
body.mapa-claro .chip-modo,
body.mapa-claro .buscador,
body.mapa-claro .lugar-ic,
body.mapa-claro .veh { background: rgba(11, 14, 17, 0.045); }

body.mapa-claro .modo.activo {
  background: #FFFFFF;
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(11, 14, 17, 0.14);
}

body.mapa-claro .veh.elegido {
  background: rgba(11, 14, 17, 0.075);
  border-color: rgba(11, 14, 17, 0.22);
}

body.mapa-claro .ahora { background: #14181C; color: #F4F7F9; }

/* La cara de la cuenta y el circulo del chofer eran tinta sobre lienzo:
   al dar la vuelta a los tokens quedaban blancos sobre blanco. */
body.mapa-claro .hoja-foto,
body.mapa-claro .chofer-foto,
body.mapa-claro .pest-cara,
body.mapa-claro .cara-foto { background: #2A3138; color: #F4F7F9; }

/* la pastilla de pago y las acciones, que se apoyaban en el pelo claro */
body.mapa-claro .chofer,
body.mapa-claro .pago { background: var(--pelo-flojo); }

/* el boton grande sigue siendo el mas oscuro de la pantalla: es el que
   manda, y sobre blanco eso se dice con contraste, no con color */
body.mapa-claro .cta { background: #14181C; color: #F4F7F9; }
body.mapa-claro .cta .cta-eta { color: rgba(244, 247, 249, 0.72); }

/* ---------------------------------------------------------
   4. EN EL ORDENADOR, CUADRO EN EL CENTRO

   En el telefono una hoja que sube desde abajo cae donde llega el
   pulgar. En un ordenador no hay pulgar: una hoja pegada al borde de
   abajo obliga a bajar la vista y el raton hasta el fondo de la
   pantalla. Lo mismo, centrado, se lee de una y se cierra con Esc.
   El panel de pedir el viaje NO entra aqui a proposito: ese vive al
   lado del mapa porque mientras pides estas mirando la ruta.
   --------------------------------------------------------- */
@media (min-width: 1000px) {
  .hoja-caja,
  .am-caja {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(460px, 92vw);
    max-height: 82vh;
    padding: 8px 22px 22px;
    border-radius: 20px;
    border: 1px solid var(--vidrio-borde);
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0;
    transition: transform 240ms var(--muelle-panel), opacity 180ms ease;
  }

  .hoja.abierta .hoja-caja,
  .hoja-am.abierta .am-caja {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* EL MENU DE CAPAS SE QUEDA DONDE ESTABA: pegado a su boton.

     Estuvo un rato centrado en la pantalla y ahi se rompio: el velo que
     iba detras de las ventanas centradas se comia los toques. El menu
     vive dentro de .flotantes, que tiene su propio z-index, asi que
     todo lo de dentro queda por debajo del velo por mucho que se le
     suba el numero. Con el menu al lado del boton no hace falta velo
     ninguno, y ademas se ve que sale DE ese boton. */
  .capa-op { padding: 9px 16px 9px 8px; font-size: 13.5px; }
  .capa-mues { width: 27px; height: 27px; flex: 0 0 27px; }

  /* El chat se queda con la pantalla entera: sin menu, sin ruedas y
     sin perfil. Un menu al lado de una lista de conversaciones son dos
     columnas de botones peleandose por el mismo borde. Para volver
     esta la flecha de la cabecera. */
  body.con-chat .barra-baja,
  body.con-chat .flotantes,
  body.con-chat .solo-riel { opacity: 0; pointer-events: none; }

  /* =========================================================
     EL CHAT DEL ORDENADOR

     Con raton no se navega a saltos: la lista de conversaciones se
     queda a la izquierda, pegada al menu, y la conversacion ocupa el
     resto. Se ven las dos a la vez, como en cualquier mensajeria de
     escritorio. El apartado ocupa la pantalla entera menos el riel,
     que es lo que deja volver al mapa sin cerrar nada.

     En el telefono NO cambia: alli la lista y la conversacion se
     turnan, porque no caben las dos.
     ========================================================= */
  .chat {
    left: 0;
    display: grid;
    grid-template-columns: 340px 1fr;
    border-radius: 0;
  }

  /* La lista deja de esconderse al abrir una conversacion: aqui es
     una columna fija, no una pantalla que se va. */
  .chat .ch-lista,
  .chat .ch-lista.oculto {
    display: flex !important;
    position: relative;
    inset: auto;
    border-right: 1px solid var(--pelo);
  }

  .chat .ch-hilo { position: relative; inset: auto; }

  /* el hueco de la derecha mientras no has elegido con quien hablar */
  .ch-nada { display: none; }

  #ch-hilo.oculto ~ .ch-nada {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
  }

  .ch-nada-ic {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--pelo-flojo);
    color: var(--tenue);
  }

  .ch-nada-ic svg { width: 26px; height: 26px; }
  .ch-nada b { font-size: 17px; font-weight: 700; }
  .ch-nada i { font-style: normal; font-size: 13.5px; color: var(--apagado); }

  /* el "todavia no tienes con quien hablar" se queda en medio de su
     columna, no pegado al fondo. La lista vacia deja de estirarse, que
     es lo que empujaba el texto contra el borde de abajo. */
  .chat .ch-hilos:empty { flex: 0 0 auto; }
  .chat .ch-vacio { margin: auto 30px; }

  /* la conversacion que estas leyendo, marcada en la lista */
  .ch-hilo-fila.activa { background: rgba(255, 255, 255, 0.07); }
  body.mapa-claro .ch-hilo-fila.activa { background: rgba(11, 14, 17, 0.06); }

  /* la flecha de la conversacion es cosa del telefono: aqui la lista
     esta siempre al lado y no hay a donde volver */
  .chat .ch-atras { display: none; }

  /* la flecha de la cabecera, en cambio, SI: es la unica salida al
     mapa ahora que el menu no se ve.

     Va con el padre delante a proposito: la regla que la esconde en el
     telefono vive MAS ABAJO en el fichero y, a igualdad de peso,
     ganaria ella y la flecha no saldria nunca. */
  .chat .ch-volver { display: grid; }

}

/* Quien pide menos movimiento no quiere que la ventana crezca: sale
   puesta y ya. */
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .hoja-caja,
  .am-caja,
  .capas-menu { transition: none; animation: none; }
}


/* =========================================================
   DE DONDE TE RECOGEMOS

   El origen del viaje era una linea muerta que decia "Tu ubicacion".
   En La Habana eso no vale: el GPS te deja a media cuadra, y el punto
   de recogida de verdad es "el portal de al lado de la bodega". Asi
   que sale solo con donde estas, y se puede cambiar de dos maneras:
   escribiendo la direccion o clavando el punto en el mapa.
   ========================================================= */
.recogida {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
  text-align: left;
  transition: transform var(--t-corto) ease, background var(--t-corto) ease;
}

.recogida:active { transform: scale(0.99); background: var(--pelo); }

.rec-pt {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--plata-luz);
  box-shadow: 0 0 0 3px rgba(188, 199, 206, 0.18);
}

.rec-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rec-et { font-size: 11.5px; font-weight: 600; color: var(--tenue); letter-spacing: 0.02em; }

.rec-nom {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-cambiar { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--plata-luz); }

/* el origen del paso 2 tambien se toca */
.ruta-de {
  text-align: left;
  padding: 0;
  border-bottom: 1px dashed var(--pelo);
}

/* ---------- la ventana de buscar ---------- */
.busca { position: fixed; inset: 0; z-index: 36; }
.busca.oculto { display: none !important; }

.busca-fondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 11, 0.55);
  opacity: 0;
  transition: opacity 220ms var(--muelle-panel);
}

.busca.abierta .busca-fondo { opacity: 1; }

.busca-caja {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 86vh;
  overflow-y: auto;
  padding: 8px 18px calc(20px + var(--safe-abajo));
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: linear-gradient(180deg, #131619 0%, #0B0D10 100%);
  border-top: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-alta);
  transform: translateY(100%);
  transition: transform 300ms var(--muelle-panel);
}

.busca.abierta .busca-caja { transform: none; }

.busca-alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
}

.busca-alto h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }

.busca-campo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
}

.busca-campo .lupa { width: 17px; height: 17px; color: var(--apagado); flex: 0 0 17px; }
.busca-campo .lupa svg { width: 100%; height: 100%; }

.busca-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-family: inherit;
  font-size: 15.5px;
  outline: none;
}

.busca-campo input::placeholder { color: var(--tenue); }

.busca-atajos { display: flex; gap: 9px; padding: 10px 0 2px; }

.busca-atajo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border-radius: var(--r);
  border: 1px solid var(--pelo);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  transition: transform var(--t-corto) ease, background var(--t-corto) ease;
}

.busca-atajo:active { transform: scale(0.98); background: var(--pelo-flojo); }
.busca-atajo svg { width: 17px; height: 17px; flex: 0 0 17px; }
.busca-atajo svg path, .busca-atajo svg circle { fill: none; stroke: currentColor; stroke-width: 1.7; }

.busca-aviso { margin: 12px 2px 0; font-size: 13.5px; color: var(--apagado); }
.busca-aviso.oculto { display: none; }

.busca-lista { list-style: none; margin: 6px 0 0; padding: 0; }

.busca-sitio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  border-bottom: 1px solid var(--pelo-flojo);
  text-align: left;
}

.busca-sitio:active { background: var(--pelo-flojo); }

.busca-sitio .lugar-ic { flex: 0 0 34px; }
.busca-sitio-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.busca-sitio b { font-size: 15px; font-weight: 600; }
.busca-sitio i { font-style: normal; font-size: 13px; color: var(--apagado); }

/* ---------- marcar el punto en el mapa ---------- */
.marcar { position: fixed; inset: 0; z-index: 22; pointer-events: none; }
.marcar.oculto { display: none !important; }

/* El pin va clavado en el centro de la pantalla y lo que se mueve es
   el mapa: asi no hay que acertarle a un pin de 20 px con el dedo. */
.marcar-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 43px;
  margin: -43px 0 0 -17px;
  color: var(--plata-luz);
  animation: pin-cae 260ms var(--muelle-panel) both;
}

.marcar-pin svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); }
.marcar-pin svg path { fill: #14181C; stroke: var(--plata-luz); stroke-width: 1.6; }
.marcar-pin svg circle { fill: var(--plata-luz); stroke: none; }

.marcar-sombra {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 12px;
  height: 5px;
  margin-left: -6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

@keyframes pin-cae {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.marcar-pie {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--alto-barra) + var(--safe-abajo) + 12px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, #131619 0%, #0B0D10 100%);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-alta);
  pointer-events: auto;
}

.marcar-et { font-size: 12px; font-weight: 600; color: var(--tenue); }
.marcar-nom { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.marcar-botones { display: flex; gap: 9px; padding-top: 10px; }
.marcar-botones .cta-flojo { flex: 0 0 38%; padding: 14px; }
.marcar-botones .cta { flex: 1; }

/* con el mapa en modo de marcar, lo que sobra se aparta */
body.marcando .panel,
body.marcando .filtros,
body.marcando .pie-amigos { opacity: 0; pointer-events: none; }

/* ---------- las mismas piezas, en claro ---------- */
body.mapa-claro .busca-caja,
body.mapa-claro .marcar-pie {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
  border-color: var(--vidrio-borde);
}

body.mapa-claro .busca-fondo { background: rgba(28, 36, 45, 0.32); }
body.mapa-claro .recogida,
body.mapa-claro .busca-campo { background: rgba(11, 14, 17, 0.045); }
body.mapa-claro .rec-pt { background: #14181C; box-shadow: 0 0 0 3px rgba(11, 14, 17, 0.12); }
body.mapa-claro .rec-cambiar,
body.mapa-claro .btn-cambiar { color: #1F5F44; }
body.mapa-claro .marcar-pin svg path { fill: #FFFFFF; stroke: #14181C; }
body.mapa-claro .marcar-pin svg circle { fill: #14181C; }

/* ---------- en el ordenador, cuadro en el centro ---------- */
@media (min-width: 1000px) {
  .busca-caja {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(480px, 92vw);
    max-height: 80vh;
    padding: 8px 22px 22px;
    border-radius: 20px;
    border: 1px solid var(--vidrio-borde);
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0;
    transition: transform 240ms var(--muelle-panel), opacity 180ms ease;
  }

  .busca.abierta .busca-caja {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* el pie de marcar deja de estar pegado al fondo de la pantalla */
  .marcar-pie {
    left: 50%;
    right: auto;
    bottom: 34px;
    width: min(460px, 92vw);
    transform: translateX(-50%);
  }
}

/* el punto de recogida cuando NO eres tu: mas chico que el del destino
   y en plata, que el destino es el que manda en la ruta */
.pin-recogida { width: 24px; height: 30px; color: var(--plata-luz); }
.pin-recogida svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); }
.pin-recogida svg path { fill: #14181C; stroke: var(--plata-luz); stroke-width: 1.6; }
.pin-recogida svg circle { fill: var(--plata-luz); stroke: none; }
body.mapa-claro .pin-recogida svg path { fill: #FFFFFF; stroke: #14181C; }
body.mapa-claro .pin-recogida svg circle { fill: #14181C; }

/* ---------- la foto de la cuenta se toca para cambiarla ---------- */
.hoja-foto { position: relative; overflow: hidden; padding: 0; }
.hoja-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoja-foto.con-foto > svg { display: none; }

/* La camarita de la esquina se quito el 29-ago-2026: la foto se sigue
   cambiando tocandola, pero sin el sello encima, que ensuciaba la cara
   de la persona. */
.hoja-foto:active { transform: scale(0.96); }

/* la foto tambien en la ficha de amigos */
.am-foto img { border-radius: 50%; }

/* la flecha de volver de la cabecera del chat: en el telefono no hace
   falta (esta la barra de abajo), asi que nace escondida */
.ch-volver {
  display: none;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  place-items: center;
  background: var(--pelo-flojo);
  color: var(--tinta);
}

.ch-volver svg { width: 17px; height: 17px; }
.ch-volver svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ch-volver:active { transform: scale(0.94); }

/* =========================================================
   AJUSTES DE UBICACION

   La referencia es la hoja de Snapchat: una tarjeta con el modo
   fantasma y su interruptor, el estado en una linea, y debajo quien
   puede verte. Comparte molde con la hoja de cuenta, asi que en el
   ordenador sale como cuadro en el centro sin tener que repetir nada.
   ========================================================= */
.ubi-tarjeta {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: var(--r);
  background: var(--pelo-flojo);
  border: 1px solid var(--pelo);
}

.ubi-ic {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--lienzo);
}

.ubi-ic svg { width: 24px; height: 24px; }
.ubi-ic svg path { fill: currentColor; stroke: none; }
.ubi-ic svg circle { fill: var(--tinta); stroke: none; }

.ubi-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ubi-txt b { font-size: 15.5px; font-weight: 700; }
.ubi-txt i { font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--apagado); }

.ubi-estado {
  margin: 10px 2px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--apagado);
}

.ubi-estado.visible { color: var(--verde); }

.ubi-titulo {
  margin: 20px 2px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}

.ubi-op {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r);
  border: 1px solid var(--pelo);
  text-align: left;
  transition: transform var(--t-corto) ease, background var(--t-corto) ease;
}

.ubi-op:active { transform: scale(0.99); background: var(--pelo-flojo); }

.ubi-op-ic {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pelo-flojo);
  color: var(--tinta-suave);
}

.ubi-op-ic svg { width: 18px; height: 18px; }

.ubi-op-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ubi-op-txt b { font-size: 15px; font-weight: 600; }
.ubi-op-txt i { font-style: normal; font-size: 12.5px; color: var(--apagado); }

.ubi-op-chev { flex: 0 0 16px; width: 16px; height: 16px; color: var(--tenue); }
.ubi-op-chev svg { width: 100%; height: 100%; }
.ubi-op-chev svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.ubi-nota {
  margin: 14px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tenue);
}

body.mapa-claro .ubi-ic { background: #2A3138; color: #F4F7F9; }
body.mapa-claro .ubi-ic svg circle { fill: #2A3138; }
body.mapa-claro .ubi-tarjeta { background: rgba(11, 14, 17, 0.045); }