/* screens/map.css — estilos de la pantalla Mapa en vivo. Solo tokens. */
.map-screen { position: relative; flex: 1; overflow: hidden; }
.map-canvas { position: absolute; inset: 0; background: var(--surface-1); }
/* saturación reducida: el mapa es fondo, los pins son protagonistas (solo el canvas, no los marcadores) */
.map-canvas canvas { filter: saturate(.55) brightness(.92); }
.map-canvas.is-offline canvas { filter: grayscale(1) brightness(.7); }
.map-canvas .maplibregl-marker { cursor: pointer; }
.map-canvas .maplibregl-ctrl-attrib { display: none; }

/* skeleton del mapa (uiState = loading): retícula tenue + shimmer + pins fantasma */
.map-skeleton { position: absolute; inset: 0; z-index: 3; background: var(--surface-1); overflow: hidden; }
.map-skeleton__grid { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--border-subtle) 46px 47px),
    repeating-linear-gradient(0deg, transparent 0 46px, var(--border-subtle) 46px 47px),
    radial-gradient(ellipse at 70% 30%, var(--surface-2), transparent 55%); }
.map-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, var(--border-subtle) 50%, transparent 70%); animation: shimmer 1.6s infinite; }
.map-skeleton__pin { position: absolute; width: var(--pin); height: var(--pin); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .map-skeleton::after { animation: none; } }

.map-header { position: absolute; left: 0; right: 0; top: 0; z-index: 5; padding: var(--sp-3) var(--sp-3) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); pointer-events: none; }
.map-header > * { pointer-events: auto; min-width: 0; }
.map-header__glass { min-width: 0; overflow: hidden; border-radius: var(--r-card); padding: var(--sp-2) 0 0; }
.map-header__top { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); }
.map-header__top .segmented { flex: 1; min-width: 0; }
.map-header__top .segmented__btn { padding: 0 var(--sp-1); font-size: var(--fs-overline); }
.map-header .chips-row { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.map-count { margin: 0; padding: 0 var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-s); font-weight: 600; color: var(--text-primary); text-shadow: 0 1px 2px var(--surface-0); }
.map-count__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: var(--glow-live); animation: pulse var(--dur-pulse) ease-in-out infinite; }
.map-offline { border-radius: var(--r-button); }

.map-actions { position: absolute; right: var(--sp-3); bottom: calc(18% + var(--sp-3)); z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.map-zone { border-radius: var(--r-chip); }
.map-attribution { position: absolute; left: var(--sp-3); bottom: calc(18% + var(--sp-1)); z-index: 4; margin: 0; font-size: 9px; color: var(--text-tertiary); opacity: .75; pointer-events: none; text-shadow: 0 1px 2px var(--surface-0); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-privacy { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-body-s); margin: 0; }
.map-sheet .sheet__body { padding-bottom: var(--sp-12); }
.map-sheet .sheet__title { font-size: var(--fs-body-m); }
.map-sheet .sheet__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }