:root {
  /* Tema base: grises fríos + azul (toda la app) */
  --bg: #0b1120;
  --bg-elevated: #111827;
  --panel: rgba(17, 24, 39, 0.85);
  --panel-solid: #151f33;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted2: #64748b;
  --accent: #1e40af;
  --accent-dim: rgba(30, 64, 175, 0.18);
  --accent2: #22d3ee;
  --accent2-dim: rgba(34, 211, 238, 0.14);
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.12);
  --border: rgba(148, 163, 184, 0.12);
  --border-strong: rgba(148, 163, 184, 0.22);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --sidebar-w-expanded: min(400px, 92vw);
  --sidebar-rail: 52px;
  --sidebar-w: var(--sidebar-w-expanded);
  
  /* Paleta moderna para panel lateral */
  --sidebar-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  --sidebar-border: rgba(30, 64, 175, 0.15);
  --sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(30, 64, 175, 0.08);
  --sidebar-header-bg: rgba(248, 250, 252, 0.95);
  --sidebar-header-border: rgba(30, 64, 175, 0.2);
  --sidebar-title-color: #1e40af;
  --sidebar-text: #475569;
  --sidebar-text-muted: #64748b;
  --sidebar-panel-bg: rgba(255, 255, 255, 0.98);
  --sidebar-panel-border: rgba(30, 64, 175, 0.12);
  --sidebar-panel-shadow: 0 4px 16px rgba(30, 64, 175, 0.06);
  --sidebar-hover-bg: rgba(30, 64, 175, 0.08);
  --sidebar-hover-border: rgba(30, 64, 175, 0.25);
  --sidebar-active-bg: rgba(30, 64, 175, 0.12);
  --sidebar-active-border: rgba(30, 64, 175, 0.35);
  --transition: 0.18s ease;
  /* Títulos del sidebar: un solo tamaño y estilo */
  --sidebar-title-fs: 0.75rem;
  --sidebar-title-fw: 700;
  --sidebar-title-ls: 0.11em;
  --sidebar-title-lh: 1.25;
  /* Halos difuminados en bordes (paneles / sidebar) */
  --edge-glow-blue: 0 0 36px rgba(59, 130, 246, 0.16);
  --edge-glow-blue-soft: 0 0 56px rgba(59, 130, 246, 0.08);
  --edge-glow-mix: 0 0 40px rgba(59, 130, 246, 0.14), 0 0 72px rgba(52, 211, 153, 0.08);
  --edge-inset-line: inset 0 0 0 1px rgba(148, 163, 184, 0.11);
  --edge-left-haze: inset 8px 0 36px -8px rgba(59, 130, 246, 0.42);
  /* Acento verde / cyan (éxito, foco secundario, halos mixtos) */
  --success: #34d399;
  --success-bright: #5eead4;
  --success-dim: rgba(52, 211, 153, 0.14);
  --success-glow: rgba(52, 211, 153, 0.24);
  --cyan: #22d3ee;
  --cyan-dim: rgba(34, 211, 238, 0.12);
  --chrome-bg: rgba(5, 9, 16, 0.9);
  --chrome-border: rgba(100, 116, 139, 0.22);
  --hover-glow-mix: 0 0 28px rgba(59, 130, 246, 0.18), 0 0 44px rgba(52, 211, 153, 0.1);
  --active-glow-strong: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 0 32px rgba(59, 130, 246, 0.2),
    0 0 48px rgba(52, 211, 153, 0.14);
  --backdrop-medium: blur(18px) saturate(1.12);
  /* Táctil: objetivo mínimo recomendado (Apple HIG / Material) */
  --touch-target-min: 44px;

  /* ----------------------------------------------------------------------
     v2 (2026-04): tokens unificados para chrome / dock / status bar.
     Objetivo: una sola paleta y una sola escala de sombras/radii para
     evitar el aspecto "triple sombra + triple borde" que se sentía cargado.
     ---------------------------------------------------------------------- */
  --app-surface-1: rgba(15, 23, 42, 0.78);
  --app-surface-2: rgba(15, 23, 42, 0.92);
  --app-surface-3: rgba(8, 12, 22, 0.96);
  --app-stroke: rgba(148, 163, 184, 0.16);
  --app-stroke-strong: rgba(148, 163, 184, 0.28);
  --app-text: #e2e8f0;
  --app-text-soft: #94a3b8;
  --app-text-strong: #f8fafc;
  --app-accent: #1e40af;
  --app-accent-soft: rgba(30, 64, 175, 0.16);
  --app-warn: #fb923c;
  --app-warn-soft: rgba(251, 146, 60, 0.16);
  --app-radius-pill: 999px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
  --app-shadow-elevated: 0 18px 38px rgba(0, 0, 0, 0.36);
  --app-blur-soft: blur(10px) saturate(1.1);
  --app-blur-strong: blur(18px) saturate(1.15);
}

/* ----------------------------------------------------------------------
   Botones más grandes para PC (mejor experiencia de usuario en escritorio)
   ---------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* Botones principales del panel de acciones */
  .panel-otdr .otdr-btn {
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 52px;
    border-radius: 14px;
  }

  /* Botón de armado OTDR */
  .panel-otdr .otdr-arm-btn {
    padding: 16px 20px;
    min-height: 56px;
    border-radius: 14px;
  }

  .panel-otdr .otdr-arm-btn-ico {
    width: 44px;
    height: 44px;
  }

  .panel-otdr .otdr-arm-btn-title {
    font-size: 0.95rem;
  }

  /* Botones de reporte de eventos */
  .reporte-ev-btn {
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 52px;
    border-radius: 14px;
  }

  .reporte-ev-btn--gps {
    min-height: 60px;
    font-size: 1.1rem;
    padding: 16px 24px;
  }

  .reporte-ev-btn--cta-verde,
  .reporte-ev-btn--cta-verde-outline {
    min-height: 56px;
    padding: 14px 16px;
  }

  .reporte-ev-btn--guardar {
    min-height: 56px;
    font-size: 1.05rem;
    padding: 16px 22px;
  }

  .reporte-ev-btn--ghost-sm {
    padding: 12px 16px;
    font-size: 0.9rem;
    min-height: 48px;
    border-radius: 12px;
  }

  /* Botones de autenticación */
  .auth-btn-install {
    padding: 14px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 52px;
    border-radius: 999px;
  }

  .auth-submit {
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    min-height: 56px;
    border-radius: 999px;
  }

  /* Botones de popup de eventos */
  .evento-popup__btn {
    padding: 12px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 48px;
    border-radius: 12px;
  }

  /* Botones de navegación externa */
  .map-external-nav-popup__btn {
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 48px;
    border-radius: 12px;
  }

  /* Botón de toggle del editor */
  .editor-chrome-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  /* Botones de tarjetas de red */
  .network-card {
    padding: 22px 18px 20px;
    min-height: 120px;
    border-radius: 16px;
  }

  .network-card-lbl {
    font-size: 1.1rem;
  }

  .network-card-sub {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 0% -20%, rgba(59, 130, 246, 0.16), transparent 52%),
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(71, 85, 105, 0.14), transparent 48%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(30, 58, 138, 0.1), transparent 46%),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(52, 211, 153, 0.07), transparent 50%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body.network-gate-open {
  overflow: hidden;
}

/*
 * Editor: altura = viewport dinámico (dvh/svh), no 100vh (Safari/iOS lo interpreta mal con barra URL).
 * -webkit-fill-available: respaldo iOS con notch / home indicator.
 */
html:has(body.editor-body) {
  height: 100%;
  min-height: 100%;
}

/* Editor: altura explícita del viewport para que el grid y Mapbox GL tengan tamaño no nulo (100% en cadena suele fallar). */
body.editor-body {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  /* Panel «Campo» / #layout: debe leer la pila del chrome aquí (no solo desde #map-wrap). */
  --editor-chrome-stack: calc(env(safe-area-inset-top, 0px) + 12px + 40px + 10px);
  /* Sheet «Operación» (desktop): sobreescrito en ≤900px con dvh/svh. */
  --editor-op-sheet-expanded-max: min(300px, 34vh);
  --editor-op-sheet-peek-max: 96px;
  --editor-op-safe-bottom: env(safe-area-inset-bottom, 0px);
  --editor-op-visible-height: 0px;
}

/*
 * Móvil editor: una sola fuente de verdad para el sheet inferior.
 * - svh: viewport pequeño estable (evita “saltos” al ocultar/mostrar barra URL).
 * - usamos svh fijo para que el sheet no cambie de tamaño segundos después.
 * - overflow-x: clip evita la “línea blanca” por 100vw + scrollbar.
 */
@media (max-width: 900px) {
  body.editor-body {
    overflow-x: clip;
    /* Altura móvil única para todo el editor (JS actualiza --editor-vv-height). */
    --editor-mobile-vh: var(--editor-vv-height, 100dvh);
    height: var(--editor-mobile-vh);
    min-height: var(--editor-mobile-vh);
    max-height: var(--editor-mobile-vh);
    --editor-op-sheet-expanded-max: clamp(170px, 25svh, 220px);
    --editor-op-sheet-peek-max: 62px;
  }

  html {
    height: var(--editor-vv-height, 100dvh);
    min-height: var(--editor-vv-height, 100dvh);
  }
}

@media (max-width: 520px) {
  body.editor-body {
    --editor-op-sheet-expanded-max: clamp(152px, 23svh, 198px);
    --editor-op-sheet-peek-max: 56px;
  }
}

body.editor-body #layout {
  height: 100%;
  min-height: 0;
}

/* Estado (#status) y métricas: nodos fuera de vista para app.js (sin panel en sidebar) */
body.editor-body .editor-ui-sink {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Pantalla inicial: elegir red FTTH o corporativa */
.network-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.network-gate.network-gate--dismissed {
  display: none;
  pointer-events: none;
}

.network-gate-inner {
  max-width: min(520px, 100%);
  width: 100%;
  padding: 28px 26px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(59, 130, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.network-gate-title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.network-gate-desc {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

.network-gate-foot {
  margin: 18px 0 0;
  font-size: 0.72rem;
  color: var(--muted2);
  text-align: center;
  line-height: 1.35;
}

.network-gate-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 520px) {
  .network-gate-cards {
    grid-template-columns: 1fr;
  }
}

/* Acceso inicial — misma caja y ritmo que `editor-float-panel` (Trazar / reporte) */
body.auth-gate-open {
  overflow: hidden;
}

body.auth-pending .home-shell {
  visibility: hidden;
  pointer-events: none;
}

.auth-gate-root {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(155deg, rgba(8, 12, 22, 0.97), rgba(15, 23, 42, 0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.auth-gate-root.auth-gate-root--visible {
  display: flex;
}

.auth-gate {
  width: 100%;
  max-width: min(400px, calc(100vw - 20px));
}

.auth-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(8, 12, 22, 0.99));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-card__titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.auth-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}

.auth-card__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 10px 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-card-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.auth-card-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.auth-card-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.auth-card-sub {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
  text-align: center;
}

.auth-btn-install {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.auth-btn-install:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.65);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12);
}

.auth-btn-install:focus-visible {
  outline: 2px solid var(--success-bright);
  outline-offset: 2px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-error:empty {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.auth-error:not(:empty) {
  margin: 0;
  min-height: 0;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: #fecaca;
  text-align: center;
  line-height: 1.4;
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 10px;
}

.auth-field-label {
  display: block;
  margin: 0;
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.auth-input::placeholder {
  color: var(--muted2);
}

.auth-input:focus {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.12);
  outline: none;
}

.auth-pass-wrap {
  position: relative;
}

.auth-pass-wrap .auth-input {
  padding-right: 48px;
}

.auth-pass-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.auth-pass-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.auth-pass-toggle.auth-pass-toggle--on {
  background: rgba(45, 212, 191, 0.15);
  color: #5eead4;
}

.auth-pass-toggle:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

.auth-submit {
  margin-top: 4px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f8fafc;
  cursor: pointer;
  background: linear-gradient(135deg, #059669 0%, #0d9488 38%, #0369a1 100%);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.32);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.auth-submit:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 22px rgba(5, 150, 105, 0.4);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit:focus-visible {
  outline: 2px solid var(--success-bright);
  outline-offset: 3px;
}

.auth-card-foot {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-size: 0.82rem;
}

.auth-link {
  border: none;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: #38bdf8;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-link:hover {
  color: #7dd3fc;
}

.auth-dot {
  color: var(--muted2);
}

.auth-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .auth-gate-root {
    align-items: flex-end;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }

  .auth-gate {
    max-width: 100%;
  }

  .auth-card {
    border-radius: 20px;
    max-height: min(88dvh, 720px);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow:
      0 24px 48px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(14, 165, 233, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .auth-card__titlebar {
    padding: 12px 14px;
    min-height: 52px;
  }

  .auth-card__title {
    font-size: 1rem;
  }

  .auth-card__body {
    padding: 12px 12px 14px;
    scrollbar-width: thin;
  }

  .auth-card-sub {
    font-size: 0.82rem;
    margin-bottom: 14px;
  }

  .auth-input {
    min-height: 46px;
    font-size: 16px;
    border-radius: 12px;
  }

  .auth-pass-wrap .auth-input {
    padding-right: 52px;
  }

  .auth-pass-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .auth-submit,
  .auth-btn-install {
    min-height: 46px;
    border-radius: 12px;
    font-size: 0.92rem;
  }

  .auth-card-foot {
    margin-top: 14px;
  }

  .network-gate {
    align-items: flex-end;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }

  .network-gate-inner {
    max-width: 100%;
    border-radius: 20px;
    padding: 20px 16px 16px;
    box-shadow:
      0 24px 48px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(56, 189, 248, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .network-gate-title {
    font-size: 1.2rem;
  }

  .network-gate-desc {
    font-size: 0.85rem;
    margin-bottom: 16px;
  }

  .network-gate-foot {
    margin-top: 12px;
  }

  .network-card {
    min-height: 108px;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .auth-card__body {
    padding: 8px 8px 10px;
  }

  .auth-card__titlebar {
    padding: 8px 10px;
  }

  .auth-card__title {
    font-size: 0.88rem;
  }

  .auth-card-foot {
    flex-direction: column;
    gap: 8px;
    font-size: 0.78rem;
  }

  .network-gate-inner {
    padding: 22px 16px 18px;
  }

  .network-gate-title {
    font-size: 1.15rem;
  }

  .network-card-sub {
    font-size: 0.68rem;
  }
}

body.auth-pending.analitica-body .analitica-app {
  visibility: hidden;
  pointer-events: none;
}

.network-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(160deg, rgba(51, 65, 85, 0.45), rgba(15, 23, 42, 0.65));
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.network-card:hover {
  border-color: rgba(59, 130, 246, 0.52);
  box-shadow:
    0 0 0 3px var(--accent-dim),
    0 8px 24px rgba(15, 23, 42, 0.45),
    var(--hover-glow-mix);
}

.network-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.network-card-ico img {
  display: block;
}

.network-card-lbl {
  font-size: 1rem;
  font-weight: 700;
}

.network-card-sub {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

#layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  position: relative;
  --sidebar-w: var(--sidebar-w-expanded);
  --editor-chrome-h: 48px;
}

#layout.sidebar-collapsed {
  --sidebar-w: 0px;
}

/* Editor: altura lógica bajo hamburguesa + buscador + casita (sin franja de barra) */
body.editor-body #layout {
  --editor-chrome-stack: calc(env(safe-area-inset-top, 0px) + 12px + 40px + 10px);
}

/* Barra superior (referencia FlashFiber: hamburguesa + título) */
.editor-chrome {
  grid-column: 1;
  grid-row: 1;
  /* Debe quedar por encima del FAB stack lateral (540) para que el listbox
     del buscador no se meta por debajo de los botones, pero por debajo de
     paneles/backdrop flotantes (575/585). */
  z-index: 560;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--editor-chrome-h);
  padding: 0 14px 0 10px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.96), var(--chrome-bg));
  border-bottom: 1px solid var(--chrome-border);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35), var(--edge-glow-mix);
  overflow: visible;
}

/* Referencia para buscador centrado */
body.editor-body .editor-chrome {
  position: relative;
}

/* Buscador centrado en el eje superior (no pegado a la casita) */
body.editor-body .editor-chrome-search-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: min(280px, calc(100% - 112px));
  max-width: min(280px, calc(100vw - 40px));
  margin: 0;
  /* El contenedor no intercepta; el listbox/campo sigue con pointer-events en .cable-search */
  pointer-events: none;
}

body.editor-body .editor-chrome-search-slot > * {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
}

/* PC: buscador un poco más ancho (móvil/tablet ≤900px sigue con la regla base o @media propias). */
@media (min-width: 901px) {
  body.editor-body .editor-chrome-search-slot {
    width: min(440px, calc(100% - 100px));
    max-width: min(440px, calc(100vw - 32px));
  }
}

/* Controles a la izquierda por encima del buscador si se solapan en pantallas muy bajas */
body.editor-body .editor-chrome-toggle,
body.editor-body .editor-chrome-home {
  position: relative;
  z-index: 2;
}

/* Herramientas en barra superior (sin rail lateral #sidebar). */
body.editor-body .editor-chrome-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

body.editor-body .editor-chrome-tool-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(15, 23, 42, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e2e8f0;
  flex-shrink: 0;
}

body.editor-body .editor-chrome-tool-btn:hover {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(30, 41, 59, 0.92);
}

body.editor-body .editor-chrome-tool-btn--reporte {
  border-color: rgba(251, 146, 60, 0.4);
}

body.editor-body .editor-chrome-tool-btn--reporte:hover {
  border-color: rgba(251, 191, 36, 0.65);
}

.editor-chrome-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 18px rgba(56, 189, 248, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.editor-chrome-toggle:hover {
  border-color: rgba(56, 189, 248, 0.58);
  background: rgba(30, 41, 59, 0.96);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 6px 24px rgba(56, 189, 248, 0.2),
    0 0 36px rgba(52, 211, 153, 0.12);
}

.editor-chrome-toggle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.5),
    0 0 28px rgba(52, 211, 153, 0.18);
}

.editor-chrome-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 14px;
}

.editor-chrome-burger-line {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.28s ease,
    opacity 0.2s ease;
}

/* Panel colapsado: se mantienen las tres líneas (no se convierten en X). */

@media (prefers-reduced-motion: reduce) {
  .editor-chrome-burger-line {
    transition: none;
  }
}

/* Menú ☰ campo: icono abierto → X */
#btn-editor-field-menu[aria-expanded='true'] .editor-chrome-burger-line:nth-child(1) {
  transform: translateY(5.25px) rotate(45deg);
}
#btn-editor-field-menu[aria-expanded='true'] .editor-chrome-burger-line:nth-child(2) {
  opacity: 0;
}
#btn-editor-field-menu[aria-expanded='true'] .editor-chrome-burger-line:nth-child(3) {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* Backdrop + panel lateral «Campo» (debajo del chrome, encima del mapa). */
body.editor-body .editor-field-sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 548;
  background:
    radial-gradient(ellipse 100% 70% at 15% 25%, rgba(56, 189, 248, 0.1), transparent 52%),
    radial-gradient(ellipse 90% 60% at 85% 75%, rgba(139, 92, 246, 0.08), transparent 48%),
    rgba(2, 6, 23, 0.66);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.26s ease,
    visibility 0.26s ease;
}

body.editor-body .editor-field-sidebar-backdrop[hidden] {
  display: none !important;
}

body.editor-body .editor-field-sidebar-backdrop:not([hidden]) {
  display: block !important;
}

body.editor-body .editor-field-sidebar-backdrop.editor-field-sidebar-backdrop--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.editor-body .editor-field-sidebar {
  position: fixed;
  z-index: 549;
  top: calc(env(safe-area-inset-top, 0px) + var(--editor-chrome-h, 48px));
  left: 0;
  bottom: 0;
  width: fit-content;
  max-width: min(92vw, 100vw - 24px);
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0 20px 20px 0;
  background: linear-gradient(
    168deg,
    rgba(51, 65, 85, 0.62) 0%,
    rgba(30, 41, 59, 0.78) 38%,
    rgba(15, 23, 42, 0.9) 72%,
    rgba(2, 6, 23, 0.96) 100%
  );
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  box-shadow:
    18px 0 56px rgba(0, 0, 0, 0.38),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateX(-105%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.32, 1),
    visibility 0.32s ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lista Campo: sin columna vacía hasta el borde inferior del viewport */
body.editor-body .editor-field-sidebar {
  bottom: auto;
  height: fit-content;
  max-height: calc(
    100dvh - var(--editor-chrome-h, 48px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px
  );
}

body.editor-body .editor-field-sidebar.editor-field-sidebar--open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.editor-body .editor-field-sidebar__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: min(320px, calc(100vw - 24px));
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
}

/** Menú Campo: ancho al contenido (títulos), sin huecos laterales grandes */
body.editor-body #editor-field-view-main {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
}

body.editor-body .editor-field-sidebar__head {
  margin: 0 0 10px;
  padding: 0 4px 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

body.editor-body .editor-field-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.editor-body .editor-field-sidebar__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  white-space: nowrap;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(30, 41, 59, 0.58) 45%,
    rgba(15, 23, 42, 0.82) 100%
  );
  color: #f1f5f9;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.2s ease;
}

body.editor-body .editor-field-sidebar__item-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #5eead4;
  opacity: 0.95;
}

body.editor-body .editor-field-sidebar__item-ico svg {
  display: block;
}

body.editor-body .editor-field-sidebar__item:hover .editor-field-sidebar__item-ico {
  color: #99f6e4;
  opacity: 1;
}

body.editor-body .editor-field-sidebar__item:hover {
  border-color: rgba(34, 211, 238, 0.32);
  background: linear-gradient(
    168deg,
    rgba(34, 211, 238, 0.1) 0%,
    rgba(30, 58, 95, 0.52) 48%,
    rgba(15, 23, 42, 0.86) 100%
  );
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(34, 211, 238, 0.1);
  transform: translateY(-1px);
}

body.editor-body .editor-field-sidebar__item:active {
  transform: scale(0.985) translateY(0);
}

body.editor-body .editor-field-sidebar__item-title {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-align: left;
  flex: 1;
  min-width: 0;
}

/* Trazar: overlay a pantalla (móvil centrado; ≥901px alineado a la izquierda vía @media). */
#editor-trazar-modal.editor-trazar-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  pointer-events: none;
}

#editor-trazar-modal.editor-trazar-modal[hidden] {
  display: none !important;
}

#editor-trazar-modal.editor-trazar-modal:not([hidden]) {
  pointer-events: auto;
}

.editor-trazar-modal__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  /* Sin backdrop-filter: el mapa debe verse nítido (no “nublado”). Tinte muy suave solo para contraste del panel. */
  background: rgba(2, 6, 23, 0.12);
  cursor: pointer;
  z-index: 0;
}

.editor-trazar-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 20px));
  max-height: min(88dvh, calc(100dvh - var(--editor-chrome-h, 48px) - 20px));
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  background:
    linear-gradient(175deg, rgba(15, 23, 42, 0.95) 0%, rgba(17, 24, 39, 0.97) 62%, rgba(30, 41, 59, 0.96) 100%);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 44px -10px rgba(34, 197, 94, 0.2);
}

/* Escritorio: panel Trazar pegado a la izquierda, bajo la barra superior (no centrado). */
@media (min-width: 901px) {
  body.editor-body #editor-trazar-modal.editor-trazar-modal {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: 12px;
    padding-top: calc(var(--editor-chrome-stack) + 10px);
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }

  body.editor-body .editor-trazar-modal__panel {
    max-height: min(88dvh, calc(100dvh - var(--editor-chrome-stack) - 24px));
  }
}

/* Cabecera alineada con «Montar evento» (verde + cierre ×). */
body.editor-body .editor-trazar-modal__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.28);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.24), rgba(15, 23, 42, 0.55));
  border-radius: 16px 16px 0 0;
}

body.editor-body .editor-trazar-modal__title.editor-float-panel__title {
  margin: 0;
  text-align: left;
}

/* ——— Trazar: cuerpo y formulario (estilo compartido con reporte) ——— */
.editor-trazar-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 6px 8px 8px;
}

/* ——— Montar cierre (E1/E2): modal compacto, paleta gris / azul / blanco / verde ——— */
#editor-montar-cierre-modal.editor-mc-modal[hidden] {
  display: none !important;
}

.editor-mc-modal {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  pointer-events: none;
}

.editor-mc-modal:not([hidden]) {
  pointer-events: auto;
}

.editor-mc-modal.editor-mc-modal--map-pick {
  /* Mientras se elige punto, los clics fuera del panel deben pasar al mapa. */
  pointer-events: none;
}

.editor-mc-modal.editor-mc-modal--map-pick .editor-mc-modal__panel {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: max(8px, env(safe-area-inset-top));
  max-height: min(48dvh, 360px);
}

.editor-mc-modal.editor-mc-modal--map-pick .editor-mc-modal__backdrop {
  pointer-events: none;
}

.editor-mc-modal__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(15, 23, 42, 0.22);
  cursor: pointer;
  z-index: 0;
}

.editor-mc-modal__panel {
  position: relative;
  z-index: 1;
  width: min(360px, calc(100vw - 20px));
  max-height: min(82dvh, calc(100dvh - var(--editor-chrome-h, 48px) - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.editor-mc-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
  color: #ffffff;
}

.editor-mc-modal__head-text {
  min-width: 0;
}

.editor-mc-modal__eyebrow {
  margin: 0 0 2px;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.editor-mc-modal__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.editor-mc-modal__mol {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
  word-break: break-word;
}

.editor-mc-modal__close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.editor-mc-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.editor-mc-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 8px;
  background: #f8fafc;
}

.editor-mc-hint {
  margin: 0 0 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #475569;
}

.editor-mc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.editor-mc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 10px 10px 11px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.editor-mc-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.12);
  transform: translateY(-1px);
}

.editor-mc-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.editor-mc-card__badge--e1 {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.editor-mc-card__badge--e2 {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #86efac;
}

.editor-mc-card__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

.editor-mc-card__hint {
  font-size: 0.68rem;
  line-height: 1.35;
  color: #64748b;
}

.editor-mc-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.editor-mc-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.editor-mc-kind-badge--e1 {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

.editor-mc-kind-badge--e2 {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}

.editor-mc-coords {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 500;
  color: #64748b;
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  text-align: right;
  max-width: 58%;
  line-height: 1.3;
}

.editor-mc-coord-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.editor-mc-btn--sm {
  padding: 4px 10px;
  font-size: 0.72rem;
}

.editor-mc-smart-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}

.editor-mc-sub-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 112px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.editor-mc-input--sm {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.editor-mc-smart-preview {
  margin: 0 0 6px;
  min-height: 1.05rem;
  font-size: 0.66rem;
  font-weight: 500;
  color: #475569;
}

body.editor-mc-pick-map .mapboxgl-canvas-container.mapboxgl-interactive {
  cursor: crosshair !important;
}

/* Pin de borrador (Montar cierre) — mismo espíritu que Trazar ref, icono E1/E2 */
.editor-mc-map-pin {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 42px;
  height: 46px;
  pointer-events: auto;
  filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.38));
}

.editor-mc-map-pin img {
  display: block;
  width: 36px;
  height: auto;
  object-fit: contain;
  user-select: none;
}

.editor-mc-combo {
  position: relative;
  z-index: 4;
}

.editor-mc-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: min(200px, 32vh);
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  z-index: 20;
}

.editor-mc-suggest li {
  margin: 0;
  padding: 7px 10px;
  font-size: 0.78rem;
  color: #0f172a;
  cursor: pointer;
  line-height: 1.25;
}

.editor-mc-suggest li:hover,
.editor-mc-suggest li[aria-selected='true'] {
  background: #eff6ff;
  color: #1e3a8a;
}

.editor-mc-lab {
  display: block;
  margin: 6px 0 3px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.editor-mc-req {
  color: #1e40af;
}

.editor-mc-input,
.editor-mc-ta {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 0.8rem;
  background: #ffffff;
  color: #0f172a;
}

.editor-mc-ta {
  resize: vertical;
  min-height: 48px;
  line-height: 1.35;
}

.editor-mc-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.editor-mc-btn {
  appearance: none;
  margin: 0;
  padding: 6px 14px;
  min-height: 34px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.editor-mc-btn--ghost {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
}

.editor-mc-btn--ghost:hover {
  background: #f1f5f9;
}

.editor-mc-btn--primary {
  border-color: #166534;
  background: #15803d;
  color: #ffffff;
}

.editor-mc-btn--primary:hover {
  background: #166534;
}

@media (max-width: 520px) {
  .editor-mc-cards {
    grid-template-columns: 1fr;
  }

  .editor-mc-modal__panel {
    width: min(100vw - 8px, 440px);
    max-height: min(86dvh, calc(100dvh - var(--editor-chrome-h, 48px) - 8px));
    border-radius: 14px 14px 10px 10px;
  }

  .editor-mc-modal {
    align-items: flex-end;
    padding: max(4px, env(safe-area-inset-top)) 4px max(6px, env(safe-area-inset-bottom));
  }

  .editor-mc-modal__head {
    padding: 12px 12px 10px;
  }

  .editor-mc-modal__body {
    padding: 12px 12px 10px;
  }

  .editor-mc-btn {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 0.86rem;
  }

  .editor-mc-btn--sm {
    min-height: 40px;
    font-size: 0.82rem;
  }

  .editor-mc-input,
  .editor-mc-ta,
  .editor-mc-input--sm {
    min-height: 40px;
    font-size: 0.95rem;
  }

  .editor-mc-ta {
    min-height: 72px;
  }

  .editor-mc-smart-tools {
    flex-wrap: wrap;
    gap: 6px;
  }

  .editor-mc-smart-tools > * {
    flex: 1 1 auto;
  }

  .editor-mc-coord-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .editor-mc-modal.editor-mc-modal--map-pick .editor-mc-modal__panel {
    max-height: min(42dvh, 280px);
  }
}

.editor-trazar-card {
  margin: 0 0 10px;
  padding: 9px 10px 11px;
  border-radius: 11px;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(71, 85, 105, 0.4);
}
.editor-trazar-card__title {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  color: #f8fafc;
}
/* Flujo «punto en tendido»: pin + dirección + fibra */
.editor-trazar-punto-workspace {
  margin: 0 0 12px;
  padding: 12px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: linear-gradient(165deg, rgba(22, 101, 52, 0.22), rgba(15, 23, 42, 0.72));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.editor-trazar-punto-workspace[hidden] {
  display: none !important;
}
.editor-trazar-punto-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.editor-trazar-punto-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #ecfdf5;
  background: linear-gradient(135deg, #22c55e 0%, #0e7490 100%);
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.35);
}
.editor-trazar-punto-head__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
  text-align: left;
}
.editor-trazar-punto-workspace .editor-trazar-dir-block {
  margin: 0;
  border: 1px solid rgba(71, 85, 105, 0.45);
  background: rgba(2, 6, 23, 0.35);
}
.editor-trazar-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 7px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #ecfdf5;
  background: linear-gradient(135deg, #16a34a, #0e7490);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  vertical-align: middle;
}
.editor-trazar-step-pill--ghost {
  background: rgba(15, 23, 42, 0.65);
  color: #94a3b8;
  box-shadow: none;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.editor-trazar-seg__kicker {
  display: block;
  margin-bottom: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5eead4;
}
.editor-trazar-seg__face--dir {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
}
.editor-trazar-seg__face--dir .editor-trazar-seg__t {
  font-size: 0.86rem;
  font-weight: 700;
}
.editor-trazar-seg__dir-ico {
  font-size: 0.95rem;
  opacity: 0.85;
  font-weight: 700;
}
.editor-trazar-ref--waiting {
  color: #c4b5fd !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  background: rgba(49, 46, 129, 0.35) !important;
}
.editor-trazar-ref--ok {
  color: #a7f3d0 !important;
  border-color: rgba(45, 212, 191, 0.45) !important;
  background: rgba(6, 78, 59, 0.28) !important;
}

.editor-trazar-seg-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.editor-trazar-seg-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.editor-trazar-seg {
  display: block;
  margin: 0;
  cursor: pointer;
}
.editor-trazar-seg--wide {
  margin-top: 0;
}
.editor-trazar-seg__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.editor-trazar-seg__face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.12) 0%, rgba(15, 23, 42, 0.9) 72%);
  color: #ecfdf5;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.editor-trazar-seg__t {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f8fafc;
}
.editor-trazar-seg__sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(236, 253, 245, 0.72);
}
.editor-trazar-seg__input:checked + .editor-trazar-seg__face {
  border: 1px solid rgba(34, 197, 94, 0.6);
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #0e7490 100%);
  color: #ffffff;
  box-shadow:
    0 10px 24px rgba(22, 163, 74, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: none;
}
.editor-trazar-seg__input:checked + .editor-trazar-seg__face .editor-trazar-seg__t,
.editor-trazar-seg__input:checked + .editor-trazar-seg__face {
  color: #ffffff;
}
.editor-trazar-seg__input:checked + .editor-trazar-seg__face .editor-trazar-seg__sub {
  color: rgba(255, 255, 255, 0.9);
}
.editor-trazar-seg__input:focus-visible + .editor-trazar-seg__face {
  outline: 2px solid rgba(52, 211, 153, 0.7);
  outline-offset: 2px;
}

.editor-trazar-ref {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #a5b4fc;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(49, 46, 129, 0.25);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.editor-trazar-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(71, 85, 105, 0.6);
  background: rgba(2, 6, 23, 0.5);
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.editor-trazar-input::placeholder {
  color: #475569;
  font-weight: 500;
}
.editor-trazar-input:focus {
  outline: none;
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.editor-trazar-sticky-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(34, 197, 94, 0.14);
}
/* «Fijar en mapa» = mismo botón claro que «Cancelar modo mapa» (reporte-ev + ghost en body). */
body.editor-body .editor-trazar-apply-btn.reporte-ev-btn--ghost-sm {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.editor-body .editor-trazar-apply-btn.reporte-ev-btn--ghost-sm:active {
  transform: scale(0.99);
}

/* Mapbox marker pin Trazar (animado) */
#map .mapboxgl-marker .editor-trazar-cut-pin-wrap,
.mapboxgl-marker .editor-trazar-cut-pin-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.28));
  animation: editor-trazar-pin-bob 1.6s ease-in-out infinite;
}
.editor-trazar-cut-pin-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.editor-trazar-cut-pin-label {
  max-width: 156px;
  padding: 6px 10px 6px 11px;
  margin-top: 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.02em;
  text-align: center;
  color: #e2e8f0;
  background: linear-gradient(165deg, rgba(51, 65, 85, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  border-left: 3px solid #ef4444;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  white-space: normal;
  backdrop-filter: blur(6px);
}
.editor-trazar-cut-pin-label--split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  text-align: left;
}
.editor-trazar-cut-pin-label__primary {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.01em;
}
.editor-trazar-cut-pin-label__row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.editor-trazar-cut-pin-label__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 1.5px rgba(254, 242, 242, 0.55);
}
.editor-trazar-cut-pin-label__secondary {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
#map .mapboxgl-marker .editor-trazar-cut-pin-svg,
.mapboxgl-marker .editor-trazar-cut-pin-svg {
  display: block;
  width: 28px;
  height: 37px;
}
#map .mapboxgl-marker .editor-trazar-cut-pin-body,
.mapboxgl-marker .editor-trazar-cut-pin-body,
#map .mapboxgl-marker .editor-trazar-cut-pin-dot,
.mapboxgl-marker .editor-trazar-cut-pin-dot {
  pointer-events: none;
}
@keyframes editor-trazar-pin-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Referencia en cable (modo punto): disco violeta, distinto del pin de corte */
.mapboxgl-marker .editor-trazar-ref-pin-wrap,
#map .mapboxgl-marker .editor-trazar-ref-pin-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.editor-trazar-ref-pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #a78bfa 0%, #6366f1 100%);
  border: 2px solid rgba(248, 250, 252, 0.95);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.35),
    0 2px 10px rgba(99, 102, 241, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  body.editor-body .editor-field-sidebar,
  body.editor-body .editor-field-sidebar-backdrop {
    transition: none;
  }
  body.editor-body .editor-field-sidebar__item,
  body.editor-body .editor-field-sidebar__item:hover,
  body.editor-body .editor-field-sidebar__item:active {
    transition: none;
    transform: none;
  }
  .editor-trazar-cut-pin-wrap {
    animation: none !important;
  }
}

#sidebar {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-self: start;
  justify-self: stretch;
  /* Altura al contenido; tope para no tapar del todo el mapa en móvil */
  height: auto;
  max-height: min(88vh, calc(100dvh - var(--editor-chrome-h, 48px) - 20px));
  border-right: none;
  border-bottom: 1px solid var(--sidebar-border);
  padding: 20px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: var(--sidebar-shadow);
  border-radius: 16px;
  margin: 8px;
}

body.editor-body #sidebar {
  max-height: min(88vh, calc(100dvh - var(--editor-chrome-stack) - 20px));
}

/* Cabecera del panel lateral (solo título) */
.sidebar-header {
  flex-shrink: 0;
  margin: 0 0 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sidebar-header-border);
  background: var(--sidebar-header-bg);
  border-radius: 12px;
  box-shadow: var(--sidebar-panel-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sidebar-header--compact {
  padding-bottom: 10px;
  margin-bottom: 0;
}

.brand--compact {
  gap: 10px;
  align-items: center;
}

.brand--compact .brand-mark {
  width: 26px;
  height: 26px;
}

#sidebar .sidebar-header--compact h1 {
  margin: 0;
}

.brand-kicker {
  margin: 0 0 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dd3fc;
  opacity: 0.88;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Escritorio: mapa a pantalla completa; panel flotante tipo herramientas */
@media (min-width: 901px) {
  #layout {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .editor-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    grid-row: auto;
  }

  #map-wrap {
    position: absolute;
    inset: 0;
    padding-top: var(--editor-chrome-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }

  /* Editor: mapa a borde superior; cabecera solo controles flotantes */
  body.editor-body #map-wrap {
    padding-top: 0;
  }

  #sidebar {
    position: absolute;
    left: max(12px, env(safe-area-inset-left, 0px));
    top: calc(var(--editor-chrome-h) + 12px);
    bottom: auto;
    width: auto;
    min-width: 144px;
    max-width: 184px;
    height: fit-content;
    max-height: calc(100dvh - var(--editor-chrome-h) - 24px - env(safe-area-inset-bottom, 0px));
    grid-column: auto;
    grid-row: auto;
    border-radius: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 6px;
    box-shadow: none;
    z-index: 480;
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.32, 1),
      opacity 0.28s ease,
      visibility 0.28s ease;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
  }

  #layout.sidebar-collapsed #sidebar {
    transform: translate3d(calc(-100% - 28px), 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.editor-body #sidebar {
    top: calc(var(--editor-chrome-stack) + 8px);
    max-height: calc(100dvh - var(--editor-chrome-stack) - 24px - env(safe-area-inset-bottom, 0px));
  }

  #sidebar::before {
    display: none;
  }

  #sidebar .panel-block,
  #sidebar details.panel-block {
    border-radius: 16px;
    border: 1px solid var(--sidebar-panel-border);
    background: var(--sidebar-panel-bg);
    box-shadow: var(--sidebar-panel-shadow);
    transition: all 0.2s ease;
  }
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.sidebar-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

#sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, transparent);
  opacity: 0.35;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 4px 16px rgba(79, 70, 229, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text {
  min-width: 0;
}

#sidebar h1 {
  margin: 0;
  color: var(--sidebar-title-color);
  text-shadow: 0 2px 8px rgba(30, 64, 175, 0.15);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Cabecera del editor + títulos de panel/plegable/reporte: misma tipografía */
#sidebar h1,
#sidebar .panel-block h2,
#sidebar .sidebar-details > summary,
#sidebar .reporte-ev-summary-title {
  font-size: var(--sidebar-title-fs);
  font-weight: var(--sidebar-title-fw);
  letter-spacing: var(--sidebar-title-ls);
  line-height: var(--sidebar-title-lh);
  text-transform: uppercase;
  font-family: var(--font);
}

.panel-block {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  padding: 14px 15px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.panel-block:hover {
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.32),
    0 0 40px rgba(52, 211, 153, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-block.panel-status {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(251, 191, 36, 0.16), transparent 58%),
    radial-gradient(80% 70% at 100% 100%, rgba(56, 189, 248, 0.1), transparent 52%),
    rgba(10, 14, 22, 0.42);
  border-color: rgba(251, 191, 36, 0.14);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 48px rgba(251, 191, 36, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel-block.panel-metrics {
  background:
    radial-gradient(100% 85% at 10% 0%, rgba(52, 211, 153, 0.12), transparent 55%),
    radial-gradient(90% 80% at 95% 80%, rgba(100, 116, 139, 0.14), transparent 50%),
    rgba(8, 14, 22, 0.4);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 36px rgba(52, 211, 153, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel-block.panel-otdr {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(52, 211, 153, 0.08), transparent 52%),
    radial-gradient(100% 90% at 100% 100%, rgba(71, 85, 105, 0.22), transparent 55%),
    linear-gradient(165deg, rgba(51, 65, 85, 0.48), rgba(15, 23, 42, 0.78));
  border-color: rgba(100, 116, 139, 0.28);
  box-shadow:
    0 12px 44px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(148, 163, 184, 0.1),
    0 0 40px rgba(52, 211, 153, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-block.panel-otdr:hover {
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(148, 163, 184, 0.14),
    0 0 44px rgba(52, 211, 153, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.panel-block.panel-actions {
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(99, 102, 241, 0.16), transparent 54%),
    radial-gradient(85% 70% at 0% 100%, rgba(56, 189, 248, 0.1), transparent 50%),
    rgba(10, 12, 24, 0.42);
  border-color: rgba(129, 140, 248, 0.15);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 44px rgba(99, 102, 241, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel-block h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e1;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.panel-icon {
  color: var(--accent);
  font-size: 0.55rem;
  opacity: 0.9;
}

.panel-icon-img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  opacity: 0.92;
}

.panel-desc {
  font-size: 0.75rem;
  color: var(--muted2);
  margin: -4px 0 12px;
  line-height: 1.35;
}

.panel-desc--tight {
  margin: -2px 0 10px;
  font-size: 0.72rem;
  line-height: 1.32;
}

.panel-actions--essential .action-section--flush {
  margin-top: 10px;
}

.panel-actions--essential .action-section--flush:first-of-type {
  margin-top: 0;
}

.panel-actions--essential.panel-block h2 {
  margin-bottom: 10px;
}

/* Panel Trazar (OTDR) plegable — clases técnicas panel-otdr / otdr-* */
.sidebar-details {
  position: relative;
}

.sidebar-details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--sidebar-panel-bg);
  border: 1px solid var(--sidebar-panel-border);
  box-shadow: var(--sidebar-panel-shadow);
  transition: all 0.3s ease;
  color: var(--sidebar-text);
}

.sidebar-details[open] > summary {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(30, 41, 59, 0.72));
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 28px rgba(52, 211, 153, 0.1),
    0 0 36px rgba(0, 0, 0, 0.28);
}

.sidebar-details > summary:hover {
  border-color: var(--sidebar-hover-border);
  color: var(--sidebar-title-color);
  background: var(--sidebar-hover-bg);
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.sidebar-details[open] > summary:hover {
  border-color: rgba(148, 163, 184, 0.3);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(30, 41, 59, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 32px rgba(52, 211, 153, 0.12),
    0 0 28px rgba(59, 130, 246, 0.06);
}

.sidebar-details > summary::-webkit-details-marker {
  display: none;
}

.sidebar-details-summary-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sidebar-details-chev {
  display: block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 2px solid rgba(148, 163, 184, 0.75);
  border-bottom: 2px solid rgba(148, 163, 184, 0.75);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.sidebar-details[open] > summary .sidebar-details-chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.sidebar-details-body {
  padding: 14px 12px 10px;
  margin-top: 0;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: rgba(15, 23, 42, 0.35);
}

/* Trazar (OTDR): bloque elegante con acento azul moderno */
.sidebar-details.panel-otdr > summary {
  background: linear-gradient(135deg, var(--sidebar-panel-bg) 0%, var(--sidebar-hover-bg) 100%);
  border: 1px solid var(--sidebar-panel-border);
  color: var(--sidebar-title-color);
  padding: 14px 18px;
  border-radius: 12px;
  border-bottom: 1px solid transparent;
  box-shadow: var(--sidebar-panel-shadow);
  transition: all 0.3s ease;
}

.sidebar-details.panel-otdr[open] > summary {
  background: linear-gradient(135deg, var(--sidebar-active-bg) 0%, var(--sidebar-hover-bg) 100%);
  border-color: var(--sidebar-active-border);
  border-bottom-color: transparent;
  transform: translateY(-1px);
}

.sidebar-details.panel-otdr > summary:hover {
  border-color: var(--sidebar-hover-border);
  color: var(--sidebar-title-color);
  box-shadow: var(--sidebar-panel-shadow);
  transform: translateY(-2px);
}

.sidebar-details.panel-otdr .sidebar-details-body {
  background: linear-gradient(135deg, var(--sidebar-panel-bg) 0%, var(--sidebar-hover-bg) 100%);
  border: 1px solid var(--sidebar-panel-border);
  box-shadow: var(--sidebar-panel-shadow);
  border-radius: 12px;
}

.sidebar-details.panel-otdr .sidebar-details-chev {
  border-right-color: var(--sidebar-text-muted);
  border-bottom-color: var(--sidebar-text-muted);
}

.status-body {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  min-height: 2.6em;
  color: var(--text);
}

.metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  transition: border-color var(--transition), background var(--transition);
}

.metric-row:hover {
  border-color: rgba(52, 211, 153, 0.28);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.metric-row-accent {
  background: linear-gradient(135deg, var(--accent2-dim), var(--panel-solid));
  border-color: rgba(52, 211, 153, 0.2);
}

.metric-click-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-strong);
}

.metric-click-desc {
  margin: 0 0 8px;
}

/* Trazar */
.panel-otdr .otdr-fieldset {
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: var(--radius-md);
  padding: 10px 10px 8px;
  margin: 0 0 12px;
  background: rgba(15, 23, 42, 0.38);
}

.panel-otdr .otdr-fieldset--seg {
  position: relative;
  padding-top: 8px;
}

.panel-otdr .otdr-fieldset--dir {
  margin-bottom: 0;
}

.panel-otdr .otdr-legend {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted2);
  padding: 0 6px;
}

.panel-otdr .otdr-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.panel-otdr .otdr-seg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.panel-otdr .otdr-seg-grid--dir {
  grid-template-columns: 1fr 1fr;
}

.panel-otdr .otdr-seg-card--wide {
  grid-column: 1 / -1;
}

.panel-otdr .otdr-seg-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(71, 85, 105, 0.45);
  background: rgba(15, 23, 42, 0.55);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.panel-otdr .otdr-seg-card:hover {
  border-color: rgba(148, 163, 184, 0.32);
}

.panel-otdr .otdr-seg-card:has(.otdr-seg-input:checked) {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.1);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.22);
}

/* Mismo aspecto sin :has() (WebView antiguas) — estado por clase en JS del editor. */
.panel-otdr .otdr-seg-card.otdr-seg-card--selected {
  border: 2px solid rgba(34, 197, 94, 0.9);
  background: rgba(52, 211, 153, 0.12);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.35),
    0 0 16px rgba(34, 197, 94, 0.2);
}
.panel-otdr .otdr-seg-card.otdr-seg-card--selected .otdr-seg-ico-wrap {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.12);
}
.panel-otdr .otdr-seg-card.otdr-seg-card--selected .otdr-seg-ico-wrap .otdr-ref-pin-ico,
.panel-otdr .otdr-seg-card.otdr-seg-card--selected .otdr-seg-ico-wrap--svg {
  color: #4ade80;
}

.panel-otdr .otdr-seg-card:has(.otdr-seg-input:focus-visible) {
  outline: 2px solid rgba(251, 191, 36, 0.55);
  outline-offset: 1px;
}

.panel-otdr .otdr-seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.panel-otdr .otdr-seg-face {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 10px 10px 10px 8px;
  min-height: 2.85rem;
}

.panel-otdr .otdr-seg-card--dir .otdr-seg-face {
  padding: 10px 8px;
}

.panel-otdr .otdr-seg-ico-wrap {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.panel-otdr .otdr-seg-ico-wrap .otdr-ref-pin-ico {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #cbd5e1;
}

.panel-otdr .otdr-seg-card:has(.otdr-seg-input:checked) .otdr-seg-ico-wrap .otdr-ref-pin-ico {
  color: #6ee7b7;
}

.panel-otdr .otdr-seg-ico-wrap--svg {
  color: #94a3b8;
}

.panel-otdr .otdr-seg-card:has(.otdr-seg-input:checked) .otdr-seg-ico-wrap--svg {
  color: #6ee7b7;
}

.panel-otdr .otdr-arrow-ico--flip {
  transform: scaleX(-1);
}

.panel-otdr .otdr-seg-title {
  grid-column: 2;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.panel-otdr .otdr-seg-sub {
  display: none;
}

.panel-otdr .otdr-click-panel {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(100, 116, 139, 0.3);
  background: linear-gradient(160deg, rgba(52, 211, 153, 0.08), rgba(15, 23, 42, 0.42));
}

.panel-otdr .otdr-arm-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.65);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.panel-otdr .otdr-arm-btn:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.38);
  background: rgba(30, 41, 59, 0.55);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.08);
}

.panel-otdr .otdr-arm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.panel-otdr .otdr-arm-btn.active {
  border-color: rgba(52, 211, 153, 0.42);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(30, 41, 59, 0.75));
  color: #ecfdf5;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.28), 0 0 24px rgba(52, 211, 153, 0.12);
}

.panel-otdr .otdr-arm-btn-ico {
  flex-shrink: 0;
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.panel-otdr .otdr-arm-btn-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.panel-otdr .otdr-arm-btn-title {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.panel-otdr .otdr-arm-btn-sub {
  display: none;
}

.panel-otdr .otdr-click-status {
  margin: 0 0 12px;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

.panel-otdr .otdr-fiber-block {
  margin-bottom: 12px;
}

.panel-otdr .otdr-fiber-block__head {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
}

.panel-otdr .otdr-fiber-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: start;
}

@media (max-width: 420px) {
  .panel-otdr .otdr-fiber-dual {
    grid-template-columns: 1fr;
  }
}

.panel-otdr .otdr-fcol {
  min-width: 0;
}

.panel-otdr .otdr-fiber-geom__mini {
  margin: 8px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted2);
}

.panel-otdr .otdr-tendido-or {
  margin-top: 12px;
}

.panel-otdr .otdr-input-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin-bottom: 6px;
}

.panel-otdr .otdr-input-label-ico {
  opacity: 0.85;
}

.panel-otdr .otdr-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.panel-otdr .otdr-input:focus {
  outline: 2px solid rgba(251, 191, 36, 0.5);
  outline-offset: 1px;
}

.panel-otdr .otdr-input:disabled {
  opacity: 0.45;
}

.panel-otdr .otdr-fiber-geom-hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}

.panel-otdr .otdr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Trazar: CTA verde a ancho completo (misma receta que «Usar mi ubicación (GPS)» en Montar evento) */
.panel-otdr .otdr-actions--field {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 6px;
}
.panel-otdr .otdr-actions--field .reporte-ev-btn--gps {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}
.panel-otdr .otdr-locate-cta__ico {
  flex-shrink: 0;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.panel-otdr .otdr-actions--field .otdr-btn--quitar {
  width: 100%;
  min-height: 44px;
  flex: 0 0 auto;
  justify-content: center;
}

.panel-otdr .otdr-btn {
  flex: 1;
  min-width: min(100%, 140px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.panel-otdr .otdr-btn-ico {
  flex-shrink: 0;
  opacity: 0.92;
}

.panel-otdr .otdr-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #059669 0%, #0d9488 38%, #0369a1 100%);
  color: #f8fafc;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.32);
}

.panel-otdr .otdr-btn--primary:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(5, 150, 105, 0.4);
}

.panel-otdr .otdr-btn--primary:disabled {
  background: rgba(52, 211, 153, 0.15);
  color: var(--muted);
  box-shadow: none;
}

.panel-otdr .otdr-btn--ghost {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.45);
  color: var(--muted);
}

.panel-otdr .otdr-btn--ghost:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
  background: rgba(248, 113, 113, 0.08);
}

.panel-otdr .otdr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Panel REPORTE EVENTO (sidebar) */
.panel-reporte-evento.reporte-ev--armed > summary,
.panel-reporte-evento.reporte-ev--armed .editor-float-panel__titlebar {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.28), rgba(15, 23, 42, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(34, 197, 94, 0.28);
  color: #ecfdf5;
}

.panel-reporte-evento.reporte-ev--armed .reporte-ev-ico-wrap {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.reporte-ev-phase-wait {
  margin-bottom: 4px;
}

.reporte-ev-wait-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cbd5e1;
}

/* CTA verde compartido: «Usar mi GPS», «Sobre el tendido», etc. */
.reporte-ev-btn--gps,
.reporte-ev-btn--cta-verde {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #0e7490 100%);
  border: 1px solid rgba(34, 197, 94, 0.55);
  box-shadow:
    0 10px 24px rgba(22, 163, 74, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#reporte-ev-placement-row .reporte-ev-btn--cta-verde {
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-height: 52px;
  text-align: left;
}

.reporte-ev-btn--gps:hover:not(:disabled),
.reporte-ev-btn--cta-verde:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow:
    0 12px 28px rgba(22, 163, 74, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.reporte-ev-btn--gps:active:not(:disabled),
.reporte-ev-btn--cta-verde:active:not(:disabled) {
  transform: translateY(1px);
}

/* Variante secundaria al mismo verde (p. ej. «Punto libre»): relleno suave + borde. */
.reporte-ev-btn--cta-verde-outline {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ecfdf5;
  text-align: left;
  font-family: inherit;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.22) 0%, rgba(15, 23, 42, 0.9) 72%);
  border: 1px solid rgba(34, 197, 94, 0.48);
  box-shadow:
    0 8px 20px rgba(22, 163, 74, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

.reporte-ev-btn--cta-verde-outline:hover:not(:disabled) {
  filter: brightness(1.05);
  border-color: rgba(52, 211, 153, 0.58);
  box-shadow:
    0 10px 24px rgba(22, 163, 74, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.reporte-ev-btn--cta-verde-outline:active:not(:disabled) {
  transform: translateY(1px);
}

#reporte-ev-placement-row .reporte-ev-btn--cta-verde .reporte-ev-preset__sub,
#reporte-ev-placement-row .reporte-ev-btn--cta-verde-outline .reporte-ev-preset__sub {
  color: rgba(236, 253, 245, 0.72);
  font-weight: 500;
}

.reporte-ev-btn--gps:disabled,
.reporte-ev-btn--gps.is-loading {
  opacity: 0.8;
  cursor: wait;
}

.reporte-ev-btn--gps.is-loading .reporte-ev-gps-ico {
  animation: reporteEvGpsSpin 1.2s linear infinite;
}

.reporte-ev-gps-ico {
  flex-shrink: 0;
}

@keyframes reporteEvGpsSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.reporte-ev-gps-status {
  margin: 8px 0 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #94a3b8;
  min-height: 1em;
}

.reporte-ev-gps-status[data-level="ok"] { color: #6ee7b7; }
.reporte-ev-gps-status[data-level="error"] { color: #fca5a5; }
.reporte-ev-gps-status[data-level="info"] { color: #7dd3fc; }

/* Separador «o toca el tendido» */
.reporte-ev-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.reporte-ev-or::before,
.reporte-ev-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
}

.reporte-ev-offline-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.1);
  color: #fed7aa;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* ——— Tarjeta: solo el botón para volver a fijar ubicación ——— */
.reporte-ev-pin-card {
  display: flex;
  flex-direction: column;
  margin: 2px 0 14px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: linear-gradient(155deg, rgba(127, 29, 29, 0.22), rgba(15, 23, 42, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  align-items: stretch;
}

.reporte-ev-pin-card__actions {
  display: flex;
  width: 100%;
}

.reporte-ev-pin-card__actions .reporte-ev-btn {
  width: 100%;
  min-width: 0;
}

/* ——— Plantillas rápidas (chips) ——— */
.reporte-ev-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 2px 0 14px;
}

.reporte-ev-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(155deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.75));
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.reporte-ev-preset:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(155deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.85));
}

.reporte-ev-preset.is-active {
  border-color: rgba(52, 211, 153, 0.6);
  background: linear-gradient(155deg, rgba(52, 211, 153, 0.18), rgba(15, 23, 42, 0.85));
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 8px 22px rgba(52, 211, 153, 0.18);
}

.reporte-ev-preset__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f8fafc;
}

.reporte-ev-preset__sub {
  font-size: 0.7rem;
  color: #94a3b8;
}

/* ——— Etiqueta «auto / borrador guardado» ——— */
.reporte-ev-auto-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a5f3fc;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  vertical-align: middle;
}

.reporte-ev-req {
  color: #f87171;
  margin-left: 4px;
  font-weight: 700;
}

/* ——— Toast de confirmación ——— */
.reporte-ev-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(0);
  z-index: 9999;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #16a34a 0%, #0e7490 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  max-width: calc(100vw - 24px);
  text-align: center;
  pointer-events: none;
}

.reporte-ev-toast[data-level="warn"] {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
}
.reporte-ev-toast[data-level="err"] {
  background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
}

.reporte-ev-toast.is-enter { animation: reporteEvToastIn 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.reporte-ev-toast.is-leave { animation: reporteEvToastOut 260ms ease forwards; }

@keyframes reporteEvToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.95); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes reporteEvToastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.98); }
}

/* ——— Barra Guardar sticky al fondo del panel (móvil y escritorio).
   Desde que el cuerpo del panel tiene scroll propio, el botón debe
   quedar anclado para no perderse al expandir las secciones. ——— */
.reporte-ev-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 16px -12px -10px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, rgba(8, 12, 22, 0.95) 45%);
  border-top: 1px solid rgba(34, 197, 94, 0.14);
}

.reporte-ev-btn--guardar .reporte-ev-save-ico {
  margin-right: 2px;
}

.reporte-ev-repick {
  margin-bottom: 14px;
  width: 100%;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.reporte-ev-repick:focus-visible {
  outline: none;
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.22),
    0 0 22px rgba(52, 211, 153, 0.14);
}

.reporte-ev-btn--ghost-sm {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.5);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
}

.reporte-ev-btn--ghost-sm:hover {
  border-color: rgba(148, 163, 184, 0.42);
  color: #f1f5f9;
  background: rgba(30, 41, 59, 0.55);
}

.panel-reporte-evento {
  border-color: rgba(34, 197, 94, 0.22);
  background:
    linear-gradient(175deg, rgba(15, 23, 42, 0.95) 0%, rgba(17, 24, 39, 0.97) 62%, rgba(30, 41, 59, 0.96) 100%);
  box-shadow:
    0 20px 42px rgba(2, 6, 23, 0.5),
    0 0 0 1px rgba(34, 197, 94, 0.12) inset;
}

.sidebar-details.panel-reporte-evento > summary {
  border-color: rgba(148, 163, 184, 0.22);
  text-transform: none;
}

.sidebar-details.panel-reporte-evento[open] > summary {
  border-bottom-color: rgba(100, 116, 139, 0.28);
}

.reporte-ev-summary {
  align-items: center;
  gap: 8px;
}

.reporte-ev-ico-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #94a3b8;
}

.reporte-ev-map-ico {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

.panel-reporte-evento.reporte-ev--armed .reporte-ev-map-ico {
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.45);
}

.reporte-ev-summary-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.reporte-ev-summary-title {
  color: var(--text);
}

.reporte-ev-summary-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

/* El cuerpo del panel Reporte evento necesita scroll propio: vive dentro de
   un `.editor-float-panel` (flex column con max-height limitado). Sin esto
   la lista de secciones excede el panel y el usuario no puede desplazar. */
.reporte-ev-body {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.reporte-ev-body::-webkit-scrollbar {
  width: 8px;
}

.reporte-ev-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.45), rgba(148, 163, 184, 0.45));
}

.reporte-ev-body::-webkit-scrollbar-track {
  background: transparent;
}

.reporte-ev-showcase {
  margin: 0;
  padding: 0;
}

/* Secciones desplegables del panel Reporte evento.
   Agrupan historial, plantillas rápidas y detalles del formulario.
   El usuario puede plegar/expandir cada bloque con un toque en el header
   para reducir el alto total del panel en pantallas pequeñas. */
.reporte-ev-collapse {
  margin: 0 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(170deg, rgba(30, 41, 59, 0.62), rgba(15, 23, 42, 0.58));
  overflow: hidden;
}

.reporte-ev-collapse[open] {
  background: linear-gradient(170deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.68));
  border-color: rgba(148, 163, 184, 0.34);
}

.reporte-ev-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #e2e8f0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.reporte-ev-collapse > summary::-webkit-details-marker {
  display: none;
}

.reporte-ev-collapse > summary:hover {
  color: #f8fafc;
}

.reporte-ev-collapse__chev {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(148, 163, 184, 0.85);
  border-bottom: 2px solid rgba(148, 163, 184, 0.85);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.reporte-ev-collapse[open] > summary .reporte-ev-collapse__chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.reporte-ev-collapse__body {
  padding: 4px 12px 12px;
}

.reporte-ev-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: rgba(15, 23, 42, 0.45);
}

.reporte-ev-li {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.45);
  cursor: pointer;
  transition: background 0.12s ease;
}

.reporte-ev-li:last-child {
  border-bottom: none;
}

.reporte-ev-li--empty {
  cursor: default;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.reporte-ev-li--empty:hover {
  background: transparent;
}

.reporte-ev-li:hover {
  background: rgba(30, 41, 59, 0.65);
}

.reporte-ev-li-line1 {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
}

.reporte-ev-li-line2 {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 2px;
}

.reporte-ev-field {
  margin-bottom: 12px;
  padding: 11px 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.45), rgba(15, 23, 42, 0.5));
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.reporte-ev-field:last-of-type {
  margin-bottom: 0;
}

.reporte-ev-field:focus-within {
  border-color: rgba(96, 165, 250, 0.5);
  background: linear-gradient(
    165deg,
    rgba(59, 130, 246, 0.18) 0%,
    rgba(30, 41, 59, 0.54) 48%,
    rgba(15, 23, 42, 0.62) 100%
  );
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.2),
    0 0 28px rgba(59, 130, 246, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.reporte-ev-field:focus-within .reporte-ev-label {
  color: #bfdbfe;
}

.reporte-ev-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.reporte-ev-input,
.reporte-ev-select,
.reporte-ev-textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78));
  color: #f8fafc;
  font-size: 0.88rem;
  padding: 10px 12px;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.reporte-ev-input::placeholder,
.reporte-ev-textarea::placeholder {
  color: rgba(148, 163, 184, 0.75);
}

.reporte-ev-input:focus,
.reporte-ev-select:focus,
.reporte-ev-textarea:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(15, 23, 42, 0.78);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.26),
    0 0 20px rgba(59, 130, 246, 0.16);
}

.reporte-ev-textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}

.reporte-ev-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' 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;
  padding-right: 36px;
  color: #f8fafc;
}

.reporte-ev-select option {
  color: #f8fafc;
  background: #0f172a;
}

/* Plantillas rápidas: contraste reforzado del valor seleccionado. */
#reporte-ev-preset-select {
  color: #f8fafc !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#reporte-ev-preset-select:invalid,
#reporte-ev-preset-select[value=""] {
  color: #cbd5e1 !important;
  font-weight: 500;
}

#reporte-ev-preset-select option {
  color: #f8fafc !important;
  background-color: #0f172a !important;
}

.reporte-ev-fecha {
  margin: 4px 0 14px;
  font-size: 0.8rem;
  color: var(--muted);
}

.reporte-ev-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}

.reporte-ev-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

/* `.reporte-ev-btn { border: none }` va después en la hoja que los bloques --gps / --cta-*: reponer borde. */
.reporte-ev-btn.reporte-ev-btn--gps,
.reporte-ev-btn.reporte-ev-btn--cta-verde {
  border: 1px solid rgba(34, 197, 94, 0.55);
}

.reporte-ev-btn.reporte-ev-btn--cta-verde-outline {
  border: 1px solid rgba(34, 197, 94, 0.48);
}

.reporte-ev-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.reporte-ev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reporte-ev-btn--guardar {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #0e7490 100%);
  color: #ffffff;
  border: 1px solid rgba(34, 197, 94, 0.55);
  box-shadow:
    0 10px 24px rgba(22, 163, 74, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.reporte-ev-btn--guardar:hover:not(:disabled) {
  border-color: rgba(74, 222, 128, 0.65);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(22, 163, 74, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.reporte-ev-actions .reporte-ev-btn--ghost-sm {
  flex: 0 0 44%;
}

.reporte-ev-actions .reporte-ev-btn--guardar {
  flex: 1 1 auto;
}

.reporte-ev-select--estado option.reporte-ev-opt--critico {
  color: #f87171;
  font-weight: 700;
}
.reporte-ev-select--estado option.reporte-ev-opt--proceso {
  color: #fbbf24;
  font-weight: 700;
}
.reporte-ev-select--estado option.reporte-ev-opt--resuelto {
  color: #4ade80;
  font-weight: 700;
}
.reporte-ev-select--estado option.reporte-ev-opt--pendiente {
  color: #e2e8f0;
  font-weight: 600;
}
.reporte-ev-select--estado option.reporte-ev-opt--escalado {
  color: #c084fc;
  font-weight: 700;
}

/* Popup: enlaces a Google Maps / Waze en punto del mapa */
.map-external-nav-popup-wrap .mapboxgl-popup-content {
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.45);
  padding: 0;
}

.map-external-nav-popup-wrap .mapboxgl-popup-close-button {
  color: #94a3b8;
  font-size: 18px;
  padding: 8px 10px;
}

.map-external-nav-popup-wrap .mapboxgl-popup-close-button:hover {
  color: #f1f5f9;
  background: rgba(148, 163, 184, 0.12);
}

.map-external-nav-popup {
  padding: 14px 16px 16px;
  min-width: 220px;
}

.map-external-nav-popup__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: #f8fafc;
}

.map-external-nav-popup__hint {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-bottom: 8px;
}

.map-external-nav-popup__coords {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
  margin-bottom: 12px;
  word-break: break-all;
}

.map-external-nav-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-external-nav-popup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.map-external-nav-popup__btn--gmaps {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: #bfdbfe;
}

.map-external-nav-popup__btn--gmaps:hover {
  background: rgba(59, 130, 246, 0.32);
}

.map-external-nav-popup__btn--waze {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: #a5f3fc;
}

.map-external-nav-popup__btn--waze:hover {
  background: rgba(56, 189, 248, 0.22);
}

/* Popup al hacer clic en un evento (incidencia) en el mapa — ficha tipo “propiedades” */
@keyframes evento-popup-tap-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) :is(.evento-popup--evento, .evento-popup--cierre-sheet) {
  animation: evento-popup-tap-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) :is(.evento-popup--evento, .evento-popup--cierre-sheet) {
    animation: none;
  }
}

.evento-popup-wrap .mapboxgl-popup-content {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.08),
    0 18px 42px -12px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  padding: 0;
  max-height: min(78vh, 480px);
  overflow: auto;
  scrollbar-color: rgba(148, 163, 184, 0.75) rgba(241, 245, 249, 0.6);
  scrollbar-width: thin;
}

/* Ficha evento en mapa: compacta, paleta gris / azul / blanco / verde */
.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  max-height: min(68vh, 340px);
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-close-button {
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 26px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-close-button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-close-button:focus-visible {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.evento-popup-wrap .mapboxgl-popup-close-button {
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
  color: #64748b;
  border-radius: 8px;
  outline: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.evento-popup-wrap .mapboxgl-popup-close-button:hover {
  background: rgba(241, 245, 249, 0.95);
  color: #0f172a;
}

.evento-popup-wrap .mapboxgl-popup-close-button:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(59, 130, 246, 0.55);
}

.evento-popup-wrap .mapboxgl-popup-content::-webkit-scrollbar {
  width: 8px;
}

.evento-popup-wrap .mapboxgl-popup-content::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.55);
  border-radius: 0 14px 14px 0;
}

.evento-popup-wrap .mapboxgl-popup-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.evento-popup-wrap.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  border-bottom-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  border-top-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #ffffff;
}

.evento-popup-wrap.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  border-bottom-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  border-top-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #ffffff;
}

.evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #ffffff;
}

.evento-popup {
  padding: 18px 20px 20px;
  font-size: 13px;
  line-height: 1.45;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ficha evento: lectura/edición — líneas limpias, sin degradados llamativos */
:is(.evento-popup--evento, .evento-popup--cierre-sheet) {
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__head {
  padding: 10px 36px 10px 12px;
  border: none;
  background: #1e40af;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__eyebrow {
  margin: 0 0 2px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__head .evento-popup__title {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.15;
  text-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__summary {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__date {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill {
  font-size: 0.62rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--tipo {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--estado.evento-popup__pill--critico {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--estado.evento-popup__pill--proceso {
  background: #eff6ff;
  color: #1e40af;
  border-color: #93c5fd;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--estado.evento-popup__pill--resuelto {
  background: #ecfdf5;
  color: #166534;
  border-color: #86efac;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--estado.evento-popup__pill--pendiente {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--estado.evento-popup__pill--escalado {
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #60a5fa;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill--estado.evento-popup__pill--neutral {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat--muted {
  opacity: 0.78;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__desc {
  margin: 0 10px 10px;
  padding: 10px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__desc-label {
  margin-bottom: 6px;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__desc-text {
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 500;
  color: #0f172a;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__actions .evento-popup__btn {
  min-height: 34px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet):not(.evento-popup--edit) .evento-popup__actions .evento-popup__btn:not(.evento-popup__btn--danger) {
  border: 1px solid #1d4ed8;
  color: #ffffff;
  background: #2563eb;
  box-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet):not(.evento-popup--edit) .evento-popup__actions .evento-popup__btn:not(.evento-popup__btn--danger):hover {
  background: #1d4ed8;
  border-color: #1e40af;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet):not(.evento-popup--edit) .evento-popup__actions .evento-popup__btn--danger {
  border: 1px solid #cbd5e1;
  color: #0f172a;
  background: #ffffff;
  box-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet):not(.evento-popup--edit) .evento-popup__actions .evento-popup__btn--danger:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__edit-grid {
  margin-top: 0;
  padding: 10px 10px 6px;
  background: #f8fafc;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__actions {
  padding-top: 8px;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__actions .evento-popup__btn:not(.evento-popup__btn--primary) {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__actions .evento-popup__btn--primary {
  border: 1px solid #166534;
  color: #ffffff;
  background: #15803d;
  box-shadow: none;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__actions .evento-popup__btn--primary:hover {
  background: #166534;
}

:is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__cierre-edit-meta {
  margin: 0;
  padding: 8px 12px 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #64748b;
  background: #f8fafc;
}

@media (max-width: 420px) {
  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__actions {
    grid-template-columns: 1fr;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__actions .evento-popup__btn {
    min-height: 38px;
    border-radius: 8px;
  }
}

.evento-popup__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 28px 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: -0.025em;
  color: #0f172a;
}

.evento-popup__grid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(108px, 38%) 1fr;
  gap: 0;
  column-gap: 16px;
  row-gap: 0;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.evento-popup__grid dt {
  margin: 0;
  padding: 10px 12px 10px 14px;
  color: #64748b;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f1f5f9 0%, #eef2f7 100%);
  align-self: stretch;
}

.evento-popup__grid dd {
  margin: 0;
  padding: 10px 14px 10px 12px;
  word-break: break-word;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.evento-popup__grid > dd:last-child,
.evento-popup__grid > dt:nth-last-child(2) {
  border-bottom: none;
}

.evento-popup__value {
  display: inline-block;
  max-width: 100%;
}

.evento-popup__value--mono {
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #334155;
  letter-spacing: -0.02em;
}

.evento-popup__value--tendido {
  font-weight: 600;
  color: #0f172a;
}

.evento-popup__pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
  border: 1px solid transparent;
  transition:
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.evento-popup__pill:hover {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.evento-popup__pill--tipo {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
  border-color: rgba(251, 146, 60, 0.35);
}

.evento-popup__pill--accion {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
  border-color: rgba(59, 130, 246, 0.3);
}

.evento-popup__pill--estado.evento-popup__pill--critico {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  color: #991b1b;
  border-color: rgba(248, 113, 113, 0.45);
}

.evento-popup__pill--estado.evento-popup__pill--proceso {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
  border-color: rgba(251, 191, 36, 0.45);
}

.evento-popup__pill--estado.evento-popup__pill--resuelto {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
  border-color: rgba(52, 211, 153, 0.45);
}

.evento-popup__pill--estado.evento-popup__pill--pendiente {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.35);
}

.evento-popup__pill--estado.evento-popup__pill--escalado {
  background: linear-gradient(180deg, #faf5ff 0%, #ede9fe 100%);
  color: #5b21b6;
  border-color: rgba(167, 139, 250, 0.45);
}

.evento-popup__pill--estado.evento-popup__pill--neutral {
  background: #f1f5f9;
  color: #334155;
  border-color: rgba(148, 163, 184, 0.4);
}

.evento-popup__desc {
  margin-top: 16px;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
}

.evento-popup__desc-label {
  display: block;
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.evento-popup__desc-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
  font-size: 0.84rem;
  line-height: 1.55;
  font-weight: 450;
}

.evento-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.evento-popup__btn {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.evento-popup__btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.evento-popup__btn--primary {
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
}

.evento-popup__btn--primary:hover {
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
}

.evento-popup__btn--danger {
  border-color: rgba(248, 113, 113, 0.45);
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  color: #991b1b;
}

.evento-popup__btn--danger:hover {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
}

.evento-popup--edit .evento-popup__edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-top: 12px;
}

.evento-popup--edit .evento-popup__edit-pair {
  grid-column: 1 / -1;
}

.evento-popup--edit .evento-popup__edit-lab {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.evento-popup--edit .evento-popup__edit-ctl {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 0.84rem;
  background: #fff;
  color: #0f172a;
}

.evento-popup--edit textarea.evento-popup__edit-ctl {
  min-height: 88px;
  resize: vertical;
}

/* Editar incidencia (mapa): más compacto, selects sin texto bajo la flecha */
.evento-popup--evento.evento-popup--edit .evento-popup__head {
  padding: 8px 36px 8px 11px;
}

.evento-popup--evento.evento-popup--edit .evento-popup__eyebrow {
  margin-bottom: 2px;
  font-size: 0.48rem;
  letter-spacing: 0.12em;
}

.evento-popup--evento.evento-popup--edit .evento-popup__head .evento-popup__title {
  font-size: 0.98rem;
  line-height: 1.18;
}

.evento-popup--evento.evento-popup--edit .evento-popup__edit-grid {
  grid-template-columns: minmax(4.75rem, 28%) 1fr;
  gap: 5px 10px;
  margin-top: 0;
  padding: 7px 9px 5px;
}

.evento-popup--evento.evento-popup--edit .evento-popup__edit-lab {
  margin-bottom: 0;
  align-self: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #64748b;
}

.evento-popup--evento.evento-popup--edit .evento-popup__edit-ctl {
  padding: 5px 8px;
  font-size: 0.78rem;
  line-height: 1.28;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
}

.evento-popup--evento.evento-popup--edit select.evento-popup__edit-ctl {
  padding-right: 2.35rem;
  cursor: pointer;
}

.evento-popup--evento.evento-popup--edit textarea.evento-popup__edit-ctl {
  min-height: 52px;
  align-self: stretch;
  line-height: 1.35;
}

.evento-popup--evento.evento-popup--edit .evento-popup__actions {
  padding: 6px 8px 8px;
  gap: 6px;
}

.evento-popup--evento.evento-popup--edit .evento-popup__actions .evento-popup__btn {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.74rem;
  border-radius: 6px;
}

.evento-popup__hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.45;
}

.btn-row-spaced {
  margin-top: 8px;
}

.metric-row .label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.metric-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.action-section {
  margin-top: 12px;
}

.action-section:first-of-type {
  margin-top: 0;
}

.action-section--grid .btn-row {
  display: grid;
}

.action-row-2 {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.action-row-2 button {
  min-width: 0;
  width: 100%;
}

.btn-row.action-row-edit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.btn-row.action-row-edit button {
  min-width: 0;
  width: 100%;
}

@media (max-width: 320px) {
  .btn-row.action-row-edit {
    grid-template-columns: 1fr;
  }
}

.action-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted2);
  margin-bottom: 8px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button {
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

button:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.48);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.1), rgba(52, 211, 153, 0.06));
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.12), 0 0 32px rgba(52, 211, 153, 0.08);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

button.primary {
  background: linear-gradient(135deg, #0ea5e9 0%, var(--accent) 50%, #1e40af 100%);
  border-color: transparent;
  color: #041016;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

button.primary:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, #1e40af 0%, #22d3ee 100%);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

button.primary:disabled {
  background: rgba(56, 189, 248, 0.2);
  color: var(--muted);
  box-shadow: none;
}

button.danger {
  background: var(--danger-dim);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

button.danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  border-color: var(--danger);
}

button.active {
  outline: none;
  border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(135deg, var(--accent-dim), var(--success-dim));
  color: #ecfdf5;
  box-shadow: var(--active-glow-strong);
}

button.btn-wide {
  flex: 1;
  min-width: min(100%, 200px);
}

.foot-hint {
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px 10px 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.35;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.foot-hint code {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  color: var(--muted);
}

.foot-sep {
  margin: 0 0.25em;
  opacity: 0.5;
}

.foot-link {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent2);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

/* Mismo tamaño y estilo que el pie: el <button> hereda a veces 0.82rem del `button` global. */
.foot-hint .foot-link {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}

.foot-link:hover:not(:disabled) {
  color: #f0fdfa;
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.14), 0 0 32px rgba(52, 211, 153, 0.08);
}

.foot-link:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  color: #64748b;
  text-decoration: none;
}

.foot-link:disabled:hover {
  color: #64748b;
}

/* —— Buscador de cables (glass compacto, sin doble cancelar WebKit) —— */
@keyframes cable-search-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cable-search-mount {
  position: absolute;
  top: calc(var(--editor-chrome-h, 48px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  width: min(468px, calc(100vw - 32px));
  max-width: calc(100% - 24px);
  pointer-events: none;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 1px rgba(56, 189, 248, 0.1));
}

body.editor-body .cable-search-mount:not(.cable-search-mount--chrome) {
  top: calc(var(--editor-chrome-stack) + 8px);
}

/* Buscador incrustado en la barra superior (editor) */
.cable-search-mount.cable-search-mount--chrome {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 1;
  /* El buscador debe ocupar todo el hueco libre del chrome bar y llegar
     visualmente hasta la casita, dejando solo un pequeño respiro. */
  width: calc(100% - 6px);
  max-width: none;
  margin: 0;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 1px rgba(56, 189, 248, 0.08));
}

.cable-search-mount.cable-search-mount--chrome .cable-search {
  position: relative;
}

.cable-search-wrap {
  width: 100%;
}

.cable-search-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.cable-search-toolbar .cable-search {
  flex: 1;
  min-width: 0;
}

.cable-search-col {
  position: relative;
  width: 100%;
}

/* Botones de herramienta en la barra superior (Trazar / Reporte evento). Mismo lenguaje visual que .editor-chrome-home. */
.editor-chrome-tool {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    color 0.2s ease;
}

.editor-chrome-tool:hover {
  border-color: rgba(56, 189, 248, 0.55);
  color: #f1f5f9;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.2),
    0 8px 22px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(56, 189, 248, 0.18);
}

.editor-chrome-tool:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.32);
}

.editor-chrome-tool:active {
  transform: translateY(1px);
}

.editor-chrome-tool[aria-expanded='true'] {
  border-color: rgba(56, 189, 248, 0.7);
  color: #f0f9ff;
  background: linear-gradient(165deg, rgba(8, 47, 73, 0.95), rgba(15, 23, 42, 0.96));
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 26px rgba(56, 189, 248, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.editor-chrome-tool[aria-expanded='true']::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(34, 211, 238, 0.9));
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.editor-chrome-tool-img {
  display: block;
  opacity: 0.92;
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(56, 189, 248, 0.3));
}

.editor-chrome-tool[aria-expanded='true'] .editor-chrome-tool-img {
  opacity: 1;
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}

/* Variante naranja/coral: Reporte de evento. */
.editor-chrome-tool--reporte:hover {
  border-color: rgba(251, 146, 60, 0.55);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(251, 146, 60, 0.2);
}

.editor-chrome-tool--reporte[aria-expanded='true'] {
  border-color: rgba(251, 146, 60, 0.65);
  background: linear-gradient(165deg, rgba(120, 53, 15, 0.6), rgba(15, 23, 42, 0.96));
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.45),
    0 0 26px rgba(251, 146, 60, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.editor-chrome-tool--reporte[aria-expanded='true']::after {
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.95), rgba(248, 113, 113, 0.9));
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.6);
}

.editor-chrome-tool--reporte .editor-chrome-tool-img {
  filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.3));
  opacity: 1;
}

.editor-chrome-tool--reporte[aria-expanded='true'] .editor-chrome-tool-img {
  filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.6));
}

/* Sidebar lateral retirado: el rail vivía dentro de #sidebar, ahora los botones están en la chrome bar.
   Se mantiene el nodo en el DOM por si otra parte de la app referencia #sidebar / #sidebar-body. */
#sidebar.sidebar--retired,
body.editor-body #sidebar.sidebar--retired {
  display: none !important;
}

body.editor-body #sidebar-toggle[hidden] {
  display: none !important;
}

/* ===========================================================================
   Menú hamburguesa (`.sidebar--fab-stack`): superior izquierda, ancho al texto;
   filas icono + nombre (Trazar, Montar evento, Medir).
   =========================================================================== */
#sidebar.sidebar--fab-stack,
body.editor-body #sidebar.sidebar--fab-stack,
#layout:not(.sidebar-collapsed) #sidebar.sidebar--fab-stack,
#layout.sidebar-collapsed #sidebar.sidebar--fab-stack {
  position: fixed !important;
  display: flex !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  top: calc(var(--editor-chrome-stack, 80px) + 8px) !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  /* Sobre el lienzo (0–520); por debajo de chrome 560 y paneles 585, pero por encima de
     interceptores intermedios (evita que clics vayan al mapa creyendo tocar un botón). */
  z-index: 570 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Móvil: antes se forzaba visibilidad del FAB stack; el sheet «Operación» lo sustituye. */

/* El rail vertical se controla con la hamburguesa:
   - abierto cuando #layout NO está colapsado
   - oculto cuando #layout está colapsado */
body.editor-body #layout:not(.sidebar-collapsed) #sidebar.sidebar--fab-stack {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.editor-body #layout.sidebar-collapsed #sidebar.sidebar--fab-stack {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right {
  display: none !important;
}

body.editor-body #map .mapboxgl-ctrl-bottom-right {
  display: none !important;
}

#sidebar.sidebar--fab-stack::before {
  display: none !important;
}

#sidebar.sidebar--fab-stack .sidebar-inner,
#sidebar.sidebar--fab-stack .sidebar-body {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  overflow: visible;
}

/* Menú hamburguesa: cristal azul-gris (vidrio difuminado). */
#sidebar.sidebar--fab-stack .sidebar-tool-table,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: min(calc(100vw - 24px), 320px);
  min-width: 0;
  padding: 7px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background: linear-gradient(
    165deg,
    rgba(51, 65, 85, 0.42) 0%,
    rgba(30, 41, 59, 0.5) 38%,
    rgba(15, 23, 42, 0.52) 100%
  );
  backdrop-filter: blur(24px) saturate(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
  box-shadow:
    0 10px 36px rgba(2, 6, 23, 0.38),
    0 0 0 1px rgba(56, 189, 248, 0.06),
    inset 0 1px 0 rgba(186, 230, 253, 0.1);
}

/* Filas: grises con acento azul suave. */
#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row {
  display: grid;
  grid-template-columns: 36px max-content;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px 6px 6px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.28);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(226, 232, 240, 0.95);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease;
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row:hover,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.22);
  color: #f8fafc;
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row:active,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row:active {
  transform: scale(0.99);
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row::before,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row::before {
  display: none;
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn__ico,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn__ico {
  width: 32px;
  height: 32px;
  margin: 0;
  justify-self: center;
  border-radius: 10px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  background: rgba(30, 58, 95, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn__ico img,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn__ico img {
  width: 20px;
  height: 20px;
  filter: none;
  opacity: 0.94;
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte .sidebar-tool-btn__ico,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte .sidebar-tool-btn__ico {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(30, 58, 95, 0.45);
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte .sidebar-tool-btn__ico img,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte .sidebar-tool-btn__ico img {
  width: 22px;
  height: 22px;
  filter: saturate(0.9) brightness(1.04);
  opacity: 0.96;
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn__lbl,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn__lbl {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding-right: 2px;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.25;
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte:hover,
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte:hover {
  border-color: rgba(96, 165, 250, 0.28);
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row[aria-expanded='true'],
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row[aria-expanded='true'] {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1);
}

#sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte.sidebar-tool-table__row[aria-expanded='true'],
body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn--reporte.sidebar-tool-table__row[aria-expanded='true'] {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(96, 165, 250, 0.32);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
}

body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
}

@media (pointer: coarse) {
  body.editor-body #sidebar.sidebar--fab-stack .sidebar-tool-table .sidebar-tool-btn.sidebar-tool-table__row {
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Bottom sheet «Operación»: tarjeta flotante (márgenes laterales), compacta,
   cristal suave — no pantalla completa oscura. z-index por debajo del rail FAB
   (540) y de paneles flotantes (585).
   --------------------------------------------------------------------------- */
body.editor-body .map-field-sidebar.map-field-sidebar--waze {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  top: auto;
  z-index: 535;
  visibility: visible;
  opacity: 1;
  width: auto;
  max-width: min(520px, 100%);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 16px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  outline: none;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 -4px 28px rgba(2, 6, 23, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  pointer-events: auto;
  max-height: var(--editor-op-sheet-expanded-max, min(300px, 34vh));
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.editor-body .map-field-sidebar.map-field-sidebar--waze.map-field-sidebar--collapsed {
  max-height: var(--editor-op-sheet-peek-max, 96px);
}

.map-field-sidebar__waze-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.map-field-sidebar__waze-head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.45);
  border-radius: 22px 22px 0 0;
}

.map-field-sidebar__handle-bar {
  display: block;
  width: 36px;
  height: 4px;
  margin: 6px auto 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.32);
}

.map-field-sidebar__waze-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 10px;
  min-width: 0;
}

.map-field-sidebar__waze-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f1f5f9;
  flex-shrink: 0;
}

.map-field-sidebar__net {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e5e7eb;
  background: rgba(71, 85, 105, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.map-field-sidebar__net--corp {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(96, 165, 250, 0.35);
  color: #bfdbfe;
}

.map-field-sidebar__chev {
  flex-shrink: 0;
  margin-left: auto;
  color: #94a3b8;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.map-field-sidebar--collapsed .map-field-sidebar__chev {
  transform: rotate(180deg);
}

.map-field-sidebar__panel {
  padding: 0 12px 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.map-field-sidebar--collapsed .map-field-sidebar__panel {
  display: none;
}

.map-field-sidebar__hint {
  margin: 0 0 6px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #94a3b8;
}

.map-field-sidebar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.map-field-sidebar__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(30, 41, 59, 0.45);
  color: #e5e7eb;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.12s ease;
}

.map-field-sidebar__btn:hover {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.08);
}

.map-field-sidebar__btn:active {
  transform: scale(0.99);
}

.map-field-sidebar__btn--warn {
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(120, 53, 15, 0.28);
  color: #fed7aa;
}

.map-field-sidebar__btn--warn:hover {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(120, 53, 15, 0.45);
}

.map-field-sidebar__btn-label {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.map-field-sidebar__btn-sub {
  font-size: 0.62rem;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-field-sidebar__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.map-field-sidebar__chip {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(30, 41, 59, 0.5);
  color: #e5e7eb;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.map-field-sidebar__chip:hover {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(59, 130, 246, 0.1);
}

.map-field-sidebar__chip--warn {
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(120, 53, 15, 0.35);
  color: #fed7aa;
}

.map-field-sidebar__chip--warn:hover {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(120, 53, 15, 0.5);
}

.map-field-sidebar__link {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  padding: 4px 4px 2px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.map-field-sidebar__link:hover {
  color: #e5e7eb;
  background: rgba(148, 163, 184, 0.08);
}

/* Móvil / tablet: sheet anclado al borde inferior (sin “tarjeta” que recorta),
   menos altura para dejar mapa; botones en columna (título + ayuda) sin truncar. */
@media (max-width: 900px) {
  body.editor-body .map-field-sidebar.map-field-sidebar--waze {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    overflow-x: hidden;
    max-height: var(--editor-op-sheet-expanded-max);
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze.map-field-sidebar--collapsed {
    max-height: var(--editor-op-sheet-peek-max);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__panel {
    padding: 0 10px max(6px, calc(6px + env(safe-area-inset-bottom, 0px)));
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze.map-field-sidebar--collapsed .map-field-sidebar__panel {
    padding-bottom: 0;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__hint {
    font-size: 0.58rem;
    margin-bottom: 4px;
    line-height: 1.2;
    padding: 0 2px;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__actions {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 3px;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__btn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 34px;
    padding: 6px 8px;
    text-align: center;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__btn-label {
    font-size: 0.78rem;
    width: 100%;
    text-align: center;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__btn-sub {
    display: none;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__link {
    padding: 6px 4px 3px;
    font-size: 0.68rem;
  }
}

@media (max-width: 520px) {
  body.editor-body .map-field-sidebar.map-field-sidebar--waze {
    border-radius: 16px 16px 0 0;
  }

  /* Pantallas muy estrechas: solo títulos (menos ruido). */
  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__btn-sub {
    display: none;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__btn {
    padding: 7px 8px;
    min-height: 32px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  body.editor-body .map-field-sidebar.map-field-sidebar--waze .map-field-sidebar__btn-label {
    text-align: center;
  }
}

/* Casita «panel principal»: ahora vive en la esquina superior izquierda del
   chrome bar. El selector legacy `.cable-search-home` se conserva por si el
   buscador flota fuera del chrome. */
.cable-search-home,
.editor-chrome-home {
  flex-shrink: 0;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 12px;
  border: 1px solid var(--app-stroke, rgba(148, 163, 184, 0.18));
  background: var(--app-surface-2, rgba(15, 23, 42, 0.92));
  box-shadow: var(--app-shadow-soft, 0 8px 22px rgba(0, 0, 0, 0.32));
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.cable-search-home:hover,
.editor-chrome-home:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.26),
    0 0 16px rgba(56, 189, 248, 0.18);
}

.cable-search-home:focus-visible,
.editor-chrome-home:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
}

.cable-search-home-img,
.editor-chrome-home-img {
  display: block;
  opacity: 0.92;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
}

.cable-search-mount * {
  pointer-events: auto;
}

.cable-search {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: linear-gradient(
    165deg,
    rgba(30, 41, 59, 0.55) 0%,
    rgba(15, 23, 42, 0.88) 48%,
    rgba(11, 17, 32, 0.92) 100%
  );
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 6px rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 4px 12px 4px 12px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s ease;
  animation: cable-search-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cable-search {
    animation: none;
  }
}

.cable-search::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(56, 189, 248, 0.14) 0%, transparent 48%),
    radial-gradient(ellipse 100% 70% at 100% -10%, rgba(96, 165, 250, 0.12), transparent 55%);
  opacity: 0.95;
}

.cable-search::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
  opacity: 0.55;
}

.cable-search > * {
  position: relative;
  z-index: 1;
}

.cable-search:focus-within {
  border-color: rgba(56, 189, 248, 0.48);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 0 22px rgba(56, 189, 248, 0.22),
    0 0 40px rgba(14, 165, 233, 0.12),
    0 0 48px rgba(52, 211, 153, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.cable-search--corp:focus-within {
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.12),
    0 0 0 2px rgba(167, 139, 250, 0.1),
    0 12px 36px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cable-search-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  transition: opacity 0.2s ease;
}

.cable-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  padding: 4px 4px 4px 2px;
  outline: none;
}

.cable-search-input::-webkit-search-cancel-button,
.cable-search-input::-webkit-search-decoration {
  display: none;
}

.cable-search-input::placeholder {
  color: rgba(148, 163, 184, 0.92);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.cable-search-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cable-search-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0 0 0 1px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.95);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.cable-search-clear-svg {
  display: block;
  opacity: 0.92;
}

.cable-search-clear:hover:not(:disabled) {
  color: #fecaca;
  background: rgba(248, 113, 113, 0.12);
  transform: scale(1.06);
}

.cable-search-clear:active:not(:disabled) {
  transform: scale(0.94);
}

.cable-search-col .cable-search-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin-top: 0;
  z-index: 640;
  max-height: min(340px, 46vh);
}

.cable-search-mount.cable-search-mount--chrome .cable-search-col .cable-search-listbox {
  max-height: min(320px, 70vh);
}

.cable-search-listbox {
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(4, 8, 18, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 24px rgba(56, 189, 248, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.cable-search-listbox::-webkit-scrollbar {
  width: 5px;
}

.cable-search-listbox::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 99px;
}

.cable-search-listbox::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}

.cable-search-empty {
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.cable-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.cable-search-item:first-child {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.cable-search-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

.cable-search-item:hover,
.cable-search-item-active {
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.16),
    rgba(52, 211, 153, 0.06),
    rgba(56, 189, 248, 0.04)
  );
  box-shadow:
    inset 2px 0 0 rgba(56, 189, 248, 0.85),
    inset 0 0 24px rgba(52, 211, 153, 0.04);
}

.cable-search-item:focus-visible {
  outline: none;
  background: rgba(56, 189, 248, 0.16);
  box-shadow:
    inset 2px 0 0 rgba(56, 189, 248, 0.85),
    0 0 0 2px rgba(56, 189, 248, 0.25);
}

.cable-search-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.cable-search-item-main--cierre .cable-search-item-label {
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cable-search-item-main--coords {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.cable-search-item-label--coords-dec {
  white-space: normal;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.cable-search-item-id--coords-dms {
  white-space: normal;
  max-width: 100%;
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.35;
  color: #a5f3fc;
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.35);
}

.cable-search-item-coords {
  border-left: 3px solid rgba(251, 191, 36, 0.55);
}

.cable-search-item-cierre-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.cable-search-cierre-ico {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: contain;
}

.cable-search-item-name,
.cable-search-item-label {
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f8fafc;
}

.cable-search-item-action {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #22d3ee;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, 0.42);
  background: rgba(15, 23, 42, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.cable-search-item:hover .cable-search-item-action,
.cable-search-item-active .cable-search-item-action {
  border-color: rgba(34, 211, 238, 0.65);
  background: rgba(8, 47, 73, 0.55);
  color: #67e8f9;
  box-shadow:
    0 0 14px rgba(34, 211, 238, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cable-search-item-id {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6ee7b7;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.32);
}

.cable-search-item-molecule {
  border-left: none;
  padding-left: 12px;
}

.cable-search-item-cierre {
  border-left: none;
  padding-left: 12px;
}

.cable-search-item-central {
  border-left: none;
  padding-left: 12px;
}

.cable-search-item-central:hover,
.cable-search-item-central.cable-search-item-active {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.14), rgba(22, 163, 74, 0.04));
  box-shadow: inset 2px 0 0 rgba(22, 163, 74, 0.85);
}

.cable-search-item-cierre:hover,
.cable-search-item-cierre.cable-search-item-active {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.03));
  box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.75);
}

.cable-search-item-cierre .cable-search-item-id {
  color: #e9d5ff;
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.38);
}

.cable-search--corp .cable-search-item:hover,
.cable-search--corp .cable-search-item-active {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.04));
  box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.8);
}

.cable-search--corp .cable-search-item:focus-visible {
  background: rgba(167, 139, 250, 0.14);
  box-shadow:
    inset 2px 0 0 rgba(167, 139, 250, 0.85),
    0 0 0 2px rgba(167, 139, 250, 0.22);
}

@media (max-width: 900px) {
  body.editor-body .editor-chrome {
    min-height: 0;
  }

  .cable-search-mount:not(.cable-search-mount--chrome) {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    transform: none;
    width: auto;
    max-width: none;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.48));
  }

  body.editor-body .editor-chrome {
    flex-wrap: nowrap;
    align-items: center;
    height: auto;
    min-height: 0;
    padding-top: 0;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: 0;
    gap: 6px;
  }

  /* Móvil: buscador en flujo normal para evitar recortes debajo de iconos. */
  body.editor-body .editor-chrome-search-slot {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    right: auto;
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    justify-content: flex-start;
    z-index: 1;
    pointer-events: auto;
  }

  body.editor-body .cable-search-mount--chrome {
    width: 100%;
    max-width: 100%;
  }

  body.editor-body .cable-search-mount--chrome .cable-search-input {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Altura del rail (safe area + margen + barra con blur + padding interno) */
  body.editor-body #layout {
    --editor-chrome-stack: calc(env(safe-area-inset-top, 0px) + 6px + 6px + 40px + 6px);
  }

  body.editor-body {
    --editor-chrome-stack: calc(env(safe-area-inset-top, 0px) + 6px + 6px + 40px + 6px);
  }

  .cable-search-mount.cable-search-mount--chrome .cable-search-col .cable-search-listbox {
    max-height: min(280px, 45dvh);
  }

  .cable-search {
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
  }

  /* iOS: evita zoom automático al enfocar inputs con tamaño de fuente menor a 16px */
  body.editor-body input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
  body.editor-body select,
  body.editor-body textarea {
    font-size: 16px;
  }

  /* Chrome en una fila: los FAB del mapa van justo bajo la barra */
  body.editor-body #map .mapboxgl-ctrl-top-right {
    --map-fab-size: 38px;
    margin: calc(var(--editor-chrome-stack) + 10px) max(12px, env(safe-area-inset-right, 0px)) 0 0;
  }
}

/*
 * Móvil (≤900px): chrome flota; mapa a pantalla; panel = cajón lateral compacto (no media hoja).
 */
@media (max-width: 900px) {
  #layout {
    display: grid;
    /* minmax(0,1fr): el hijo puede encogerse por debajo de su min-content (evita scroll X con chrome + buscador). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    height: var(--editor-mobile-vh, 100dvh);
    min-height: var(--editor-mobile-vh, 100dvh);
    max-height: var(--editor-mobile-vh, 100dvh);
    position: relative;
  }

  .editor-chrome {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    z-index: 580;
  }

  #map-wrap {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 100%;
    max-height: none;
    /* Móvil: el sheet flota sobre el mapa; no reservar alto interno (evita franja negra). */
    box-sizing: border-box;
    min-height: var(--editor-mobile-vh, 100dvh);
    max-height: var(--editor-mobile-vh, 100dvh);
    z-index: 0;
    padding-bottom: 0;
  }

  body.editor-body #layout:not(.sidebar-collapsed) #sidebar.sidebar--fab-stack {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    width: max-content;
    max-width: min(320px, calc(100vw - 14px));
    margin-top: calc(var(--editor-chrome-stack, 80px) + 4px);
    margin-left: max(6px, env(safe-area-inset-left, 0px));
    margin-right: 0;
    margin-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    z-index: 560;
    max-height: min(46dvh, calc(100dvh - var(--editor-chrome-stack, 80px) - 12px), 360px);
    height: auto;
    min-height: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 4px 6px 4px 4px;
    box-shadow: none;
  }

  body.editor-body #sidebar {
    padding-top: 0;
  }

  #layout:not(.sidebar-collapsed) #sidebar::before {
    display: none;
  }
}

/* Tablet / pantallas altas: un poco más de alto útil en el cajón */
@media (max-width: 900px) and (min-height: 720px) {
  #sidebar {
    max-height: min(88vh, calc(100dvh - var(--editor-chrome-h, 48px) - 20px));
  }

  body.editor-body #sidebar {
    max-height: min(88vh, calc(100dvh - var(--editor-chrome-stack) - 20px));
  }

  #layout:not(.sidebar-collapsed) #sidebar {
    max-height: min(44dvh, calc(100dvh - var(--editor-chrome-stack) - 12px), 380px);
  }
}

/* Entrada táctil gruesa: botones de cabecera más fáciles de pulsar */
@media (pointer: coarse) {
  .editor-chrome-toggle {
    width: 40px;
    height: 40px;
    touch-action: manipulation;
  }

  .editor-chrome-home,
  .editor-chrome-tool {
    width: 42px;
    height: 42px;
    touch-action: manipulation;
  }
}

/*
 * #map-wrap: no fijar grid-row/column aquí. Un bloque posterior sin @media pisaba
 * `grid-row: 1` del móvil (misma especificidad) y dejaba fila 1fr vacía + franja #0a0e12.
 * En ≤900px el mapa va en fila 1 vía @media arriba; en escritorio #layout es block
 * y el posicionamiento viene de @media (min-width: 901px).
 */
#map-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0a0e12;
}

@media (min-width: 901px) {
  #map-wrap {
    min-height: 45dvh;
  }
}

/* Editor: brújula GPS única — giro al sincronizar, color al estar activa. */
body.editor-body #editor-gps-dock.editor-gps-compass {
  position: fixed;
  z-index: 650;
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  right: max(14px, env(safe-area-inset-right, 0px));
  pointer-events: none;
}

body.editor-body:has(#measure-polyline-dock:not([hidden])) #editor-gps-dock.editor-gps-compass {
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 108px));
}

/* Editor: medición solo desde el menú hamburguesa; ocultar FAB duplicado en el mapa. */
body.editor-body #map-wrap #map-fab-row-measure {
  display: none !important;
}

/* Botón GPS: apariencia plana (sin resplandores/gradientes que se confundan con un halo). */
body.editor-body .editor-gps-compass__btn {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(100, 116, 139, 0.5);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease;
}

body.editor-body .editor-gps-compass__btn:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.65);
  background: #0f172a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.editor-body .editor-gps-compass__btn:active:not(:disabled) {
  transform: scale(0.97);
}

body.editor-body .editor-gps-compass__btn:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.75);
  outline-offset: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Activo: verde esmeralda */
body.editor-body .editor-gps-dock--active .editor-gps-compass__btn {
  border-color: #047857;
  background: linear-gradient(165deg, #34d399 0%, #10b981 38%, #047857 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.editor-body .editor-gps-dock--active .editor-gps-compass__btn:hover:not(:disabled) {
  border-color: #065f46;
  background: linear-gradient(165deg, #6ee7b7 0%, #34d399 40%, #059669 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.editor-body .editor-gps-dock--active .editor-gps-compass__svg {
  filter: brightness(0) invert(1);
  opacity: 0.98;
}

body.editor-body .editor-gps-dock--error .editor-gps-compass__btn {
  border-color: rgba(252, 165, 165, 0.5);
  background: #0f1218;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.editor-body .editor-gps-dock--syncing .editor-gps-compass__btn {
  border-color: rgba(56, 189, 248, 0.55);
  background: #0f1729;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.editor-body .editor-gps-compass__dial {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  filter: none;
}

body.editor-body .editor-gps-dock--syncing .editor-gps-compass__dial {
  animation: editorGpsCompassSync 0.75s linear infinite;
}

@keyframes editorGpsCompassSync {
  to {
    transform: rotate(360deg);
  }
}

body.editor-body .editor-gps-compass__svg {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

@media (pointer: coarse) {
  body.editor-body .editor-gps-compass__btn {
    width: 48px;
    height: 48px;
    touch-action: manipulation;
  }

  body.editor-body .editor-gps-compass__svg {
    width: 26px;
    height: 26px;
  }
}

/* WebKit/Android: el lienzo flex a veces no estira; height:0 + flex fuerza el reparto correcto. */
@media (max-width: 900px) {
  body.editor-body #map {
    flex: 1 1 auto;
    height: 0;
    min-height: 0;
    align-self: stretch;
  }
}

/*
 * Buscador absolute + mapa: el mapa debe crecer en flex (min-height:0 evita mínimo de contenido enorme).
 */
#map {
  position: relative;
  z-index: 0;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

#map .mapboxgl-map {
  width: 100%;
  height: 100%;
}

.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* —— Controles flotantes mapa (GPS + medición): barra tipo ArcGIS (widget claro apilado) —— */
#map .mapboxgl-ctrl-top-right {
  --map-fab-size: 32px;
  --map-fab-gap: 10px;
  --arcgis-widget-blue: #0079c1;
  --arcgis-widget-border: rgba(0, 0, 0, 0.22);
  --arcgis-widget-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: 12px 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--map-fab-gap);
  padding: 0;
  width: auto;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*
 * Editor: casita + GPS + medir — un solo estilo (vidrio oscuro, radio 12px, misma anchura que la casita).
 * La pila ArcGIS por defecto es blanca; aquí se alinea a .editor-chrome-home.
 */
body.editor-body #map .mapboxgl-ctrl-top-right {
  --map-fab-size: 40px;
  --map-fab-gap: 8px;
  margin: calc(var(--editor-chrome-stack) + 8px) 12px 0 0;
}

body.editor-body #map .measure-fab .measure-fab-ico {
  width: 24px;
  height: 24px;
  background-size: 24px 24px !important;
}

body.editor-body #map .map-widget-stack--arcgis {
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

body.editor-body #map .map-widget-stack--arcgis .map-fab-row--measure {
  border-top: none;
}

body.editor-body #map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group,
body.editor-body #map .map-widget-stack--arcgis .measure-fab-mapbox-group.mapboxgl-ctrl-group {
  background: var(--app-surface-2, rgba(15, 23, 42, 0.92)) !important;
  border: 1px solid var(--app-stroke, rgba(148, 163, 184, 0.18)) !important;
  border-radius: 14px !important;
  box-shadow: var(--app-shadow-soft, 0 8px 22px rgba(0, 0, 0, 0.32)) !important;
}

body.editor-body #map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.editor-body #map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.14) !important;
  box-shadow: none !important;
  transform: none;
}

body.editor-body #map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:active:not(:disabled) {
  background: rgba(56, 189, 248, 0.22) !important;
}

body.editor-body #map .map-widget-stack--arcgis button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
  filter: none !important;
  opacity: 0.95 !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab {
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f1f5f9 !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab:hover:not(:disabled) {
  background: rgba(45, 212, 191, 0.12) !important;
  box-shadow: none !important;
  transform: none;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab:active:not(:disabled) {
  background: rgba(45, 212, 191, 0.2) !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab--active:not(:disabled) {
  background: rgba(6, 95, 70, 0.92) !important;
  color: #f1f5f9 !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab--active:not(:disabled):hover {
  background: rgba(4, 120, 87, 0.95) !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab-ico {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.35)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab-mapbox-group:has(.measure-fab--muted:not(:disabled)) {
  box-shadow: none !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab-mapbox-group:has(.measure-fab--active:not(:disabled)) {
  box-shadow: none !important;
}

body.editor-body #map .map-widget-stack--arcgis .measure-fab:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.45), 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

body.editor-body.editor-network-corporativa #map .map-widget-stack--arcgis {
  border-color: rgba(30, 64, 175, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 6px 22px rgba(30, 64, 175, 0.2);
}

body.editor-body.editor-network-corporativa #map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:hover:not(:disabled) {
  background: rgba(30, 64, 175, 0.25) !important;
}

body.editor-body.editor-network-corporativa #map .map-widget-stack--arcgis .measure-fab:hover:not(:disabled) {
  background: rgba(30, 64, 175, 0.12) !important;
}

body.editor-body #map .map-widget-stack--arcgis button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon,
body.editor-body #map .map-widget-stack--arcgis button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon {
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.55)) !important;
  opacity: 1 !important;
}

body.editor-body #map .map-widget-stack--arcgis button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon {
  filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.65)) !important;
}

#map .mapboxgl-ctrl-top-right > .map-fab-row {
  margin: 0 !important;
  float: none !important;
}

/* Dock único: GPS + medición (similar a la pila de widgets de ArcGIS Map Viewer). */
#map .map-widget-stack--arcgis {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  flex-shrink: 0;
}

#map .map-widget-stack--arcgis .map-fab-row {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

#map .map-widget-stack--arcgis .map-fab-row--measure {
  border-top: none;
}

#map .map-widget-stack--arcgis .map-fab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.map-fab-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.map-fab-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 380px) {
  .map-fab-label {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
  }
}

#map .map-fab-row--navigate .mapboxgl-ctrl-group,
#map .mapboxgl-ctrl-top-right .measure-fab-mapbox-group.mapboxgl-ctrl-group {
  width: var(--map-fab-size) !important;
  min-width: var(--map-fab-size) !important;
  max-width: var(--map-fab-size) !important;
  height: var(--map-fab-size) !important;
  min-height: var(--map-fab-size) !important;
  max-height: var(--map-fab-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--app-stroke, rgba(148, 163, 184, 0.18)) !important;
  box-shadow: var(--app-shadow-soft, 0 8px 22px rgba(0, 0, 0, 0.32)) !important;
  flex-shrink: 0;
  align-self: center;
}

#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group,
#map .map-widget-stack--arcgis .measure-fab-mapbox-group.mapboxgl-ctrl-group {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  align-self: stretch;
}

#map .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {
  width: var(--map-fab-size) !important;
  height: var(--map-fab-size) !important;
  min-width: var(--map-fab-size) !important;
  min-height: var(--map-fab-size) !important;
  border: none !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(56, 189, 248, 0.14) 0%, transparent 52%),
    linear-gradient(165deg, #2a2a2e 0%, #18181b 48%, #0f0f10 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transition:
    background 0.2s ease,
    filter 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease;
}

#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

#map .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:hover:not(:disabled) {
  background: linear-gradient(165deg, #3f3f46 0%, #27272a 45%, #18181b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(56, 189, 248, 0.35) !important;
  transform: scale(1.04);
}

#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:hover:not(:disabled) {
  background: #f3f3f3 !important;
  box-shadow: none !important;
  transform: none;
}

#map .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:active:not(:disabled) {
  transform: scale(0.97);
}

#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:active:not(:disabled) {
  transform: none;
  background: #eaeaea !important;
}

.mapboxgl-ctrl-group button {
  background: rgba(18, 26, 36, 0.92) !important;
  color: var(--text) !important;
  width: 36px !important;
  height: 36px !important;
}

#map .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button {
  width: var(--map-fab-size) !important;
  height: var(--map-fab-size) !important;
}

.mapboxgl-ctrl-group button:hover {
  background: rgba(56, 189, 248, 0.2) !important;
}

.mapboxgl-ctrl-group button + button {
  border-top: 1px solid var(--border) !important;
}

#map .map-widget-stack--arcgis button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
  /* Antes: brightness(0)+invert rompía iconos a color sobre fondo oscuro; sombra suave sobre blanco ArcGIS */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)) !important;
  opacity: 1 !important;
}

#map button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon,
#map button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon {
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.45)) !important;
}

#map button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon {
  opacity: 0.88 !important;
}

#map button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon {
  filter: drop-shadow(0 0 5px rgba(248, 113, 113, 0.5)) !important;
}

#map .map-widget-stack--arcgis button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error:not(.mapboxgl-ctrl-geolocate-waiting) .mapboxgl-ctrl-icon {
  filter: brightness(0) saturate(100%) invert(0.35) sepia(1) saturate(8) hue-rotate(320deg) !important;
}

#map button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
  opacity: 0.38 !important;
  filter: grayscale(1) brightness(0.85) !important;
}

#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active:not(.mapboxgl-ctrl-geolocate-waiting),
#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background:not(.mapboxgl-ctrl-geolocate-waiting) {
  background: var(--arcgis-widget-blue, #0079c1) !important;
}

#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active:not(.mapboxgl-ctrl-geolocate-waiting):hover,
#map .map-widget-stack--arcgis .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background:not(.mapboxgl-ctrl-geolocate-waiting):hover {
  background: #005a8f !important;
}

/* Medición: FAB mismo tamaño que GPS (variables heredadas de .mapboxgl-ctrl-top-right). */
.measure-fab-dock {
  z-index: 12;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--map-fab-size, 32px);
  max-width: var(--map-fab-size, 32px);
  box-sizing: border-box;
  pointer-events: auto;
  flex: 0 0 auto;
}

.measure-fab-dock:not(.measure-fab-dock--in-map) {
  position: absolute;
  right: 16px;
  top: calc(14px + var(--map-fab-size, 32px) + var(--map-fab-gap, 10px));
}

.measure-fab-mapbox-group.mapboxgl-ctrl-group {
  display: block;
  width: var(--map-fab-size, 32px);
  min-width: var(--map-fab-size, 32px);
  max-width: var(--map-fab-size, 32px);
  height: var(--map-fab-size, 32px);
  min-height: var(--map-fab-size, 32px);
  max-height: var(--map-fab-size, 32px);
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 var(--map-fab-size, 32px);
  box-sizing: border-box;
  overflow: hidden !important;
}

.measure-fab-dock.measure-fab-dock--in-map {
  top: auto;
  right: auto;
  margin-top: 0;
  align-self: flex-end;
  flex-shrink: 0;
}

.measure-fab {
  width: var(--map-fab-size, 32px) !important;
  height: var(--map-fab-size, 32px) !important;
  min-width: var(--map-fab-size, 32px) !important;
  min-height: var(--map-fab-size, 32px) !important;
  max-width: var(--map-fab-size, 32px) !important;
  max-height: var(--map-fab-size, 32px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(74, 222, 128, 0.16) 0%, transparent 52%),
    linear-gradient(165deg, #166534 0%, #14532d 46%, #052e16 100%) !important;
  color: #f1f5f9;
  box-shadow: inset 0 1px 0 rgba(187, 247, 208, 0.12) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  font-size: 0;
  flex: 0 0 var(--map-fab-size, 32px);
  overflow: hidden;
  transition:
    background 0.22s ease,
    filter 0.22s ease,
    transform 0.18s ease,
    box-shadow 0.22s ease;
}

#map .map-widget-stack--arcgis .measure-fab {
  border-radius: 0 !important;
  background: #f0fdf4 !important;
  box-shadow: none !important;
  color: #14532d;
}

#map .mapboxgl-ctrl-top-right .measure-fab:hover:not(:disabled),
.measure-fab:hover:not(:disabled) {
  background: linear-gradient(165deg, #15803d 0%, #166534 45%, #14532d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(74, 222, 128, 0.4) !important;
  transform: scale(1.04);
}

#map .map-widget-stack--arcgis .measure-fab:hover:not(:disabled) {
  background: #ecfdf5 !important;
  box-shadow: none !important;
  transform: none;
}

.measure-fab:active:not(:disabled) {
  transform: scale(0.97);
}

#map .map-widget-stack--arcgis .measure-fab:active:not(:disabled) {
  transform: none;
  background: #d1fae5 !important;
}

.measure-fab:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(56, 189, 248, 0.35),
    0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

#map .map-widget-stack--arcgis .measure-fab:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0, 121, 193, 0.45), 0 0 0 2px rgba(0, 121, 193, 0.2) !important;
}

.measure-fab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.85) brightness(0.92);
}

#map .map-widget-stack--arcgis .measure-fab:disabled {
  filter: grayscale(1) brightness(1.05);
  opacity: 0.45;
}

.measure-fab--muted:not(:disabled) {
  opacity: 0.9;
  filter: saturate(0.88);
}

#map .map-widget-stack--arcgis .measure-fab--muted:not(:disabled) {
  filter: none;
  opacity: 0.55;
}

#map .mapboxgl-ctrl-top-right .measure-fab-mapbox-group:has(.measure-fab--muted:not(:disabled)) {
  border-color: rgba(113, 113, 122, 0.5) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#map .map-widget-stack--arcgis .measure-fab-mapbox-group:has(.measure-fab--muted:not(:disabled)) {
  box-shadow: none !important;
}

#map .mapboxgl-ctrl-top-right .measure-fab-mapbox-group:has(.measure-fab--active:not(:disabled)) {
  border-color: rgba(74, 222, 128, 0.55) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(74, 222, 128, 0.38),
    0 0 20px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#map .map-widget-stack--arcgis .measure-fab-mapbox-group:has(.measure-fab--active:not(:disabled)) {
  box-shadow: none !important;
}

#map .map-widget-stack--arcgis .measure-fab--active:not(:disabled) {
  background: #047857 !important;
  color: #fff;
}

#map .map-widget-stack--arcgis .measure-fab--active:not(:disabled):hover {
  background: #065f46 !important;
}

/* Medir: icono solo vía SVG externo (?v= fuerza nueva versión ante caché agresivo). */
body.editor-body .measure-fab .measure-fab-ico {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  overflow: visible;
  pointer-events: none;
  background-image: url("/icons/editor/measure-fab.svg?v=20260427");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.35)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#map .map-widget-stack--arcgis .measure-fab:not(:disabled):not(.measure-fab--active) .measure-fab-ico,
body.editor-body #map .map-widget-stack--arcgis .measure-fab:not(:disabled):not(.measure-fab--active) .measure-fab-ico {
  background-image: url("/icons/editor/measure-fab-arcgis.svg?v=20260427");
}

#map .map-widget-stack--arcgis .measure-fab--active:not(:disabled) .measure-fab-ico,
body.editor-body #map .map-widget-stack--arcgis .measure-fab--active:not(:disabled) .measure-fab-ico {
  background-image: url("/icons/editor/measure-fab-arcgis-active.svg?v=20260427");
}

#map .map-widget-stack--arcgis .measure-fab-ico {
  filter: none;
}

.measure-fab:hover:not(:disabled) .measure-fab-ico {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.5)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

#map .map-widget-stack--arcgis .measure-fab:hover:not(:disabled) .measure-fab-ico {
  transform: none;
  filter: none;
}

.measure-fab--active:not(:disabled) .measure-fab-ico {
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

#map .map-widget-stack--arcgis .measure-fab--active:not(:disabled) .measure-fab-ico {
  filter: none;
}

.measure-float-panel {
  position: absolute;
  top: calc(var(--map-fab-size, 32px) + var(--map-fab-gap, 10px));
  right: 0;
  left: auto;
  width: min(308px, calc(100vw - 32px));
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(12, 18, 28, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  z-index: 20;
}

.measure-float-panel[hidden] {
  display: none !important;
}

.measure-float-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.measure-float-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.measure-float-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.measure-float-sub {
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

.measure-float-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.measure-float-close:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #fecaca;
}

.measure-float-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.measure-float-modes--single .measure-mode-pill--solo {
  flex: 1 1 100%;
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  padding: 10px 14px;
}

.measure-mode-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, 0.45);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.measure-mode-pill:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.45);
  color: #f1f5f9;
}

.measure-mode-pill--active {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.35);
  color: #d1fae5;
}

.measure-mode-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Panel inferior centrado: medición polilínea compacta */
.measure-polyline-dock {
  position: fixed;
  z-index: 640;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 max(12px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 12, 22, 0.35) 0%, rgba(8, 12, 22, 0) 100%);
  box-sizing: border-box;
}

/* display:flex del bloque anterior anula el atributo [hidden] del UA; igual que .measure-float-panel[hidden]. */
.measure-polyline-dock[hidden] {
  display: none !important;
}

.measure-poly-readout {
  margin-bottom: 8px;
}

/* Tarjetas DISTANCIA / RESERVA 20% (dock + panel flotante) */
.measure-poly-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
}

.measure-poly-stat-row--compact {
  gap: 8px;
}

.measure-poly-stat-row--compact .measure-poly-stat {
  padding: 7px 9px;
  min-height: 0;
}

.measure-poly-stat-row--compact .measure-poly-stat__label {
  font-size: 0.54rem;
}

.measure-poly-stat-row--compact .measure-poly-stat__value {
  font-size: 0.92rem;
}

.measure-poly-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(100, 116, 139, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.measure-poly-stat:nth-child(2) {
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.22), rgba(15, 23, 42, 0.92));
  border-color: rgba(52, 211, 153, 0.2);
}

.measure-poly-stat__label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.15;
}

.measure-poly-stat__label--accent {
  color: #86efac;
  opacity: 0.92;
}

.measure-poly-stat__value {
  font-size: 0.94rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.measure-poly-stat__value--dist {
  color: #f8fafc;
}

.measure-poly-stat__value--res {
  color: #a7f3d0;
}

.measure-polyline-inner {
  pointer-events: auto;
  width: min(270px, calc(100vw - 24px));
  padding: 9px 9px 8px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(
    165deg,
    rgba(22, 30, 46, 0.96) 0%,
    rgba(11, 16, 28, 0.98) 48%,
    rgba(8, 12, 22, 0.99) 100%
  );
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 36px rgba(52, 211, 153, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.measure-polyline-actions {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
}

.measure-poly-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.measure-poly-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}

.measure-poly-btn--undo:hover:not(:disabled),
.measure-poly-btn--trash:hover:not(:disabled) {
  filter: brightness(1.08);
}

.measure-poly-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.measure-poly-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  filter: saturate(0.65) brightness(0.88);
}

.measure-poly-btn:disabled .measure-poly-ico {
  opacity: 0.85;
  stroke: #e2e8f0;
}

/* Deshacer: tile neutro + icono mint / gris */
.measure-poly-btn--undo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  padding: 0;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.measure-poly-btn--undo:hover:not(:disabled) {
  border-color: rgba(110, 231, 183, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(52, 211, 153, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.38);
}

.measure-poly-btn__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.measure-poly-btn__swatch--undo {
  width: 24px;
  height: 24px;
  background: linear-gradient(160deg, rgba(52, 211, 153, 0.22), rgba(51, 65, 85, 0.85));
  border: 1px solid rgba(110, 231, 183, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

.measure-poly-btn--ok {
  width: 100%;
  min-width: 0;
  height: 38px;
  border-radius: 11px;
  padding: 0 10px;
  background: linear-gradient(135deg, #0f766e 0%, #059669 45%, #047857 100%);
  border: 1px solid rgba(110, 231, 183, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 18px rgba(5, 150, 105, 0.35);
}

.measure-poly-btn--ok:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 24px rgba(52, 211, 153, 0.22),
    0 6px 22px rgba(5, 150, 105, 0.38);
}

.measure-poly-btn--trash {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  padding: 0;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(100, 116, 139, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.measure-poly-btn--trash:hover:not(:disabled) {
  border-color: rgba(251, 113, 133, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 18px rgba(251, 113, 133, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.38);
}

.measure-poly-ico {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.measure-poly-ico--ok {
  width: 16px;
  height: 16px;
}

.measure-float-results {
  padding-top: 4px;
  border-top: 1px solid rgba(71, 85, 105, 0.35);
}

.measure-float-poly-hint {
  margin: 0 0 10px;
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.35;
}

.measure-float-poly-block .measure-poly-stat {
  background: rgba(15, 23, 42, 0.75);
}

.measure-float-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  column-gap: 14px;
  row-gap: 0;
  align-items: stretch;
  font-size: 0.72rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(71, 85, 105, 0.4);
  background: rgba(15, 23, 42, 0.55);
}

.mfg-lab {
  margin: 0;
  padding: 8px 10px 8px 12px;
  color: #94a3b8;
  line-height: 1.35;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(51, 65, 85, 0.55);
  border-right: 1px solid rgba(51, 65, 85, 0.45);
  background: rgba(30, 41, 59, 0.65);
}

.mfg-val {
  margin: 0;
  padding: 8px 12px 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f1f5f9;
  text-align: right;
  border-bottom: 1px solid rgba(51, 65, 85, 0.45);
  background: rgba(15, 23, 42, 0.35);
}

.measure-float-grid .mfg-lab:nth-last-child(2),
.measure-float-grid .mfg-val:last-child {
  border-bottom: none;
}

.mfg-val-accent {
  color: #6ee7b7;
  text-shadow: 0 0 18px rgba(52, 211, 153, 0.25);
}

@media (min-width: 901px) {
  .measure-fab-dock:not(.measure-fab-dock--in-map) {
    top: calc(var(--editor-chrome-h, 48px) + 14px + var(--map-fab-size, 32px) + var(--map-fab-gap, 10px));
  }

  body.editor-body .measure-fab-dock:not(.measure-fab-dock--in-map) {
    top: calc(var(--editor-chrome-stack) + 14px + var(--map-fab-size, 32px) + var(--map-fab-gap, 10px));
  }
}

@media (max-width: 900px) {
  #layout.sidebar-collapsed #sidebar {
    display: none;
  }

  #layout.sidebar-collapsed {
    --sidebar-w: 0px;
  }

  /* Editor móvil: enlaces duplicados del pie (inicio ya está en el chrome). */
  body.editor-body .foot-hint {
    display: none;
  }
}

@media (max-width: 520px) {
  body.editor-body .foot-hint {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: center;
  }

  body.editor-body .foot-hint .foot-sep {
    display: none;
  }

  .panel-otdr .otdr-actions {
    flex-direction: column;
  }

  .panel-otdr .otdr-btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}


/* ——— Analítica ——— */
.analitica-shell {
  max-width: 900px;
}

.analitica-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.analitica-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 720px) {
  .analitica-header {
    flex-direction: column;
    align-items: stretch;
  }

  .analitica-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .analitica-topbar-brand {
    width: 100%;
  }

  .analitica-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .analitica-actions .primary,
  .analitica-actions .home-link-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }
}

.analitica-status {
  margin: 0 0 24px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.88rem;
  color: var(--muted);
}

.analitica-status--err {
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--danger);
  background: var(--danger-dim);
}

.analitica-section {
  margin-bottom: 28px;
}

.analitica-h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.analitica-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.analitica-kpi {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.analitica-kpi-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted2);
  margin-bottom: 6px;
}

.analitica-kpi-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.analitica-kpi-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.analitica-bars {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.analitica-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) 48px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.analitica-bar-row:last-child {
  margin-bottom: 0;
}

.analitica-bar-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.analitica-bar-track {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.analitica-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  min-width: 4px;
  transition: width 0.35s ease;
}

.analitica-bar-num {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

/* ——— Analítica · layout mapa + sidebar (dashboard) ——— */
body.analitica-body--dashboard {
  height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color-scheme: dark;
}

.analitica-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

.analitica-topbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 14px
    max(20px, env(safe-area-inset-left, 0px));
  border-bottom: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 12, 20, 0.94) 100%);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(148, 163, 184, 0.1),
    0 20px 48px -24px rgba(59, 130, 246, 0.12);
  z-index: 10;
}

.analitica-topbar-brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.analitica-topbar-title {
  margin: 0 0 4px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.analitica-topbar-sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 56ch;
}

.analitica-topbar-sub code {
  font-size: 0.88em;
  color: var(--accent2);
}

.analitica-split {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(260px, min(340px, 34vw)) minmax(0, 1fr);
  min-height: 0;
  position: relative;
}

.analitica-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: none;
  background: linear-gradient(185deg, rgba(17, 24, 39, 0.98) 0%, rgba(11, 17, 32, 0.96) 48%, rgba(8, 12, 22, 0.94) 100%);
  box-shadow:
    var(--edge-left-haze),
    var(--edge-inset-line),
    var(--edge-glow-blue),
    var(--edge-glow-blue-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.analitica-sidebar-inner {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(100, 116, 139, 0.55) rgba(15, 23, 42, 0.5);
}

.analitica-sidebar-inner::-webkit-scrollbar {
  width: 8px;
}

.analitica-sidebar-inner::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.45);
  border-radius: 6px;
}

.analitica-sidebar-inner::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.75);
  border-radius: 6px;
}

.analitica-sidebar-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.45);
}

.analitica-sidebar .analitica-status {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--muted);
}

.analitica-sidebar .analitica-status--err {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
  background: var(--danger-dim);
}

.analitica-sidebar .analitica-h2 {
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.analitica-sidebar .analitica-section {
  margin-bottom: 18px;
}

.analitica-sidebar .analitica-kpi {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.72));
  border: 1px solid rgba(148, 163, 184, 0.08);
  box-shadow:
    var(--edge-inset-line),
    0 0 26px rgba(59, 130, 246, 0.12),
    0 6px 22px rgba(0, 0, 0, 0.32),
    inset 4px 0 18px -4px rgba(59, 130, 246, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.analitica-sidebar .analitica-kpi-label {
  color: var(--muted2);
}

.analitica-sidebar .analitica-kpi-value {
  color: var(--text);
}

.analitica-sidebar .analitica-kpi-hint {
  color: var(--muted);
}

.analitica-sidebar .analitica-bars {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.08);
  box-shadow:
    var(--edge-inset-line),
    0 0 24px rgba(59, 130, 246, 0.08),
    inset 0 0 20px rgba(59, 130, 246, 0.03);
}

.analitica-sidebar .analitica-bar-label {
  color: var(--muted);
}

.analitica-sidebar .analitica-bar-track {
  background: rgba(255, 255, 255, 0.06);
}

.analitica-sidebar .analitica-bar-num {
  color: var(--text);
}

.analitica-section--deep {
  padding: 14px 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.15);
  background: linear-gradient(180deg, rgba(30, 58, 138, 0.18), rgba(15, 23, 42, 0.65));
  box-shadow:
    var(--edge-inset-line),
    0 0 36px rgba(59, 130, 246, 0.14),
    0 12px 32px rgba(0, 0, 0, 0.28),
    inset 0 0 32px rgba(59, 130, 246, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.analitica-deep-lead {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.analitica-deep-list {
  margin: 0 0 14px;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #cbd5e1;
}

.analitica-deep-list li {
  margin-bottom: 8px;
}

.analitica-deep-list strong {
  color: #f1f5f9;
  font-weight: 600;
}

.analitica-deep-callout {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.45;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(15, 23, 42, 0.65);
  box-shadow:
    var(--edge-inset-line),
    0 0 22px rgba(59, 130, 246, 0.08);
}

.analitica-deep-callout--ok {
  border-color: rgba(52, 211, 153, 0.2);
  background: linear-gradient(165deg, rgba(6, 78, 59, 0.35), rgba(15, 23, 42, 0.75));
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.12),
    0 0 32px rgba(52, 211, 153, 0.1);
}

.analitica-deep-callout--warn {
  border-color: rgba(251, 191, 36, 0.2);
  background: linear-gradient(165deg, rgba(120, 53, 15, 0.35), rgba(15, 23, 42, 0.78));
  box-shadow:
    inset 0 0 0 1px rgba(251, 191, 36, 0.12),
    0 0 32px rgba(251, 191, 36, 0.08);
}

.analitica-deep-callout-p {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

.analitica-deep-note {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #fcd34d;
}

.analitica-deep-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.analitica-deep-mini .analitica-kpi {
  padding: 10px 12px;
}

.analitica-sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: none;
  box-shadow: 0 -1px 0 rgba(148, 163, 184, 0.08), 0 -16px 32px -20px rgba(59, 130, 246, 0.12);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted2);
}

.analitica-sidebar-foot code {
  font-size: 0.82em;
  color: var(--accent2);
}

.analitica-map-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #0a0e12;
}

.analitica-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.analitica-map .mapboxgl-map {
  font-family: var(--font);
}

.analitica-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  background: rgba(8, 12, 20, 0.94);
  border: 1px dashed rgba(148, 163, 184, 0.25);
}

.analitica-map-fallback code {
  color: var(--accent2);
}

.analitica-map-legend {
  position: absolute;
  left: 14px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.35);
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
}

.analitica-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.analitica-legend-swatch {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
}

.analitica-legend-swatch--ftth {
  background: linear-gradient(90deg, #1e40af, #22d3ee);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.analitica-legend-swatch--corp {
  background: linear-gradient(90deg, #1e40af, #22d3ee);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

@media (max-width: 960px) {
  .analitica-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(220px, 38vh);
  }

  .analitica-sidebar {
    border-right: none;
    border-top: none;
    box-shadow:
      inset 0 6px 28px -6px rgba(59, 130, 246, 0.38),
      var(--edge-inset-line),
      0 -12px 40px -16px rgba(59, 130, 246, 0.12);
    order: 2;
  }

  .analitica-map-panel {
    order: 1;
    min-height: 42vh;
  }
}

@media (max-width: 520px) {
  .analitica-deep-mini {
    grid-template-columns: 1fr;
  }

  .analitica-topbar {
    padding: 12px 14px;
  }
}

/* =============================================================================
   Editor GIS · buscador y barra superior claros; panel lateral (#sidebar) oscuro.
   Las variables --hub-* del body siguen claras para el buscador; #sidebar las redefine.
   ============================================================================= */
body.editor-body {
  -webkit-tap-highlight-color: transparent;
  --hub-surface: #ffffff;
  --hub-surface-2: #f8fafc;
  --hub-surface-3: #f1f5f9;
  --hub-surface-4: #e2e8f0;
  --hub-border: rgba(15, 23, 42, 0.08);
  --hub-border-strong: rgba(15, 23, 42, 0.12);
  --hub-text: #0f172a;
  --hub-text-muted: #64748b;
  --hub-text-soft: #94a3b8;
  --hub-accent: #2563eb;
  --hub-accent-bright: #3b82f6;
  --hub-accent-soft: rgba(37, 99, 235, 0.09);
  --hub-accent-ring: rgba(37, 99, 235, 0.22);
  --hub-accent-muted: rgba(37, 99, 235, 0.14);
  --hub-blue-tint: #eff6ff;
  --hub-blue-tint-2: #dbeafe;
  --hub-sidebar-stripe: #2563eb;
  --hub-sidebar-stripe-soft: #64748b;
  --hub-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --hub-shadow-float: 0 24px 48px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.04);
  /* Barra superior: contraste con panel claro */
  --hub-chrome-line: rgba(56, 189, 248, 0.12);
}

/*
 * Editor: cabecera sin franja — solo hamburguesa, buscador y casita flotando sobre el mapa.
 * Clics pasan al mapa en el hueco; los controles siguen recibiendo eventos.
 */
body.editor-body .editor-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 560;
  height: auto;
  min-height: 0;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 8px
    max(10px, env(safe-area-inset-left, 0px));
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

body.editor-body .editor-chrome > * {
  pointer-events: auto;
}

body.editor-body .editor-chrome::after {
  display: none;
}

body.editor-body .editor-chrome-toggle {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.82);
  color: #f1f5f9;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 6px 22px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(56, 189, 248, 0.12);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

body.editor-body .editor-chrome-toggle:hover {
  border-color: rgba(56, 189, 248, 0.58);
  background: rgba(30, 41, 59, 0.94);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.2),
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(56, 189, 248, 0.18),
    0 0 36px rgba(52, 211, 153, 0.1);
}

body.editor-body .editor-chrome-toggle:focus-visible {
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.5),
    0 0 28px rgba(52, 211, 153, 0.16);
}

body.editor-body .editor-chrome-home {
  width: 40px;
  height: 40px;
  border-color: var(--app-stroke-strong, rgba(148, 163, 184, 0.28));
  background: var(--app-surface-2, rgba(15, 23, 42, 0.92));
  box-shadow: var(--app-shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.22));
  backdrop-filter: var(--app-blur-soft, blur(10px) saturate(1.1));
  -webkit-backdrop-filter: var(--app-blur-soft, blur(10px) saturate(1.1));
}

body.editor-body .editor-chrome-home:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(56, 189, 248, 0.2);
}

body.editor-body .editor-chrome-home-img {
  width: 22px;
  height: 22px;
}

/* Buscador en chrome: misma familia visual que el sheet «Operación» (cristal, márgenes). */
body.editor-body .cable-search-mount.cable-search-mount--chrome {
  width: 100%;
  max-width: 100%;
  margin: 0;
  filter: none;
}

body.editor-body .cable-search {
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: linear-gradient(
    165deg,
    rgba(15, 23, 42, 0.88) 0%,
    rgba(8, 12, 24, 0.94) 48%,
    rgba(6, 10, 20, 0.96) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(56, 189, 248, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

body.editor-body .cable-search::before {
  background: linear-gradient(115deg, rgba(56, 189, 248, 0.12) 0%, transparent 48%),
    radial-gradient(ellipse 100% 70% at 100% -10%, rgba(96, 165, 250, 0.1), transparent 55%);
  opacity: 0.95;
}

body.editor-body .cable-search::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  opacity: 0.45;
}

body.editor-body .cable-search:focus-within {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.25),
    0 0 22px rgba(56, 189, 248, 0.22),
    0 0 40px rgba(14, 165, 233, 0.12),
    0 12px 36px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/*
 * Buscador en chrome: cristal oscuro alineado al sheet «Operación» (no píldora blanca).
 */
body.editor-body .cable-search-mount--chrome .cable-search {
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.78);
  box-shadow:
    0 4px 22px rgba(2, 6, 23, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

body.editor-body .cable-search-mount--chrome .cable-search::before {
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.1) 0%, transparent 52%),
    radial-gradient(ellipse 90% 80% at 100% 0%, rgba(34, 211, 238, 0.08), transparent 58%);
  opacity: 0.85;
}

body.editor-body .cable-search-mount--chrome .cable-search::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0.4;
}

body.editor-body .cable-search-mount--chrome .cable-search:focus-within {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 4px 28px rgba(2, 6, 23, 0.45),
    0 0 26px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .cable-search-mount--chrome .cable-search--corp {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(15, 23, 42, 0.82);
  box-shadow:
    0 4px 22px rgba(2, 6, 23, 0.4),
    0 0 0 1px rgba(167, 139, 250, 0.08) inset;
}

body.editor-body .cable-search-mount--chrome .cable-search--corp:focus-within {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.2),
    0 4px 28px rgba(2, 6, 23, 0.48),
    0 0 24px rgba(167, 139, 250, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body .cable-search-mount--chrome .cable-search-input {
  color: #e2e8f0;
}

body.editor-body .cable-search-mount--chrome .cable-search-input::placeholder {
  color: #94a3b8;
}

body.editor-body .cable-search-mount--chrome .cable-search-clear {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.16);
}

body.editor-body .cable-search-mount--chrome .cable-search-clear:hover:not(:disabled) {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.35);
  border-color: rgba(248, 113, 113, 0.35);
}

body.editor-body .cable-search-mount--chrome .cable-search-listbox {
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 8px 32px rgba(2, 6, 23, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  border-radius: 16px;
}

body.editor-body .cable-search-mount--chrome .cable-search-item-name,
body.editor-body .cable-search-mount--chrome .cable-search-item-label {
  color: #e2e8f0;
}

body.editor-body .cable-search-mount--chrome .cable-search-item-id {
  color: #94a3b8;
}

body.editor-body .cable-search-mount--chrome .cable-search-empty {
  color: #94a3b8;
}

body.editor-body .cable-search-mount--chrome .cable-search-item:hover,
body.editor-body .cable-search-mount--chrome .cable-search-item-active {
  background: rgba(30, 41, 59, 0.65);
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.65);
}

body.editor-body .cable-search-mount--chrome .cable-search-wrap.cable-search--corp .cable-search-item:hover,
body.editor-body .cable-search-mount--chrome .cable-search-wrap.cable-search--corp .cable-search-item-active {
  box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.65);
}

body.editor-body .cable-search-mount--chrome .cable-search-item-action {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(148, 163, 184, 0.14);
}

body.editor-body .cable-search-mount--chrome .cable-search-item:hover .cable-search-item-action,
body.editor-body .cable-search-mount--chrome .cable-search-item-active .cable-search-item-action {
  color: #38bdf8;
}

body.editor-body .cable-search-mount--chrome .cable-search-wrap.cable-search--corp .cable-search-item-action {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.5);
}

body.editor-body .cable-search-mount--chrome .cable-search-wrap.cable-search--corp .cable-search-item:hover .cable-search-item-action,
body.editor-body .cable-search-mount--chrome .cable-search-wrap.cable-search--corp .cable-search-item-active .cable-search-item-action {
  color: #c4b5fd;
}

/* Editor móvil: rail superior unificado + UI sobria. */
@media (max-width: 900px) {
  body.editor-body .editor-chrome {
    position: relative;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin: max(6px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0
      max(8px, env(safe-area-inset-left, 0px));
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Izquierda: hamburguesa + casita muy juntas (40 + 2 + 42px táctil) + 4px al buscador */
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px
      calc(max(8px, env(safe-area-inset-left, 0px)) + 40px + 2px + 42px + 4px);
    border-radius: var(--app-radius-md, 12px);
    background: var(--app-surface-1, rgba(15, 23, 42, 0.78));
    border: 1px solid var(--app-stroke, rgba(148, 163, 184, 0.16));
    box-shadow: var(--app-shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.22));
    backdrop-filter: var(--app-blur-strong, blur(18px) saturate(1.15));
    -webkit-backdrop-filter: var(--app-blur-strong, blur(18px) saturate(1.15));
  }

  body.editor-body .editor-chrome-toggle {
    position: absolute;
    left: max(8px, env(safe-area-inset-left, 0px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    margin: 0;
  }

  body.editor-body .editor-chrome-home {
    position: absolute;
    left: calc(max(8px, env(safe-area-inset-left, 0px)) + 40px + 2px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
  }

  body.editor-body .editor-chrome-search-slot {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    justify-content: stretch;
    align-items: center;
  }

  body.editor-body .cable-search-mount.cable-search-mount--chrome {
    filter: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.editor-body .editor-chrome-toggle,
  body.editor-body .editor-chrome-home,
  body.editor-body .editor-chrome-tool {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.55);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.editor-body .editor-chrome-toggle:hover,
  body.editor-body .editor-chrome-home:hover,
  body.editor-body .editor-chrome-tool:hover {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(15, 23, 42, 0.78);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.22),
      0 0 14px rgba(56, 189, 248, 0.18);
  }

  body.editor-body .editor-chrome-tool[aria-expanded='true'] {
    background: linear-gradient(165deg, rgba(8, 47, 73, 0.78), rgba(15, 23, 42, 0.78));
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow:
      0 0 0 1px rgba(56, 189, 248, 0.35),
      0 0 18px rgba(56, 189, 248, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  body.editor-body .editor-chrome-tool--reporte:hover {
    border-color: rgba(251, 146, 60, 0.45);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.22),
      0 0 14px rgba(251, 146, 60, 0.22);
  }

  body.editor-body .editor-chrome-tool--reporte[aria-expanded='true'] {
    background: linear-gradient(165deg, rgba(120, 53, 15, 0.55), rgba(15, 23, 42, 0.82));
    border-color: rgba(251, 146, 60, 0.6);
    box-shadow:
      0 0 0 1px rgba(251, 146, 60, 0.4),
      0 0 18px rgba(251, 146, 60, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  body.editor-body .editor-chrome-tool-img {
    width: 18px;
    height: 18px;
  }

  body.editor-body .editor-chrome-tool--reporte .editor-chrome-tool-img {
    width: 20px;
    height: 20px;
  }

  body.editor-body .editor-chrome-home-img {
    width: 20px;
    height: 20px;
  }

  body.editor-body .cable-search {
    border-radius: 14px;
    padding: 3px 6px 3px 4px;
  }

  body.editor-body .cable-search-mount--chrome .cable-search-input::placeholder {
    font-size: 0.9rem;
    letter-spacing: 0.01em;
  }

  body.editor-body #map .mapboxgl-ctrl-top-right {
    --map-fab-size: 38px;
    --map-fab-gap: 6px;
    margin: calc(var(--editor-chrome-stack) + 10px) max(10px, env(safe-area-inset-right, 0px)) 0 0;
  }

  body.editor-body #map .mapboxgl-ctrl-bottom-right {
    --map-fab-size: 38px;
    margin-right: max(10px, env(safe-area-inset-right, 0px));
  }

  body.editor-body #map .map-widget-stack--arcgis {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.editor-body #map .measure-fab .measure-fab-ico {
    width: 20px;
    height: 20px;
    background-size: 20px 20px !important;
  }

  body.editor-body #sidebar h1,
  body.editor-body #sidebar .panel-block h2,
  body.editor-body #sidebar .sidebar-details > summary,
  body.editor-body #sidebar .reporte-ev-summary-title {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
  }

  body.editor-body #sidebar h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1rem;
    line-height: 1.2;
  }

  body.editor-body .sidebar-header {
    background: transparent;
    box-shadow: none;
    padding-bottom: 6px;
    margin-bottom: 0;
  }

  body.editor-body #sidebar .brand--compact {
    gap: 8px;
  }

  body.editor-body #sidebar .brand--compact .brand-mark {
    width: 22px;
    height: 22px;
  }

  body.editor-body #sidebar .brand--compact .brand-mark img {
    width: 18px;
    height: 18px;
  }

  body.editor-body .brand-kicker {
    letter-spacing: 0.1em;
    font-weight: 600;
  }

  body.editor-body #sidebar .sidebar-group {
    gap: 6px;
  }

  body.editor-body #sidebar .panel-block {
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.99) 0%, rgba(241, 245, 249, 0.96) 100%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.65) inset,
      0 4px 16px rgba(15, 23, 42, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.editor-body #sidebar .panel-block:hover {
    border-color: rgba(59, 130, 246, 0.22);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 6px 20px rgba(15, 23, 42, 0.1);
  }

  body.editor-body #sidebar .panel-block.panel-otdr {
    background: linear-gradient(165deg, rgba(51, 65, 85, 0.42), rgba(30, 41, 59, 0.94));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  }

  body.editor-body #sidebar .panel-block.panel-otdr:hover {
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
  }

  body.editor-body #sidebar .panel-block.panel-reporte-evento {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.5), rgba(248, 250, 252, 0.98));
    border-color: rgba(248, 113, 113, 0.14);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  }

  body.editor-body #sidebar .panel-block h2 {
    box-shadow: none;
    background: transparent;
    margin-left: 0;
    padding-left: 0;
  }

  body.editor-body #sidebar .sidebar-details > summary {
    padding: 8px 9px;
    gap: 8px;
    border-radius: 10px;
    font-size: 0.82rem;
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }

  body.editor-body #sidebar .sidebar-details[open] > summary {
    border-radius: 10px 10px 0 0;
  }

  body.editor-body #sidebar .sidebar-details > summary:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
  }

  body.editor-body #sidebar .sidebar-details-body {
    padding: 8px 7px 7px;
    border-radius: 0 0 10px 10px;
    border-color: rgba(148, 163, 184, 0.1);
    box-shadow: none;
  }

  body.editor-body #sidebar .sidebar-details-summary-main {
    gap: 6px;
  }

  body.editor-body #sidebar .panel-icon-img {
    width: 17px;
    height: 17px;
  }

  /* Trazar / origen: filas más bajas en móvil */
  body.editor-body .panel-otdr .otdr-seg-grid {
    gap: 6px;
    margin-top: 2px;
  }

  body.editor-body .panel-otdr .otdr-seg-face {
    column-gap: 7px;
    padding: 5px 7px 5px 5px;
    min-height: 2.25rem;
  }

  body.editor-body .panel-otdr .otdr-seg-card--dir .otdr-seg-face {
    padding: 5px 6px;
  }

  body.editor-body .panel-otdr .otdr-seg-ico-wrap {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  body.editor-body .panel-otdr .otdr-seg-ico-wrap .otdr-ref-pin-ico {
    width: 17px;
    height: 17px;
  }

  body.editor-body .panel-otdr .otdr-seg-title {
    font-size: 0.72rem;
    letter-spacing: -0.01em;
  }

  body.editor-body .panel-otdr .otdr-legend {
    font-size: 0.55rem;
    padding: 0 4px;
    margin-bottom: 1px;
  }

  body.editor-body .panel-otdr .otdr-fieldset {
    padding: 7px 7px 6px;
    margin: 0 0 8px;
  }

  body.editor-body .panel-otdr .otdr-fieldset--seg {
    padding-top: 5px;
  }

  body.editor-body .foot-hint,
  body.editor-body .foot-hint .foot-link {
    text-transform: none;
    letter-spacing: 0.03em;
    font-weight: 500;
    font-size: 0.72rem;
  }

  body.editor-body .foot-hint {
    border-top-color: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
  }
}

body.editor-body .cable-search--corp {
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(167, 139, 250, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .cable-search--corp:focus-within {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.22),
    0 0 24px rgba(167, 139, 250, 0.18),
    0 12px 36px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.editor-body .cable-search-input {
  color: #f8fafc;
}

body.editor-body .cable-search-input::placeholder {
  color: rgba(148, 163, 184, 0.92);
}

body.editor-body .cable-search-clear {
  color: rgba(148, 163, 184, 0.95);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

body.editor-body .cable-search-clear:hover:not(:disabled) {
  color: #fecaca;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.2);
}

body.editor-body .cable-search-listbox {
  border: 1px solid rgba(56, 189, 248, 0.2);
  background: rgba(4, 8, 18, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 24px rgba(56, 189, 248, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .cable-search-wrap.cable-search--corp .cable-search-listbox {
  border-color: rgba(167, 139, 250, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 22px rgba(167, 139, 250, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .cable-search-item:hover,
body.editor-body .cable-search-item-active {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.14), rgba(56, 189, 248, 0.04));
  box-shadow: inset 2px 0 0 rgba(56, 189, 248, 0.75);
}

body.editor-body .cable-search-wrap.cable-search--corp .cable-search-item:hover,
body.editor-body .cable-search-wrap.cable-search--corp .cable-search-item-active {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.04));
  box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.8);
}

body.editor-body .cable-search-item-name,
body.editor-body .cable-search-item-label {
  color: #f8fafc;
}

body.editor-body .cable-search-item-id {
  color: rgba(148, 163, 184, 0.95);
}

body.editor-body .cable-search-empty {
  color: rgba(148, 163, 184, 0.92);
}

body.editor-body.editor-network-corporativa .editor-chrome-home {
  border-color: rgba(30, 64, 175, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 6px 22px rgba(30, 64, 175, 0.45),
    0 2px 12px rgba(30, 64, 175, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body.editor-network-corporativa .editor-chrome-home:hover {
  border-color: rgba(48, 100, 200, 0.65);
  box-shadow:
    0 0 0 1px rgba(30, 64, 175, 0.28),
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(30, 64, 175, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  body.editor-body.editor-network-corporativa .editor-chrome-home,
  body.editor-body.editor-network-corporativa .editor-chrome-home:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
}

body.editor-body.editor-network-corporativa .editor-chrome-home-img {
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(30, 64, 175, 0.35));
}

body.editor-body .cable-search-wrap.cable-search--corp .cable-search-item-action {
  color: #d8b4fe;
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(15, 23, 42, 0.82);
}

body.editor-body .cable-search-wrap.cable-search--corp .cable-search-item:hover .cable-search-item-action,
body.editor-body .cable-search-wrap.cable-search--corp .cable-search-item-active .cable-search-item-action {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(46, 16, 101, 0.45);
  color: #f5d0fe;
  box-shadow:
    0 0 14px rgba(167, 139, 250, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Panel lateral: tema oscuro (variables locales solo bajo #sidebar; buscador sigue claro) */
body.editor-body #sidebar {
  --hub-surface: #111827;
  --hub-surface-2: #0f172a;
  --hub-surface-3: #1e293b;
  --hub-surface-4: #334155;
  --hub-border: rgba(148, 163, 184, 0.12);
  --hub-border-strong: rgba(148, 163, 184, 0.22);
  --hub-text: #f1f5f9;
  --hub-text-muted: #94a3b8;
  --hub-text-soft: #64748b;
  --hub-accent: #3b82f6;
  --hub-accent-bright: #60a5fa;
  --hub-accent-soft: rgba(59, 130, 246, 0.16);
  --hub-accent-ring: rgba(59, 130, 246, 0.4);
  --hub-accent-muted: rgba(59, 130, 246, 0.35);
  --hub-blue-tint: rgba(30, 58, 138, 0.45);
  --hub-blue-tint-2: rgba(15, 23, 42, 0.92);
  --hub-sidebar-stripe: #3b82f6;
  --hub-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
  --hub-shadow-float: 0 22px 52px rgba(0, 0, 0, 0.55);
  background: linear-gradient(
    185deg,
    rgba(30, 41, 59, 0.96) 0%,
    rgba(17, 24, 39, 0.98) 38%,
    rgba(8, 12, 22, 0.99) 100%
  );
  border-bottom: none;
  box-shadow:
    var(--edge-left-haze),
    var(--edge-inset-line),
    var(--edge-glow-mix),
    var(--hub-shadow-float),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.editor-body #sidebar::before {
  height: 5px;
  background: radial-gradient(
    ellipse 100% 160% at 50% 0%,
    rgba(52, 211, 153, 0.28) 0%,
    rgba(59, 130, 246, 0.22) 42%,
    transparent 72%
  );
  opacity: 0.65;
  filter: blur(0.35px);
}

@media (prefers-reduced-motion: reduce) {
  body.editor-body #sidebar::before {
    filter: none;
  }
}

body.editor-body .sidebar-header {
  border-bottom: none;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), transparent);
  padding-bottom: 12px;
  margin-bottom: 2px;
  box-shadow:
    0 1px 0 rgba(148, 163, 184, 0.08),
    0 14px 28px -14px rgba(52, 211, 153, 0.12);
}

body.editor-body #sidebar h1 {
  color: var(--hub-text);
  text-shadow: none;
}

body.editor-body .brand-kicker {
  color: #6ee7b7;
  opacity: 1;
  letter-spacing: 0.14em;
  font-weight: 800;
}

body.editor-body .brand-mark {
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.35), var(--hub-surface-2));
  border: 1px solid rgba(100, 116, 139, 0.28);
  box-shadow:
    var(--hub-shadow),
    0 0 18px rgba(52, 211, 153, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .sidebar-body {
  scrollbar-color: var(--hub-surface-4) var(--hub-surface-2);
}

body.editor-body .sidebar-body::-webkit-scrollbar {
  width: 9px;
}

body.editor-body .sidebar-body::-webkit-scrollbar-track {
  background: var(--hub-surface-2);
  border-radius: 6px;
  margin: 4px 0;
}

body.editor-body .sidebar-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #475569, #64748b);
  border-radius: 6px;
  border: 2px solid var(--hub-surface-2);
}

body.editor-body .sidebar-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--hub-accent-bright), var(--hub-accent));
}

body.editor-body .sidebar-group {
  gap: 13px;
}

body.editor-body .panel-block {
  border: 1px solid rgba(148, 163, 184, 0.07);
  background: linear-gradient(180deg, var(--hub-surface) 0%, var(--hub-surface-3) 120%);
  box-shadow:
    var(--edge-inset-line),
    0 0 28px rgba(59, 130, 246, 0.12),
    0 6px 24px rgba(0, 0, 0, 0.38),
    inset 0 0 32px rgba(59, 130, 246, 0.05),
    inset 5px 0 22px -5px rgba(96, 165, 250, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.editor-body .panel-block:hover {
  border-color: rgba(59, 130, 246, 0.18);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.2),
    0 0 40px rgba(59, 130, 246, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 0 44px rgba(59, 130, 246, 0.08),
    inset 5px 0 28px -5px rgba(96, 165, 250, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .panel-block h2 {
  color: var(--hub-text-muted);
  border-bottom: none;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), transparent 55%);
  margin-left: -2px;
  padding-left: 4px;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.1), 0 12px 20px -16px rgba(59, 130, 246, 0.25);
}

body.editor-body .panel-desc {
  color: var(--hub-text-muted);
}

body.editor-body .panel-block.panel-status {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.35), var(--hub-surface));
  border-color: rgba(251, 191, 36, 0.18);
  box-shadow:
    var(--edge-inset-line),
    0 0 36px rgba(251, 191, 36, 0.12),
    0 6px 24px rgba(0, 0, 0, 0.38),
    inset 0 0 28px rgba(251, 191, 36, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body .panel-block.panel-metrics {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35), var(--hub-surface-2));
  border-color: rgba(59, 130, 246, 0.2);
  box-shadow:
    var(--edge-inset-line),
    0 0 32px rgba(59, 130, 246, 0.16),
    0 6px 24px rgba(0, 0, 0, 0.38),
    inset 0 0 30px rgba(59, 130, 246, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body .panel-block.panel-actions {
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.22), var(--hub-surface));
  border-color: rgba(129, 140, 248, 0.22);
  box-shadow:
    var(--edge-inset-line),
    0 0 32px rgba(129, 140, 248, 0.12),
    0 6px 24px rgba(0, 0, 0, 0.38),
    inset 0 0 28px rgba(99, 102, 241, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body .panel-block.panel-otdr {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border-color: rgba(100, 116, 139, 0.26);
  box-shadow:
    var(--edge-inset-line),
    0 0 36px rgba(52, 211, 153, 0.08),
    0 6px 28px rgba(0, 0, 0, 0.4),
    inset 0 0 32px rgba(71, 85, 105, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body .panel-block.panel-otdr:hover {
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow:
    var(--edge-inset-line),
    0 0 40px rgba(52, 211, 153, 0.12),
    0 10px 36px rgba(0, 0, 0, 0.42),
    inset 0 0 36px rgba(52, 211, 153, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .sidebar-details > summary {
  color: var(--hub-text);
  background: linear-gradient(180deg, var(--hub-surface-2), var(--hub-surface-3));
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow:
    0 0 16px rgba(52, 211, 153, 0.06),
    inset 0 0 0 1px rgba(148, 163, 184, 0.08),
    inset 4px 0 16px -4px rgba(100, 116, 139, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body .sidebar-details[open] > summary {
  background: linear-gradient(180deg, var(--hub-surface-3), var(--hub-surface-2));
  border-bottom-color: transparent;
  border-left-color: rgba(52, 211, 153, 0.55);
}

body.editor-body .sidebar-details > summary:hover {
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--hub-text);
  box-shadow:
    0 0 22px rgba(52, 211, 153, 0.1),
    inset 0 0 0 1px rgba(148, 163, 184, 0.12),
    inset 4px 0 18px -4px rgba(100, 116, 139, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .sidebar-details-body {
  background: linear-gradient(180deg, var(--hub-surface-2), var(--hub-surface-3));
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-top: none;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.25),
    inset 0 0 20px rgba(52, 211, 153, 0.03);
}

body.editor-body .sidebar-details-chev {
  border-right-color: var(--hub-text-muted);
  border-bottom-color: var(--hub-text-muted);
}

body.editor-body .sidebar-details[open] > summary .sidebar-details-chev {
  border-right-color: rgba(110, 231, 183, 0.85);
  border-bottom-color: rgba(110, 231, 183, 0.85);
}

body.editor-body .sidebar-details.panel-otdr > summary {
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.72), rgba(30, 41, 59, 0.92));
  border-color: rgba(100, 116, 139, 0.28);
  color: #e2e8f0;
  box-shadow:
    0 0 24px rgba(52, 211, 153, 0.08),
    inset 0 0 0 1px rgba(148, 163, 184, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .sidebar-details.panel-otdr[open] > summary {
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.82), rgba(30, 41, 59, 0.95));
  border-color: rgba(148, 163, 184, 0.22);
}

body.editor-body .sidebar-details.panel-otdr > summary:hover {
  border-color: rgba(52, 211, 153, 0.32);
  color: #f8fafc;
}

body.editor-body .sidebar-details.panel-otdr .sidebar-details-body {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.88));
  border-color: rgba(100, 116, 139, 0.22);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(52, 211, 153, 0.05),
    inset 0 0 20px rgba(52, 211, 153, 0.04);
}

body.editor-body .status-body {
  color: var(--hub-text);
}

body.editor-body .metric-row {
  background: linear-gradient(135deg, var(--hub-surface-2), var(--hub-surface-3));
  border: 1px solid rgba(148, 163, 184, 0.1);
  color: var(--hub-text);
  box-shadow:
    0 0 14px rgba(52, 211, 153, 0.05),
    inset 0 0 0 1px rgba(148, 163, 184, 0.06);
}

body.editor-body .metric-row:hover {
  border-color: rgba(52, 211, 153, 0.28);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), var(--hub-surface-2));
  box-shadow:
    0 0 22px rgba(52, 211, 153, 0.12),
    inset 0 0 18px rgba(52, 211, 153, 0.04);
}

body.editor-body .metric-row-accent {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.45), var(--hub-surface));
  border-color: rgba(52, 211, 153, 0.35);
}

body.editor-body .metric-value {
  color: var(--hub-text);
}

body.editor-body .metric-row .label {
  color: var(--hub-text-muted);
}

body.editor-body .panel-otdr .otdr-fieldset {
  border-color: var(--hub-border-strong);
  background: rgba(15, 23, 42, 0.65);
}

body.editor-body .panel-otdr .otdr-legend {
  color: var(--hub-text-muted);
}

/* Reporte evento */
body.editor-body .panel-reporte-evento.reporte-ev--armed > summary {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(180deg, rgba(22, 101, 52, 0.45), rgba(15, 23, 42, 0.96));
  color: #d1fae5;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.22);
}

body.editor-body .sidebar-details.panel-reporte-evento > summary {
  border-color: var(--hub-border-strong);
}

body.editor-body .reporte-ev-wait-hint {
  color: var(--hub-text-muted);
}

body.editor-body .reporte-ev-btn--ghost-sm {
    border-color: rgba(148, 163, 184, 0.36);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.94));
    color: #0f172a;
}

body.editor-body .reporte-ev-btn--ghost-sm:hover {
    border-color: rgba(96, 165, 250, 0.52);
    color: #0f172a;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95));
}

body.editor-body .reporte-ev-summary-title {
  color: var(--hub-text);
}

body.editor-body .reporte-ev-summary-sub {
  color: var(--hub-text-muted);
}

body.editor-body .reporte-ev-ico-wrap {
  background: var(--hub-surface-2);
  border-color: var(--hub-border-strong);
  color: var(--hub-text-muted);
}

body.editor-body .reporte-ev-showcase {
  border-bottom-color: var(--hub-border);
}

body.editor-body .reporte-ev-ul {
  border-color: var(--hub-border-strong);
  background: var(--hub-surface-2);
}

body.editor-body .reporte-ev-li {
  border-bottom-color: var(--hub-border);
}

body.editor-body .reporte-ev-li:hover {
  background: rgba(37, 99, 235, 0.06);
}

body.editor-body .reporte-ev-li--empty {
  color: var(--hub-text-muted);
}

body.editor-body .reporte-ev-li--empty:hover {
  background: transparent;
}

body.editor-body .reporte-ev-li-line1 {
  color: var(--hub-text);
}

body.editor-body .reporte-ev-li-line2 {
  color: var(--hub-text-muted);
}

body.editor-body .reporte-ev-field:focus-within {
    border-color: rgba(96, 165, 250, 0.46);
  background: linear-gradient(
    165deg,
      rgba(59, 130, 246, 0.16) 0%,
    rgba(30, 41, 59, 0.4) 48%,
    rgba(15, 23, 42, 0.55) 100%
  );
  box-shadow:
      0 0 0 1px rgba(96, 165, 250, 0.2),
      0 0 26px rgba(59, 130, 246, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.editor-body .reporte-ev-field:focus-within .reporte-ev-label {
    color: #bfdbfe;
}

body.editor-body .reporte-ev-input,
body.editor-body .reporte-ev-select,
body.editor-body .reporte-ev-textarea {
  border-color: var(--hub-border-strong);
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  caret-color: #f8fafc;
}

body.editor-body .reporte-ev-select option {
  color: #f8fafc !important;
  background: #0f172a !important;
}

body.editor-body #reporte-ev-preset-select {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  font-weight: 600;
}

body.editor-body #reporte-ev-preset-select option {
  color: #f8fafc !important;
  background-color: #0f172a !important;
}

body.editor-body .reporte-ev-input:focus,
body.editor-body .reporte-ev-select:focus,
body.editor-body .reporte-ev-textarea:focus {
  border-color: rgba(96, 165, 250, 0.55);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.26),
    0 0 20px rgba(59, 130, 246, 0.16);
}

body.editor-body .panel-reporte-evento .reporte-ev-input::placeholder,
body.editor-body .panel-reporte-evento .reporte-ev-textarea::placeholder {
  color: rgba(203, 213, 225, 0.9) !important;
}

body.editor-body .reporte-ev-btn--guardar {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #0e7490 100%);
  color: #ffffff;
  border: 1px solid rgba(34, 197, 94, 0.55);
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.34);
}

body.editor-body .reporte-ev-btn--guardar:hover:not(:disabled) {
  filter: brightness(1.06);
  color: #ffffff;
  border-color: rgba(74, 222, 128, 0.65);
}

/* Editor: mismo popup claro (legible sobre mapa); acento sutil en borde */
body.editor-body .evento-popup-wrap .mapboxgl-popup-content {
  border-color: rgba(59, 130, 246, 0.22);
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.1),
    0 22px 48px -12px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 0 40px rgba(59, 130, 246, 0.08);
}

body.editor-body .evento-popup-wrap .mapboxgl-popup-close-button {
  color: #475569;
}

body.editor-body .evento-popup-wrap .mapboxgl-popup-close-button:hover {
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
}

body.editor-body .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-content {
  border-color: #e2e8f0;
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

body.editor-body .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-close-button {
  color: rgba(255, 255, 255, 0.92);
}

body.editor-body .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-close-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* Ficha cierre/evento: más compacta en móvil (menos ancho de etiquetas, tipos y paddings). */
@media (max-width: 900px) {
  .evento-popup-wrap.mapboxgl-popup {
    max-width: min(calc(100vw - 16px), 320px) !important;
  }

  .evento-popup-wrap .mapboxgl-popup-content {
    max-height: min(58vh, 380px);
    border-radius: 12px;
  }

  .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-content {
    border-radius: 11px;
    max-height: min(58vh, 320px);
  }

  .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)).mapboxgl-popup {
    max-width: min(calc(100vw - 20px), 288px) !important;
  }

  .evento-popup-wrap .mapboxgl-popup-close-button {
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 28px;
  }

  .evento-popup-wrap:has(:is(.evento-popup--evento, .evento-popup--cierre-sheet)) .mapboxgl-popup-close-button {
    width: 24px;
    height: 24px;
    font-size: 13px;
    line-height: 24px;
  }

  .evento-popup {
    padding: 10px 11px 12px;
    font-size: 12px;
    line-height: 1.4;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) {
    padding: 0;
    font-size: 12px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__head {
    padding: 8px 34px 8px 10px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__eyebrow {
    font-size: 0.48rem;
    margin-bottom: 2px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__head .evento-popup__title {
    font-size: 0.95rem;
    margin: 0 24px 0 0;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__summary {
    padding: 8px 10px 6px;
    gap: 6px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__date {
    font-size: 0.68rem;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__badges .evento-popup__pill {
    font-size: 0.58rem;
    padding: 3px 7px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat {
    padding: 6px 8px;
    border-radius: 7px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat-label {
    font-size: 0.54rem;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__stat-value {
    font-size: 0.72rem;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__desc {
    margin: 0 8px 8px;
    padding: 8px 9px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__desc-text {
    font-size: 0.74rem;
    line-height: 1.45;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet) .evento-popup__actions {
    padding: 6px 8px 8px;
    gap: 6px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__edit-grid {
    padding: 8px 10px 4px;
  }

  .evento-popup--evento.evento-popup--edit .evento-popup__edit-grid {
    grid-template-columns: 1fr;
    padding: 6px 8px 4px;
    gap: 3px 0;
  }

  .evento-popup--evento.evento-popup--edit .evento-popup__edit-lab {
    margin-top: 3px;
  }

  .evento-popup--evento.evento-popup--edit .evento-popup__edit-lab:first-of-type {
    margin-top: 0;
  }

  .evento-popup--evento.evento-popup--edit .evento-popup__head {
    padding: 6px 32px 6px 9px;
  }

  .evento-popup--evento.evento-popup--edit textarea.evento-popup__edit-ctl {
    min-height: 46px;
  }

  :is(.evento-popup--evento, .evento-popup--cierre-sheet).evento-popup--edit .evento-popup__cierre-edit-meta {
    padding: 6px 10px 0;
    font-size: 0.68rem;
  }

  .evento-popup__title {
    font-size: 0.88rem;
    margin: 0 26px 8px 0;
    padding-bottom: 8px;
  }

  .evento-popup__grid {
    grid-template-columns: minmax(68px, 30%) 1fr;
    column-gap: 6px;
    border-radius: 8px;
  }

  .evento-popup__grid dt {
    padding: 5px 7px 5px 8px;
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }

  .evento-popup__grid dd {
    padding: 5px 8px 5px 6px;
    font-size: 0.7rem;
    gap: 4px;
  }

  .evento-popup__value--mono {
    font-size: 0.65rem;
  }

  .evento-popup__value--tendido {
    font-size: 0.72rem;
  }

  .evento-popup__pill {
    padding: 2px 7px;
    font-size: 0.62rem;
  }

  .evento-popup__desc {
    margin-top: 10px;
    padding: 8px 9px 7px;
    border-radius: 8px;
  }

  .evento-popup__desc-label {
    font-size: 0.55rem;
    margin-bottom: 4px;
  }

  .evento-popup__desc-text {
    font-size: 0.72rem;
    line-height: 1.42;
  }

  .evento-popup__actions {
    margin-top: 8px;
    padding-top: 8px;
    gap: 6px;
  }

  .evento-popup__btn {
    padding: 5px 9px;
    font-size: 0.72rem;
    border-radius: 7px;
  }

  .evento-popup__hint {
    margin: 6px 0 0;
    font-size: 0.68rem;
  }

  .evento-popup--edit .evento-popup__edit-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  .evento-popup--edit .evento-popup__edit-lab {
    font-size: 0.65rem;
    margin-bottom: 3px;
  }

  .evento-popup--edit .evento-popup__edit-ctl {
    padding: 6px 8px;
    font-size: 0.78rem;
  }

  .evento-popup--edit textarea.evento-popup__edit-ctl {
    min-height: 72px;
  }
}

@media (min-width: 901px) {
  body.editor-body #sidebar {
    border: none;
    border-radius: 0 20px 20px 0;
    box-shadow:
      var(--edge-left-haze),
      var(--edge-inset-line),
      0 0 52px rgba(59, 130, 246, 0.14),
      0 0 80px rgba(59, 130, 246, 0.06),
      var(--hub-shadow-float),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    background: linear-gradient(
      185deg,
      rgba(30, 41, 59, 0.96) 0%,
      rgba(17, 24, 39, 0.98) 40%,
      rgba(8, 12, 22, 0.99) 100%
    );
  }

  body.editor-body #sidebar .panel-block,
  body.editor-body #sidebar details.panel-block {
    border-color: rgba(148, 163, 184, 0.07);
    box-shadow:
      var(--edge-inset-line),
      0 0 28px rgba(59, 130, 246, 0.12),
      0 6px 24px rgba(0, 0, 0, 0.38),
      inset 0 0 32px rgba(59, 130, 246, 0.05),
      inset 5px 0 22px -5px rgba(96, 165, 250, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

/*
 * Editor: FAB oscuros si GPS/medición cuelgan directo de .mapboxgl-ctrl-top-right (sin pila ArcGIS).
 * Con .map-widget-stack--arcgis el estilo unificado va más arriba (misma familia que la casita).
 */
body.editor-body #map .mapboxgl-ctrl-bottom-right {
  --map-fab-size: 40px;
  margin: 0 12px 0 0;
}

body.editor-body #map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
  width: var(--map-fab-size) !important;
  min-width: var(--map-fab-size) !important;
  max-width: var(--map-fab-size) !important;
  height: var(--map-fab-size) !important;
  min-height: var(--map-fab-size) !important;
  max-height: var(--map-fab-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.editor-body #map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {
  width: var(--map-fab-size) !important;
  height: var(--map-fab-size) !important;
  min-width: var(--map-fab-size) !important;
  min-height: var(--map-fab-size) !important;
  border: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.editor-body #map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.12) !important;
  box-shadow: none !important;
}

body.editor-body #map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:active:not(:disabled) {
  transform: scale(0.97);
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--navigate .mapboxgl-ctrl-group,
body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab-mapbox-group.mapboxgl-ctrl-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {
  background: transparent !important;
  box-shadow: none !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--navigate .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.12) !important;
  box-shadow: none !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab {
  background:
    radial-gradient(circle at 50% 38%, rgba(74, 222, 128, 0.2) 0%, transparent 55%),
    linear-gradient(165deg, #166534 0%, #14532d 46%, #052e16 100%) !important;
  color: #f1f5f9 !important;
  box-shadow: inset 0 1px 0 rgba(187, 247, 208, 0.14) !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab:hover:not(:disabled) {
  background: linear-gradient(165deg, #15803d 0%, #166534 45%, #14532d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(74, 222, 128, 0.35) !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab.measure-fab--active:not(:disabled) {
  background: linear-gradient(165deg, #0f766e 0%, #0d9488 48%, #115e59 100%) !important;
  box-shadow: inset 0 1px 0 rgba(153, 246, 228, 0.18) !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab.measure-fab--active:not(:disabled):hover {
  background: linear-gradient(165deg, #0d9488 0%, #0f766e 100%) !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab-mapbox-group:has(.measure-fab--muted:not(:disabled)) {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.editor-body #map .mapboxgl-ctrl-top-right > .map-fab-row--measure .measure-fab-mapbox-group:has(.measure-fab--active:not(:disabled)) {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ——— Editor: rail de herramientas + ventanas flotantes (Trazar / Reporte) ——— */
.editor-heading-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.editor-body .sidebar-body--tool-rail {
  flex: 0 0 auto;
  overflow: visible;
  gap: 0;
  padding: 0;
  background: transparent;
}

body.editor-body .sidebar-tool-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 2px;
}

body.editor-body .sidebar-tool-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 10px 12px 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.94));
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
}

body.editor-body .sidebar-tool-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.7), rgba(34, 211, 238, 0.2));
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.editor-body .sidebar-tool-btn:hover {
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.32);
  background: linear-gradient(165deg, rgba(51, 65, 85, 0.92), rgba(15, 23, 42, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(56, 189, 248, 0.12);
}

body.editor-body .sidebar-tool-btn:hover::before,
body.editor-body .sidebar-tool-btn[aria-expanded='true']::before {
  opacity: 1;
}

body.editor-body .sidebar-tool-btn[aria-expanded='true'] {
  color: #f0f9ff;
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(165deg, rgba(8, 47, 73, 0.92), rgba(15, 23, 42, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(56, 189, 248, 0.18);
}

body.editor-body .sidebar-tool-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.32);
}

body.editor-body .sidebar-tool-btn:active {
  transform: translateY(1px);
}

body.editor-body .sidebar-tool-btn__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(155deg, rgba(56, 189, 248, 0.18), rgba(14, 116, 144, 0.08));
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #7dd3fc;
}

body.editor-body .sidebar-tool-btn__ico img {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) saturate(100%) invert(81%) sepia(38%) saturate(569%) hue-rotate(173deg) brightness(101%) contrast(96%);
  opacity: 0.95;
}

body.editor-body .sidebar-tool-btn__lbl {
  line-height: 1.15;
  text-align: left;
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Variante Reporte evento: acento verde (misma familia que «Usar mi GPS») */
body.editor-body .sidebar-tool-btn--reporte::before {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.72), rgba(14, 116, 144, 0.22));
}

body.editor-body .sidebar-tool-btn--reporte:hover {
  border-color: rgba(34, 197, 94, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(34, 197, 94, 0.22),
    0 10px 26px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(22, 163, 74, 0.16);
}

body.editor-body .sidebar-tool-btn--reporte[aria-expanded='true'] {
  border-color: rgba(34, 197, 94, 0.48);
  background: linear-gradient(165deg, rgba(22, 101, 52, 0.55), rgba(15, 23, 42, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(34, 197, 94, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(22, 163, 74, 0.22);
}

body.editor-body .sidebar-tool-btn--reporte .sidebar-tool-btn__ico {
  background: linear-gradient(155deg, rgba(34, 197, 94, 0.22), rgba(14, 116, 144, 0.1));
  border-color: rgba(34, 197, 94, 0.35);
  color: #6ee7b7;
  padding: 0;
  overflow: hidden;
}

body.editor-body .sidebar-tool-btn--reporte .sidebar-tool-btn__ico img {
  filter: none;
  opacity: 1;
  width: 22px;
  height: 22px;
}

body.editor-body .editor-float-backdrop {
  position: fixed;
  inset: 0;
  z-index: 575;
  background: rgba(15, 23, 42, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* IMPORTANT: NO interceptar clics. El mapa debe seguir siendo interactivo
     (pan, zoom, clic en cables/cierres) incluso con el panel flotante abierto.
     Esto resuelve el bloqueo al usar «Fijar referencia» o «Reporte evento». */
  pointer-events: none;
}

/* Cuando algún panel está armado para esperar clic en el mapa, el fondo
   se vuelve totalmente transparente para no entorpecer visualmente la lectura del mapa. */
body.editor-pick-mode-active .editor-float-backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.editor-body .editor-float-panel {
  position: fixed;
  z-index: 585;
  left: max(10px, env(safe-area-inset-left, 0px));
  top: calc(var(--editor-chrome-stack, 80px) + 8px);
  width: min(400px, calc(100vw - 20px));
  max-height: min(78dvh, calc(100dvh - var(--editor-chrome-stack, 80px) - 24px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(8, 12, 22, 0.99));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease;
}

/* Shell: Montar evento = modal centrado (misma receta que «Montar cierre»). */
body.editor-body #reporte-evento-details.editor-float-panel.editor-re-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  z-index: 640;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
}

body.editor-body #reporte-evento-details.editor-re-modal.editor-float-panel--open {
  transform: none !important;
}

body.editor-body #reporte-evento-details .editor-mc-modal__panel {
  width: min(360px, calc(100vw - 20px));
  max-height: min(82dvh, calc(100dvh - var(--editor-chrome-stack, 80px) - 20px));
  /* Superficie oscura: mismo espíritu que Trazar / paneles del editor (alto contraste, legible sobre mapa) */
  background: linear-gradient(168deg, #0b1120 0%, #0f172a 48%, #1e293b 100%);
  border-color: rgba(71, 85, 105, 0.6);
  color: #e2e8f0;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(15, 23, 42, 0.9) inset;
}

body.editor-body #reporte-evento-details .editor-mc-modal__body.reporte-ev-body {
  padding: 10px 12px 8px;
  gap: 0;
  background: transparent;
}

body.editor-body #reporte-evento-details .reporte-ev-field {
  margin-bottom: 8px;
  padding: 9px 10px 11px;
  border-radius: 10px;
  border: 1px solid rgba(71, 85, 105, 0.6);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.editor-body #reporte-evento-details .reporte-ev-field:focus-within {
  border-color: rgba(59, 130, 246, 0.5);
  background: linear-gradient(168deg, rgba(30, 64, 175, 0.2) 0%, rgba(15, 23, 42, 0.7) 100%);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22);
}

body.editor-body #reporte-evento-details .reporte-ev-label {
  color: #c5d0e0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.editor-body #reporte-evento-details .reporte-ev-req {
  color: #7dd3fc;
}

body.editor-body #reporte-evento-details .reporte-ev-field:focus-within .reporte-ev-label {
  color: #e2e8f0;
}

body.editor-body #reporte-evento-details .reporte-ev-auto-tag {
  color: #0f172a;
  background: #6ee7b7;
  border: 1px solid #34d399;
  font-weight: 700;
}

/* Campos: texto y placeholders con contraste (ya no “blanco sobre blanco”) */
body.editor-body #reporte-evento-details .reporte-ev-input,
body.editor-body #reporte-evento-details .reporte-ev-select,
body.editor-body #reporte-evento-details .reporte-ev-textarea {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9;
  border: 1px solid rgba(100, 116, 139, 0.55) !important;
  caret-color: #f1f5f9;
  box-shadow: none;
}

body.editor-body #reporte-evento-details .reporte-ev-input::placeholder,
body.editor-body #reporte-evento-details .reporte-ev-textarea::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af;
  opacity: 1;
}

body.editor-body #reporte-evento-details .reporte-ev-input:focus,
body.editor-body #reporte-evento-details .reporte-ev-select:focus,
body.editor-body #reporte-evento-details .reporte-ev-textarea:focus {
  border-color: rgba(59, 130, 246, 0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

body.editor-body #reporte-evento-details .reporte-ev-select option {
  color: #f1f5f9 !important;
  background: #0f172a !important;
}

body.editor-body #reporte-evento-details .reporte-ev-textarea {
  min-height: 88px;
}

/* Plantilla rápida: valor claro, guión — más legible en vacío */
body.editor-body #reporte-evento-details #reporte-ev-preset-select {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0;
  font-weight: 600;
}

body.editor-body #reporte-evento-details #reporte-ev-preset-select:invalid,
body.editor-body #reporte-evento-details #reporte-ev-preset-select[value=''] {
  color: #a8b2bf !important;
  -webkit-text-fill-color: #a8b2bf;
  font-weight: 500;
}

body.editor-body #reporte-evento-details .reporte-ev-select:disabled {
  opacity: 0.65;
  color: #8b95a3 !important;
  -webkit-text-fill-color: #8b95a3;
  background: rgba(15, 23, 42, 0.5) !important;
}

body.editor-body #reporte-evento-details .reporte-ev-wait-hint,
body.editor-body #reporte-evento-details .reporte-ev-gps-status {
  color: #a8b2c0;
}

body.editor-body #reporte-evento-details .reporte-ev-or {
  color: #94a3b8;
}

body.editor-body #reporte-evento-details .reporte-ev-placement-cards {
  margin: 0 0 10px;
}

body.editor-body #reporte-evento-details.panel-reporte-evento.reporte-ev--armed .editor-mc-modal__head {
  background: linear-gradient(180deg, #166534 0%, #14532d 100%);
}

/*
 * Modo toque en mapa: igual que Montar cierre (`editor-mc-modal--map-pick`):
 * el contenedor a pantalla completa no roba clics; solo el panel compacto.
 */
body.editor-body #reporte-evento-details.editor-re-modal.panel-reporte-evento.reporte-ev--armed {
  pointer-events: none;
}

body.editor-body #reporte-evento-details.editor-re-modal.panel-reporte-evento.reporte-ev--armed
  .editor-mc-modal__backdrop {
  pointer-events: none;
}

body.editor-body #reporte-evento-details.editor-re-modal.panel-reporte-evento.reporte-ev--armed
  .editor-mc-modal__panel {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: max(8px, env(safe-area-inset-top, 0px));
  max-height: min(48dvh, 360px) !important;
  width: min(360px, calc(100vw - 20px)) !important;
}

body.editor-body #reporte-evento-details .reporte-ev-toast {
  border: 1px solid rgba(100, 116, 139, 0.4);
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
}

body.editor-body #reporte-evento-details .reporte-ev-pin-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(71, 85, 105, 0.5);
}

body.editor-body #reporte-evento-details .reporte-ev-offline-note {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
}

body.editor-body .editor-float-panel--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body.editor-body .editor-float-panel__titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

body.editor-body .editor-float-panel__titlebar.reporte-ev-summary {
  justify-content: flex-start;
}

body.editor-body .editor-float-panel__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}

body.editor-body .editor-float-panel__close {
  flex-shrink: 0;
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

body.editor-body .editor-float-panel__close:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #fecaca;
}

body.editor-body .editor-float-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 10px 12px;
  -webkit-overflow-scrolling: touch;
}

body.editor-body .editor-float-panel__body .otdr-panel-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(71, 85, 105, 0.45);
  border-radius: 10px;
}

body.editor-body .editor-float-panel__body .otdr-panel-hint strong {
  color: #e2e8f0;
  font-weight: 600;
}

body.editor-body .editor-float-panel__body .otdr-cable-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
}
body.editor-body .editor-float-panel__body .otdr-cable-readout[hidden] {
  display: none !important;
}
body.editor-body .editor-float-panel__body .otdr-cable-readout__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #38bdf8;
  font-weight: 600;
}
body.editor-body .editor-float-panel__body .otdr-cable-readout__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 0;
  border-top: 1px solid rgba(51, 65, 85, 0.6);
}
body.editor-body .editor-float-panel__body .otdr-cable-readout__label + .otdr-cable-readout__row {
  border-top: none;
  padding-top: 2px;
}
body.editor-body .editor-float-panel__body .otdr-cable-readout__k {
  color: #94a3b8;
  flex: 0 0 auto;
}
body.editor-body .editor-float-panel__body .otdr-cable-readout__v {
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.editor-body .editor-float-panel__body .otdr-cable-readout__sub {
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1.3;
  margin-top: 2px;
}

body.editor-body .editor-float-panel .panel-block.panel-otdr {
  margin: 0;
  border-radius: 12px;
}

/* === MODO «pick chip» ============================================
   Cuando el usuario arma referencia en mapa o el clic en el cable
   para Reporte de evento, el panel flotante se encoge a una píldora
   en la esquina superior izquierda, libera el mapa por completo y muestra
   un mensaje + botón Cancelar bien visible. */
body.editor-body .editor-float-panel.editor-float-panel--pick-mode {
  width: min(360px, calc(100vw - 24px));
  max-height: none;
  height: auto;
  top: calc(var(--editor-chrome-stack, 80px) + 8px);
  left: max(8px, env(safe-area-inset-left, 0px));
  right: auto;
  transform: translate(0, 0);
  border-radius: 999px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(56, 189, 248, 0.45),
    0 0 22px rgba(56, 189, 248, 0.32);
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(95deg, rgba(8, 47, 73, 0.95), rgba(15, 23, 42, 0.97));
  animation: editorFloatPickPulse 2.6s ease-in-out infinite;
}

/* En modo pick chip ocultamos TODO el contenido del panel salvo el
   titlebar (donde vive el indicador animado y el botón Cancelar). Usamos
   un selector universal para no depender de cómo se llame el contenedor
   de cuerpo (`.editor-float-panel__body`, `.sidebar-details-body`, etc.):
   así el chip se ve siempre como una píldora limpia. */
body.editor-body
  .editor-float-panel.editor-float-panel--pick-mode
  > *:not(.editor-float-panel__titlebar) {
  display: none !important;
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__titlebar {
  padding: 8px 8px 8px 14px;
  gap: 10px;
  border-bottom: none;
  background: transparent;
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__title {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #e0f2fe;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__title::before {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
  animation: editorFloatPickDot 1.1s ease-in-out infinite;
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__close {
  width: auto;
  min-width: 0;
  padding: 6px 12px;
  height: 30px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__close::before {
  content: 'Cancelar';
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__close > * {
  display: none;
}

body.editor-body .editor-float-panel.editor-float-panel--pick-mode .editor-float-panel__close:hover {
  background: rgba(248, 113, 113, 0.32);
  color: #fff;
}

/* Variante verde para Reporte evento: modo mapa activo (misma línea que GPS). */
body.editor-body
  .editor-float-panel.editor-float-panel--pick-mode.editor-float-panel--pick-mode-reporte {
  border-color: rgba(34, 197, 94, 0.52);
  background: linear-gradient(95deg, rgba(22, 101, 52, 0.55), rgba(15, 23, 42, 0.97));
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(34, 197, 94, 0.4),
    0 0 22px rgba(22, 163, 74, 0.28);
  animation: editorFloatPickPulseReporte 2.6s ease-in-out infinite;
}

body.editor-body
  .editor-float-panel.editor-float-panel--pick-mode.editor-float-panel--pick-mode-reporte
  .editor-float-panel__title {
  color: #d1fae5;
}

body.editor-body
  .editor-float-panel.editor-float-panel--pick-mode.editor-float-panel--pick-mode-reporte
  .editor-float-panel__title::before {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.75);
}

@keyframes editorFloatPickPulse {
  0%,
  100% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(56, 189, 248, 0.45),
      0 0 22px rgba(56, 189, 248, 0.32);
  }
  50% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(56, 189, 248, 0.65),
      0 0 30px rgba(56, 189, 248, 0.5);
  }
}

@keyframes editorFloatPickPulseReporte {
  0%,
  100% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(34, 197, 94, 0.4),
      0 0 22px rgba(22, 163, 74, 0.28);
  }
  50% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(52, 211, 153, 0.58),
      0 0 30px rgba(22, 163, 74, 0.42);
  }
}

@keyframes editorFloatPickDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.7;
  }
}

@media (max-width: 900px) {
  body.editor-body .editor-float-panel.editor-float-panel--pick-mode {
    width: min(340px, calc(100vw - 16px));
  }
}

@media (max-width: 900px) {
  body.editor-body .editor-float-panel:not(#reporte-evento-details) {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: auto;
    max-height: min(70dvh, calc(100dvh - var(--editor-chrome-stack, 80px) - 16px));
  }

  body.editor-body #reporte-evento-details.editor-re-modal.editor-float-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: none !important;
  }

  body.editor-body #reporte-evento-details .editor-mc-modal__panel {
    max-height: min(
      86dvh,
      calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px)
    );
  }

  body.editor-body .editor-float-panel.panel-reporte-evento .editor-float-panel__body,
  body.editor-body .editor-float-panel.panel-reporte-evento .sidebar-details-body {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Tamaños táctiles mínimos para inputs/selects/botones en móvil. */
  body.editor-body .panel-reporte-evento .reporte-ev-input,
  body.editor-body .panel-reporte-evento .reporte-ev-select,
  body.editor-body .panel-reporte-evento .reporte-ev-textarea {
    min-height: 44px;
    font-size: 16px; /* evita auto-zoom en iOS al enfocar */
  }

  body.editor-body .panel-reporte-evento .reporte-ev-btn {
    min-height: 44px;
  }

  body.editor-body .panel-reporte-evento .reporte-ev-btn--guardar {
    min-height: 52px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Barra de guardar sticky al fondo del panel en móvil. */
  body.editor-body .panel-reporte-evento .reporte-ev-actions--sticky {
    position: sticky;
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    z-index: 3;
    margin: 8px -12px -10px;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    background: linear-gradient(180deg, rgba(11, 17, 32, 0) 0%, rgba(11, 17, 32, 0.94) 40%);
    border-top: 1px solid rgba(71, 85, 105, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.editor-body .panel-reporte-evento .reporte-ev-actions--sticky .reporte-ev-btn {
    min-height: 46px;
    margin: 0;
  }

  body.editor-body .panel-reporte-evento .reporte-ev-actions--sticky .reporte-ev-btn--guardar {
    min-height: 50px;
  }

  body.editor-body .panel-reporte-evento .reporte-ev-actions--sticky .reporte-ev-btn--ghost-sm {
    border-radius: 12px;
  }

  /* Plantillas rápidas: grid de 2 columnas en móvil (ya lo está), pero permite wrap. */
  body.editor-body .panel-reporte-evento .reporte-ev-presets {
    grid-template-columns: repeat(2, 1fr);
  }

  body.editor-body #layout:not(.sidebar-collapsed) #sidebar.sidebar--fab-stack {
    width: max-content;
    max-width: min(320px, calc(100vw - 14px));
  }
}

/* Mapbox attribution / logo: margen inferior (safe area). */
body.editor-body .mapboxgl-ctrl-bottom-left,
body.editor-body .mapboxgl-ctrl-bottom-right {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}

/* Si la barra de medición inferior está visible, subir el GPS para evitar
   solape con ese dock fijo bottom-right. */
body.editor-body:has(#measure-polyline-dock:not([hidden])) .mapboxgl-ctrl-bottom-right {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) !important;
}

/* =============================================================================
   Mobile accessibility hardening (SEO + UX)
   - mejora legibilidad en 360/390
   - aumenta objetivos táctiles
   - reduce riesgo de overflow horizontal
   ============================================================================= */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .home-kicker {
    font-size: 0.76rem;
    padding: 7px 12px;
  }

  .home-chip {
    font-size: 0.84rem;
    min-height: 36px;
    padding: 7px 12px;
  }

  .home-card-title {
    font-size: clamp(1.02rem, 3.4vw, 1.16rem);
  }

  .home-foot-links a,
  .home-foot .auth-logout-btn,
  .home-link-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .analitica-topbar-title {
    font-size: clamp(1.08rem, 4.8vw, 1.24rem);
  }

  .analitica-topbar-sub {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .analitica-bar-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }
}

@media (max-width: 520px) {
  .analitica-bar-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .analitica-bar-num {
    text-align: left;
  }

  .analitica-sidebar-inner {
    padding: 14px 14px 16px;
  }
}