/* ============================================================================
   MarketPulse — shell y componentes
   Obedece DESIGN.md. Papel cálido + azul eléctrico + sidebar negro, tomado de
   companycam.com. Sin CDNs (§9), sin colores a mano (§2), tres radios (§4).
   ============================================================================ */

*{box-sizing:border-box}
/* `hidden` es SOLO display:none en la hoja del navegador, así que cualquier
   display explícito nuestro le gana por especificidad. Pasó el 2026-08-03: las
   sub-vistas ponían el atributo, el DOM decía hidden=true, y las secciones
   seguían pintadas porque .mp-panel es display:flex. Sin esta línea, `hidden`
   no significa nada en este proyecto. */
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--mp-bg);
  color:var(--mp-ink);
  font:var(--t-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--mp-blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--mp-blue);outline-offset:2px;border-radius:var(--r-xs)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La condensada pesada en mayúsculas — la firma de CompanyCam. */
.display{font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;text-transform:uppercase;letter-spacing:.005em}

/* ============================ SHELL ============================ */
.mp-app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}

/* --- sidebar: el bloque negro que ancla la izquierda --- */
.mp-side{
  background:var(--mp-dark);color:var(--mp-on-dark-2);
  padding:var(--s4) 0 var(--s6);position:sticky;top:0;height:100vh;overflow-y:auto;
}
.mp-brand{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4) var(--s5)}
.mp-brand .mark{
  width:30px;height:30px;border-radius:var(--r-sm);flex:none;
  background:var(--mp-yellow);color:var(--mp-dark);
  display:grid;place-items:center;
  font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;font-size:13px;letter-spacing:.01em;
}
.mp-brand .name{
  font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;font-size:17px;text-transform:uppercase;color:var(--mp-on-dark);
}
.mp-brand .env{
  font:var(--t-badge);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 6px;border-radius:var(--r-xs);
  background:var(--mp-dark-2);color:var(--mp-on-dark-2);
}

.mp-grp{
  padding:var(--s4) var(--s4) var(--s1);
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:#6E6A61;
}
.mp-nav{display:flex;flex-direction:column}
.mp-nav a{
  display:flex;align-items:center;gap:var(--s2);padding:8px var(--s4);
  color:var(--mp-on-dark-2);font-size:13.5px;font-weight:500;
  border-left:3px solid transparent;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.mp-nav a:hover{background:var(--mp-dark-2);color:var(--mp-on-dark);text-decoration:none}
.mp-nav a .ic{width:16px;flex:none;text-align:center;font-size:12px;opacity:.85}
/* El AMARILLO aparece SOLO aquí: marcador de navegación sobre oscuro. */
.mp-nav a[aria-current="page"]{
  background:var(--mp-dark-2);color:var(--mp-on-dark);
  border-left-color:var(--mp-yellow);font-weight:700;
}
.mp-nav a[aria-current="page"] .ic{opacity:1;color:var(--mp-yellow)}
.mp-nav a .soon{margin-left:auto;font:var(--t-badge);letter-spacing:.05em;
  text-transform:uppercase;color:#6E6A61}


/* --- las sub-vistas, lo único que se conserva del riel de dos niveles ---
   Cuelgan SOLO del módulo activo: con nueve módulos ya visibles, mostrarlas
   todas alargaría el sidebar justo por el motivo que hizo tirar el riel. */
/* El sidebar YA NO lista sub-vistas. Se quitaron el 2026-08-05 (Enrique: "no
   quiero tener un menú de páginas"): eran cinco entradas que recargaban la
   pantalla entera para enseñar un pedazo de la misma información. Moverse
   dentro de un módulo vive ahora en `.mp-secciones`, arriba. */

/* ============================ MAIN ============================ */
.mp-main{display:flex;flex-direction:column;min-width:0}

/* NO es sticky. Lo fue hasta el 2026-08-05 y el resultado era que la barra de
   búsqueda —sticky en el mismo `top:0` y con más z-index— le comía el título a
   la pantalla en cuanto bajabas. Ahora el encabezado se va con el scroll y lo
   que se queda es el menú de secciones, que es lo que se usa mientras lees. */
.mp-top{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4) var(--s6);border-bottom:1px solid var(--mp-line);
  background:var(--mp-bg);
}
.mp-top .titles{flex:1;min-width:200px}
.mp-top h1{
  margin:0;font:var(--t-screen);font-stretch:var(--stretch-display);
  text-transform:uppercase;letter-spacing:.005em;
}
.mp-top .sub{margin:5px 0 0;font:var(--t-meta);color:var(--mp-muted)}

/* ------------------------------------------------- menú de secciones --------
   Es lo ÚNICO que se queda pegado al bajar, justo debajo de la barra de
   búsqueda. Va fuera de `.mp-top` a propósito: cuando el encabezado también era
   sticky en `top:0`, la barra de búsqueda —que pesa más en z-index— tapaba el
   título de la pantalla en cuanto bajabas un dedo. El sidebar ya dice en qué
   módulo estás; el título no necesita perseguirte. El menú sí.

   `--h-bar` la publica app.js midiendo la barra, no está copiada a mano: un
   número escrito en la hoja deja de ser cierto en cuanto alguien toca un
   padding. El respaldo de 57 px solo cubre el primer cuadro. */
.mp-secciones{
  position:sticky;top:var(--h-bar,57px);z-index:19;
  display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;
  padding:8px var(--s6);background:var(--mp-bg);
  border-bottom:1px solid var(--mp-line);
}
.mp-secciones a{
  padding:7px 12px;border-radius:var(--r-pill);
  font:600 13px/1.2 var(--font);color:var(--mp-muted);text-decoration:none;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.mp-secciones a:hover{color:var(--mp-ink);background:var(--mp-sunk)}
.mp-secciones a:focus-visible{outline:2px solid var(--mp-blue);outline-offset:2px}
/* El marcador es el MISMO azul-suave de la pestaña seleccionada (§5). No es un
   botón: no lleva relleno azul sólido, que en este sistema significa "esto
   ejecuta algo". Aquí solo te dice dónde estás. */
.mp-secciones a[aria-current="true"]{
  color:var(--mp-blue);background:var(--mp-blue-soft);
}

@media (max-width:720px){
  /* En el teléfono las cinco etiquetas envuelven a TRES renglones, y como el
     menú es pegajoso eso son ~110 px de la pantalla ocupados para siempre.
     Una sola fila que se desliza de lado: el estándar del teléfono, y respeta
     la regla de la casa —lo ancho se desplaza DENTRO de su caja, nunca el
     cuerpo de la página. */
  .mp-secciones{
    flex-wrap:nowrap;overflow-x:auto;padding:6px var(--s4);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .mp-secciones::-webkit-scrollbar{display:none}
  .mp-secciones a{white-space:nowrap;flex:none}
}

.mp-body{padding:var(--s5) var(--s6) var(--s7);display:flex;flex-direction:column;gap:var(--s4);flex:1}

/* Una sección de la pantalla: el ancla del menú de arriba. Reparte adentro el
   mismo aire que `.mp-body` reparte afuera, así que envolver paneles en una
   sección no cambia cómo se ven. */
.mp-seccion{display:flex;flex-direction:column;gap:var(--s4);min-width:0}

/* ============================ ÁTOMOS ============================ */
.mp-chip{
  padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--mp-line);
  background:var(--mp-surface);color:var(--mp-ink-2);font-size:12.5px;
  font-weight:500;white-space:nowrap;
}
.mp-chip.mono{font-size:11.5px}

.mp-btn{
  padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--mp-blue);
  background:var(--mp-blue);color:var(--mp-on-blue);
  font:600 13.5px/1.2 var(--font);cursor:pointer;white-space:nowrap;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.mp-btn:hover{background:var(--mp-blue-deep);border-color:var(--mp-blue-deep)}
.mp-btn:active{transform:scale(.985)}
.mp-btn.quiet{background:var(--mp-surface);border-color:var(--mp-line);color:var(--mp-ink)}
.mp-btn.quiet:hover{background:var(--mp-sunk);border-color:#CFCCC4}
/* la píldora negra de CompanyCam — acción secundaria con peso */
.mp-btn.ink{background:var(--mp-dark);border-color:var(--mp-dark);color:var(--mp-on-dark)}
.mp-btn.ink:hover{background:#000}
/* DESIGN.md §7 — todo lo que gasta es ámbar y dice cuánto */
.mp-btn.costs{background:var(--mp-amber-soft);border-color:#E3CB96;color:var(--mp-amber)}
.mp-btn.costs:hover{background:#F6E5C2;border-color:var(--mp-amber)}
.mp-btn.costs .cost{opacity:.9;font-weight:500}
.mp-btn[disabled]{opacity:.5;cursor:not-allowed}

/* banner de datos de ejemplo — DESIGN.md §8 */
.mp-fixture{
  display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);
  border-radius:var(--r-sm);background:var(--mp-purple-soft);
  border:1px solid #E2CDEA;color:var(--mp-purple);font-size:12.5px;
}
.mp-fixture b{font-weight:700}

/* panel apagado — DESIGN.md §8 punto 2 */
.mp-empty{
  padding:var(--s7) var(--s5);text-align:center;border:1px dashed #D6D3CA;
  border-radius:var(--r-sm);background:var(--mp-band);color:var(--mp-muted);
}
.mp-empty h3{margin:0 0 var(--s2);font:var(--t-card);color:var(--mp-ink)}
.mp-empty p{margin:0 auto;max-width:52ch;font-size:13.5px}
.mp-empty .why{margin-top:var(--s3);font-size:12.5px;color:var(--mp-amber)}

/* ============================ ALERTAS ============================ */
.mp-alerts{display:flex;flex-direction:column;gap:var(--s2)}
.mp-alert{
  display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);
  border-radius:var(--r-sm);font-size:13.5px;
  background:var(--mp-red-soft);border:1px solid #EFC9C5;
}
.mp-alert .dot{width:8px;height:8px;border-radius:50%;background:var(--mp-red);flex:none}
.mp-alert.warn{background:var(--mp-amber-soft);border-color:#E8D6AC}
.mp-alert.warn .dot{background:var(--mp-amber)}
.mp-alert .txt{flex:1;min-width:0;color:var(--mp-ink-2)}
.mp-alert .txt b{font-weight:700;color:var(--mp-ink)}
.mp-alert a{font-weight:600;font-size:12.5px;white-space:nowrap}

/* ============================ KPIs ============================ */
.mp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.mp-kpi{
  position:relative;overflow:hidden;
  background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:var(--r-sm);
  padding:var(--s4) var(--s4) var(--s3);
}
.mp-kpi .lab{
  display:block;font:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--mp-muted);margin-bottom:10px;
}
.mp-kpi .num{
  display:block;font:var(--t-hero);font-stretch:var(--stretch-display);
  font-variant-numeric:tabular-nums;letter-spacing:0;position:relative;z-index:1;
}
.mp-kpi .num small{font-size:.42em;font-weight:700;color:var(--mp-muted);letter-spacing:0}
/* `.delta` estaba declarada SOLO bajo `.mp-kpi`, así que la misma función
   `delta()` de ui.js pintaba una píldora de colores dentro de un KPI y un texto
   negro pelón en cualquier otra parte — la columna "Cambio" de la tabla de
   páginas llevaba meses saliendo sin decir si el cambio era bueno o malo, que
   es lo ÚNICO que un delta aporta sobre el número crudo. Se sube al nivel de
   `.mv`, su hermana, que sí estaba suelta. El margen superior se queda en el
   KPI porque ahí sí va debajo de la cifra. */
.delta{
  display:inline-flex;align-items:center;gap:4px;
  font:600 12px/1 var(--font);font-variant-numeric:tabular-nums;
  padding:4px 8px;border-radius:var(--r-pill);
}
.delta.good{color:var(--mp-green);background:var(--mp-green-soft)}
.delta.bad {color:var(--mp-red);  background:var(--mp-red-soft)}
.delta.flat{color:var(--mp-muted);background:var(--mp-sunk)}
.mp-kpi .delta{margin-top:var(--s2);position:relative;z-index:1}
.mp-kpi .spark{position:absolute;right:0;bottom:0;pointer-events:none}

/* ============================ PANELES ============================ */
.mp-row{display:grid;gap:var(--s3)}
.mp-row.two{grid-template-columns:1.5fr 1fr}
.mp-row.half{grid-template-columns:1fr 1fr}

.mp-panel{
  background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:var(--r-sm);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
}
.mp-panel > header{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--mp-line);
}
.mp-panel > header h2{
  margin:0;font:var(--t-card);flex:1;min-width:120px;
  font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.005em;
}
.mp-panel > header .mp-chip{padding:3px 9px;font-size:11.5px;background:var(--mp-bg)}
.mp-panel .pad{padding:var(--s4)}
/* El pie es PROSA, y era `display:flex` con `gap:12px`. Cada trozo de texto
   suelto entre etiquetas se volvía un ítem del flex, así que un pie con un
   <b> adentro se partía en columnas con 12 px de aire en medio — se veía como
   un layout, no como una frase. Se notó el 2026-08-05, cuando un pie creció a
   tres oraciones y quedó ilegible; los cortos llevaban meses con el mismo
   defecto en pequeño. Ningún pie del proyecto lleva botones: `block` es lo que
   siempre debió ser. */
.mp-panel > footer{
  padding:10px var(--s4);border-top:1px solid var(--mp-hair);background:var(--mp-bg);
  font-size:12.5px;line-height:1.55;color:var(--mp-muted);
}

/* ============================ TABLA ============================ */
.mp-table{width:100%;border-collapse:collapse;font-size:13px}
/* La cabecera es una BARRA NEGRA, no texto flotando: sin fondo no se lee como
   cabecera y la primera fila de datos se confunde con ella. Mismo negro del
   sidebar — ancla la tabla igual que los bloques negros de CompanyCam.
   Sin esquinas redondeadas: la barra casi siempre va a media tarjeta (debajo del
   header del panel), y ahí un radio suelto se ve como un error. */
.mp-table thead th{
  text-align:left;font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mp-on-dark-2);background:var(--mp-dark);
  padding:11px var(--s4);border-bottom:0;
  white-space:nowrap;
}
.mp-table td{padding:11px var(--s4);border-bottom:1px solid var(--mp-hair);vertical-align:middle}
.mp-table tbody tr:last-child td{border-bottom:0}
.mp-table tbody tr:hover{background:var(--mp-sunk)}
.mp-table .n{text-align:right;font-variant-numeric:tabular-nums}
.mp-table .kw{font-weight:600;color:var(--mp-ink)}
.mp-table .pos{font-weight:700;font-variant-numeric:tabular-nums}
.mp-scroll{overflow-x:auto}

.mv{
  display:inline-block;font:600 12px/1 var(--font);font-variant-numeric:tabular-nums;
  padding:4px 8px;border-radius:var(--r-pill);
}
.mv.good{color:var(--mp-green);background:var(--mp-green-soft)}
.mv.bad {color:var(--mp-red);background:var(--mp-red-soft)}
.mv.flat{color:var(--mp-muted);background:var(--mp-sunk)}

.tag{
  display:inline-block;font:var(--t-badge);letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-xs);
}
.tag.ok  {color:var(--mp-green); background:var(--mp-green-soft)}
.tag.warn{color:var(--mp-amber); background:var(--mp-amber-soft)}
.tag.bad {color:var(--mp-red);   background:var(--mp-red-soft)}
.tag.ia  {color:var(--mp-purple);background:var(--mp-purple-soft)}
.tag.neutral{color:var(--mp-muted);background:var(--mp-sunk)}

/* ============================ COLA ============================ */
.mp-job{
  display:flex;align-items:center;gap:var(--s3);padding:11px var(--s4);
  border-bottom:1px solid var(--mp-hair);font-size:13px;
}
.mp-job:last-child{border-bottom:0}
.mp-job .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;color:var(--mp-ink)}
.mp-job .when{color:var(--mp-muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.st{
  font:var(--t-badge);letter-spacing:.07em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-xs);flex:none;
}
.st.pending{color:var(--mp-muted); background:var(--mp-sunk)}
.st.running{color:var(--mp-blue);  background:var(--mp-blue-soft)}
.st.done   {color:var(--mp-green); background:var(--mp-green-soft)}
.st.failed {color:var(--mp-red);   background:var(--mp-red-soft)}

/* ---- encabezado ordenable ---- */
.th-sort{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
}
.th-sort:hover{color:var(--mp-on-dark)}
/* La flecha va AMARILLA, no azul: la cabecera es negra y el azul sobre #111111
   da 2.13:1 — invisible. El amarillo da 12.84:1. Ver DESIGN.md §2. */
.th-sort[data-dir]:not([data-dir=""])::after{content:" ↑";color:var(--mp-yellow)}
.th-sort[data-dir="desc"]::after{content:" ↓"}

/* ---- filtro activo ---- */
.mp-btn.quiet.on{background:var(--mp-blue-soft);border-color:#C3CBEF;color:var(--mp-blue)}

/* ============================ BARRAS ============================ */
.mp-bars{display:flex;flex-direction:column;gap:var(--s3)}
.mp-bar{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:var(--s3);font-size:13px}
.mp-bar .bl{color:var(--mp-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-bar .bt{height:9px;border-radius:var(--r-pill);background:var(--mp-sunk);overflow:hidden}
.mp-bar .bt i{display:block;height:100%;border-radius:var(--r-pill)}
.mp-bar .bv{color:var(--mp-ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ==================== ENCABEZADO DE BLOQUE ====================
   Separa las zonas de una pantalla larga por LA PREGUNTA que contestan, no por
   tipo de dato. Sin esto, un módulo de once paneles se lee como una lista. */
.mp-h{
  margin:var(--s5) 0 0;display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:20px;text-transform:uppercase;letter-spacing:.005em;
}
.mp-h:first-child{margin-top:0}
.mp-h span{
  font-family:var(--font);font-stretch:100%;font-weight:400;font-size:13px;
  text-transform:none;letter-spacing:0;color:var(--mp-muted);
}
.mp-nota{margin:-4px 0 0;font-size:12.5px;color:var(--mp-muted);max-width:88ch}

/* ==================== POSTS CORRIENDO AHORA ====================
   Un reel de 3 horas no se compara con uno de ayer por números crudos: se
   compara contra la curva de los propios posts a esa misma edad. La barra tiene
   una MARCA FIJA a la mitad = tu ritmo normal. A la derecha vas mejor. */
.mp-lives{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:var(--s3)}
.mp-live{
  background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:var(--r-sm);
  padding:var(--s4);display:flex;flex-direction:column;gap:10px;min-width:0;
  border-left:3px solid var(--mp-line);
}
.mp-live.good{border-left-color:var(--mp-green)}
.mp-live.bad {border-left-color:var(--mp-red)}
.mp-live.flat{border-left-color:var(--mp-muted)}
.mp-live > header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;border:0}
.mp-live .fmt{
  font:var(--t-badge);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-xs);background:var(--mp-blue-soft);color:var(--mp-blue);
}
.mp-live .edad{font:600 12px/1 var(--font);color:var(--mp-ink-2)}
.mp-live .canal{font:400 12px/1 var(--font);color:var(--mp-muted);margin-left:auto}
.mp-live .txt{
  margin:0;font:600 14px/1.4 var(--font);color:var(--mp-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mp-live .ritmo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mp-live .ritmo .x{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:30px;line-height:1;font-variant-numeric:tabular-nums;
}
.mp-live.good .ritmo .x{color:var(--mp-green)}
.mp-live.bad  .ritmo .x{color:var(--mp-red)}
.mp-live.flat .ritmo .x{color:var(--mp-ink-2)}
.mp-live .ritmo .vs{font-size:12px;color:var(--mp-muted)}
.mp-live .barra{position:relative;height:8px;border-radius:var(--r-pill);background:var(--mp-sunk);overflow:hidden}
.mp-live .barra i{display:block;height:100%;border-radius:var(--r-pill);background:var(--mp-muted)}
.mp-live.good .barra i{background:var(--mp-green)}
.mp-live.bad  .barra i{background:var(--mp-red)}
/* La marca del ritmo normal. Sin ella la barra no significa nada. */
.mp-live .barra b{
  position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--mp-ink);opacity:.55;
}
.mp-live .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.mp-live .nums div{min-width:0}
.mp-live .nums dt{
  font:700 10px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mp-muted);margin-bottom:3px;
}
.mp-live .nums dd{margin:0;font:700 14px/1 var(--font);font-variant-numeric:tabular-nums}
.mp-live > footer{
  padding:8px 0 0;border-top:1px solid var(--mp-hair);background:none;
  font-size:11.5px;color:var(--mp-muted);
}

/* La intención declarada del post y la señal que le corresponde. De Metricool:
   un post que enseña se juzga por guardados, no por likes. */
.mp-live .intencion{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  padding:9px 11px;border-radius:var(--r-xs);background:var(--mp-bg);
  border:1px solid var(--mp-hair);font-size:12.5px;
}
.mp-live .intencion .quiso{color:var(--mp-muted)}
.mp-live .intencion .quiso b{color:var(--mp-ink-2);font-weight:700}
.mp-live .intencion .logro{margin-left:auto;color:var(--mp-ink-2)}
.mp-live .intencion .logro b{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:16px;color:var(--mp-ink);font-variant-numeric:tabular-nums;
}

/* Skip rate del reel: arriba de 50% la gente se va en los primeros 3 segundos. */
.mp-live .skip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:7px 11px;border-radius:var(--r-xs);font-size:12px;
}
.mp-live .skip b{font-variant-numeric:tabular-nums;font-size:14px}
.mp-live .skip.bien{background:var(--mp-green-soft);color:var(--mp-green)}
.mp-live .skip.mal {background:var(--mp-red-soft);  color:var(--mp-red)}

/* ==================== MINI-LISTA DE CIFRAS ====================
   Totales y promedios por post viven en tarjetas SEPARADAS (patrón de Buffer):
   el total dice cuánto hiciste, el promedio dice qué tan bueno fue cada intento. */
.mp-mini{display:flex;flex-direction:column;gap:var(--s3)}
.mp-mini > div{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:1px solid var(--mp-hair);
}
.mp-mini > div:last-child{padding-bottom:0;border-bottom:0}
.mp-mini .lab-mini{margin:0;flex:1;min-width:120px}
.mp-mini b{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:24px;line-height:1;font-variant-numeric:tabular-nums;
}
.mp-mini .sub{width:100%;font-size:12px;color:var(--mp-muted)}

/* Panel cuyo dato todavía no está confirmado con el proveedor. Se enseña —es el
   diseño objetivo— pero con banda ámbar para que nadie lo lea como dato firme. */
.mp-panel.por-confirmar{border-color:#E3CB96}
.mp-panel.por-confirmar > header{background:var(--mp-amber-soft)}

/* ==================== SEMANA CON HUECOS ==================== */
.mp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mp-week .dia{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 4px;border-radius:var(--r-xs);font:600 11px/1 var(--font);
}
.mp-week .dia.lleno{background:var(--mp-blue-soft);color:var(--mp-blue)}
.mp-week .dia.vacio{background:var(--mp-sunk);color:var(--mp-muted);
  border:1px dashed #D6D3CA}
.mp-week .dia .p{font-size:13px;line-height:1;min-height:13px}

/* ============================ PESTAÑAS ============================ */
.mp-tabs{display:flex;gap:var(--s1);flex-wrap:wrap;border-bottom:1px solid var(--mp-line)}
.mp-tabs button{
  padding:10px var(--s4);border:0;background:none;cursor:pointer;
  font:600 13.5px/1.2 var(--font);color:var(--mp-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--fast) var(--ease);
}
.mp-tabs button:hover{color:var(--mp-ink)}
.mp-tabs button[aria-selected="true"]{color:var(--mp-blue);border-bottom-color:var(--mp-blue)}
.mp-tabs button .n{
  display:inline-block;margin-left:5px;padding:2px 6px;border-radius:var(--r-pill);
  background:var(--mp-sunk);color:var(--mp-muted);font:700 11px/1 var(--font);
}
.mp-tabs button[aria-selected="true"] .n{background:var(--mp-blue-soft);color:var(--mp-blue)}

/* ==================== REJILLA OSCURA DE IMAGEN ====================
   DESIGN.md §6. Al elegir el sistema claro se perdió el lucimiento de las fotos
   sobre negro; se recupera con este bloque. Es un bloque oscuro DENTRO del
   papel, solo para rejillas y visores de medios — nunca para tablas ni texto. */
.mp-media{
  background:var(--mp-dark);border-radius:var(--r-sm);padding:var(--s4);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s3);
}
.mp-shot{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.mp-shot .ph{
  aspect-ratio:4/3;border-radius:var(--r-xs);display:grid;place-items:center;
  border:1px solid var(--mp-dark-line);position:relative;overflow:hidden;
}
/* Trama diagonal: deja claro que es un HUECO, no una foto. */
.mp-shot .ph::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(247,246,242,.5) 7px 8px);
}
.mp-shot .ph .glyph{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:30px;color:rgba(247,246,242,.5);position:relative;z-index:1;
}
.mp-shot figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.mp-shot .t{
  font:600 13px/1.35 var(--font);color:var(--mp-on-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mp-shot .m{font:400 12px/1.3 var(--font);color:var(--mp-on-dark-2)}

.mp-media-bar{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3) var(--s4);background:var(--mp-dark);
  border-radius:var(--r-sm) var(--r-sm) 0 0;border-bottom:1px solid var(--mp-dark-line);
}
.mp-media-bar + .mp-media{border-radius:0 0 var(--r-sm) var(--r-sm)}
.mp-media-bar .lab{
  font:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--mp-on-dark-2);margin-right:auto;
}
.mp-media-bar button{
  padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--mp-dark-line);background:transparent;
  color:var(--mp-on-dark-2);font:600 12.5px/1.2 var(--font);
}
.mp-media-bar button:hover{border-color:var(--mp-on-dark-2);color:var(--mp-on-dark)}
/* Sobre oscuro el activo va AMARILLO — el azul da 2.13:1 aquí (DESIGN.md §2). */
.mp-media-bar button[aria-pressed="true"]{
  background:var(--mp-yellow);border-color:var(--mp-yellow);color:var(--mp-dark);
}
.mp-sel{
  padding:6px 10px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--mp-dark-line);background:var(--mp-dark-2);
  color:var(--mp-on-dark);font:600 12.5px/1.2 var(--font);
}
.mp-sel:hover{border-color:var(--mp-on-dark-2)}

/* ============================ GEO-GRID ============================
   La rejilla de Local Falcon. La rampa es SEMÁNTICA, no decorativa: verde
   sólido = top 3 (el map pack, lo único que factura), y de ahí se apaga.
   "No apareces" va en gris, no en rojo: es ausencia, no error — el rojo está
   reservado a las alertas (DESIGN.md §2). */
.mp-geo{
  display:grid;grid-template-columns:repeat(13,1fr);gap:2px;
  max-width:560px;margin:0 auto;
}
.mp-geo .pin{
  aspect-ratio:1;display:grid;place-items:center;border-radius:3px;
  font:700 10px/1 var(--font);font-variant-numeric:tabular-nums;
  transition:transform var(--fast) var(--ease);
}
.mp-geo .pin:hover{transform:scale(1.28);z-index:2;position:relative}
.mp-geo .pin.top3 {background:var(--mp-green);color:#fff}
.mp-geo .pin.top10{background:var(--mp-green-soft);color:var(--mp-green)}
.mp-geo .pin.top20{background:var(--mp-blue-soft);color:var(--mp-blue)}
/* 11–20 iba en ÁMBAR y el ámbar es de dinero (§7): 111 pines pintados como
   si costaran algo, desde el primer build. Es el mismo defecto que los tres
   ámbares ilegales de Salud del sitio, una capa más abajo — y la prueba de
   que un sesgo corregido hay que buscarlo en las otras capas.
   La rampa correcta ya existía: es la que usa el reparto de keywords en SEO
   (top 3 verde · 4–10 azul · 11–20 azul suave · sin rankear gris). */
.mp-geo .pin.out  {background:var(--mp-sunk);color:transparent}

.mp-geo-key{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--mp-hair);
  font-size:12px;color:var(--mp-muted);justify-content:center;
}
.mp-geo-key span{display:inline-flex;align-items:center;gap:6px}
.mp-geo-key i{width:12px;height:12px;border-radius:3px;display:block}
.mp-geo-key i.top3 {background:var(--mp-green)}
.mp-geo-key i.top10{background:var(--mp-green-soft);border:1px solid rgba(18,115,74,.3)}
.mp-geo-key i.top20{background:var(--mp-blue-soft);border:1px solid rgba(7,44,217,.3)}
/* La leyenda es la MISMA rampa que los pines, y por poco se queda atrás: al
   sacar los pines del ámbar (§7 lo reserva para dinero) este cuadrito siguió
   ámbar una hora — una leyenda que no coincide con su mapa es peor que no
   tener leyenda, porque se lee con confianza. Si cambia la rampa de arriba,
   cambia aquí en el mismo commit. */
.mp-geo-key i.out  {background:var(--mp-sunk);border:1px solid var(--mp-line)}

/* ============================ CAMPO ETIQUETADO ============================ */
.lab-mini{
  display:block;font:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--mp-muted);margin-bottom:4px;
}
.val{display:block;font-size:13px;color:var(--mp-ink);word-break:break-word}
.val.mono{font-family:var(--mono);font-size:12px;color:var(--mp-ink-2)}

/* ============================ CONFIRMACIÓN ============================ */
/* DESIGN.md §7 — nada con efecto se dispara sin este paso */
.mp-scrim{
  position:fixed;inset:0;background:rgba(17,17,17,.55);z-index:100;
  display:grid;place-items:center;padding:var(--s4);
  animation:mp-fade var(--med) var(--ease);
}
@keyframes mp-fade{from{opacity:0}to{opacity:1}}
.mp-modal{
  width:min(460px,100%);background:var(--mp-surface);
  border:1px solid var(--mp-line);border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 12px 40px rgba(17,17,17,.16);
}
.mp-modal header{padding:var(--s4) var(--s5) var(--s3);border-bottom:1px solid var(--mp-hair)}
.mp-modal h2{
  margin:0;font:var(--t-sect);font-stretch:var(--stretch-display);
  text-transform:uppercase;letter-spacing:.005em;
}
.mp-modal .pad{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.mp-modal p{margin:0;font-size:13.5px;color:var(--mp-ink-2)}
.mp-modal .cost-box{
  padding:var(--s3);border-radius:var(--r-sm);
  background:var(--mp-amber-soft);border:1px solid #E8D6AC;
}
.mp-modal .cost-box .big{
  display:block;font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--mp-amber);margin-bottom:5px;
}
.mp-modal .cost-box .rest{font-size:12.5px;color:var(--mp-ink-2)}
.mp-modal footer{
  padding:var(--s3) var(--s5) var(--s4);display:flex;gap:var(--s2);justify-content:flex-end;
  background:var(--mp-bg);border-top:1px solid var(--mp-hair);
}
/* Cancelar SIEMPRE a la izquierda de Confirmar — DESIGN.md §7 */

/* ============================ TOAST ============================ */
.mp-toasts{position:fixed;right:var(--s5);bottom:var(--s5);z-index:120;
  display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.mp-toast{
  padding:12px var(--s4);border-radius:var(--r-sm);
  background:var(--mp-dark);border:1px solid var(--mp-dark);
  color:var(--mp-on-dark);font-size:13px;max-width:340px;
  box-shadow:0 8px 24px rgba(17,17,17,.20);
  animation:mp-rise var(--med) var(--ease);
}
.mp-toast b{color:var(--mp-yellow)}
@keyframes mp-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================ RESPONSIVE ============================ */
.mp-burger{display:none}
@media (max-width:1080px){ .mp-kpis{grid-template-columns:repeat(2,1fr)} .mp-row.two,.mp-row.half{grid-template-columns:1fr} }
@media (max-width:820px){
  .mp-app{grid-template-columns:1fr}
  .mp-side{
    position:fixed;inset:0 auto 0 0;width:224px;height:100vh;z-index:60;
    transform:translateX(-100%);transition:transform var(--med) var(--ease);
  }
  .mp-app.nav-open .mp-side{transform:none}
  .mp-app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(17,17,17,.5);z-index:50}
  .mp-burger{
    display:grid;place-items:center;width:38px;height:38px;flex:none;
    border-radius:var(--r-sm);border:1px solid var(--mp-line);
    background:var(--mp-surface);color:var(--mp-ink);font-size:16px;cursor:pointer;
  }
  .mp-top{padding:var(--s3) var(--s4)}
  .mp-top h1{font-size:22px}
  .mp-body{padding:var(--s4) var(--s4) var(--s6)}
  /* Los chips de la barra superior llevan nowrap para no partirse a media
     palabra en escritorio. En un teléfono eso los recorta contra el borde y la
     información se pierde (pasó con "CompanyCam → Photo Bank…"): aquí sí
     envuelven. */
  .mp-top .mp-chip{white-space:normal;line-height:1.35}
}
@media (max-width:520px){
  .mp-kpis{grid-template-columns:1fr}
  .mp-kpi .num{font-size:34px}
  /* Con el mínimo de 168px solo cabe UNA columna en un teléfono y cada foto se
     vuelve enorme. Bajándolo a 132 caben dos y se puede escanear la rejilla. */
  .mp-media{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));padding:var(--s3);gap:var(--s2)}
  .mp-shot .ph .glyph{font-size:22px}
}

/* ==================== LA COLA DE TRABAJO DE SEO ====================
   El módulo SEO abre con una decisión, no con un inventario. Estas son las
   piezas de esa decisión: la tarea priorizada y la rotura.

   La regla de color aquí: el premio (clics estimados) NO va en verde. Verde
   significa "esto ya subió"; un estimado todavía no ha pasado. Va en azul,
   que es el color de la acción. */
.mp-panel.destacado{border-color:var(--mp-blue);box-shadow:none}
.mp-panel.destacado > header{border-bottom-color:var(--mp-blue-soft)}

.mp-cola{display:flex;flex-direction:column}

/* La fila de tarea. ANTES era flex con el botón empujado por margin-left:auto,
   y en una pantalla ancha quedaban 500px de aire entre el texto y el botón —
   Enrique lo señaló y tenía razón. Ahora es un grid de columnas fijas y el
   hueco lo llena la columna que faltaba: QUÉ PIEZA se va a escribir y dónde
   aterriza. El espacio se llena con información, no cerrando el espacio. */
.mp-tarea{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 210px 96px auto;
  align-items:center;gap:var(--s3);
  padding:12px var(--s4);border-bottom:1px solid var(--mp-hair);
}
/* Las cifras solo existen donde SOBRA ancho. De 1280 para abajo se esconden y
   los mismos números siguen en la línea .meta del cuerpo — no se pierde nada,
   se deja de repetir. Por eso la fila no las declara en su grid base. */
.mp-tarea .metricas{display:none}
.mp-tarea:last-child{border-bottom:0}
.mp-tarea:hover{background:var(--mp-sunk)}
.mp-tarea .rank{
  width:26px;height:26px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--mp-dark);color:var(--mp-on-dark);
  font:800 12px/1 var(--font);font-variant-numeric:tabular-nums;
}
/* El cuerpo es un BOTÓN: toda la fila abre el detalle. Antes solo respondía el
   botón de la derecha y hacer clic en el título no hacía nada. */
.mp-fila .cuerpo{
  all:unset;cursor:pointer;min-width:0;display:block;
  border-radius:var(--r-xs);
}
.mp-fila .cuerpo:focus-visible{outline:2px solid var(--mp-blue);outline-offset:3px}
.mp-fila .cuerpo h3{
  margin:0 0 3px;font:700 14px/1.3 var(--font);color:var(--mp-ink);
  display:flex;align-items:center;gap:6px;
}
.mp-fila .cuerpo h3::after{
  content:"›";color:var(--mp-muted);font-size:15px;line-height:1;
  transition:transform var(--fast) var(--ease);
}
.mp-fila .cuerpo[aria-expanded="true"] h3::after{transform:rotate(90deg)}
.mp-tarea .razon{margin:0 0 5px;font-size:12.5px;line-height:1.45;color:var(--mp-ink-2)}
.mp-tarea .meta{margin:0;font-size:12px;color:var(--mp-muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* La columna que llena el hueco: qué pieza y a qué archivo va a caer. */
.mp-tarea .pieza{display:flex;flex-direction:column;gap:4px;min-width:0}
.mp-tarea .pieza .ruta{
  font-size:11px;color:var(--mp-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.mp-tarea .premio{
  text-align:right;cursor:help;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.mp-tarea .premio .n{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:22px;line-height:1;color:var(--mp-blue);font-variant-numeric:tabular-nums;
}
.mp-tarea .premio .u{font:600 10px/1 var(--font);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mp-muted)}
.mp-tarea .premio .sin{
  font:600 11.5px/1.3 var(--font);color:var(--mp-muted);
  padding:5px 9px;border-radius:var(--r-pill);background:var(--mp-sunk);
}

/* El detalle: acordeón DENTRO de la fila, no un modal. Un modal te saca de la
   lista y hace perder el lugar; esto se abre debajo y se cierra igual. */
.mp-fila .detalle{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  margin-top:var(--s3);padding:var(--s4);
  background:var(--mp-bg);border:1px solid var(--mp-line);border-radius:var(--r-sm);
}
.mp-fila .detalle .col{min-width:0}
.mp-fila .detalle h4{
  margin:0 0 9px;font:700 12px/1.2 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--mp-ink-2);
  padding-bottom:7px;border-bottom:1px solid #D6D3CA;
}
.mp-fila .detalle p{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--mp-ink-2)}
.mp-fila .detalle p:last-child{margin-bottom:0}
.mp-fila .detalle .senal{color:var(--mp-ink);font-weight:600}
/* El pie es metadato, pero se LEE: ink-2 (9.27:1), no muted (4.91:1). El
   muted queda solo para rótulos de columna. */
.mp-fila .detalle .pie{font-size:12px;color:var(--mp-ink-2)}

/* --- col 1: la elegida contra las descartadas ---
   Un párrafo no deja comparar. La lista sí: se ve de un golpe qué ganó y
   por qué perdieron las otras dos. */
.mp-fila .alts{list-style:none;margin:0 0 10px;padding:0;display:flex;
  flex-direction:column;gap:6px}
.mp-fila .alts li{display:flex;gap:8px;font-size:13px;line-height:1.5;
  color:var(--mp-ink-2)}
.mp-fila .alts .mk{flex:none;width:14px;font-weight:700;text-align:center}
.mp-fila .alts li.si{color:var(--mp-ink)}
.mp-fila .alts li.si .mk{color:var(--mp-green)}
.mp-fila .alts li.si b{color:var(--mp-ink)}
/* La descartada NO se atenúa: el ✕ ya dice que perdió, y bajarle el color
   además la vuelve ilegible justo cuando quieres entender POR QUÉ perdió. */
.mp-fila .alts li.no .mk{color:var(--mp-red)}
.mp-fila .alts li.no b{color:var(--mp-ink)}

/* --- col 2: la cadena de skills --- */
.mp-tarea .skills{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:4px;counter-reset:sk}
.mp-tarea .skills > li{position:relative}
.mp-tarea .sk{
  all:unset;box-sizing:border-box;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:var(--r-xs);border:1px solid var(--mp-line);
  background:var(--mp-surface);
}
.mp-tarea .sk:hover{border-color:var(--mp-blue);background:var(--mp-blue-soft)}
.mp-tarea .sk:focus-visible{outline:2px solid var(--mp-blue);outline-offset:2px}
.mp-tarea .sk .n{
  flex:none;width:19px;height:19px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--mp-sunk);color:var(--mp-ink-2);
  font:700 11px/1 var(--font);
}
.mp-tarea .sk[aria-expanded="true"] .n{background:var(--mp-blue);color:#fff}
.mp-tarea .sk .nm{font-size:12.5px;font-weight:600;color:var(--mp-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-tarea .sk::after{content:"›";margin-left:auto;color:var(--mp-muted);
  transition:transform var(--fast) var(--ease)}
.mp-tarea .sk[aria-expanded="true"]::after{transform:rotate(90deg)}

/* Hover = el resumen de una línea. Click = los pasos. El resumen va flotando
   para que pasar el mouse NO mueva el layout; los pasos van en línea porque
   ahí sí quieres leer con calma. */
.mp-tarea .sk .tip{
  position:absolute;left:0;right:0;bottom:calc(100% + 5px);z-index:30;
  padding:7px 9px;border-radius:var(--r-xs);
  background:var(--mp-dark);color:var(--mp-on-dark);
  font:400 12px/1.45 var(--font);white-space:normal;text-align:left;
  opacity:0;visibility:hidden;transition:opacity var(--fast) var(--ease);
  box-shadow:0 6px 18px rgba(17,17,17,.2);pointer-events:none;
}
.mp-tarea .sk:hover .tip,
.mp-tarea .sk:focus-visible .tip{opacity:1;visibility:visible}
.mp-tarea .sk[aria-expanded="true"] .tip{display:none}

.mp-tarea .sk-det{
  padding:8px 10px 9px 27px;margin-top:2px;
  border-left:2px solid var(--mp-blue);background:var(--mp-surface);
  border-radius:0 var(--r-xs) var(--r-xs) 0;
}
.mp-tarea .sk-det p{margin:0 0 7px;font-size:13px;line-height:1.5;color:var(--mp-ink)}
.mp-tarea .sk-det ol{margin:0;padding-left:15px;display:flex;
  flex-direction:column;gap:4px}
.mp-tarea .sk-det li{font-size:12.5px;line-height:1.55;color:var(--mp-ink-2)}

/* --- col 3: la maqueta de la página --- */
.mp-tarea .maqueta{
  border:1px solid var(--mp-line);border-radius:var(--r-xs);
  background:var(--mp-surface);padding:9px 11px;margin-bottom:9px;
}
.mp-tarea .maqueta .url{
  display:block;font-size:12px;color:var(--mp-ink-2);
  padding-bottom:7px;border-bottom:1px solid var(--mp-line);margin-bottom:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mp-tarea .maqueta .h1{
  display:block;font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;font-size:14px;color:var(--mp-ink);margin-bottom:7px;
}
.mp-tarea .maqueta ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:4px}
.mp-tarea .maqueta li{
  font-size:12.5px;color:var(--mp-ink-2);padding:5px 8px;
  background:var(--mp-bg);border:1px solid var(--mp-hair);border-radius:2px;
}
/* NO va en ámbar. §7 reserva el ámbar para "esto cuesta dinero" y esta nota no
   cuesta nada — es informativa. En cuanto el ámbar decora avisos, deja de
   significar lo que significa, igual que el morado con la IA. Barra azul a la
   izquierda: es una nota del sistema, no una alerta. */
.mp-tarea .staging{
  font-size:12.5px;line-height:1.55;color:var(--mp-ink-2);
  padding:9px 12px;border-radius:0 var(--r-xs) var(--r-xs) 0;
  background:var(--mp-bg);border:1px solid var(--mp-line);
  border-left:3px solid var(--mp-blue);
}
.mp-tarea .staging b{color:var(--mp-ink)}
.mp-fila .detalle .cambiar{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--mp-hair);
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  font-size:12px;color:var(--mp-muted);
}

/* ==================== CIFRAS EN ESCRITORIO ANCHO ====================
   Enrique pidió usar el hueco del centro de la tarjeta, SOLO en escritorio.
   Estos números ya estaban en la fila —enterrados en una línea de 12 px donde
   no se pueden comparar entre filas—; aquí salen a columnas alineadas con
   tabular-nums y una barra proporcional, que es el patrón de SEMrush.

   1280 y no 1080: a 1080 la columna aprieta el título a dos renglones y se
   pierde más de lo que se gana. */
@media (min-width:1280px){
  .mp-tarea{grid-template-columns:26px minmax(0,1fr) 232px 200px 96px auto}
  .mp-tarea .metricas{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
    min-width:0;
  }
  .mp-tarea .metricas .m{display:flex;flex-direction:column;gap:3px;min-width:0}
  .mp-tarea .metricas .lab{
    font:700 9.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;
    color:var(--mp-muted);
  }
  .mp-tarea .metricas .val{
    font:700 14px/1 var(--font);color:var(--mp-ink);font-variant-numeric:tabular-nums;
  }
  .mp-tarea .metricas .sub{font:400 10.5px/1.2 var(--font);color:var(--mp-muted)}
  .mp-tarea .metricas .barra{
    height:3px;border-radius:var(--r-pill);background:var(--mp-sunk);overflow:hidden;
  }
  .mp-tarea .metricas .barra i{display:block;height:100%;background:var(--mp-d1)}
  /* La dificultad se lee al revés: más barra = peor. Va en ámbar para que el
     ojo no la sume a las azules como si fuera "más es mejor". */
  .mp-tarea .metricas .barra.inv i{background:var(--mp-amber)}
  /* Las filas de IA no tienen columnas porque Brand Radar no da volumen. Se
     dice en UNA línea: el texto largo se repetía en cada una de las tres y
     rompía la alineación con las filas de arriba. */
  .mp-tarea .metricas .sin-cifras{
    grid-column:1 / -1;margin:0;align-self:center;
    font-size:11px;line-height:1.4;color:var(--mp-muted);font-style:italic;
  }
  /* Con las columnas puestas, repetir los mismos números en la línea de meta
     es ruido — pero SOLO en las filas que tienen columna. Las de IA la usan
     para decir dónde se pregunta, y eso no está en ningún otro lado. */
  .mp-tarea[data-cifras="si"] .cifras-inline{display:none}
}

/* La fila de rotura es hermana de la de tarea: mismo acordeón, mismo detalle.
   Antes era un flex plano sin desplegable —decía qué pasó y ahí se acababa—;
   ahora es un grid con su detalle a lo ancho, igual que .mp-tarea. Lo común
   vive en .mp-fila y las dos lo llevan puesto. */
.mp-rotura{
  display:grid;grid-template-columns:8px minmax(0,1fr) auto 52px;
  align-items:center;gap:var(--s3);
  padding:12px var(--s4);border-bottom:1px solid var(--mp-hair);
}
.mp-rotura:last-child{border-bottom:0}
.mp-rotura:hover{background:var(--mp-sunk)}
/* El punto lleva el color del estado; en el gemelo bueno es verde. El ámbar de
   aquí NO es el ámbar de §7 —no hay dinero de por medio—, así que se cambia por
   el rojo/verde de estado, que es lo que de verdad significa. */
.mp-rotura .dot{width:8px;height:8px;border-radius:50%;background:var(--mp-ink-2);flex:none;align-self:start;margin-top:6px}
.mp-rotura.grave .dot{background:var(--mp-red)}
.mp-rotura.buena .dot{background:var(--mp-ink-2)}
.mp-rotura.buena.grave .dot{background:var(--mp-green)}
.mp-rotura .cuerpo h3{margin:0 0 2px;font:700 13.5px/1.3 var(--font);color:var(--mp-ink);
  display:flex;align-items:center;gap:6px}
.mp-rotura .razon{margin:0;font-size:12.5px;line-height:1.45;color:var(--mp-ink-2)}
/* La línea que explica una fusión. Va en morado no: el morado es de la IA (§2).
   Va en tinta secundaria con la marca de que son dos fuentes. */
.mp-rotura .fusion{
  margin:5px 0 0;font-size:11.5px;line-height:1.45;color:var(--mp-muted);
  padding-left:9px;border-left:2px solid var(--mp-line);
}
.mp-rotura .fusion b{color:var(--mp-ink-2)}
.mp-rotura .donde{
  font:600 12px/1 var(--font);color:var(--mp-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
/* El detalle de una rotura se APILA, no se reparte en tres columnas como el de
   una tarea. No es gusto: los dos paneles gemelos viven en `.mp-row.half`, así
   que cada uno mide media pantalla, y tres columnas dentro de 400 px salen a
   ~120 px cada una — ilegibles. La tarea puede darse el lujo porque su panel
   es de ancho completo. Misma pieza, distinto envase, distinto reparto. */
.mp-rotura .detalle{grid-template-columns:1fr;gap:var(--s3)}
.mp-rotura .detalle .col + .col{padding-top:var(--s3);border-top:1px solid var(--mp-line)}

/* Los hechos: una línea por fuente. Es lo que deja ver de un golpe que dos
   sistemas distintos están reportando el mismo evento. */
.mp-fila .hechos{list-style:none;margin:0 0 9px;padding:0;display:flex;
  flex-direction:column;gap:7px}
.mp-fila .hechos li{display:flex;flex-direction:column;gap:2px}
.mp-fila .hechos .f{
  font:700 9.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mp-muted);
}
.mp-fila .hechos .d{font-size:12.5px;line-height:1.45;color:var(--mp-ink);
  font-variant-numeric:tabular-nums}
.mp-fila .lane{margin:0 0 9px}
/* Por qué esta tarea va primero. Se separa del resto para que no se lea como
   una razón más de la lista: es la razón del ORDEN, no de la pieza. */
.mp-fila .momentum{
  margin:0 0 9px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--mp-green-soft);color:var(--mp-ink-2);
  font-size:12.5px;line-height:1.5;
}
.mp-fila .momentum b{color:var(--mp-green)}

/* ---------------------------------------------------------- el veredicto --
   Va arriba de todo y contesta una pregunta binaria. No lleva estado
   intermedio a propósito: "¿puedo publicar?" no admite un "más o menos". */
.mp-veredicto{
  display:grid;grid-template-columns:34px 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4);border-radius:var(--r-sm);border:1px solid var(--mp-line);
  background:var(--mp-surface);margin-bottom:var(--s4);
}
.mp-veredicto .mk{
  width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;
  font:800 16px/1 var(--font);
}
.mp-veredicto h2{
  margin:0 0 5px;font-family:var(--display);font-stretch:var(--stretch-display);
  font-weight:800;font-size:20px;line-height:1.15;text-transform:uppercase;
  color:var(--mp-ink);
}
.mp-veredicto p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mp-ink-2)}
.mp-veredicto p.nota{margin-top:7px;font-size:12.5px;color:var(--mp-muted)}
.mp-veredicto.ok  {border-color:rgba(18,115,74,.28);background:var(--mp-green-soft)}
.mp-veredicto.ok  .mk{background:var(--mp-green);color:#fff}
.mp-veredicto.mal {border-color:rgba(192,39,31,.28);background:var(--mp-red-soft)}
.mp-veredicto.mal .mk{background:var(--mp-red);color:#fff}
.mp-veredicto.ia  {border-color:rgba(123,31,162,.24);background:var(--mp-purple-soft)}
.mp-veredicto.ia  .mk{background:var(--mp-purple);color:#fff}
/* "Algo empeoró pero nada bloquea" NO lleva color de estado. §2 solo tiene
   verde, rojo, ámbar (=dinero) y morado (=IA): un tercer color de alerta no
   existe, y el ámbar aquí sería ilegal porque no hay un peso de por medio.
   Tinta neutra sobre superficie hundida es exactamente lo que significa —
   ni bien ni alarma. */
.mp-veredicto.atencion{border-color:var(--mp-line);background:var(--mp-sunk)}
.mp-veredicto.atencion .mk{background:var(--mp-ink-2);color:var(--mp-bg)}

/* ------------------------------------------------ la fila de ciudad --------
   Hermana de .mp-tarea y .mp-rotura: mismo acordeón, mismo detalle (.mp-fila).
   Lo suyo es la PESA — las dos posiciones sobre una misma escala. Van en la
   misma barra y no en dos columnas de números porque restar dos posiciones con
   los ojos es más lento que ver un hueco. */
.mp-ciudad{
  display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(200px,1.4fr) 150px;
  align-items:center;gap:var(--s3);
  padding:13px var(--s4);border-bottom:1px solid var(--mp-hair);
  border-left:3px solid transparent;
}
.mp-ciudad:last-child{border-bottom:0}
.mp-ciudad:hover{background:var(--mp-sunk)}
.mp-ciudad.gana    {border-left-color:var(--mp-green)}
.mp-ciudad.cerca   {border-left-color:var(--mp-blue)}
.mp-ciudad.lejos   {border-left-color:var(--mp-red)}
.mp-ciudad.nomedido{border-left-color:var(--mp-muted)}
.mp-ciudad .cuerpo h3{margin:0 0 2px;font:700 14px/1.3 var(--font);color:var(--mp-ink);
  display:flex;align-items:center;gap:6px}
.mp-ciudad .razon{margin:0;font-size:12px;line-height:1.4;color:var(--mp-muted)}
.mp-ciudad .vol{text-align:right;font-variant-numeric:tabular-nums}
.mp-ciudad .vol b{display:block;font:700 15px/1.1 var(--font);color:var(--mp-ink)}
.mp-ciudad .vol small{font:400 10px/1.2 var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mp-muted)}
.mp-ciudad .toca{justify-self:start}

/* La pesa. El bloque verde de la izquierda es el top 3: no es decoración, es
   la meta — se ve de un golpe si el punto cayó dentro o fuera. */
.mp-pesa{position:relative;display:block;height:32px;min-width:0}
.mp-pesa .eje{position:absolute;left:0;right:0;top:15px;height:2px;background:var(--mp-hair)}
.mp-pesa .zona3{position:absolute;left:0;top:9px;height:14px;width:10.5%;
  background:var(--mp-green-soft);border-radius:3px}
.mp-pesa .liga{position:absolute;top:15px;height:2px;background:var(--mp-line)}
.mp-pesa .pt{position:absolute;top:10px;width:13px;height:13px;border-radius:50%;
  transform:translateX(-6.5px);border:2px solid var(--mp-surface)}
.mp-pesa .pt.mapa{background:var(--mp-purple)}
.mp-pesa .pt.org {background:var(--mp-blue)}
.mp-pesa .cif{position:absolute;font:700 10px/1 var(--font);color:var(--mp-ink-2);
  transform:translateX(-50%);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-pesa .cif.arr{top:0} .mp-pesa .cif.aba{top:25px}

.mp-leyenda-pesa{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:9px var(--s4);border-bottom:1px solid var(--mp-hair);
  font-size:12px;color:var(--mp-muted);
}
.mp-leyenda-pesa .pt{display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:5px;vertical-align:-1px;position:static;transform:none;border:0}
.mp-leyenda-pesa .pt.mapa{background:var(--mp-purple)}
.mp-leyenda-pesa .pt.org{background:var(--mp-blue)}
.mp-leyenda-pesa .z3{display:inline-block;width:16px;height:10px;border-radius:2px;
  background:var(--mp-green-soft);border:1px solid #C9DFD2;margin-right:5px;vertical-align:-1px}
.mp-leyenda-pesa .der{margin-left:auto}
.mp-leyenda-pesa b{color:var(--mp-ink-2)}

/* El rótulo de fuente dentro del brief: de dónde salió cada línea. Sin esto,
   tres fuentes distintas se leen como una sola voz. */
.mp-fila .fuente{
  display:block;font:700 9.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mp-muted);margin-bottom:3px;
}
/* El ángulo del cerebro no es una alternativa descartada: son todos válidos.
   Se reusa la lista de .alts por la forma, pero el marcador va en morado —
   es conocimiento, no un veredicto de sí/no. */
.mp-ciudad .alts li.si .mk{color:var(--mp-purple);font-size:10px}

/* Todas las celdas COLOCADAS a mano en los dos cortes. Es la segunda vez que
   este grid muerde: mezclar una celda con `grid-column` explícito entre vecinas
   automáticas deja que el navegador decida el orden, y decide mal — la primera
   vez mandó el título de la rotura debajo del detalle; aquí alineaba el nombre
   de la ciudad a la derecha en unas filas sí y en otras no. Cuando una fila se
   reacomoda, se colocan TODAS sus celdas. */
@media (max-width:1080px){
  .mp-ciudad{grid-template-columns:minmax(0,1fr) 82px minmax(160px,1fr);row-gap:10px}
  .mp-ciudad .cuerpo {grid-column:1;     grid-row:1}
  .mp-ciudad .vol    {grid-column:2;     grid-row:1}
  .mp-ciudad .mp-pesa{grid-column:3;     grid-row:1}
  .mp-ciudad .toca   {grid-column:1 / -1;grid-row:2}
  .mp-ciudad .detalle{grid-column:1 / -1;grid-row:3}
}
@media (max-width:720px){
  .mp-ciudad{grid-template-columns:minmax(0,1fr) auto}
  .mp-ciudad .cuerpo {grid-column:1;     grid-row:1}
  .mp-ciudad .vol    {grid-column:2;     grid-row:1}
  .mp-ciudad .mp-pesa{grid-column:1 / -1;grid-row:2}
  .mp-ciudad .toca   {grid-column:1 / -1;grid-row:3}
  .mp-ciudad .detalle{grid-column:1 / -1;grid-row:4}
}

/* ---------------------------------------------- la tira de sistemas --------
   Cuatro mosaicos, uno por sistema, que además FILTRAN las listas de abajo.
   Son botones de verdad: cambian el estado de la pantalla, así que se navegan
   con teclado y anuncian su `aria-pressed`. */
.mp-tira{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.mp-sis{
  all:unset;box-sizing:border-box;cursor:pointer;min-width:0;
  display:flex;flex-direction:column;gap:7px;
  padding:13px;border-radius:var(--r-sm);
  background:var(--mp-surface);border:1px solid var(--mp-line);
  border-top:3px solid var(--mp-line);
}
.mp-sis.ok {border-top-color:var(--mp-green)}
.mp-sis.mal{border-top-color:var(--mp-red)}
/* Un dato mensual no puede pintarse con la misma urgencia que uno semanal.
   El borde gris dice "esto no es de esta semana" antes de leer la cadencia. */
.mp-sis.viejo{border-top-color:var(--mp-muted)}
.mp-sis:hover{background:var(--mp-sunk)}
.mp-sis:focus-visible{outline:2px solid var(--mp-blue);outline-offset:2px}
.mp-sis[aria-pressed="true"]{
  background:var(--mp-blue-soft);border-color:var(--mp-blue);border-top-color:var(--mp-blue);
}
.mp-sis .lab{
  display:flex;align-items:center;gap:6px;
  font:700 11px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--mp-muted);
}
.mp-sis .lab i{width:7px;height:7px;border-radius:50%;background:var(--mp-muted);flex:none}
.mp-sis.ok  .lab i{background:var(--mp-green)}
.mp-sis.mal .lab i{background:var(--mp-red)}
.mp-sis .cifra{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:28px;line-height:1;font-variant-numeric:tabular-nums;
}
.mp-sis .pie{font-size:12.5px;line-height:1.45;color:var(--mp-ink-2)}
.mp-sis .pie b{color:var(--mp-ink)}
.mp-sis .extra{font-size:12px;color:var(--mp-muted);font-variant-numeric:tabular-nums}
.mp-sis .extra b{color:var(--mp-ink-2)}
.mp-sis .viz{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.mp-sis .viz svg{display:block}
.mp-sis .viz .spark{position:static}   /* .spark es absoluta en la tarjeta de KPI; aquí fluye */
.mp-sis .viz-pie{font-size:11px;color:var(--mp-muted)}
.mp-sis .cuenta{
  align-self:flex-start;font:700 11px/1 var(--font);
  padding:4px 8px;border-radius:var(--r-pill);
  background:var(--mp-sunk);color:var(--mp-muted);
}
.mp-sis.mal .cuenta{background:var(--mp-red-soft);color:var(--mp-red)}
.mp-sis .cad{
  margin-top:auto;padding-top:7px;border-top:1px solid var(--mp-hair);
  font-size:11px;color:var(--mp-muted);
}
.mp-sis .cad b{color:var(--mp-ink-2)}

/* Proporción de dos tramos. No vale una librería: son seis líneas. */
.mini-barra{
  display:block;height:7px;border-radius:var(--r-pill);
  background:var(--mp-sunk);overflow:hidden;
}
.mini-barra i{display:block;height:100%;border-radius:var(--r-pill)}

/* El chip de quitar el filtro es clickeable — se ve como chip pero se comporta
   como botón. */
#seo-filtro-off{cursor:pointer;background:var(--mp-blue-soft);color:var(--mp-blue);border-color:var(--mp-blue)}
#seo-filtro-off:hover{background:var(--mp-blue);color:#fff}

/* Un panel que se queda sin filas por el filtro lo DICE. Vacío se lee como
   "falta el dato"; esto se lee como un resultado. */
.mp-filtro-vacio{
  margin:0;padding:14px var(--s4);font-size:13px;line-height:1.5;color:var(--mp-ink-2);
  background:var(--mp-sunk);border-top:1px solid var(--mp-hair);
}

@media (max-width:1080px){ .mp-tira{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){  .mp-tira{grid-template-columns:1fr} }

/* Tres cifras con su delta y de qué venían. La comparación contra la corrida
   anterior es lo único que convierte una foto fija en una señal. */
.mp-kpis3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.mp-kpis3 .k{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mp-kpis3 .lab{
  font:700 11px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mp-muted);
}
.mp-kpis3 .val{
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:28px;line-height:1;color:var(--mp-ink);font-variant-numeric:tabular-nums;
}
.mp-kpis3 .sub{font-size:11.5px;color:var(--mp-muted);font-variant-numeric:tabular-nums}

@media (max-width:720px){
  /* Cada celda va COLOCADA a mano. Con solo cambiar las columnas y dejar el
     resto en auto-placement, el `.donde` con su `grid-column` explícito
     desordenaba la fila y el título terminaba DEBAJO del detalle: la fila se
     leía como una pastilla suelta seguida de un panel sin encabezado. En un
     grid, mezclar una celda explícita con vecinas automáticas es pedir que el
     navegador decida el orden — aquí no hay nada que decidir. */
  .mp-rotura{grid-template-columns:8px minmax(0,1fr) auto;row-gap:6px}
  .mp-rotura .dot    {grid-column:1;     grid-row:1}
  .mp-rotura .cuerpo {grid-column:2 / -1;grid-row:1}
  .mp-rotura .donde  {grid-column:2;     grid-row:2;text-align:left}
  .mp-rotura .mv     {grid-column:3;     grid-row:2;justify-self:end}
  .mp-rotura .detalle{grid-column:1 / -1;grid-row:3}
  .mp-kpis3{grid-template-columns:1fr;gap:var(--s3)}
  .mp-veredicto h2{font-size:17px}
}

/* "Nada se rompió" es un RESULTADO, no un hueco. Una tabla vacía se lee como
   "falta el dato"; esto se lee como "todo bien". */
.mp-ok-vacio{
  margin:0;padding:12px var(--s4);border-radius:var(--r-sm);
  background:var(--mp-green-soft);color:var(--mp-green);
  font:600 13.5px/1.45 var(--font);
}

.mp-filtros{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}

@media (max-width:720px){
  /* En teléfono el premio y el botón no caben en la misma línea que el texto. */
  /* En teléfono el grid de 5 columnas se vuelve dos filas: el texto completo
     arriba y la pieza, el premio y el botón repartidos abajo. */
  .mp-tarea{grid-template-columns:26px 1fr auto;row-gap:10px}
  /* OJO: esta línea decía `.mp-fila .cuerpo` y era un error de alcance. Al sacar
     lo compartido a `.mp-fila` con un reemplazo mecánico se arrastró también
     esta, que NO es compartida: es la posición del cuerpo dentro del grid de
     TRES columnas de la tarea. Aplicada a las otras filas les mandaba el título
     a la columna 2 y lo encimaba con el volumen. **Un renombre mecánico también
     ensancha el alcance de un selector — hay que revisar cuáles reglas eran de
     comportamiento (compartidas) y cuáles de layout (propias).** */
  .mp-tarea .cuerpo{grid-column:2 / -1}
  .mp-tarea .pieza{grid-column:2 / 3;grid-row:2;align-items:flex-start}
  /* En escritorio la ruta se recorta porque la columna es fija. En teléfono
     hay ancho de sobra y recortarla solo pierde información: aquí envuelve. */
  .mp-tarea .pieza .ruta{white-space:normal;overflow:visible;line-height:1.4}
  .mp-tarea .premio{grid-column:3 / 4;grid-row:2;align-items:flex-end}
  .mp-tarea .mp-btn{grid-column:2 / -1;grid-row:3;width:100%}
  /* Ésta SÍ es compartida: en un teléfono ninguna fila reparte su detalle en
     columnas, la use quien la use. */
  .mp-fila .detalle{grid-template-columns:1fr}
  /* Aquí vivían tres reglas de `.mp-rotura` con `flex-wrap` y `order`, de cuando
     esa fila era flex. Desde que es grid con celdas colocadas a mano no hacían
     nada — salvo confundir a quien viniera a leer por qué la fila se acomoda
     así. Borradas. */
}

/* Encabezado de grupo dentro de la cola. La cola se agrupa por TIPO de trabajo
   —no por impacto puro— porque el impacto más alto no le gana a la pregunta con
   la que Enrique abre la pantalla. Ver el comentario en construirCola(). */
.mp-grupo-cola{
  padding:14px var(--s4) 10px;border-bottom:1px solid var(--mp-hair);
  background:var(--mp-bg);
}
.mp-grupo-cola h3{
  margin:0 0 3px;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-stretch:var(--stretch-display);font-weight:800;
  font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--mp-ink);
}
.mp-grupo-cola h3 .n{
  font-family:var(--font);font-stretch:100%;font-weight:700;font-size:11px;
  letter-spacing:.04em;padding:3px 7px;border-radius:var(--r-pill);
  background:var(--mp-sunk);color:var(--mp-muted);font-variant-numeric:tabular-nums;
}
.mp-grupo-cola p{margin:0;font-size:12.5px;line-height:1.45;color:var(--mp-muted);max-width:80ch}

/* ==================== EL BALANCE DE LA SEMANA ====================
   El medidor "Improved vs. declined" de SEMrush. Contesta "¿cómo vamos?" antes
   de leer una fila. Hecho a mano: Frappe no trae gauge y no vale 220 KB. */
.mp-balance{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.mp-balance svg{flex:none}
.mp-balance .lados{display:flex;flex-direction:column;gap:3px;min-width:0}
.mp-balance .up{font:800 22px/1 var(--display);font-stretch:var(--stretch-display);
  color:var(--mp-green);font-variant-numeric:tabular-nums}
.mp-balance .dn{font:800 22px/1 var(--display);font-stretch:var(--stretch-display);
  color:var(--mp-red);font-variant-numeric:tabular-nums}
.mp-balance .lab{font:600 10px/1 var(--font);letter-spacing:.07em;
  text-transform:uppercase;color:var(--mp-muted)}

/* El gemelo positivo. Misma forma que la rotura — si se vieran distintos,
   el ojo los leería como cosas distintas en vez de los dos lados de una. */
.mp-rotura.buena .dot{background:var(--mp-green)}
.mp-rotura.buena.grave .dot{background:var(--mp-green)}
.mp-chip.mal {color:var(--mp-red);   background:var(--mp-red-soft);   border-color:#EFC9C5}
.mp-chip.bien{color:var(--mp-green); background:var(--mp-green-soft); border-color:#BFDCCB}

/* ==================== TOP BAR GLOBAL ====================
   Separado del header de la página a propósito: la búsqueda y el estado de la
   cola no cambian al cambiar de módulo. */
.mp-bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s6);border-bottom:1px solid var(--mp-line);
  background:var(--mp-surface);
  position:sticky;top:0;z-index:40;
}
.mp-bar > div:first-of-type{flex:1;min-width:0;max-width:560px}

.mp-buscador{position:relative;display:flex;align-items:center}
.mp-buscador .lupa{
  position:absolute;left:11px;font-size:15px;color:var(--mp-muted);pointer-events:none;
}
.mp-buscador input{
  width:100%;padding:8px 52px 8px 32px;
  border:1px solid var(--mp-line);border-radius:var(--r-sm);
  background:var(--mp-bg);color:var(--mp-ink);
  font:400 13.5px/1.3 var(--font);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.mp-buscador input::placeholder{color:var(--mp-muted)}
.mp-buscador input:focus{
  outline:none;border-color:var(--mp-blue);background:var(--mp-surface);
  box-shadow:0 0 0 3px var(--mp-blue-soft);
}
/* El search de WebKit trae su propia X que no respeta el ADN. */
.mp-buscador input::-webkit-search-cancel-button{display:none}
.mp-buscador kbd{
  position:absolute;right:9px;pointer-events:none;
  font:600 10.5px/1 var(--font);color:var(--mp-muted);
  padding:4px 6px;border-radius:var(--r-xs);
  background:var(--mp-sunk);border:1px solid var(--mp-line);
}
.mp-buscador input:focus ~ kbd{opacity:0}

/* Los resultados FLOTAN sobre el contenido: es de las dos únicas sombras que
   permite §4, junto con el modal y el toast. */
.mp-res{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  max-height:min(60vh,420px);overflow-y:auto;
  background:var(--mp-surface);border:1px solid var(--mp-line);
  border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(17,17,17,.14);
  padding:4px;
}
.mp-res a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--s2);
  padding:8px 10px;border-radius:var(--r-xs);
  color:var(--mp-ink);font-size:13px;
}
.mp-res a:hover{text-decoration:none}
.mp-res a[aria-selected="true"]{background:var(--mp-blue-soft)}
.mp-res a .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mp-res a .s{
  font-size:11.5px;color:var(--mp-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:44%;
}
/* El resaltado va en AZUL-SUAVE, no en amarillo. §2 es tajante: el amarillo
   solo vive sobre superficies oscuras y "si alguna vez se ve amarillo sobre
   blanco, está mal". La primera versión de esta lista lo puso sobre papel —
   legible (12.84:1 con tinta encima) pero contra la ley del ADN, y es
   exactamente el uso que hace que el marcador de navegación deje de significar
   algo. Azul sobre azul-suave da 7.46:1 y es el mismo par que marca lo activo
   en el panel de la izquierda. */
.mp-res mark{background:var(--mp-blue-soft);color:var(--mp-blue);
  border-radius:2px;padding:0 2px;font-weight:700}
/* Sobre la fila ya seleccionada el fondo es el mismo azul-suave, así que ahí el
   resaltado se distingue por el peso y no por el fondo. */
.mp-res a[aria-selected="true"] mark{background:transparent;padding:0}
.mp-res .vacio{margin:0;padding:14px 10px;font-size:13px;color:var(--mp-muted)}

/* El estado de la cola, visible desde cualquier módulo. */
.mp-cola-estado{
  display:flex;align-items:center;gap:7px;margin-left:auto;flex:none;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--mp-blue-soft);color:var(--mp-blue);
  font:600 12.5px/1 var(--font);white-space:nowrap;
}
.mp-cola-estado:hover{text-decoration:none;background:#DDE1F4}
.mp-cola-estado .pt{width:7px;height:7px;border-radius:50%;background:var(--mp-blue);flex:none}
.mp-cola-estado.corriendo .pt{animation:mp-latir 1.4s var(--ease) infinite}
@keyframes mp-latir{50%{opacity:.25}}

@media (max-width:820px){
  .mp-bar{padding:8px var(--s4)}
  .mp-buscador kbd{display:none}
  .mp-buscador input{padding-right:12px}
  /* En teléfono el texto del estado no cabe junto al buscador: queda el punto. */
  .mp-cola-estado .tx{display:none}
  .mp-cola-estado{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .mp-cola-estado.corriendo .pt{animation:none}
}
.mp-tarea .maqueta .nota{
  margin:8px 0 0;padding-top:7px;border-top:1px solid var(--mp-hair);
  font-size:12px;line-height:1.5;color:var(--mp-ink-2);
}

/* ===========================================================================
   GOOGLE BUSINESS — las dos piezas nuevas del 2026-08-05
   =========================================================================== */

/* --- La barra CONTRA EL LÍDER -------------------------------------------
   Tu número y el suyo sobre la MISMA escala. Nació de un defecto: la pantalla
   ponía «SoLV 1.8 % ▲ +2.4 pts» en verde encima de una tabla que decía 31.4 %.
   Comparar contra uno mismo es la forma más fácil de que un tablero mienta sin
   decir una sola cifra falsa. Aquí no hay flecha ni delta: hay un hueco.

   El color sale del JUICIO —¿vas arriba o abajo?— nunca del signo (§5). */
.mp-vs-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.mp-vs .lab{
  display:block;font:700 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mp-muted);margin-bottom:10px;
}
.mp-vs .par{display:flex;flex-direction:column;gap:7px}
.mp-vs .fila{display:grid;grid-template-columns:70px minmax(0,1fr) 62px;align-items:center;gap:9px}
.mp-vs .fila .n{
  font:800 20px/1 var(--font-display);font-stretch:78%;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--mp-ink);
}
.mp-vs .fila .q{font-size:11.5px;color:var(--mp-muted)}
.mp-vs .bar{display:block;height:10px;border-radius:999px;background:var(--mp-sunk);overflow:hidden}
.mp-vs .bar i{display:block;height:100%;border-radius:999px;background:var(--mp-ink-2)}
/* La fila de arriba SIEMPRE eres tú: se colorea por si ganas o pierdes.
   La de abajo es el otro y va en tinta neutra — no es alerta, es referencia. */
.mp-vs.gano   .fila:not(.otro) .bar i{background:var(--mp-green)}
.mp-vs.gano   .fila:not(.otro) .n{color:var(--mp-green)}
.mp-vs.pierdo .fila:not(.otro) .bar i{background:var(--mp-red)}
.mp-vs.pierdo .fila:not(.otro) .n{color:var(--mp-red)}
.mp-vs .fila.otro .n{color:var(--mp-ink-2);font-size:17px}
.mp-vs .fila.otro .bar i{background:var(--mp-line)}

/* --- La PALANCA ----------------------------------------------------------
   Hermana de .mp-tarea, .mp-rotura y .mp-ciudad: mismo acordeón, mismo detalle
   de tres columnas (.mp-fila). Lo suyo es el ORDINAL — el orden importa y hay
   que poder decir "la tres" en voz alta.

   Tres celdas y ninguna con `grid-column` explícito: el auto-placement solo se
   vuelve impredecible cuando se mezcla con celdas colocadas a mano. En los
   cortes de abajo se colocan TODAS, que es la regla que ya mordió dos veces. */
.mp-palanca{
  display:grid;grid-template-columns:minmax(0,1fr) 132px 150px;
  align-items:center;gap:var(--s3);
  padding:14px var(--s4);border-bottom:1px solid var(--mp-hair);
  border-left:3px solid transparent;
}
.mp-palanca:last-child{border-bottom:0}
.mp-palanca:hover{background:var(--mp-sunk)}
.mp-palanca.mal  {border-left-color:var(--mp-red)}
.mp-palanca.medio{border-left-color:var(--mp-line)}
.mp-palanca .cuerpo h3{
  margin:0 0 2px;font:700 14px/1.3 var(--font);color:var(--mp-ink);
  display:flex;align-items:center;gap:8px;
}
.mp-palanca .cuerpo h3 .ord{
  flex:none;width:20px;height:20px;border-radius:999px;
  background:var(--mp-dark);color:var(--mp-on-dark);
  font:700 11px/20px var(--font);text-align:center;font-variant-numeric:tabular-nums;
}
.mp-palanca .razon{margin:0;font-size:12px;line-height:1.4;color:var(--mp-muted)}
.mp-palanca .cifra{text-align:right;font-variant-numeric:tabular-nums}
.mp-palanca .cifra b{
  display:block;font:800 22px/1.05 var(--font-display);font-stretch:78%;color:var(--mp-ink);
}
.mp-palanca .cifra small{
  display:block;font:400 10px/1.2 var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mp-muted);margin-top:2px;
}
.mp-palanca .marca{justify-self:start}

/* Una fila de tabla cuyo dato NO existe. Apagada, no roja: un hueco no es un
   cero, y pintarlo de alerta diría que estás mal donde solo no has medido. */
.mp-table tr.apagada td{color:var(--mp-muted)}
.mp-table tr.apagada .kw{font-weight:600}

@media (max-width:1080px){
  .mp-vs-fila{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .mp-palanca{grid-template-columns:minmax(0,1fr) 118px;row-gap:10px}
  .mp-palanca .cuerpo {grid-column:1;      grid-row:1}
  .mp-palanca .cifra  {grid-column:2;      grid-row:1}
  .mp-palanca .marca  {grid-column:1 / -1; grid-row:2}
  .mp-palanca .detalle{grid-column:1 / -1; grid-row:3}
}

/* --- EL MAPA REAL --------------------------------------------------------
   Calles de OpenStreetMap cosidas en tiempo de construcción y servidas desde
   el repo: en runtime esto es un <img> local, así que el §9 sigue en pie y el
   tablero abre igual en una obra sin señal.

   La imagen manda el alto (aspect-ratio del propio archivo) y los pines van en
   PORCENTAJE sobre ella. Así el mapa escala con el panel y no hay un solo
   número de pixeles escrito a mano que se vuelva mentira al cambiar un padding. */
.mp-mapa{position:relative;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--mp-line);background:#EDEFF2;line-height:0}
.mp-mapa > img{display:block;width:100%;height:auto}
/* SIN FILTRO. Llevaba `saturate(.42) brightness(1.06)` con el argumento de que
   "el mapa es contexto y los pines son el dato" — y sobre una cartografía que ya
   es pastel el resultado fue un mapa lavado. Enrique, 2026-08-05: "se ve súper
   pálido, no se ve nada, no entiendo nada".
   La lección: bajarle tinta al fondo solo funciona si el fondo tenía tinta de
   sobra. Voyager ya viene atenuado; atenuarlo otra vez lo borra. El contraste
   entre pin y mapa se gana con el PIN —borde blanco y sombra—, no apagando el
   mapa hasta que deje de informar. */
.mp-mapa .capa{position:absolute;inset:0;width:100%;height:100%}
.mp-mapa .capa .radio{fill:none;stroke:#111;stroke-width:1.6;
  stroke-dasharray:7 6;opacity:.5}
.mp-mapa .pines{position:absolute;inset:0}
.mp-mapa .p{
  position:absolute;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  font:700 10px/1 var(--font);font-variant-numeric:tabular-nums;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
/* Misma rampa semántica que la rejilla: verde = top 3 (el map pack) y de ahí
   se apaga. NADA de ámbar — el ámbar es de dinero (§7), y aquí no hay ninguno. */
.mp-mapa .p.top3 {background:var(--mp-green);      color:#fff;z-index:3;width:26px;height:26px;font-size:11px}
.mp-mapa .p.top10{background:var(--mp-green-soft); color:var(--mp-green)}
.mp-mapa .p.top20{background:var(--mp-blue-soft);  color:var(--mp-blue)}
.mp-mapa .p.out  {background:rgba(247,246,242,.72);color:transparent;
  width:12px;height:12px;border-width:1px;box-shadow:none}
/* Tu negocio: el amarillo sobre superficie oscura, que es lo único que §2 le
   permite — el punto es negro y el anillo amarillo va encima de él. */
.mp-mapa .yo{position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:18px;height:18px;border-radius:999px;background:var(--mp-dark);
  border:3px solid var(--mp-yellow);box-shadow:0 2px 6px rgba(0,0,0,.45)}
/* La atribución NO es un crédito de cortesía: es obligación de la licencia
   ODbL de OpenStreetMap. Si el mapa se ve, esto se ve. */
.mp-mapa .credito{
  position:absolute;right:0;bottom:0;padding:3px 7px;
  background:rgba(247,246,242,.86);border-top-left-radius:4px;
  font:400 10px/1.3 var(--font);color:var(--mp-ink-2);
}
/* En el teléfono el mapa mide ~309 px y ahí no caben 169 números legibles.
   Se quitan las cifras y se deja el COLOR: a ese tamaño la pregunta que el
   mapa contesta ya no es 'qué posición tengo en este punto' sino 'dónde está
   el verde y dónde no'. Un número de 9 px que no se puede leer no es
   información — es ruido que parece información. */
@media (max-width:720px){
  .mp-mapa .p{width:13px;height:13px;font-size:0;border-width:1px}
  .mp-mapa .p.top3{width:16px;height:16px}
  .mp-mapa .p.out {width:8px;height:8px}
}

/* ===========================================================================
   MAP TRACK — la rampa de Semrush (autorizada por Enrique 2026-08-05)
   ---------------------------------------------------------------------------
   Enrique leyó la escala de Semrush completa y sin ayuda en su Loom (07:52):
   verde 1–3, amarillo 4–10, rojo 11–20, gris 20+. Es la convención de TODA la
   categoría —Semrush, Local Falcon, BrightLocal— y ya la tiene aprendida.
   Pelear contra eso sería pedirle que aprenda un idioma nuevo para leer su
   propio mapa.

   LA EXCEPCIÓN DEL ÁMBAR, ESCRITA. El §7 reserva el ámbar para "esto cuesta
   dinero". Esta rampa lleva amarillo y NO lo viola, por tres razones que hay
   que conservar juntas:
     1. Es una rampa de DATOS ordenada (cuatro cubetas de una misma escala), no
        un color de estado suelto.
     2. Su naranja `#D97706` NO es el token `--mp-amber` (#6E6A00). Son
        distinguibles: el del dinero es oliva oscuro, éste es naranja.
     3. Cada pin lleva SU NÚMERO adentro. El color nunca está solo, que es
        justo lo que el §7 exige del ámbar ("nunca va pelón").

   Contrastes verificados del número blanco sobre cada pin — el piso para texto
   grande en negrita es 3:1:
     verde  #0A8F4D → 4.0:1     naranja #D97706 → 3.4:1
     rojo   #D93025 → 4.5:1     gris    #E3E5E8 con tinta #5F6368 → 5.5:1 */
.mp-mapa .p.top3 {background:#0A8F4D;color:#fff;border-color:rgba(255,255,255,.92)}
.mp-mapa .p.top10{background:#D97706;color:#fff;border-color:rgba(255,255,255,.92)}
.mp-mapa .p.top20{background:#D93025;color:#fff;border-color:rgba(255,255,255,.92)}
/* "20+" en vez de un pin vacío: Semrush lo escribe y tiene razón — un hueco
   mudo se lee como dato faltante, y esto SÍ es un dato ("no apareces"). */
.mp-mapa .p.out  {background:#E3E5E8;color:#5F6368;width:24px;height:24px;
  font-size:9px;border-width:1.5px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.mp-geo-key i.top3 {background:#0A8F4D;border:0}
.mp-geo-key i.top10{background:#D97706;border:0}
.mp-geo-key i.top20{background:#D93025;border:0}
.mp-geo-key i.out  {background:#E3E5E8;border:1px solid #CDD1D6}

/* La tira de cubetas. Semrush la pone arriba del mapa y es lo primero que
   Enrique lee: "si apareces entre 1 y 3 sales en verde…". Los cuatro
   porcentajes suman 100 % — son el reparto completo de la rejilla, no cuatro
   métricas sueltas. */
.mp-cubetas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--mp-line);border:1px solid var(--mp-line);
  border-radius:var(--r-sm);overflow:hidden}
.mp-cubetas .c{background:var(--mp-surface);padding:11px 14px}
.mp-cubetas .lab{display:flex;align-items:center;gap:6px;
  font:700 11px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mp-muted);margin-bottom:6px;white-space:nowrap}
.mp-cubetas .lab i{width:9px;height:9px;border-radius:999px;flex:none}
.mp-cubetas .val{font:800 26px/1 var(--font-display);font-stretch:78%;
  color:var(--mp-ink);font-variant-numeric:tabular-nums}
.mp-cubetas .val small{font-size:15px;margin-left:1px}
.mp-cubetas .sub{display:block;margin-top:4px;font-size:11.5px;color:var(--mp-muted)}
@media (max-width:1080px){.mp-cubetas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.mp-cubetas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- MAP TRACK: barra + riel, calcados del Map Rank Tracker ---------------
   La barra pone en una línea qué keyword, qué escaneo y el botón de correr uno
   nuevo. El riel es la lista con la que Enrique investiga a la competencia
   ("puedo investigar la competencia bastante bien con esto y cómo están
   rankeando, por qué"). Ordenado por TERRENO, no por reseñas: lo que se está
   leyendo es el mapa. */
.mp-mt-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.mp-mt-barra .der{margin-left:auto}

.mp-mt{display:grid;grid-template-columns:262px minmax(0,1fr);gap:var(--s4);align-items:start}
.mp-mt-riel{
  background:var(--mp-surface);border:1px solid var(--mp-line);
  border-radius:var(--r-sm);overflow:hidden;
}
.mp-mt-riel > header{
  background:var(--mp-dark);color:var(--mp-on-dark-2);
  padding:9px var(--s4);font:700 11px/1.2 var(--font);
  letter-spacing:.09em;text-transform:uppercase;
}
.mp-mt-riel ul{list-style:none;margin:0;padding:0}
.mp-mt-riel li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
  padding:10px var(--s4);border-bottom:1px solid var(--mp-hair);
  border-left:3px solid transparent;
}
.mp-mt-riel li:last-child{border-bottom:0}
.mp-mt-riel li:hover{background:var(--mp-sunk)}
/* Tu fila se marca con el azul de acción y una barra: en una lista de diez
   nombres parecidos, encontrarte a ti mismo no debería costar trabajo. */
.mp-mt-riel li.yo{background:var(--mp-blue-soft);border-left-color:var(--mp-blue)}
.mp-mt-riel .n{font:600 13px/1.3 var(--font);color:var(--mp-ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-mt-riel li.yo .n{font-weight:700}
.mp-mt-riel .m{grid-column:1;font-size:11.5px;color:var(--mp-muted)}
.mp-mt-riel .t{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right}
.mp-mt-riel .t b{display:block;font:800 15px/1 var(--font-display);font-stretch:78%;
  color:var(--mp-ink);font-variant-numeric:tabular-nums}
.mp-mt-riel .t small{display:block;margin-top:2px;font:400 9.5px/1 var(--font);
  letter-spacing:.05em;text-transform:uppercase;color:var(--mp-muted)}
.mp-mt-riel > footer{
  padding:10px var(--s4);border-top:1px solid var(--mp-hair);
  background:var(--mp-sunk);font-size:11.5px;line-height:1.5;color:var(--mp-ink-2);
}
.mp-mt-riel > footer b{color:var(--mp-ink)}

/* Bajo 1080 el riel pasa ARRIBA del mapa, no al lado: a 240 px de ancho la
   lista se vuelve ilegible antes que el mapa. */
@media (max-width:1080px){
  .mp-mt{grid-template-columns:minmax(0,1fr)}
  .mp-mt-riel{order:-1}
}

/* El mapa es CUADRADO (la rejilla cubre un área cuadrada), así que al darle una
   columna ancha crece en las dos direcciones y se come una pantalla entera de
   alto. En Semrush el mapa está contenido y cabe con su riel al lado — se ve
   todo junto, que es el punto.
   Se acota el ancho, no el alto: recortar el alto obligaría a `object-fit` y los
   pines van en PORCENTAJE sobre la imagen; recortarla los movería de lugar. */
.mp-mapa{max-width:660px;margin-inline:auto}

/* --- GOOGLE MAPS (excepción del §9, autorizada 2026-08-05) ----------------
   El contenedor de Google va ENCIMA del mapa cocido, no en su lugar. Si carga,
   lo tapa; si no carga, no hay nada que tapar y el del repo se queda. El
   respaldo no es un plan B que haya que activar — es lo que ya está pintado. */
.mp-mapa .gmap{position:absolute;inset:0;z-index:2}
.mp-mapa .gmap:empty{display:none}
/* Con Google montado el mapa deja de ser cuadrado: es interactivo, así que se
   le da alto de ventana y el usuario navega. El cuadrado existía porque una
   imagen fija tenía que enseñar los 169 puntos de golpe. */
.mp-mapa:has(.gmap[data-google]){max-width:none;aspect-ratio:16/10}
.mp-mapa:has(.gmap[data-google]) > img{visibility:hidden}

/* Los pines sobre Google: MISMAS clases que el mapa cocido, para que la rampa
   de color viva en un solo lugar y los dos mapas no puedan divergir. */
.mp-gpines{position:absolute;top:0;left:0}
.mp-gpines .p{
  position:absolute;width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  font:700 10px/1 var(--font);font-variant-numeric:tabular-nums;
  border:1.5px solid rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.28);
  cursor:default;
}
.mp-gpines .p.top3 {background:#0A8F4D;color:#fff;width:26px;height:26px;font-size:11px;z-index:3}
.mp-gpines .p.top10{background:#D97706;color:#fff}
.mp-gpines .p.top20{background:#D93025;color:#fff}
.mp-gpines .p.out  {background:#E3E5E8;color:#5F6368;width:24px;height:24px;font-size:9px}
.mp-gpines .yo{position:absolute;width:18px;height:18px;border-radius:999px;z-index:4;
  background:var(--mp-dark);border:3px solid var(--mp-yellow);
  box-shadow:0 2px 6px rgba(0,0,0,.45)}

/* ===========================================================================
   MAP TRACK INTERACTIVO — el detalle del escaneo, contestando en el lugar
   ---------------------------------------------------------------------------
   Todo lo de este bloque solo actúa cuando el detalle del escaneo existe
   (`escaneo.detalle` en el fixture). Sin él, los pines son informativos y
   nada de esto se pinta — el CSS puede quedarse porque no hay a qué amarrarse. */

/* Un pin que abre algo se anuncia como clickeable. El "20+" también: "aquí no
   sales" es justo el punto donde más importa saber quién sí. */
.mp-mapa .p[data-f], .mp-gpines .p[data-f], .mp-geo .pin[data-f]{cursor:pointer}

/* EL POPOVER DEL PIN — la lista completa de un punto (spec #2 del Loom).
   Vive DENTRO de .mp-mapa (que es overflow:hidden), así que nunca se sale del
   mapa; y .mp-mapa trae line-height:0, así que aquí se restaura. */
.mp-pin-pop{
  position:absolute;z-index:6;width:264px;line-height:1.4;
  background:var(--mp-surface);border:1px solid var(--mp-line);
  border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(0,0,0,.22);
  text-align:left;
}
.mp-pin-pop header{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--mp-hair);background:var(--mp-sunk);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.mp-pin-pop header b{font:700 12px/1.2 var(--font);color:var(--mp-ink)}
.mp-pin-pop header span{font-size:11px;color:var(--mp-muted);white-space:nowrap}
.mp-pin-pop header .x{
  margin-left:auto;border:0;background:none;cursor:pointer;
  font:400 16px/1 var(--font);color:var(--mp-muted);padding:2px 4px;
}
.mp-pin-pop header .x:hover{color:var(--mp-ink)}
.mp-pin-pop ol{list-style:none;margin:0;padding:4px 0;max-height:264px;overflow:auto}
.mp-pin-pop li{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;
  align-items:center;padding:4px 12px;font-size:12px;
}
.mp-pin-pop li.yo{background:var(--mp-blue-soft);font-weight:700}
.mp-pin-pop li b{
  width:22px;height:18px;border-radius:4px;display:grid;place-items:center;
  font:700 10px/1 var(--font);font-variant-numeric:tabular-nums;color:#fff;
}
.mp-pin-pop li b.top3 {background:#0A8F4D}
.mp-pin-pop li b.top10{background:#D97706}
.mp-pin-pop li b.top20{background:#D93025}
.mp-pin-pop li b.out  {background:#E3E5E8;color:#5F6368}
.mp-pin-pop li .n{color:var(--mp-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-pin-pop li .m{font-size:10.5px;color:var(--mp-muted);white-space:nowrap}
.mp-pin-pop .mas{margin:0;padding:7px 12px;font-size:11px;color:var(--mp-muted)}
.mp-pin-pop footer{
  padding:7px 12px;border-top:1px solid var(--mp-hair);
  font-size:10.5px;color:var(--mp-muted);
}

/* DÓNDE ESTÁ el competidor en hover (spec #5): un rombo oscuro con anillo
   blanco — distinto del pin nuestro (anillo amarillo) y de la rampa, porque
   no es una posición: es una dirección. */
.mp-mapa .comp, .mp-gpines .comp{
  position:absolute;z-index:5;width:16px;height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--mp-dark);border:2.5px solid #fff;border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;
}
/* La rejilla abstracta (el respaldo sin mapa base) también recibe el popover,
   así que necesita ser su marco de posición. */
.mp-geo{position:relative}

/* EL BANNER de "estás viendo el mapa de otro" — un mapa ajeno sin letrero se
   lee como propio, así que el letrero no es decoración. */
.mp-mt-viendo{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 auto var(--s3);max-width:660px;
  padding:8px 12px;border-radius:var(--r-sm);
  background:var(--mp-dark);color:var(--mp-on-dark-2);
  font-size:12.5px;line-height:1.4;
}
.mp-mt-viendo b{color:#fff}
.mp-mt-viendo .volver{
  margin-left:auto;border:1px solid rgba(255,255,255,.35);border-radius:6px;
  background:none;color:#fff;font:600 11.5px/1 var(--font);
  padding:6px 10px;cursor:pointer;
}
.mp-mt-viendo .volver:hover{background:rgba(255,255,255,.12)}

/* El renglón del riel y la fila de la tabla que se pueden picar */
.mp-mt-riel li[data-pid], tr[data-pid]{cursor:pointer}
.mp-mt-riel li.sel{background:var(--mp-sunk);border-left-color:var(--mp-dark)}
.mp-mt-riel li.sel .n::after{content:" · viendo su mapa";font-weight:400;
  font-size:10.5px;color:var(--mp-muted)}
tr.sel{outline:2px solid var(--mp-dark);outline-offset:-2px}

/* LA TARJETA del competidor (spec #4): rating, reseñas, dirección y el link a
   su ficha. Vive en .mp-mt (position:relative) para poder flotar junto al riel. */
.mp-mt{position:relative}
.mp-mt-card{
  position:absolute;z-index:7;width:264px;
  background:var(--mp-surface);border:1px solid var(--mp-line);
  border-radius:var(--r-sm);box-shadow:0 12px 32px rgba(0,0,0,.22);
  padding:11px 13px;font-size:12px;line-height:1.45;
}
.mp-mt-card header{font:700 13px/1.3 var(--font);color:var(--mp-ink);margin-bottom:3px}
.mp-mt-card .m{margin:0;color:var(--mp-ink-2)}
.mp-mt-card .dir{margin:3px 0 0;color:var(--mp-muted);font-size:11.5px}
.mp-mt-card .mets{margin:7px 0 0;padding-top:7px;border-top:1px solid var(--mp-hair);
  color:var(--mp-ink-2)}
.mp-mt-card .mets b{color:var(--mp-ink);font-variant-numeric:tabular-nums}
.mp-mt-card a{display:inline-block;margin-top:7px;color:var(--mp-blue);
  font-weight:600;font-size:11.5px;text-decoration:none}
.mp-mt-card a:hover{text-decoration:underline}

/* EL MINI-HEATMAP — la miniatura que Enrique pidió para "ver cómo cambia de
   color SIN abrirlo". Aquí compara negocios; en F1 comparará fechas. 169
   celdas de 4 px con la misma rampa: legible como mancha, no como cifras. */
.mp-minigeo{
  display:grid;grid-template-columns:repeat(13,5px);gap:1px;
  width:max-content;padding:3px;border:1px solid var(--mp-hair);
  border-radius:4px;background:var(--mp-surface);
}
.mp-minigeo i{width:5px;height:5px;border-radius:1px;background:#EDEFF2}
.mp-minigeo i.top3 {background:#0A8F4D}
.mp-minigeo i.top10{background:#D97706}
.mp-minigeo i.top20{background:#D93025}
.mp-minigeo i.out  {background:#E3E5E8}

/* LA TIRA DE ESCANEOS — miniaturas del histórico (bóveda F1). La versión
   grande de las mini del riel: se lee la mancha de color entre fechas. */
.mp-tira{display:flex;gap:var(--s4);flex-wrap:wrap}
.mp-tira figure{margin:0;display:flex;flex-direction:column;gap:6px}
.mp-tira .mp-minigeo{grid-template-columns:repeat(13,7px)}
.mp-tira .mp-minigeo i{width:7px;height:7px}
.mp-tira figure.actual .mp-minigeo{outline:2px solid var(--mp-blue);outline-offset:1px}
.mp-tira figcaption b{display:block;font:700 12px/1.3 var(--font);color:var(--mp-ink)}
.mp-tira figcaption span{font-size:11px;color:var(--mp-muted)}