/* Extensión de Chrome (extension.html) y su guía (extension-guide.html).
   Hoja chica sobre /site/site.css: no redefine ningún token. */

/* ---- Superficies capturadas -------------------------------------- */
.ext-surface .mono { color: var(--color-smoke); display: block; margin-bottom: var(--spacing-16); }
.ext-surface h3 { font-size: var(--text-subheading); margin: 0 0 var(--spacing-16); }
.ext-surface ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ext-surface li {
  font-size: var(--text-body-sm);
  line-height: 1.35;
  color: var(--color-slate);
  padding-left: 18px;
  position: relative;
}
.ext-surface li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 1px;
  background: var(--color-smoke);
}

/* ---- Panel de payoff (mock del dashboard) ------------------------ */
.ext-panel { display: grid; gap: var(--spacing-40); }
@media (min-width: 860px) { .ext-panel { grid-template-columns: 1fr 1fr; } }

.ext-block h4 {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-smoke);
  margin: 0 0 var(--spacing-16);
}

/* Barras de Share of Voice: pista hairline, relleno carbon. Sin color
   saturado, que en este sistema es capa de datos y acá es jerarquía. */
.ext-sov { display: grid; gap: 12px; }
.ext-sov-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.ext-sov-row .name { font-size: var(--text-body-sm); color: var(--color-carbon-black); }
.ext-sov-row .pc { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-slate); text-align: right; }
.ext-bar { display: block; height: 8px; background: var(--color-mist-gray); border: 1px solid var(--color-ash); }
.ext-bar i { display: block; height: 100%; background: var(--color-carbon-black); }

/* ---- Listas del panel -------------------------------------------- */
.ext-rows { list-style: none; margin: 0; padding: 0; }
.ext-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-ash);
  font-size: var(--text-body-sm);
  color: var(--color-carbon-black);
}
.ext-rows li:last-child { border-bottom: 0; }
.ext-rows .meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-slate); white-space: nowrap; }
.ext-rows .meta-off { color: var(--color-smoke); }
.ext-rows .you { font-weight: 500; }

/* ---- Guía paso a paso (extension-guide.html) --------------------- */
.guide-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-ash);
  border-radius: 14px;
  margin-top: var(--spacing-24);
  background: var(--color-paper-white);
}