/* ==========================================================================
   Puntos de Interés (PI) — versión nueva
   Sin frameworks ni fuentes de iconos: todo el peso es este archivo.
   Pensado como aplicación móvil: barras fijas, hoja inferior, pestañas abajo.
   ========================================================================== */

:root {
  --verde:    #183508;
  --verde-cl: #2f7d4f;
  --acento:   #7092BF;
  --fondo:    #f2f4f1;
  --tarjeta:  #ffffff;
  --texto:    #1d2321;
  --suave:    #6b7671;
  --borde:    #e2e6e1;
  --barra:    #183508;
  --barra-txt:#f7f1f1;
  --sombra:   0 2px 14px rgba(16, 28, 12, .12);
  --sombra-alta: 0 -6px 28px rgba(16, 28, 12, .22);
  --radio:    16px;
  --alto-barra: 56px;
  --alto-tabs:  60px;
  --arriba: env(safe-area-inset-top, 0px);
  --abajo:  env(safe-area-inset-bottom, 0px);
}

[data-tema="oscuro"] {
  --fondo:    #111513;
  --tarjeta:  #1a201d;
  --texto:    #e4e9e6;
  --suave:    #9aa5a0;
  --borde:    #2a322e;
  --barra:    #0f1512;
  --barra-txt:#e8efe9;
  --sombra:   0 2px 14px rgba(0, 0, 0, .5);
  --sombra-alta: 0 -6px 28px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden gana siempre: hay bloques (visor, hoja, buscador) que
   traen su propio display y si no, tapan la pantalla. */
[hidden] { display: none !important; }

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

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Icono de tipo de punto dibujado (el motorhome): sigue al texto que lo rodea */
svg.glifo {
  width: 1.25em; height: 1.25em;
  fill: currentColor; stroke: none;
  display: inline-block; vertical-align: -.28em;
}

/* --- Cabecera ------------------------------------------------------------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: calc(var(--alto-barra) + var(--arriba));
  padding: var(--arriba) 6px 0;
  display: flex; align-items: center; gap: 2px;
  background: var(--barra); color: var(--barra-txt);
  box-shadow: var(--sombra);
}
.barra-titulo { flex: 1; min-width: 0; padding-left: 4px; line-height: 1.15; }
.barra-titulo strong { display: block; font-size: 16px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-titulo small { font-size: 12px; opacity: .72; }

.icono {
  appearance: none; border: 0; background: transparent; color: inherit;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.icono:active { background: rgba(255,255,255,.14); }
#btn-tema .ico-sol  { display: none; }
[data-tema="oscuro"] #btn-tema .ico-sol  { display: block; }
[data-tema="oscuro"] #btn-tema .ico-luna { display: none; }

/* --- Buscador ------------------------------------------------------------- */
.buscador {
  position: fixed; z-index: 901; left: 0; right: 0;
  top: calc(var(--alto-barra) + var(--arriba));
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}
.buscador input {
  flex: 1; font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 12px; padding: 10px 12px;
}
.buscador input:focus { outline: 2px solid var(--verde-cl); outline-offset: 1px; }
.texto { appearance: none; border: 0; background: none; color: var(--verde-cl);
  font: inherit; font-weight: 600; cursor: pointer; padding: 6px; }

/* --- Filtros -------------------------------------------------------------- */
.filtros {
  position: fixed; z-index: 880; left: 0; right: 0;
  top: calc(var(--alto-barra) + var(--arriba) + 8px);
  display: flex; gap: 8px; padding: 0 10px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtros.corrido { top: calc(var(--alto-barra) + var(--arriba) + 66px); }

.chip {
  appearance: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px;
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--borde); box-shadow: var(--sombra);
}
.chip.activo { background: var(--verde-cl); border-color: var(--verde-cl); color: #fff; }
.separa { flex: 0 0 1px; align-self: center; height: 22px; background: var(--borde); }

/* Ficha de características del punto */
.ficha { display: grid; gap: 2px; margin: 12px 0 0; }
.ficha div { display: flex; gap: 8px; align-items: baseline; font-size: 15px;
  padding: 6px 0; border-bottom: 1px solid var(--borde); }
.ficha div:last-child { border-bottom: 0; }
.ficha .et { color: var(--suave); flex: 1; }
.ficha .va { font-weight: 650; text-align: right; }
.ficha .no { color: var(--suave); font-weight: 500; }
.ficha a { color: var(--verde-cl); font-weight: 650; }

.marcas { display: flex; gap: 6px; font-size: 13px; }
.marcas span { opacity: .95; }

/* --- Vistas --------------------------------------------------------------- */
main { position: fixed; inset: 0; }
.vista { position: absolute; inset: 0; display: none; }
.vista.activa { display: block; }

/* --- Mapa ----------------------------------------------------------------- */
#mapa { position: absolute; inset: 0; z-index: 0; background: var(--fondo); }
.leaflet-control-attribution { font-size: 10px; opacity: .65; }
.leaflet-control-zoom { display: none; }

.flotante {
  position: absolute; right: 14px; z-index: 700;
  bottom: calc(var(--alto-tabs) + var(--abajo) + 18px);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  box-shadow: var(--sombra); display: grid; place-items: center; cursor: pointer;
}
.flotante.capas { bottom: calc(var(--alto-tabs) + var(--abajo) + 76px); }
.flotante:active { transform: scale(.94); }
.flotante.activo { background: var(--verde-cl); color: #fff; border-color: var(--verde-cl); }

/* Marcador propio, sin imagenes */
.pin {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.9);
}
.pin span { transform: rotate(45deg); font-size: 15px; line-height: 1; }
.pin.elegido { outline: 3px solid var(--acento); outline-offset: 2px; }
.yo {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1a73e8; border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(26,115,232,.22);
}

/* --- Lista ---------------------------------------------------------------- */
#vista-lista {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--alto-barra) + var(--arriba) + 56px) 12px calc(var(--alto-tabs) + var(--abajo) + 16px);
}
.orden { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.orden::-webkit-scrollbar { display: none; }
.chip-orden {
  appearance: none; cursor: pointer; white-space: nowrap; font: inherit; font-size: 14px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde);
  background: transparent; color: var(--suave);
}
.chip-orden.activo { background: var(--texto); color: var(--fondo); border-color: var(--texto); }

.tarjetas { display: grid; gap: 12px; }
@media (min-width: 720px) { .tarjetas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }

.tarjeta {
  display: flex; gap: 12px; align-items: stretch; cursor: pointer;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}
.tarjeta:active { transform: scale(.995); }
.tarjeta-foto { width: 104px; flex: 0 0 104px; background: var(--fondo); position: relative; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-foto .sinfoto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; opacity: .5; }
.tarjeta-datos { flex: 1; min-width: 0; padding: 10px 12px 10px 0; }
.tarjeta-datos h3 { margin: 0 0 2px; font-size: 16px; line-height: 1.25; }
.tarjeta-datos p { margin: 0; font-size: 13px; color: var(--suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--suave); margin-top: 6px; }
.etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; color: #fff; }
.estrellas { color: #e8a13a; font-weight: 700; }

.vacio { text-align: center; color: var(--suave); padding: 40px 10px; }

/* --- Hoja inferior -------------------------------------------------------- */
.velo { position: fixed; inset: 0; z-index: 940; background: rgba(0,0,0,.35); }
.hoja {
  position: fixed; z-index: 950; left: 0; right: 0; bottom: 0;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--tarjeta); color: var(--texto);
  border-radius: 20px 20px 0 0; box-shadow: var(--sombra-alta);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.hoja.abierta { transform: translateY(0); }
.hoja.arrastrando { transition: none; }
.hoja-agarre { padding: 10px 0 4px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.hoja-agarre span { width: 42px; height: 5px; border-radius: 3px; background: var(--borde); }
.hoja-cuerpo {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(var(--abajo) + 20px);
}
@media (min-width: 720px) {
  .hoja { left: auto; right: 16px; bottom: 16px; width: clamp(480px, 50vw, 860px); border-radius: 20px; max-height: calc(100vh - var(--alto-barra) - var(--arriba) - 32px); }
}

.hoja h2 { margin: 2px 0 4px; font-size: 20px; line-height: 1.2; }
.hoja .desc { margin: 10px 0 0; white-space: pre-line; }
.hoja .autor { font-size: 13px; color: var(--suave); }

.carrusel { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel img { width: 240px; height: 160px; object-fit: cover; border-radius: 12px;
  flex: 0 0 auto; scroll-snap-align: start; cursor: zoom-in; background: var(--fondo); }
.carrusel.chico img { width: 92px; height: 92px; }

/* En escritorio la hoja es un panel lateral: más ancho, letra y fotos más grandes. */
@media (min-width: 720px) {
  .hoja-cuerpo { padding: 6px 28px 28px; font-size: 17px; }
  .hoja h2 { font-size: 28px; }
  .hoja .autor { font-size: 14px; }
  .carrusel { gap: 12px; margin: 16px -28px 0; padding: 0 28px 4px; }
  .carrusel img { width: 480px; height: 320px; }
}

/* --- Detalle de un punto en escritorio: ventana a pantalla completa ---------
   Fotos a la izquierda en galería, datos a la derecha; cada lado con su propio
   scroll. En el celular .detalle no cambia nada y sigue siendo la hoja de abajo. */
.hoja-cerrar { display: none; }

@media (min-width: 900px) {
  .hoja.grande { top: calc(var(--arriba) + 20px); left: 20px; right: 20px; bottom: 20px;
    width: auto; max-height: none; }
  .hoja.grande .hoja-agarre { display: none; }
  .hoja.grande .hoja-cerrar { display: block; position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px;
    background: var(--fondo); color: var(--texto); box-shadow: var(--sombra); }
  .hoja.grande .hoja-cuerpo { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
  .hoja.grande .hoja-cuerpo > .vacio { padding: 28px; }

  .detalle { height: 100%; display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(400px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "fotos cabeza" "fotos info"; }
  .detalle-cabeza { grid-area: cabeza; padding: 28px 70px 0 28px; }
  .detalle-fotos  { grid-area: fotos; overflow-y: auto; padding: 20px;
    border-right: 1px solid var(--borde); }
  .detalle-info   { grid-area: info; overflow-y: auto; padding: 0 28px 28px; }

  /* Galería: la primera foto ancha, el resto de a dos. */
  .detalle-fotos .carrusel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin: 0; padding: 0; overflow: visible; }
  .detalle-fotos .carrusel img { width: 100%; height: 240px; }
  .detalle-fotos .carrusel img:first-child { grid-column: 1 / -1; height: min(58vh, 520px); }

  .detalle.sin-fotos { grid-template-columns: minmax(0, 860px); justify-content: center;
    grid-template-areas: "cabeza" "info"; }
}

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.boton {
  appearance: none; cursor: pointer; text-align: center; text-decoration: none;
  font: inherit; font-weight: 650; padding: 12px 14px; border-radius: 12px;
  background: var(--verde-cl); color: #fff; border: 1px solid var(--verde-cl);
  display: block;
}
.boton:active { filter: brightness(.94); }
.boton.claro { background: transparent; color: var(--texto); border-color: var(--borde); }
/* Borrar el punto: mismo botón claro, pero en rojo, para que no se confunda
   con "Editar", que va justo arriba y es lo que uno toca seguido. */
.boton.claro.rojo { color: #b23a3a; border-color: #e7bdb9; }
.boton.ancho { grid-column: 1 / -1; }

.resenas { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 14px; }
.resenas h3 { margin: 0 0 10px; font-size: 15px; }
.resena { padding: 10px 0; border-bottom: 1px dashed var(--borde); }
.resena:last-child { border-bottom: 0; }
.resena-cabeza { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.resena-cabeza b { font-weight: 650; }
.resena p { margin: 4px 0 0; font-size: 15px; }
.resena.mia { background: var(--fondo); border-radius: 12px; padding: 10px 12px; }
.resena-acciones { display: flex; gap: 14px; margin-top: 6px; }
.resena-acciones .texto { font-size: 13px; }
.texto.rojo { color: #b23a3a; }

/* --- Mi reseña ------------------------------------------------------------ */
.mi-resena { margin-top: 18px; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px 16px; }
.mi-resena h3 { margin: 0 0 8px; font-size: 15px; }
.mi-resena .autor { margin: 0 0 12px; }
.elegir-estrellas { display: flex; gap: 6px; margin-bottom: 10px; }
.elegir-estrellas button { appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 30px; line-height: 1; padding: 0 2px; color: var(--borde); }
.elegir-estrellas button.llena { color: #e0a51d; }
.mi-resena textarea { width: 100%; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 11px; padding: 11px 12px; resize: vertical; }
.mi-resena textarea:focus { outline: 2px solid var(--verde-cl); outline-offset: 1px; }
.fotos-viejas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foto-vieja { position: relative; }
.foto-vieja img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; display: block; }
.foto-vieja .quitar { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; cursor: pointer; background: #b23a3a; color: #fff; font-size: 12px;
  line-height: 22px; padding: 0; }
.mi-resena .subir { display: inline-block; margin-top: 12px; cursor: pointer; font-weight: 650;
  font-size: 14px; color: var(--verde-cl); border: 1px dashed var(--borde); border-radius: 11px;
  padding: 10px 14px; }
.cuenta-fotos { font-size: 13px; color: var(--suave); margin-left: 10px; }

/* --- Punto nuevo ---------------------------------------------------------- */
.coordenadas { margin: 0 0 8px; font-size: 14px; color: var(--suave);
  background: var(--fondo); border: 1px dashed var(--borde); border-radius: 11px;
  padding: 10px 12px; text-align: center; }
.coordenadas.puesto { color: var(--verde-cl); font-weight: 650; border-style: solid; }
#form-punto .acciones { margin-bottom: 4px; }
.coord-campos { display: flex; gap: 10px; margin-top: 12px; }
.coord-campos > div { flex: 1 1 0; min-width: 0; }
.coord-campos label { display: block; margin: 0 0 4px; }
.coord-campos input { width: 100%; }
.ayuda-coord { margin: 6px 0 0; font-size: 13px; color: var(--suave); }
#form-punto textarea { width: 100%; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 11px; padding: 11px 12px; resize: vertical; }
#form-punto textarea:focus { outline: 2px solid var(--verde-cl); outline-offset: 1px; }
#form-punto .subir { display: inline-block; margin-top: 14px; cursor: pointer; font-weight: 650;
  font-size: 14px; color: var(--verde-cl); border: 1px dashed var(--borde); border-radius: 11px;
  padding: 10px 14px; }
.pin.nuevo { background: #b23a3a; }
body.eligiendo #mapa { cursor: crosshair; }

/* --- Cuenta, punto nuevo, perfil y administración -------------------------- */
#vista-cuenta, #vista-agregar, #vista-perfil, #vista-admin {
  overflow-y: auto;
  padding: calc(var(--alto-barra) + var(--arriba) + 16px) 16px calc(var(--alto-tabs) + var(--abajo) + 24px);
}
.cuenta { max-width: 520px; margin: 0 auto; text-align: center; }
.cuenta-logo { width: 150px; margin: 6px auto 14px; display: block; }
.cuenta h2 { margin: 0 0 6px; font-size: 22px; }
.cuenta p { color: var(--suave); }
.cuenta .boton { margin: 10px auto 0; max-width: 320px; }
.cuenta-info { text-align: left; margin-top: 26px; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.cuenta-info h3 { margin: 12px 0 4px; font-size: 15px; }
.cuenta-info h3:first-child { margin-top: 0; }
.cuenta-pie { font-size: 13px; margin-bottom: 0; }

/* Entrar / registrarse */
.fichas { display: flex; gap: 6px; margin: 18px 0 4px; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 12px; padding: 4px; }
.ficha-tab { flex: 1; appearance: none; cursor: pointer; font: inherit; font-weight: 650;
  padding: 10px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); }
.ficha-tab.activa { background: var(--verde-cl); color: #fff; }

.formulario { display: none; text-align: left; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px 18px;
  margin-top: 12px; }
.formulario.activo { display: block; }
.formulario label { display: block; font-size: 13px; font-weight: 650; color: var(--suave);
  margin: 12px 0 4px; }
.formulario label:first-child { margin-top: 0; }
.formulario input, .formulario select {
  width: 100%; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 11px; padding: 11px 12px;
  appearance: none;
}
.formulario input:focus, .formulario select:focus {
  outline: 2px solid var(--verde-cl); outline-offset: 1px; }
.formulario .boton { margin-top: 16px; width: 100%; max-width: none; }
.formulario .texto { display: block; margin: 10px auto 0; cursor: pointer; }
.formulario .nota { font-size: 13px; color: var(--suave); margin: 12px 0 0; }

/* --- Visor de fotos ------------------------------------------------------- */
.visor { position: fixed; inset: 0; z-index: 990; background: #000;
  display: flex; flex-direction: column; }
/* La foto ocupa la caja entera y 'contain' la ajusta sin recortar: con
   max-height: 100% no alcanzaba porque la caja no tiene alto definido. */
.visor-caja { flex: 1; min-height: 0; position: relative; overflow: hidden;
  touch-action: none; }   /* el zoom de a dos dedos lo maneja la app, no el navegador */
.visor-caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.visor-caja img.agrandada { cursor: grab; }
.visor-caja img.agrandada:active { cursor: grabbing; }
.visor-cerrar { position: absolute; top: calc(var(--arriba) + 10px); right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 18px; }
.visor-pie { display: flex; align-items: center; justify-content: center; gap: 24px;
  color: #fff; padding: 10px 0 calc(var(--abajo) + 14px); font-size: 14px; }
.visor-pie button { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1; }

/* --- Menú lateral --------------------------------------------------------- */
.cajon {
  position: fixed; z-index: 960; top: 0; bottom: 0; left: 0; width: 272px;
  background: var(--tarjeta); box-shadow: var(--sombra-alta);
  padding: calc(var(--arriba) + 14px) 0 calc(var(--abajo) + 14px);
  transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.cajon.abierto { transform: translateX(0); }
.cajon-cabeza { display: flex; align-items: center; gap: 10px; padding: 0 16px 14px;
  border-bottom: 1px solid var(--borde); font-weight: 650; }
.cajon-cabeza img { width: 40px; height: auto; }
.cajon a { display: block; padding: 13px 16px; color: var(--texto); text-decoration: none; font-weight: 550; }
.cajon a:active { background: var(--fondo); }
.cajon hr { border: 0; border-top: 1px solid var(--borde); margin: 8px 0; }

/* --- Pestañas ------------------------------------------------------------- */
.tabs {
  position: fixed; z-index: 920; left: 0; right: 0; bottom: 0;
  height: calc(var(--alto-tabs) + var(--abajo));
  padding-bottom: var(--abajo);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--tarjeta); border-top: 1px solid var(--borde);
}
.tab {
  appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
  display: grid; place-items: center; gap: 2px; padding: 6px 0 4px;
  color: var(--suave); font: inherit; font-size: 11px; font-weight: 600;
}
.tab svg { width: 24px; height: 24px; }
.tab.activa { color: var(--verde-cl); }

/* --- Aviso ---------------------------------------------------------------- */
.aviso {
  position: fixed; z-index: 995; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--alto-tabs) + var(--abajo) + 20px);
  background: rgba(20,24,22,.94); color: #fff; font-size: 14px;
  padding: 10px 16px; border-radius: 999px; max-width: 86vw; text-align: center;
}

/* --- Cartel de bienvenida (se muestra una sola vez por telefono) ----------- */
.bienvenida {
  position: fixed; z-index: 970; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 88vw); max-height: 86vh; overflow: auto;
  background: var(--tarjeta); color: var(--texto);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 22px 20px; text-align: center;
}
.bienvenida img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 8px; }
.bienvenida h2 { margin: 0 0 10px; font-size: 19px; color: var(--verde-cl); }
.bienvenida p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; }
.bienvenida .bienvenida-nota { color: var(--suave); font-size: 13px; }
.bienvenida .boton { width: 100%; margin-top: 4px; }

/* --- Coordenadas buscadas -------------------------------------------------- */
.pin.buscado { background: #7092BF; }
.coord-hallada {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 4px;
}
.coord-hallada b { display: block; font-size: 15px; }
.coord-hallada span { display: block; font-size: 13px; color: var(--suave); margin-top: 3px; }
.coord-hallada .acciones { display: flex; gap: 8px; margin-top: 10px; }
.coord-hallada .boton { flex: 1; padding: 9px 10px; font-size: 13.5px; }

/* --- Ofrecer instalar la app ---------------------------------------------- */
.instalar {
  position: fixed; z-index: 930; left: 8px; right: 8px;
  bottom: calc(var(--alto-tabs) + var(--abajo) + 8px);
  display: flex; align-items: center; gap: 10px;
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 10px 12px;
}
.instalar img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 38px; }
.instalar-texto { flex: 1; min-width: 0; }
.instalar-texto b { display: block; font-size: 14.5px; }
.instalar-texto span { display: block; font-size: 12.5px; color: var(--suave); line-height: 1.35; }
.instalar .boton { padding: 9px 14px; font-size: 13.5px; }
.instalar-no {
  appearance: none; border: 0; background: transparent; color: var(--suave);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 6px;
}
/* Con el cartel puesto, las pantallas que se desplazan necesitan más aire. */
body.con-instalar #vista-cuenta, body.con-instalar #vista-agregar,
body.con-instalar #vista-perfil, body.con-instalar #vista-admin {
  padding-bottom: calc(var(--alto-tabs) + var(--abajo) + 96px);
}
body.con-instalar #tarjetas { padding-bottom: 80px; }

/* --- Administración -------------------------------------------------------- */
.adm-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.adm-resumen div {
  flex: 1 1 88px; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 12px; padding: 8px 10px; text-align: left;
}
.adm-resumen b { display: block; font-size: 19px; line-height: 1.1; }
.adm-resumen span { font-size: 11.5px; color: var(--suave); }

.adm-buscar {
  width: 100%; margin: 12px 0 0; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--texto); background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 12px;
}
.adm-buscar:focus { outline: none; border-color: var(--verde-cl); }

.adm-lista { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.adm-fila {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 12px; padding: 11px 12px;
}
.adm-fila h3 { margin: 0 0 3px; font-size: 15.5px; line-height: 1.25; }
.adm-fila h3 .marca {
  font-size: 10.5px; font-weight: 700; vertical-align: middle;
  background: var(--verde-cl); color: #fff; border-radius: 999px;
  padding: 2px 7px; margin-left: 6px;
}
.adm-fila p { margin: 0; font-size: 12.5px; color: var(--suave); line-height: 1.45; }
.adm-fila .adm-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.adm-fila .adm-botones button {
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--texto); background: transparent;
  border: 1px solid var(--borde); border-radius: 999px; padding: 6px 11px;
}
.adm-fila .adm-botones button:active { filter: brightness(.94); }
.adm-fila .adm-botones button.rojo { color: #b3261e; border-color: #e7bdb9; }
.adm-fila .adm-botones button:disabled { opacity: .5; }
.adm-vacio { color: var(--suave); font-size: 14px; padding: 8px 2px; }

@media (prefers-reduced-motion: reduce) {
  .hoja, .cajon { transition: none; }
}