/* Estilos de la aplicación real — reusa tokens.css */
body { background: var(--fondo); }

/* ---------- cabecera con marca ---------- */
.hdr { position: sticky; top: 0; z-index: 500; }
.hdr-row { display: flex; align-items: center; gap: 10px; }
.hdr .btn-menu {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: 0;
  background: rgba(255,255,255,.16); color: #fff; font-size: 17px; line-height: 1;
}
.hdr .btn-menu:active { background: rgba(255,255,255,.28); }

/* ---------- hoja de menú ---------- */
.sheet-fondo {
  position: fixed; inset: 0; background: rgba(10,14,18,.45); z-index: 900;
  display: none; align-items: flex-end;
}
.sheet-fondo.abierto { display: flex; }
.sheet {
  width: 100%; background: #fff; border-radius: 18px 18px 0 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
.sheet .asa { width: 44px; height: 4px; border-radius: 2px; background: #D8DEE4; margin: 8px auto 10px; }
.sheet a, .sheet button.enlace {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 12px; border: 0; background: none; font: inherit;
  font-size: 15px; font-weight: 700; color: var(--tinta); text-decoration: none;
  border-radius: 12px; text-align: left;
}
.sheet a:active, .sheet button.enlace:active { background: #F2F5F7; }
.sheet .sep { height: 1px; background: var(--linea); margin: 6px 12px; }
.sheet .salir { color: var(--rojo); }
.sheet .quien { padding: 6px 14px 10px; font-size: 12px; color: var(--gris); }

/* ---------- listas ---------- */
.lista { display: flex; flex-direction: column; gap: 8px; }
.fila-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r-sm);
}
.fila-item .ava { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px;
  background: #FBEFD6; color: #8A5B12; border: 1px solid #F2DCAE;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.fila-item .txt { min-width: 0; flex: 1 1 auto; }
.fila-item .n { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-item .m { font-size: 12px; color: var(--gris); margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-item .der { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--gris-2); text-align: right; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  padding: 3px 7px; border-radius: 999px; }
.tag.ok { background: #E7F3EB; color: #14532D; border: 1px solid #BFE0CC; }
.tag.na { background: #FDECEC; color: #8A1C1C; border: 1px solid #F3C9C9; }
.tag.gris { background: #EEF1F4; color: #46525C; border: 1px solid #DCE2E8; }

/* ---------- mapa ---------- */
#mapa { position: relative; flex: 1 1 auto; min-height: 120px; margin: 12px 12px 0;
        border-radius: var(--r); overflow: hidden; border: 1px solid #CBD6CE; box-shadow: var(--sh-1); }
#mapa .leaflet-container { font: inherit; background: #E2E9E0; }
.pin-num {
  background: #fff; color: #1F2A33; border: 2px solid var(--verde);
  border-radius: 8px; font-size: 11px; font-weight: 800; padding: 2px 6px;
  white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.25); text-align: center;
}
.pin-num.hecho { background: #E7F3EB; border-color: #9CC7AD; color: #14532D; }
.pin-yo { background: var(--azul); border-color: #fff; color: #fff; }

/* ---------- avisos ---------- */
.toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom,0px));
  background: #1F2A33; color: #fff; padding: 12px 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; z-index: 950; display: none;
  box-shadow: var(--sh-2); text-align: center;
}
.toast.ver { display: block; }
.toast.malo { background: #8A1C1C; }

/* ---------- cargando ---------- */
.cargando { padding: 22px; text-align: center; color: var(--gris-2); font-size: 13px; }
.vacio { padding: 26px 16px; text-align: center; color: var(--gris-2); font-size: 13px; line-height: 1.5; }