/* =========================================================================
   TuCaimán, la app nueva (15-sep-2026). Orden del jefe: "demoler todo y
   transformarla en un chatbot interactivo y visual: el mapa arriba y el chat
   abajo; la IA va cambiando el mapa y mostrando los puntos que busca; para
   registrar un negocio las tarjetas que ya tenemos y los formularios, para que
   el usuario no tenga que escribir tanto".

   Telefono: mapa arriba (alto ajustable con el asa) y chat abajo.
   Ordenador (>= 1000 px): chat a la izquierda y mapa a la derecha.
   Dos temas: oscuro por defecto, `body.claro` con el mapa claro.
   ========================================================================= */
@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;
}

:root {
  --fondo: #0B0E11;
  --panel: #12161B;
  --panel-2: #181D23;
  --linea: rgba(233, 239, 242, 0.09);
  --linea-fuerte: rgba(233, 239, 242, 0.16);
  --tinta: #E9EFF2;
  --tinta-suave: #B6C0C7;
  --apagado: #7E8A93;
  --plata: #BCC7CE;
  --acento: #7CC4F2;          /* el mar de Cuba en el mapa */
  --acento-tinta: #06121B;
  --bien: #6FCF97;
  --aviso: #E8C15C;
  --mal: #E0796F;
  --burbuja-yo: #232A31;
  --chip: rgba(233, 239, 242, 0.06);
  --chip-borde: rgba(233, 239, 242, 0.14);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --cristal: rgba(18, 22, 27, 0.72);
  --cristal-borde: rgba(255, 255, 255, 0.12);
  --r: 18px;
  --r-chico: 12px;
  --safe-arriba: env(safe-area-inset-top, 0px);
  --safe-abajo: env(safe-area-inset-bottom, 0px);
  --alto-mapa: 30svh;
  --t: 180ms;
  color-scheme: dark;
}

body.claro {
  --fondo: #F6F5F2;
  --panel: #FFFFFF;
  --panel-2: #F0EFEB;
  --linea: rgba(20, 24, 28, 0.08);
  --linea-fuerte: rgba(20, 24, 28, 0.16);
  --tinta: #14181C;
  --tinta-suave: #3E474F;
  --apagado: #6B757D;
  --acento: #1F7FC0;
  --acento-tinta: #FFFFFF;
  --bien: #227A4C;
  --aviso: #8A6A12;
  --mal: #B33A31;
  --burbuja-yo: #E9EEF2;
  --chip: #FFFFFF;
  --chip-borde: rgba(20, 24, 28, 0.14);
  --sombra: 0 10px 30px rgba(20, 24, 28, 0.12);
  --cristal: rgba(255, 255, 255, 0.82);
  --cristal-borde: rgba(20, 24, 28, 0.1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.45 "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9;
         stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------------- la pantalla ---------------- */
.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: calc(var(--alto-mapa) + var(--safe-arriba)) auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.mapa-caja { position: relative; overflow: hidden; background: #9CD9F3; }
body:not(.claro) .mapa-caja { background: #0E1A24; }
/* Con el mapa a pantalla completa el documento se pinta EXACTAMENTE del color del
   mapa (el jefe, 16-sep-2026: "sigue saliendo la franja esa de un color diferente
   debajo, al menos usa el mismo color de fondo"). Antes era el azul del mar (#0E1A24)
   y el mapa oscuro es gris (#1F1F1F): la franja de la barra de inicio del iPhone se
   veia de otro color. Los tres valores son los mismos de .leaflet-container. */
body.vista-mapa { background: #1F1F1F; }
body.vista-mapa.claro, body.vista-mapa.mapa-claro { background: #9ADDFF; }
body.vista-mapa.satelite, body.vista-mapa.mapa-satelite { background: #071222; }
#mapa { position: absolute; inset: 0; }

/* el asa entre el mapa y el chat */
.asa {
  display: flex; align-items: stretch; justify-content: center;
  height: 26px;
  background: var(--fondo);
  border-top: 1px solid var(--linea);
}
.agarre {
  flex: 1;
  display: grid; place-items: center;
  touch-action: none; cursor: row-resize;
}
.agarre::before { content: ""; width: 44px; height: 5px; border-radius: 99px; background: var(--linea-fuerte); }
body.arrastrando .agarre::before { background: var(--acento); width: 56px; }

/* solo mapa / solo chat */
body.vista-mapa .app { grid-template-rows: minmax(0, 1fr); }
body.vista-mapa .chat, body.vista-mapa .asa { display: none; }
body.vista-chat .app { grid-template-rows: minmax(0, 1fr); }
body.vista-chat .mapa-caja, body.vista-chat .asa { display: none; }
body.vista-chat .hilo { padding-top: calc(var(--safe-arriba) + 14px); }
/* el titulo "Chat" arriba a la izquierda, en la linea del boton del mapa (el jefe, 15-sep-2026) */
.chat-cabeza { display: none; }
@media (max-width: 999px) {
  body.vista-chat:not(.vista-forzada) .chat-cabeza {
    display: flex; align-items: center; flex: none;
    height: 48px; margin-top: calc(var(--safe-arriba) + 4px); padding: 0 72px 0 18px;
  }
  /* titulo y boton del mapa un poco mas arriba, con aire debajo (el jefe, 15-sep-2026) */
  body.vista-chat:not(.vista-forzada) #ver-mapa { top: calc(var(--safe-arriba) + 4px); }
  .chat-cabeza h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--tinta); }
  body.vista-chat:not(.vista-forzada) .hilo { padding-top: 18px; }
}

/* los botones de solo icono */
.vista-ic {
  position: fixed; z-index: 800;
  width: 48px; height: 48px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--sombra); color: var(--tinta);
  animation: aparece 220ms ease both;
}
.vista-ic svg.ic { width: 22px; height: 22px; }
@keyframes aparece { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
#ver-mapa { top: calc(var(--safe-arriba) + 10px); right: 12px; }
#ver-chat { left: 50%; margin-left: -24px; bottom: calc(var(--safe-abajo) + 18px); }
body.vista-chat #ver-mapa, body.vista-mapa #ver-chat { display: grid; }
body.vista-forzada #ver-mapa, body.vista-forzada #ver-chat, body.vista-forzada .vistas-pc { display: none !important; }
.vistas-pc { display: none; }

/* el menu de capas */
.menu-capas {
  position: absolute; right: 52px; bottom: 0;
  display: flex; flex-direction: column; padding: 5px; gap: 2px; min-width: 132px;
  border-radius: 16px;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--sombra);
}
.menu-capas button { text-align: left; padding: 9px 12px; border-radius: 11px; font-weight: 600; font-size: 14px; }
.menu-capas button[aria-checked="true"] { background: var(--tinta); color: var(--fondo); }
.mapa-botones { position: absolute; }

.chat {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--fondo);
}

@media (min-width: 1000px) {
  .app {
    grid-template-rows: none;
    grid-template-columns: 460px minmax(0, 1fr);
  }
  .chat { order: -1; }
  .mapa-caja { order: 2; }
  /* EN EL ORDENADOR EL ASA VA DE PIE (el jefe: "en diseño pc que el chat sea
     desplegable pero en horizontal"): se arrastra de lado; del todo a la
     izquierda queda solo el mapa y del todo a la derecha solo el chat. */
  /* MITAD Y MITAD (el jefe, 16-sep-2026: "en vista pc que el chat ocupe un 50%
     y el mapa otro 50%"); el asa sigue moviendo la linea si alguien la arrastra */
  .app { grid-template-columns: var(--ancho-chat, calc(50% - 7px)) 14px minmax(0, 1fr); }
  .asa { order: 1; height: auto; width: 14px; border-top: 0; border-right: 1px solid var(--linea); }
  .agarre { cursor: col-resize; }
  .agarre::before { width: 5px; height: 44px; }
  body.arrastrando .agarre::before { height: 56px; width: 5px; }
  body.arrastrando { cursor: col-resize; user-select: none; }
  .vistas-pc { display: none !important; }
  #ver-chat { left: auto; margin: 0; right: 12px; top: 12px; bottom: auto; }
  body.vista-mapa .app, body.vista-chat .app { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  body.vista-chat .chat { border-right: 0; align-items: center; }
  body.vista-chat .chat > * { width: min(780px, 100%); }
  body.vista-chat .compositor { width: min(756px, calc(100% - 24px)); }
}

/* ---------------- lo que flota sobre el mapa ---------------- */
.mapa-alto {
  position: absolute; z-index: 500;
  top: calc(var(--safe-arriba) + 10px); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.marca {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 8px;
  border-radius: 99px;
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  font-weight: 800; letter-spacing: -0.01em;
  pointer-events: auto;
}
.marca img { height: 16px; width: auto; }
body.claro .marca img { filter: invert(1) brightness(0.25); }
.estado-ia {
  /* ANCHO DEL TAMANO DEL TEXTO (el jefe, 16-sep-2026): la pastilla se ajusta a
     lo que dice y solo se corta si no cabe en el mapa */
  flex: 0 1 auto; min-width: 0; max-width: 100%; width: fit-content;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border-radius: 99px;
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  font-size: 13px; font-weight: 600; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--t) ease, transform var(--t) ease;
}
.estado-ia.ver { opacity: 1; transform: none; }
/* VOLVER A LA ZONA DE ANTES (el jefe, 16-sep-2026): en la esquina de arriba a la
   derecha del mapa, solo cuando hay una provincia o un municipio puestos. */
.volver-zona {
  margin-left: auto; pointer-events: auto; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 13px 0 9px; border-radius: 99px;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--sombra);
  color: var(--tinta); font-size: 13.5px; font-weight: 700;
  max-width: 62%; white-space: nowrap; overflow: hidden;
}
.volver-zona span { overflow: hidden; text-overflow: ellipsis; }
.volver-zona svg.ic { width: 17px; height: 17px; flex: none; }
.volver-zona:active { transform: scale(0.96); }
body.vista-mapa .volver-zona { display: none; }
.estado-ia i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--acento);
  box-shadow: 0 0 0 0 var(--acento);
  animation: latido 1.2s ease-out infinite;
}
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(124, 196, 242, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(124, 196, 242, 0); } }

.mapa-botones {
  position: absolute; z-index: 500;
  right: 10px; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.boton-mapa {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--sombra);
}
.boton-mapa.activo { color: var(--acento); }

/* el barrido mientras la IA busca: un aro que se abre desde el centro */
.barrido {
  position: absolute; z-index: 450; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  opacity: 0; pointer-events: none;
}
.buscando .barrido { animation: barrer 1.4s ease-out infinite; }
@keyframes barrer { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .buscando .barrido, .estado-ia i { animation: none; }
}

/* los puntos que pone la IA */
.pin-tc {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: grid; place-items: center;
  background: var(--tono, #7CC4F2);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: cae 320ms cubic-bezier(0.34, 1.5, 0.64, 1) both;
  animation-delay: var(--retraso, 0ms);
}
.pin-tc b { transform: rotate(45deg); font-size: 12px; font-weight: 800; color: #fff; }
.pin-tc.elegido { width: 38px; height: 38px; z-index: 2; box-shadow: 0 0 0 4px rgba(124, 196, 242, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4); }
@keyframes cae { from { transform: rotate(-45deg) translate(0, -18px) scale(0.6); opacity: 0; } to { transform: rotate(-45deg); opacity: 1; } }
.yo-tc {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2F8CFF; border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(47, 140, 255, 0.22);
}
.punto-marcado {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mal); border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(224, 121, 111, 0.3);
}

/* ---------------- el hilo ---------------- */
.hilo {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.hilo > :first-child { margin-top: auto; }

.msg { display: flex; gap: 10px; max-width: 100%; animation: entra 220ms ease both; }
@keyframes entra { from { transform: translateY(6px); } to { transform: none; } }
.msg.ia .cara {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--linea);
}
.msg.ia .cara img { width: 20px; height: auto; }
body.claro .msg.ia .cara img { filter: invert(1) brightness(0.25); }
.msg.ia .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.msg.ia .texto { padding-top: 4px; white-space: pre-line; }
.msg.ia .texto b { font-weight: 700; }
.msg.yo { justify-content: flex-end; }
.msg.yo .texto {
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 20px 20px 6px 20px;
  background: var(--burbuja-yo);
  white-space: pre-line; overflow-wrap: anywhere;
}
.puntos { display: inline-flex; gap: 4px; padding: 10px 2px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); animation: punto 1s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: 0.15s; }
.puntos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------------- tarjetas de resultados ---------------- */
.tiras {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -14px 0 -40px; padding: 2px 14px 6px 40px;
  scrollbar-width: none;
}
.tiras::-webkit-scrollbar { display: none; }
.tn {
  flex: 0 0 214px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  text-align: left;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--linea);
  overflow: hidden;
  transition: transform var(--t) ease, border-color var(--t) ease;
}
.tn:active { transform: scale(0.98); }
.tn.elegida { border-color: var(--acento); }
.tn-foto {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--tono, #334) center / cover no-repeat;
  display: grid; place-items: center;
  color: #fff; font-size: 30px; font-weight: 800;
}
.tn-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-num {
  position: absolute; top: 8px; left: 8px;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 800;
}
.tn-cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.tn-nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-linea { font-size: 13px; color: var(--apagado); display: flex; gap: 6px; flex-wrap: wrap; }
.tn-precio { font-size: 14px; font-weight: 700; color: var(--tinta); }
.chapa { font-size: 11.5px; font-weight: 700; }
.chapa.bien { color: var(--bien); }
.chapa.mal { color: var(--mal); }

/* ---------------- la ficha dentro del chat ---------------- */
.ficha {
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.ficha-fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ficha-fotos img { flex: 0 0 100%; aspect-ratio: 16 / 10; object-fit: cover; scroll-snap-align: start; }
.ficha-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ficha h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.ficha p { margin: 0; color: var(--tinta-suave); white-space: pre-line; }
.ficha-datos { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tinta-suave); }
.ficha-datos span { display: flex; gap: 8px; align-items: flex-start; }
.ficha-datos svg.ic { width: 17px; height: 17px; margin-top: 1px; color: var(--apagado); }
.ficha-botones { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border-radius: 99px;
  font-weight: 700;
  background: var(--chip); border: 1px solid var(--chip-borde);
}
a.boton { text-decoration: none; color: inherit; }
.boton.lleno { background: var(--tinta); color: var(--fondo); border-color: transparent; }
.boton.ancho { width: 100%; }
.boton:disabled { opacity: 0.45; cursor: default; }
.boton svg.ic { width: 18px; height: 18px; }

/* catalogo de la ficha */
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.prod { border-radius: var(--r-chico); background: var(--panel-2); overflow: hidden; }
.prod .prod-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--linea); }
.prod .prod-texto { padding: 7px 9px 9px; font-size: 13px; }
.prod .prod-t { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod .prod-p { display: block; font-style: normal; color: var(--apagado); }

/* ---------------- tarjetas para elegir (sectores, tipos) ---------------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.op {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 92px; padding: 12px;
  border-radius: var(--r-chico);
  background: var(--panel); border: 1px solid var(--linea);
  text-align: left; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.op svg.ic { width: 24px; height: 24px; color: var(--tono, var(--acento)); }
.op small { display: block; font-weight: 500; color: var(--apagado); font-size: 12px; margin-top: 2px; }
.op:active { transform: scale(0.97); }
.op.elegida { border-color: var(--acento); }

/* ---------------- formularios dentro del chat ---------------- */
.formu {
  border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--linea);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.formu h4 { margin: 0; font-size: 15px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 12.5px; font-weight: 700; color: var(--apagado); }
.entrada {
  width: 100%; min-height: 46px; padding: 10px 13px;
  border-radius: var(--r-chico);
  background: var(--panel-2); border: 1px solid var(--linea);
  font-size: 16px;               /* por debajo de 16, Safari amplia la pagina */
  outline: none;
}
.entrada:focus { border-color: var(--acento); }
textarea.entrada { min-height: 92px; resize: vertical; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fila-tel { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: stretch; }
.formu .error { color: var(--mal); font-size: 13.5px; font-weight: 600; }
.formu .nota { color: var(--apagado); font-size: 13px; }
.formu.hecho { opacity: 0.6; pointer-events: none; }
.fotos-form { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos-form .foto {
  position: relative; width: 74px; height: 74px; border-radius: var(--r-chico); overflow: hidden;
  background: var(--panel-2);
}
.fotos-form .foto img { width: 100%; height: 100%; object-fit: cover; }
.fotos-form .foto button {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 15px; line-height: 1;
}
.fotos-form .anadir {
  width: 74px; height: 74px; border-radius: var(--r-chico);
  border: 1.5px dashed var(--linea-fuerte); color: var(--apagado);
  display: grid; place-items: center;
}
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dias button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--chip-borde); background: var(--chip);
  font-size: 13px; font-weight: 700;
}
.dias button.si { background: var(--tinta); color: var(--fondo); border-color: transparent; }

/* ---------------- abajo: rapidos y la caja de escribir ---------------- */
.rapidos {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 6px 14px 8px;
}
.rapidos::-webkit-scrollbar { display: none; }
.rapido {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border-radius: 99px;
  background: var(--chip); border: 1px solid var(--chip-borde);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.rapido svg.ic { width: 17px; height: 17px; color: var(--apagado); }
.rapido:active { transform: scale(0.96); }
/* el de informacion, solo el icono y redondo (sin cuenta, a la izquierda de "Buscar algo") */
.rapido.solo-ic { width: 38px; padding: 0; justify-content: center; }
.rapido.solo-ic svg.ic { width: 19px; height: 19px; }
/* los de "Buscar algo": 4 x 2, todos a la vista */
.rapidos.en-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-inline: 12px; }
.rapidos.en-rejilla .rapido {
  flex-direction: column; justify-content: center; gap: 4px;
  height: auto; min-height: 60px; padding: 8px 4px; border-radius: 16px;
  white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.15;
}
.rapidos.en-rejilla .rapido svg.ic { width: 19px; height: 19px; }

.compositor {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 0 12px calc(var(--safe-abajo) + 10px);
  padding: 6px 6px 6px 16px;
  border-radius: 26px;
  background: var(--panel); border: 1px solid var(--linea-fuerte);
}
.compositor textarea {
  flex: 1; min-width: 0;
  max-height: 120px; min-height: 40px; padding: 9px 0;
  background: none; border: 0; outline: none; resize: none;
  font-size: 16px; line-height: 1.35;
}
.compositor textarea::placeholder { color: var(--apagado); }
.enviar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--fondo);
}
.enviar:disabled { background: var(--linea-fuerte); color: var(--apagado); }

/* ---------------- avisos sueltos ---------------- */
.tostada {
  position: fixed; z-index: 1000; left: 50%; bottom: calc(var(--safe-abajo) + 90px);
  transform: translateX(-50%);
  max-width: min(420px, calc(100% - 32px));
  padding: 10px 16px; border-radius: 14px;
  background: var(--tinta); color: var(--fondo);
  font-weight: 600; font-size: 14px; text-align: center;
  box-shadow: var(--sombra);
}

/* Leaflet sin marcos */
.leaflet-container { background: transparent !important; font: inherit; }
.leaflet-control-attribution { font-size: 10px !important; background: var(--cristal) !important; color: var(--apagado) !important; }
.leaflet-control-attribution a { color: var(--apagado) !important; }

/* la mascara que deja solo Cuba (mismos contornos que la app vieja) */
path.tc-mascara { fill: #0E1A24 !important; fill-opacity: 1; stroke: none !important; }
body.satelite path.tc-mascara { fill: #071222 !important; }
body.satelite .mapa-caja { background: #071222; }
body.claro path.tc-mascara { fill: #9CD9F3 !important; }
path.tc-piel { fill: none !important; stroke: #7C8792 !important; stroke-width: 0.9; stroke-opacity: 0.45; }
body.claro path.tc-piel { stroke-opacity: 0.25; }
body.marcando .leaflet-container { cursor: crosshair; }
body.marcando .mapa-caja::after {
  content: "Toca el mapa donde está tu negocio";
  position: absolute; z-index: 600; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 99px;
  background: var(--tinta); color: var(--fondo); font-weight: 700; font-size: 13.5px; white-space: nowrap;
  pointer-events: none;
}


/* =========================================================================
   LA CAJA DE ESCRIBIR COMO CAMPO (chat.preguntar). Lleva su etiqueta encima
   del borde, el borde en el color de acento y cambia de forma: texto,
   telefono con +53, desplegable o subir fotos.
   ========================================================================= */
.compositor { position: relative; transition: border-color var(--t) ease, box-shadow var(--t) ease; }
.dato-etiqueta {
  position: absolute; left: 16px; top: -10px;
  padding: 1px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.01em;
  color: var(--acento-tinta); background: var(--acento);
  max-width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(4px); opacity: 0; pointer-events: none;
  transition: transform var(--t) ease, opacity var(--t) ease, background var(--t) ease;
}
.compositor.preguntando { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(124, 196, 242, 0.14); }
body.claro .compositor.preguntando { box-shadow: 0 0 0 4px rgba(31, 127, 192, 0.14); }
.compositor.preguntando .dato-etiqueta:not(:empty) { transform: none; opacity: 1; }
.compositor.preguntando .enviar { background: var(--acento); color: var(--acento-tinta); }
.compositor.preguntando .enviar:disabled { background: var(--linea-fuerte); color: var(--apagado); }
.compositor.con-error { border-color: var(--mal); box-shadow: 0 0 0 4px rgba(224, 121, 111, 0.16); }
.compositor.con-error .dato-etiqueta { background: var(--mal); color: #fff; }
.compositor.temblar { animation: temblar 320ms ease; }
@keyframes temblar { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.compositor.ocupado .enviar { opacity: 0.5; }

.dato-input {
  flex: 1; min-width: 0; min-height: 40px; padding: 9px 0;
  background: none; border: 0; outline: none;
  font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
}
.dato-input::placeholder { color: var(--apagado); font-weight: 500; }
.compositor[data-modo="codigo"] .dato-input { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; font-size: 20px; }
.dato-prefijo {
  align-self: center; padding: 5px 9px; margin-right: 2px; border-radius: 10px;
  background: var(--panel-2); font-weight: 700; font-size: 15px; color: var(--tinta-suave);
}
/* EL CODIGO DE PAIS (el jefe, 16-sep-2026): la pastilla enseña el "+53" y el
   <select> de verdad va encima, invisible, para que salga la rueda del sistema. */
.dato-prefijo.con-lista {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding-right: 20px; color: var(--tinta); cursor: pointer;
}
.dato-prefijo.con-lista::after {
  content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); opacity: 0.7;
}
.dato-prefijo .dato-pais {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.dato-prefijo.con-lista:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
/* En los formularios (perfil, negocio) el codigo es un desplegable normal. */
.sel-pais {
  -webkit-appearance: none; appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
                    linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.sel-pais option { color: #14181C; }
.dato-select {
  flex: 1; min-width: 0; min-height: 40px; margin: 0; padding: 0 30px 0 0;
  background: transparent; border: 0; outline: none;
  font-size: 17px; font-weight: 700; color: var(--tinta);
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.dato-select option { color: #14181C; }
.dato-fotos { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.dato-foto { position: relative; flex: 0 0 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.dato-foto img { width: 100%; height: 100%; object-fit: cover; }
.dato-foto button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; line-height: 1;
}
.dato-subir {
  flex: 0 0 auto; height: 56px; padding: 0 16px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px dashed var(--acento); color: var(--acento); font-weight: 700;
}
.fotos-yo { display: flex; gap: 4px; padding: 4px !important; }
.fotos-yo img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }
.chips-multi { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-multi.hecho, .dias.hecho { opacity: 0.6; pointer-events: none; }
.rapido.elegido { background: var(--tinta); color: var(--fondo); border-color: transparent; }


/* =========================================================================
   LA VISTA DE SOLO MAPA (orden del jefe, 15-sep-2026): el tiempo, la zona,
   el menu lateral de apartados y el menu general de abajo con el boton del
   chat en vez del de buscar. Solo con `body.vista-mapa`.
   ========================================================================= */
.rail, .mapa-der, .menu-general, .apartado-nombre, .filtros-mapa { display: none; }
body.vista-mapa .rail, body.vista-mapa .mapa-der, body.vista-mapa .menu-general,
body.vista-mapa .apartado-nombre, body.vista-mapa .filtros-mapa { display: flex; }
body.vista-mapa #ver-chat { display: none !important; }
body.vista-mapa .estado-ia { display: none; }

.cristal-ui {
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: var(--sombra);
}
.rail {
  position: absolute; z-index: 520;
  left: 10px; top: calc(var(--safe-arriba) + 10px);
  flex-direction: column; gap: 4px; padding: 5px;
  border-radius: 99px;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: var(--sombra);
}
.rail-b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta); }
.rail-b svg.ic { width: 22px; height: 22px; }
.rail-b.activa { background: var(--tinta); color: var(--fondo); }

.mapa-der {
  position: absolute; z-index: 520;
  right: 10px; top: calc(var(--safe-arriba) + 10px);
  align-items: center; gap: 8px;
}
.zona-btn, .tiempo-mapa {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px; border-radius: 99px;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: var(--sombra);
  font-weight: 700; font-size: 14.5px;
}
.zona-btn { max-width: 52vw; }
.zona-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zona-btn svg.ic { width: 17px; height: 17px; }
.zona-btn .flecha { width: 15px; height: 15px; color: var(--apagado); }
.tiempo-mapa svg.ic { width: 19px; height: 19px; }
.tiempo-mapa.sol svg.ic { color: #F2B230; }
.tiempo-mapa b { font-weight: 800; }

.menu-general {
  position: absolute; z-index: 520;
  /* MAS ABAJO (el jefe, 16-sep-2026, dos veces: "bajar un poco el menu general,
     pegarlo mas al bottom"). El safe-area del iPhone reserva 34 px para la barra
     de inicio; se usa menos de la mitad para que el menu baje sin quedar encima
     de ella, y en un aparato sin zona segura quedan 6 px. */
  left: 10px; right: 10px; bottom: calc(var(--safe-abajo) * 0.4 + 6px);
  align-items: center; gap: 8px;
}
.mg-pastilla {
  flex: 1; display: flex; justify-content: space-around; align-items: center;
  height: 60px; padding: 0 6px; border-radius: 99px;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: var(--sombra);
}
.mg-b { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta); }
.mg-b svg.ic { width: 23px; height: 23px; }
.mg-b:active, .rail-b:active { transform: scale(0.92); }
.mg-chat {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento); color: var(--acento-tinta);
  box-shadow: 0 8px 24px rgba(124, 196, 242, 0.35);
}
.mg-chat svg.ic { width: 26px; height: 26px; }
body.vista-mapa .mapa-botones { bottom: calc(var(--safe-abajo) + 84px); }

/* =========================================================
   LOS CONTROLES DEL MAPA, SIN DIFUMINAR (el jefe, 16-sep-2026: "sigue
   difuminado arriba sobre todo en los botones de toda cuba y el widget de
   clima, y la punta de arriba del menu de apartados").

   Eran cristal: fondo translucido + backdrop-filter. Sobre el mapa liso el
   blur no aporta nada, pero arriba coge la barra de estado y la del navegador
   y se ve lavado justo en el borde. Ahora llevan un fondo SOLIDO del mismo
   tono, asi que se ven limpios y todos iguales.
   ========================================================= */
body.vista-mapa .rail,
body.vista-mapa .zona-btn,
body.vista-mapa .tiempo-mapa,
body.vista-mapa .mg-pastilla,
body.vista-mapa .boton-mapa {
  background: #171B20;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.vista-mapa.claro .rail,
body.vista-mapa.claro .zona-btn,
body.vista-mapa.claro .tiempo-mapa,
body.vista-mapa.claro .mg-pastilla,
body.vista-mapa.claro .boton-mapa { background: #FFFFFF; }
body.vista-mapa.satelite .rail,
body.vista-mapa.satelite .zona-btn,
body.vista-mapa.satelite .tiempo-mapa,
body.vista-mapa.satelite .mg-pastilla,
body.vista-mapa.satelite .boton-mapa { background: #101820; }

/* los negocios del apartado en el mapa */
.punto-neg {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--tono); border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  color: #fff; font-weight: 800; font-size: 14px;
}
.punto-neg img { width: 100%; height: 100%; object-fit: cover; }

/* la hoja de la zona */
.hoja-zona {
  position: fixed; z-index: 900;
  left: 0; right: 0; bottom: 0;
  max-height: 72svh;
  display: flex; flex-direction: column;
  padding: 10px 14px calc(var(--safe-abajo) + 14px);
  border-radius: 24px 24px 0 0;
  background: var(--panel); border-top: 1px solid var(--linea-fuerte);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  animation: sube 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes sube { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.hz-alto { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.hz-alto h3 { flex: 1; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--chip-borde); }
.zona-busca { margin-bottom: 8px; }
.zona-lista { overflow-y: auto; overscroll-behavior: contain; }
.zona-fila {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px; padding: 0 6px; text-align: left;
  border-bottom: 1px solid var(--linea); font-size: 16px; font-weight: 600;
}
.zona-fila svg.ic { width: 17px; height: 17px; color: var(--apagado); }
.zona-fila.marcada { color: var(--acento); }
.zona-nota { padding: 16px 6px; color: var(--apagado); }
@media (min-width: 1000px) {
  .hoja-zona { left: auto; right: 12px; top: 64px; bottom: auto; width: 360px; max-height: 70vh; border-radius: 20px; border: 1px solid var(--linea-fuerte); }
  /* EN EL ORDENADOR, MAS ARRIBA Y MAS ESTRECHO (el jefe, 16-sep-2026: "el menu en
     version web sube un poquito el menu general y hazlo menos ancho") */
  .menu-general { left: 50%; right: auto; transform: translateX(-50%); width: 380px; bottom: 20px; }
  .zona-btn { max-width: 280px; }
  body.vista-mapa .mapa-der { right: 12px; }
}

/* mensajes y soporte en el chat */
.hilos { display: flex; flex-direction: column; gap: 4px; }
.hilo-fila { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; text-align: left; background: var(--panel); border: 1px solid var(--linea); }
.hilo-cara { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); font-weight: 800; }
.hilo-cara img { width: 100%; height: 100%; object-fit: cover; }
.hilo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hilo-txt b, .hilo-txt i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hilo-txt i { font-style: normal; color: var(--apagado); font-size: 13.5px; }
.hilo-nuevo { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--acento); color: var(--acento-tinta); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.conversa { display: flex; flex-direction: column; gap: 6px; }
.burbuja { align-self: flex-start; max-width: 85%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--panel); border: 1px solid var(--linea); white-space: pre-line; }
.burbuja.mia { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--burbuja-yo); border-color: transparent; }


/* =========================================================================
   EL MAPA DIBUJADO DE SIEMPRE (copiado de estilo.css, 15-sep-2026): tapon,
   piel, zona, divisiones, rotulos. Clases mapa-claro / mapa-satelite las pone
   tc/mapa.js junto a claro / satelite.
   ========================================================================= */
.leaflet-container, #mapa { background: #1F1F1F !important; }
body.mapa-claro .leaflet-container, body.mapa-claro #mapa { background: #9ADDFF !important; }
body.mapa-satelite .leaflet-container, body.mapa-satelite #mapa { background: #071222 !important; }
body:not(.claro) .mapa-caja { background: #1F1F1F; }
body.claro .mapa-caja { background: #9ADDFF; }
body.satelite .mapa-caja { background: #071222; }
path.mascara-cuba {
  fill: #1F1F1F !important;
  fill-rule: evenodd;
  fill-opacity: 1;
  stroke: none !important;
  /* SE APAGA AL ACERCARSE. `--mar` lo escribe `mirarZoom` en app.js: vale 1
     con la isla entera en pantalla y 0 a partir del zoom 12, donde no hay
     tierra de fuera que esconder y el tapon solo puede estorbar.
     `pointer-events: none` ya lo pone Leaflet con `interactive: false`. */
  opacity: var(--mar, 1);
}
path.piel-cuba {
  fill: #E8F1FA !important;
  fill-opacity: 0.055;
  stroke: #7C8792 !important;
  stroke-width: 0.9;
  stroke-opacity: 0.55;
  /* se apaga con el mismo mando que el tapón: de cerca las losas ya
     tienen calles, manzanas y parques, y la veladura sólo ensucia */
  opacity: var(--mar, 1);
}

/* En claro el agua de Mapbox ya es azul y la tierra verde: la isla se
   ve sola. Una veladura encima sólo la lavaría. */
body.mapa-claro path.piel-cuba { fill-opacity: 0; stroke-opacity: 0.28; }

/* En satélite la tierra tiene textura de verdad. Sólo el filo, y flojo. */
body.mapa-satelite path.piel-cuba { fill-opacity: 0; stroke-opacity: 0.35; }
body.con-zona path.mascara-cuba { fill-opacity: 1; }

/* Y la veladura de la isla se va con ella: por debajo de un tapón opaco
   no se ve, pero en el filo de la zona dejaba un halo claro. */
body.con-zona path.piel-cuba { opacity: 0; }

body.mapa-claro path.mascara-cuba { fill: #9ADDFF !important; }
body.mapa-satelite path.mascara-cuba { fill: #071222 !important; }

/* El filo de la zona elegida. Plata fina: marca el límite sin competir
   con lo que hay dentro. */
path.borde-zona {
  fill: none !important;
  stroke: #C8D2DC !important;
  stroke-width: 1.6;
  stroke-opacity: 0.8;
}

body.mapa-claro path.borde-zona { stroke: #3B444C !important; }
body.sin-calles path.piel-cuba {
  fill: #26282B !important;
  fill-opacity: 1 !important;
  stroke-opacity: 0.55 !important;
  opacity: 1 !important;
}
body.mapa-claro.sin-calles path.piel-cuba {
  fill: #EEF0EA !important;
  stroke-opacity: 0.35 !important;
}
body.mapa-satelite.sin-calles path.piel-cuba {
  fill-opacity: 0 !important;
}

/* Las rayas: mas flojas que el borde de la zona elegida, que es el que
   manda. La de provincia un pelo mas marcada que la de municipio. */
path.division {
  fill: none !important;
  stroke: #C8D2DC !important;
  stroke-linejoin: round;
  stroke-width: 1;
  stroke-opacity: 0.42;
}
path.division-prov { stroke-width: 1.2; stroke-opacity: 0.55; }
body.mapa-claro path.division { stroke: #4A545D !important; stroke-opacity: 0.38; }
body.mapa-claro path.division-prov { stroke-opacity: 0.5; }
body.mapa-satelite path.division { stroke: #FFFFFF !important; stroke-opacity: 0.6; }
body.mapa-satelite path.division-prov { stroke-opacity: 0.75; }

/* Los nombres. Sin chapa ni cristal: letra con halo, como un mapa de
   papel. El halo es el color de la tierra, asi se lee sobre las rayas. */
.rotulo-div {
  background: none !important;
  border: 0 !important;
  pointer-events: none;
}
.rotulo-div span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font: 600 11.5px/1 "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  color: rgba(236, 241, 246, 0.86);
  text-shadow: 0 0 3px #26282B, 0 0 6px #26282B, 0 1px 2px rgba(0, 0, 0, 0.6);
}
body.mapa-claro .rotulo-div span {
  color: #3A434B;
  text-shadow: 0 0 3px #FFFFFF, 0 0 6px #FFFFFF;
}
body.mapa-satelite .rotulo-div span {
  color: #FFFFFF;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 1px 5px rgba(0, 0, 0, 0.7);
}
/* Los barrios van sobre calles: mas pequenos y se pueden tocar. */
.rotulo-div.rotulo-barrio { pointer-events: auto; cursor: pointer; }
.rotulo-barrio span {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 2px;
}
path.borde-prov { display: none; }

/* El fondo sin calles (zonas.js). Toda Cuba: el agujero del tapon, de mar,
   para que no asomen rotulos de las losas junto a la costa. Con zona: la zona,
   de tierra, con la costa fina; la piel ligera se apaga. En satelite no se
   pinta nada: la foto lisa ya viene sin rotulos. */
path.mar-isla,
path.tierra-zona { stroke: none !important; opacity: 0; }
path.mar-isla { fill: #1F1F1F !important; }
body.mapa-claro path.mar-isla { fill: #9ADDFF !important; }
path.tierra-zona { fill: #26282B !important; }
body.mapa-claro path.tierra-zona { fill: #EEF0EA !important; }
body.sin-calles:not(.con-zona) path.mar-isla,
body.sin-calles.con-zona path.tierra-zona { opacity: 1; fill-opacity: 1; }
body.sin-calles.con-zona path.piel-cuba { opacity: 0 !important; }
body.mapa-satelite path.mar-isla,
body.mapa-satelite path.tierra-zona { opacity: 0 !important; }

/* la rayita de la provincia que no cabe: del centro hasta debajo del nombre */
.rotulo-palo {
  position: absolute;
  left: -0.5px;
  bottom: 0;
  width: 1px;
  background: rgba(236, 241, 246, 0.6);
}
.rotulo-palo::after {
  content: "";
  position: absolute;
  left: -2px; bottom: -2.5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: inherit;
}
body.mapa-claro .rotulo-palo { background: rgba(58, 67, 75, 0.55); }
body.mapa-satelite .rotulo-palo { background: rgba(255, 255, 255, 0.8); }
.con-palo span { transform: translate(-50%, calc(-100% - var(--palo, 0px) - 2px)); }
/* Los nombres en dos lineas ("Santiago / de Cuba"), centrados. */
.rotulo-div span { white-space: pre; text-align: center; line-height: 1.2; }
/* la rayita hacia abajo: nace en el centro y el nombre queda debajo */
.palo-abajo .rotulo-palo { bottom: auto; top: 0; }
.palo-abajo .rotulo-palo::after { bottom: auto; top: -2.5px; }
.palo-abajo span { transform: translate(-50%, calc(var(--palo, 0px) + 2px)); }
path.division-mun {
  stroke-width: 1.5 !important;
  stroke-opacity: 0.9 !important;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}
body.mapa-claro path.division-mun { stroke: #55606A !important; }
body.mapa-satelite path.division-mun { stroke: #FFFFFF !important; stroke-opacity: 0.95 !important; }

body.puntos-lejos .punto-neg { display: none; }
body.puntos-lejos .leaflet-marker-icon:has(.pin-tc),
body.puntos-lejos .leaflet-marker-icon:has(.punto-neg) { pointer-events: none !important; }

/* sin el anillo de foco del navegador al tocar el mapa (el borde azul) */
.leaflet-container:focus, .leaflet-container:focus-visible, #mapa:focus { outline: none !important; }
.leaflet-marker-icon:focus { outline: none !important; }

/* el popup de la vista de solo mapa: hoja abajo en el telefono, tarjeta a la derecha en el ordenador */
.popup-mapa {
  position: fixed; z-index: 880;
  left: 0; right: 0; bottom: 0; max-height: 78svh;
  display: flex; flex-direction: column;
  padding: 10px 14px calc(var(--safe-abajo) + 14px);
  border-radius: 24px 24px 0 0;
  background: var(--panel); border-top: 1px solid var(--linea-fuerte);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  animation: sube 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.popup-cuerpo { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.popup-lista { display: flex; flex-direction: column; gap: 6px; }
.ficha-todo { display: flex; flex-direction: column; gap: 10px; }
.ficha-sub { margin: 4px 2px 0; font-size: 15px; }
@media (min-width: 1000px) {
  .popup-mapa { left: auto; right: 12px; top: 64px; bottom: 96px; width: 400px; max-height: none; border-radius: 22px; border: 1px solid var(--linea-fuerte); }
}

/* el nombre del apartado y la fila de filtros (vista de solo mapa) */
.apartado-nombre {
  position: absolute; z-index: 520;
  left: 72px; top: calc(var(--safe-arriba) + 14px);
  height: 34px; align-items: center;
  max-width: calc(100% - 72px - 250px);
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--tinta);
  text-shadow: 0 1px 10px var(--fondo), 0 0 2px var(--fondo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.filtros-mapa {
  position: absolute; z-index: 515;
  left: 0; right: 0; top: calc(var(--safe-arriba) + 60px);
  gap: 8px; padding: 2px 12px 6px 72px;
  overflow-x: auto; scrollbar-width: none;
}
.filtros-mapa::-webkit-scrollbar { display: none; }
.filtro {
  flex: 0 0 auto; height: 36px; padding: 0 15px; border-radius: 99px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--cristal); border: 1px solid var(--cristal-borde); color: var(--tinta);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.filtro.activo { background: var(--tinta); color: var(--fondo); border-color: transparent; }
@media (min-width: 1000px) {
  .apartado-nombre { left: 76px; max-width: 40%; }
  .filtros-mapa { padding-left: 76px; right: 12px; }
}
@media (max-width: 999px) {
  /* nombre del apartado, zona y tiempo en la misma linea del telefono */
  .apartado-nombre { font-size: 20px; max-width: calc(100% - 72px - 222px); }
  .mapa-der { gap: 6px; }
  .zona-btn { max-width: 132px; padding: 0 10px; gap: 5px; font-size: 13.5px; }
  .zona-btn .flecha { display: none; }
  .tiempo-mapa { padding: 0 10px; gap: 5px; font-size: 13.5px; }
}

/* =========================================================================
   LA FICHA DEL NEGOCIO COMO ANTES (tc/ficha.js), en el popup del mapa
   ========================================================================= */
:root { --fv-fondo: rgba(22, 25, 29, 0.84); --fv-borde: rgba(255, 255, 255, 0.12); --fv-chip: rgba(255, 255, 255, 0.07); }
body.claro { --fv-fondo: rgba(255, 255, 255, 0.9); --fv-borde: rgba(20, 24, 28, 0.1); --fv-chip: rgba(20, 24, 28, 0.05); }
.popup-mapa.es-ficha { padding: 0; background: var(--fv-fondo); border: 1px solid var(--fv-borde);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); overflow: hidden; }
.popup-mapa.es-ficha > .hz-alto { display: none; }
.popup-mapa.es-ficha .popup-cuerpo { gap: 0; height: 100%; }
@media (max-width: 999px) {
  .popup-mapa.es-ficha { top: 0; max-height: none; border-radius: 0; border: 0; padding-bottom: 0; }
}
@media (min-width: 1000px) {
  .popup-mapa.es-ficha { top: 60px; bottom: 96px; width: 392px; border-radius: 26px; }
  .popup-mapa.es-ficha.ancha { left: 88px; width: auto; }
  .popup-mapa.ancha .fv-carta { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
.fv { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.fv-portada {
  position: relative; height: 150px; flex: 0 0 auto; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 45%, transparent) 0%, transparent 100%);
}
.fv-portada img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.fv-redondo {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 22, 26, 0.35); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.claro .fv-redondo { background: rgba(255, 255, 255, 0.6); color: var(--tinta); border-color: rgba(20, 24, 28, 0.12); }
.fv-redondo svg.ic { width: 18px; height: 18px; }
.fv-redondo.puesto { color: #FF5A6A; }
.fv-redondo.puesto svg path { fill: currentColor; }
.fv-ancho { position: absolute; top: 12px; left: 12px; }
.fv-esquina { position: absolute; top: calc(var(--safe-arriba) + 12px); right: 12px; display: flex; gap: 8px; }
@media (max-width: 999px) { .fv-ancho { display: none; } }
.fv-cuerpo { padding: 0 18px calc(var(--safe-abajo) + 20px); margin-top: -44px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.fv-logo {
  width: 64px; height: 64px; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--tono); color: #fff; font-size: 28px; font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.fv-logo img { width: 100%; height: 100%; object-fit: cover; }
.fv-nombre { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.fv-lema { margin: -6px 0 0; color: var(--tinta-suave); font-size: 14.5px; }
.fv-chapas { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-chapa { padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: var(--fv-chip); border: 1px solid var(--fv-borde); }
.fv-chapa.mal { color: var(--mal); background: rgba(224, 121, 111, 0.12); border-color: rgba(224, 121, 111, 0.3); }
.fv-chapa.bien { color: var(--bien); background: rgba(111, 207, 151, 0.12); border-color: rgba(111, 207, 151, 0.3); }
.fv-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fv-accion {
  height: 66px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--tinta); text-decoration: none;
  background: var(--fv-chip); border: 1px solid var(--linea-fuerte);
}
.fv-accion svg.ic { width: 19px; height: 19px; }
.fv-accion.principal {
  color: #14181C; border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(150deg, #E4E9EC 0%, #B7C0C6 55%, #D3D9DD 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.fv-datos { display: flex; flex-direction: column; gap: 7px; }
.fv-dato { display: flex; gap: 9px; align-items: flex-start; color: var(--tinta-suave); font-size: 14.5px; }
.fv-dato svg.ic { width: 17px; height: 17px; margin-top: 2px; color: var(--apagado); }
.fv-horario { border-radius: 14px; border: 1px solid var(--linea-fuerte); background: var(--fv-chip); }
.fv-horario summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer; font-size: 14.5px; }
.fv-horario summary::-webkit-details-marker { display: none; }
.fv-horario summary b { flex: 1; }
.fv-horario summary svg.ic { width: 17px; height: 17px; color: var(--apagado); }
.fv-horario[open] .fv-flecha { transform: rotate(180deg); }
.fv-semana { padding: 0 13px 10px 39px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--tinta-suave); }
.fv-dia { display: flex; justify-content: space-between; }
.fv-dia.hoy { color: var(--tinta); font-weight: 700; }
.fv-precio { font-size: 18px; font-weight: 800; }
.fv-desc { margin: 0; color: var(--tinta-suave); font-size: 15px; line-height: 1.5; white-space: pre-line; }
.fv-sub { margin: 8px 0 0; font-size: 18px; font-weight: 800; }
.fv-carta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.fv-prod-foto { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--fv-chip); border: 1px solid var(--fv-borde); display: grid; place-items: center; }
.fv-prod-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-agotado { position: relative; font-weight: 800; font-size: 14px; }
.fv-prod-t { margin-top: 7px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-prod-p { font-size: 14px; font-weight: 800; }
.fv-denunciar { align-self: center; margin-top: 8px; color: var(--apagado); text-decoration: underline; font-size: 13.5px; }

/* =========================================================================
   LOS POPUPS DEL MENU GENERAL COMO ANTES (tc/popups.js)
   ========================================================================= */
.popup-mapa { background: var(--fv-fondo); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
.popup-mapa .hz-alto h3 { font-size: 20px; font-weight: 800; }
.popup-icono { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fv-chip); border: 1px solid var(--fv-borde); }
.popup-icono svg.ic { width: 18px; height: 18px; }
.popup-vacio { text-align: center; color: var(--apagado); padding: 40px 20px; margin: 0; line-height: 1.5; }
@media (max-width: 999px) {
  .popup-mapa.completa, .popup-mapa.completa-movil { top: 0; max-height: none; border-radius: 0; padding-top: calc(var(--safe-arriba) + 10px); }
}
@media (min-width: 1000px) {
  .popup-mapa.completa { top: 60px; bottom: 96px; width: 420px; max-height: none; }
}
/* perfil */
.pf { display: flex; flex-direction: column; }
.pf-cara { position: relative; align-self: center; width: 104px; height: 104px; border-radius: 50%; margin: 6px 0 14px; display: grid; place-items: center; background: var(--tono); color: #fff; }
.pf-cara > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pf-ini { font-size: 44px; font-weight: 800; }
.pf-cam { position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #2A2E33; color: #fff; border: 2px solid var(--panel); }
.pf-cam svg.ic { width: 16px; height: 16px; }
.pf-seccion { margin: 14px 2px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--apagado); }
.pf-fila { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 2px; text-align: left; border-bottom: 1px solid var(--linea); }
.pf-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fv-chip); border: 1px solid var(--fv-borde); }
.pf-ic svg.ic { width: 18px; height: 18px; }
.pf-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-tx b { font-size: 16.5px; font-weight: 600; }
.pf-tx i { font-style: normal; font-size: 13px; color: var(--apagado); }
.pf-tx i:empty { display: none; }
.pf-valor { color: var(--apagado); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pf-valor.bien { color: var(--bien); font-weight: 700; }
.chev { width: 16px; height: 16px; color: var(--apagado); }
.pf-accion { display: flex; align-items: center; gap: 10px; min-height: 56px; margin-top: 12px; padding: 0 4px; font-size: 16px; font-weight: 600; }
.pf-accion.peligro { margin-top: 0; color: var(--mal); }
.pf-form { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.pf-label { font-size: 13px; font-weight: 700; color: var(--apagado); margin-top: 6px; }
.pf-aviso { margin: 0 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); }
/* El codigo de pais en los formularios: se ve "+53" y la lista con los nombres
   va detras, invisible (el jefe, 16-sep-2026). */
.pais-caja {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 100%; min-height: 46px; padding: 0 8px; border-radius: var(--r-chico);
  background: var(--panel-2); border: 1px solid var(--linea);
  font-weight: 700; font-size: 15.5px; color: var(--tinta); cursor: pointer;
}
.pais-caja::after {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 2px solid var(--apagado); border-bottom: 2px solid var(--apagado);
  transform: translateY(-2px) rotate(45deg);
}
.pais-caja .pais-lista {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.pais-caja:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.pf-error { color: var(--mal); font-weight: 600; font-size: 14px; }
.pf-volver { align-self: center; margin-top: 6px; color: var(--apagado); text-decoration: underline; }
/* mis negocios */
.mn-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mn-tile { display: flex; flex-direction: column; text-align: left; border-radius: 18px; overflow: hidden; background: var(--fv-chip); border: 1px solid var(--fv-borde); min-height: 176px; }
.mn-nuevo { align-items: center; justify-content: center; gap: 12px; border: 1.5px dashed var(--linea-fuerte); background: transparent; color: var(--tinta-suave); font-weight: 600; }
.mn-mas { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fv-chip); }
.mn-cara { position: relative; height: 100px; display: grid; place-items: center; background: color-mix(in srgb, var(--tono) 38%, #1B1E22); color: #fff; font-size: 34px; }
body.claro .mn-cara { background: color-mix(in srgb, var(--tono) 40%, #fff); }
.mn-cara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mn-chip { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: rgba(0, 0, 0, 0.55); color: #fff; }
.mn-duenno .mn-chip { position: static; display: inline-block; }
.mn-chip.bien { color: #8FE3B0; }
.mn-chip.mal { color: #FF9C92; }
.mn-chip.espera { color: #F2D27A; }
.mn-pie { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; }
.mn-pie b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-pie i { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 13px; color: var(--apagado); }
.mn-pie i svg.ic { width: 14px; height: 14px; }
.mn-pie small { font-size: 12.5px; color: var(--apagado); }
.mn-mio { display: flex; flex-direction: column; }
.mn-duenno { display: flex; flex-direction: column; gap: 8px; padding: calc(var(--safe-arriba) + 12px) 16px 12px; border-bottom: 1px solid var(--fv-borde); }
.mn-motivo { margin: 0; color: var(--mal); font-size: 14px; }
.mn-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mn-mio .fv-esquina { top: 12px; }

/* =========================================================================
   EL ARCO DEL INICIO (el jefe, 16-sep-2026): las tarjetas de comida, tiendas,
   renta, transporte, servicios y casas en abanico sobre el saludo, antes de
   que la persona escriba nada. Las coloca tc/arco.js con transform; aqui solo
   va el aspecto y el movimiento.
   ========================================================================= */
.arco {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 4px 0 10px;
  animation: entra 300ms ease both;
  /* EL ARCO MAS ARRIBA (el jefe, 16-sep-2026: "en mobile un poco, en el diseno pc
     subelo bastante como a la mitad de la pantalla para que cubra un poco mas el
     espacio de arriba que esta muy vacio"). El hilo pega su contenido al fondo,
     asi que lo que sube el arco es el aire que se le pone DEBAJO. */
  margin-bottom: 22px;
}
@media (min-width: 1000px) { .arco { margin-bottom: 24vh; } }
.arco-pista {
  position: relative; width: 100%;
  height: calc(var(--arco-lado) + 46px);
  --arco-lado: clamp(76px, 23vw, 104px);
  touch-action: pan-y;
}
.arco-t {
  position: absolute; left: 50%; top: 46%;
  width: var(--arco-lado); height: var(--arco-lado);
  padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: var(--panel-2); cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
  transition: transform 560ms cubic-bezier(0.22, 0.7, 0.2, 1),
              opacity 400ms ease, filter 400ms ease;
  will-change: transform;
}
body.claro .arco-t { box-shadow: 0 12px 26px rgba(20, 24, 28, 0.18); }
.arco-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arco-t:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.arco-texto { display: grid; gap: 6px; justify-items: center; text-align: center; max-width: 330px; }
.arco-texto h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.arco-texto p { margin: 0; font-size: 13.5px; line-height: 1.38; color: var(--tinta-suave); }
.arco-ir {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--chip-borde); background: var(--chip); color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 600;
  transition: background var(--t) ease, transform var(--t) ease;
}
.arco-ir:hover { background: var(--panel-2); }
.arco-ir:active { transform: scale(0.97); }
.arco-ir svg.ic { width: 16px; height: 16px; }

/* con el chat bajito (el asa arriba del todo) el arco estorba menos si se encoge */
@media (max-height: 620px) {
  .arco-pista { --arco-lado: clamp(66px, 19vw, 86px); }
  .arco-texto p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arco-t { transition: none; }
}

/* =========================================================
   BORRAR LA CUENTA: razon + contrasena, y el popup corto
   (el jefe, 16-sep-2026). El formulario tenia dos campos con
   codigo de pais y dejaba media pantalla vacia debajo.
   ========================================================= */
/* UN POCO MAS DE AIRE (el jefe, 16-sep-2026: "haz un poquito mas alto el popup
   para que pueda existir un poco mas separacion entre los elementos") */
.pf-form.pf-corto { gap: 8px; padding-top: 4px; }
.pf-form.pf-corto .pf-aviso { margin-bottom: 4px; font-size: 13.5px; }
.pf-form.pf-corto .pf-label { margin-top: 8px; }
.pf-form.pf-corto .entrada { min-height: 48px; }
.pf-form.pf-corto .boton { margin-top: 14px; min-height: 50px; }
.pf-form.pf-corto .pf-volver { margin-top: 6px; }

/* el ojito para ver la contraseña */
.campo-clave { position: relative; display: block; }
.campo-clave .entrada { padding-right: 46px; }
.campo-clave .ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--apagado); border-radius: 50%;
}
.campo-clave .ojo:active { color: var(--tinta); }
select.pf-lista {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
  color: var(--tinta);
}
select.pf-lista.vacia, select.pf-lista option[disabled] { color: var(--apagado); }
.boton.lleno.peligro { background: var(--mal); color: #fff; border-color: transparent; }
@media (min-width: 1000px) {
  /* en el ordenador la tarjeta va de 64px a 96px del borde: un formulario de dos
     campos dejaba media tarjeta vacia, asi que se ajusta a lo que hay dentro */
  .popup-mapa.popup-corto { bottom: auto; max-height: calc(100svh - 160px); }
  /* "muevelo para abajo" (el jefe, 16-sep-2026): se cuelga del borde de abajo */
  .popup-mapa.popup-corto.popup-abajo { top: auto; bottom: 96px; }
}