/* ═══ AlertPopup — popup de alerta Uber-style (slide-up desde abajo) ═══
   Ancho = var(--panel-right) (el sidebar de detalle). z-index por encima de
   TODO (modal-overlay = 999999). Glow + contorno recolorean por tier de la
   alerta mostrada (ALTA rojo / MEDIA amarillo / BAJA verde). */

.ap-popup {
  position: fixed;
  bottom: 0;
  right: 0;
  width: var(--panel-right);
  max-width: 100vw;
  z-index: 1000001;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--glass-border);
  border-right: none;
  border-bottom: none;
  border-radius: 14px 0 0 0;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  animation: ap-slide-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  font-family: var(--font-mono);
}
@keyframes ap-slide-up {
  from { transform: translateY(102%); }
  to { transform: translateY(0); }
}
@keyframes ap-slide-down {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(102%); opacity: 0.4; }
}
.ap-popup.ap-closing { animation: ap-slide-down 0.22s ease-in both; pointer-events: none; }

/* Glow + contorno por tier (dos animaciones: slide-up una vez + glow en loop) */
.ap-popup.ap-tier-alta {
  border-color: var(--color-danger);
  animation: ap-slide-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both, ap-glow-red 1.5s ease-in-out 0.4s infinite;
}
.ap-popup.ap-tier-media {
  border-color: var(--color-idle);
  animation: ap-slide-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both, ap-glow-yellow 2.2s ease-in-out 0.4s infinite;
}
.ap-popup.ap-tier-baja {
  border-color: var(--color-success);
  animation: ap-slide-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both, ap-glow-green 2.6s ease-in-out 0.4s infinite;
}
@keyframes ap-glow-red {
  0%, 100% { box-shadow: 0 -4px 26px rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 -6px 38px rgba(239, 68, 68, 0.65); }
}
@keyframes ap-glow-yellow {
  0%, 100% { box-shadow: 0 -4px 24px rgba(250, 204, 21, 0.28); }
  50% { box-shadow: 0 -6px 34px rgba(250, 204, 21, 0.5); }
}
@keyframes ap-glow-green {
  0%, 100% { box-shadow: 0 -4px 22px rgba(34, 197, 94, 0.25); }
  50% { box-shadow: 0 -6px 32px rgba(34, 197, 94, 0.45); }
}

/* ── Row 1: badge nivel + tipo + navegador + X ── */
.ap-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--surface-container-low);
}
.ap-close {
  margin-left: auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px;
  background: transparent; color: var(--color-text-muted);
  cursor: pointer; flex-shrink: 0; font-size: 15px;
}
.ap-close:hover { background: var(--surface-variant); color: var(--on-surface); }
.ap-nav-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); border-radius: 5px;
  background: var(--surface-container-high); color: var(--on-surface-variant);
  cursor: pointer; font-size: 11px;
}
.ap-nav-btn:hover { color: var(--on-surface); border-color: var(--outline-variant); }

/* ── Row 2: réplica EXACTA de la fila compacta de la grilla (_rowCompactoHtml):
   [strip][placa][│][fecha/hora 2 filas][│][badge micro / cliente][│][telem 2x2 con cruz]
   Altura 40px, divisores --outline-variant, paddings 3px 8px — como la grilla. ── */
.ap-row2 {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--glass-border);
  height: 40px;
}
.ap-strip { width: 8px; flex-shrink: 0; position: relative; overflow: hidden; }
.ap-vline { width: 1px; flex-shrink: 0; background: var(--outline-variant); }
.ap-cell-placa {
  padding: 3px 8px;
  display: flex; align-items: center;
  font-size: 18px; font-weight: 800; font-family: var(--font-mono);
  color: var(--on-surface); line-height: 1.1; white-space: nowrap;
}
.ap-cell-fh {
  padding: 3px 8px;
  font-family: var(--font-mono);
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.2;
}
.ap-fh-fecha { font-size: 10px; color: var(--color-text-muted); line-height: 1.2; }
.ap-fh-hora { font-size: 13px; font-weight: 700; color: var(--on-surface); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ap-cell-micro {
  padding: 0; min-width: 110px; max-width: 150px; overflow: hidden;
  display: grid; grid-template-rows: 1fr 1fr;
}
.ap-micro-row {
  display: flex; align-items: center; padding: 1px 8px;
  border-bottom: 1px solid var(--outline-variant);
  overflow: hidden;
}
.ap-cliente {
  display: flex; align-items: center; padding: 1px 8px;
  font-size: 11px; font-family: var(--font-mono);
  color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; min-width: 0;
}
.ap-cell-telem {
  padding: 0; flex: 1; min-width: 80px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.ap-telem-cell { display: flex; align-items: center; justify-content: center; }
.ap-telem-cell i { font-size: 13px; cursor: help; }

/* ── Row 3: mini-mapa ── */
.ap-map {
  height: 150px;
  background: var(--surface-container);
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.ap-map .mapboxgl-canvas { outline: none; }

/* Marcador del mini-mapa (misma temática que el mapa principal: core + aura + sonar) */
.ap-marker { position: relative; width: 34px; height: 34px; }
.ap-marker-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--color-danger); background: rgba(239, 68, 68, 0.22);
  animation: ap-sonar 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.ap-marker .ap-marker-ring { animation-delay: 0s; }
.ap-marker .ap-marker-ring.r2 { animation-delay: 0.6s; }
.ap-marker .ap-marker-ring.r3 { animation-delay: 1.2s; }
.ap-marker-alta .ap-marker-ring { border-color: var(--color-danger); background: rgba(239, 68, 68, 0.22); }
.ap-marker-media .ap-marker-ring { border-color: var(--color-idle); background: rgba(250, 204, 21, 0.2); }
.ap-marker-baja .ap-marker-ring { border-color: var(--color-success); background: rgba(34, 197, 94, 0.2); }
@keyframes ap-sonar {
  0% { transform: scale(0.45); opacity: 0.85; }
  100% { transform: scale(2.8); opacity: 0; }
}
.ap-marker-core {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 2px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ef4444; font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
:root:not(.dark) .ap-marker-core { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.15); }
.ap-marker-media .ap-marker-core { color: var(--color-idle); }
.ap-marker-baja .ap-marker-core { color: var(--color-success); }

/* ── Row 4: dirección ── */
.ap-dir {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 10px; color: var(--on-surface-variant);
  border-bottom: 1px solid var(--glass-border);
  background: var(--surface-container-low);
  min-width: 0;
}
.ap-dir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Row 5: acciones 50/50 sin iconos ── */
.ap-actions { display: flex; }
.ap-actions button {
  flex: 1;
  padding: 11px 8px;
  border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.ap-actions button:hover { filter: brightness(1.15); }
.ap-btn-open { background: var(--surface-container-high); color: var(--on-surface); }
.ap-btn-main { color: #fff; }
.ap-btn-main[style*="--color-success"] { color: #04150a; }

@media (max-width: 520px) {
  .ap-popup { right: 0; width: 100vw; max-width: 100vw; border-radius: 14px 0 0 0; }
}