/* Goodman Suite Live · v7 · estilos base (S1) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* `clip` (no `hidden`) clipa el overflow horizontal SIN establecer scroll
     context · los .panel hijos sí pueden hacer scroll-x touch propio.
     Soporte: Chrome 90+, Safari 16+, Firefox 81+, iOS Safari 16+. */
  overflow-x: clip;
  max-width: 100vw;
}
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: #0A0A12;
  color: #F5F5F0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
}

:root {
  --bg: #0A0A12;
  --bg-2: #14141F;
  --bg-3: #1C1C2A;
  --bg-4: #25253A;
  --yellow: #F5B800;
  --mostaza: #F5B800;          /* alias semántico para usar en gradients */
  --purple: #6D5BD0;
  --morado: #8B5CF6;            /* Polish IA · acento morado para capa IA discreta */
  --beige: #D9CFA9;
  --text: #F5F5F0;
  --text-2: #A0A09B;
  --text-3: #6B6B70;
  --line: #2A2A3A;
  --green: #4ADE80;
  --red: #F87171;
  --orange: #FB923C;
  --pink: #EC4899;
  --cyan: #06B6D4;
}

.mono { font-family: 'JetBrains Mono', monospace; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
  display: inline-block;
}

/* ========== TOPBAR ========== */
.topbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__left { display: flex; align-items: center; gap: 24px; }
.topbar__brand { display: flex; align-items: center; gap: 10px; }
.topbar__logo {
  width: 28px; height: 28px;
  background: var(--yellow);
  color: black;
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.topbar__title {
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.topbar__nav { display: flex; gap: 4px; }
.topbar__navlink {
  font-size: 13px;
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.topbar__navlink--active {
  color: var(--yellow);
  background: rgba(245,184,0,0.1);
}
.topbar__navlink:hover { color: var(--text); }
.topbar__right { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.topbar__site {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-3);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__site .pulse-dot { background: var(--green); }
.topbar__realtime {
  background: rgba(245, 184, 0, 0.12);
  color: var(--yellow);
  padding: 6px 14px;
  border: 1px solid rgba(245, 184, 0, 0.3);
  border-radius: 20px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.1em;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__realtime .pulse-dot { background: var(--green); }

.main {
  padding: 14px 24px 40px;       /* S16 · top 14px (antes 20px) */
  max-width: 1500px;
  margin: 0 auto;
}

/* ========== S15/S16 · HERO MENU COMPACTO (barra horizontal 56px alto) ========== */
.hero-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;           /* S16 · antes 18px */
}
/* S20 · breakpoints viejos del .hero-menu eliminados; el bloque @media 768px al final del archivo lo gobierna */

.hero-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;             /* S16 · antes 10px */
  min-height: 56px;              /* S16 · cap altura */
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
  color: inherit;
}
.hero-card:hover {
  transform: translateY(-1px);
  /* Polish IA · hover · borde morado sutil reemplaza el amarillo */
  border-color: rgba(139, 92, 246, 0.3);
}
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Polish IA · 2px gradient mostaza→morado · capa IA discreta en hero strip */
  height: 2px;
  background: linear-gradient(90deg, var(--mostaza) 0%, var(--morado) 100%);
  opacity: 0.6;
}
.hero-card--purple::before {
  /* mantiene gradient mismo, opacity un poco mayor para variante INTELIGENCIA/HISTÓRICO */
  opacity: 0.75;
}

.hero-card__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--yellow);
  letter-spacing: 0.2em;
  flex-shrink: 0;
}
.hero-card--purple .hero-card__num { color: #9D8FE3; }

.hero-card__center {
  flex: 1;
  min-width: 0;
}
.hero-card__title {
  font-family: 'Anton', sans-serif;
  font-size: 10px;               /* S16 · antes 11px */
  letter-spacing: 0.06em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-card__metric-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.hero-card__metric {
  font-family: 'Anton', sans-serif;
  font-size: 20px;               /* S16 · antes 22px */
  line-height: 1;
  color: var(--text);
}
.hero-card__delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
}
.hero-card__delta--down { color: var(--red); }
.hero-card__arrow {
  color: var(--text-3);
  font-size: 13px;
  transition: transform 0.15s, color 0.15s;
  flex-shrink: 0;
}
.hero-card:hover .hero-card__arrow {
  transform: translateX(3px);
  color: var(--yellow);
}

/* ========== SECTION HEAD ========== */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-head:first-of-type { margin-top: 0; }
.section-head__left { display: flex; align-items: baseline; gap: 12px; }
.section-head__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--yellow);
  letter-spacing: 0.2em;
}
.section-head__title {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
}

/* ========== LAYOUT 3 COLUMNS ========== */
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 16px;
  /* FIX5 · sidebars y centro alineados al top · evita stretch que descuadra layout */
  align-items: start;
}
@media (max-width: 1100px) { .dashboard { grid-template-columns: 1fr; } }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
}
.panel__title {
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 12px;
}

.bar-row { margin-bottom: 10px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-row__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.bar-row__label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.bar-row__dot { width: 8px; height: 8px; border-radius: 50%; }
.bar-row__num { font-family: 'Anton', sans-serif; font-size: 13px; color: var(--yellow); letter-spacing: 0.04em; }
.bar-row__num.muted { color: var(--text-3); }
.bar-row__track { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.bar-row__fill { height: 100%; border-radius: 2px;
  /* S12 · transición suave al cambiar de pct */
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(42, 42, 58, 0.4);
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { color: var(--yellow); }
.list-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
}
.list-row__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-row__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.list-row__num { font-family: 'Anton', sans-serif; font-size: 13px; color: var(--yellow); letter-spacing: 0.04em; flex-shrink: 0; padding-left: 12px; }
/* FIX1 · CARPETAS TOP · ellipsis al inicio del path (mantiene cola visible) + tooltip con path completo */
.panel--paths .list-row__text {
  direction: rtl;
  text-align: left;
}

/* ========== S15/S16 · CHART hero full-width SIN caja (Marfeel-style) ========== */
.chart-section {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 -24px 18px;          /* desbordar padding del .main para llegar a edge */
  padding: 0 24px;               /* recuperar padding interno solo lateral */
  position: relative;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;           /* S16 · antes 14px */
  padding: 0;
}
.chart-title {
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.chart-title strong { color: var(--text); font-weight: normal; }
.chart-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.range-bar {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.range-bar button {
  background: none;
  border: none;
  color: var(--text-3);
  padding: 6px 12px;
  font-size: 11px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.range-bar button.active { background: var(--yellow); color: black; }
.chart-svg-wrap {
  position: relative;
  margin: 0 -24px;               /* S16 · SVG edge-to-edge */
  padding: 0;
}
.chart-svg {
  width: 100%;
  height: 200px;                 /* S16 · antes 240px, más comprimido */
  display: block;
  margin: 0;
}
.chart-svg-wrap::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;                  /* coincide con padding x-axis */
  height: 1px;
  background: var(--line);
  opacity: 0.4;
  pointer-events: none;
}
.chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding: 6px 24px 0;           /* S16 · respeta inset del .main */
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.08em;
}

/* ========== KPIs ========== */
/* S26.5.4.2 · 7 KPIs (PV/SESIÓN añadido) · grid 7 cols en desktop, 4+3 en mobile */
.kpis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 1500px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
}
.kpi:hover { border-color: var(--bg-4); }
.kpi.active {
  border-color: var(--yellow);
  background: linear-gradient(135deg, rgba(245, 184, 0, 0.08) 0%, transparent 100%);
}
.kpi.active::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  color: var(--yellow);
  font-size: 13px;
}
.kpi__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.15em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.kpi__value {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.kpi__spark { height: 14px; width: 100%; opacity: 0.7; }
.kpi__meta { font-size: 10px; color: var(--text-3); font-weight: 500; }

/* ========== URLS LIVE - DENSE LIST CON THUMBNAILS ========== */
.urls-section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 0 0 0;
  overflow: hidden;
}
.urls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--line);
}
.urls-title {
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.urls-title__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--yellow);
  background: rgba(245, 184, 0, 0.12);
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.1em;
}
.urls-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.urls-sort__label { color: var(--text-3); }
.urls-sort a { color: var(--text-3); cursor: pointer; text-decoration: none; }
.urls-sort a.active { color: var(--yellow); }

.urls-table {
  display: grid;
  grid-template-columns: 24px 36px 1fr 90px 60px 60px 70px 65px 80px 56px 60px;   /* S19 + C.6 + Sprint URL · +2 cols PV día / Users día */
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  padding: 0 20px 8px;
  text-transform: uppercase;
  gap: 8px;
}
.urls-table > div { padding: 4px 4px; }
.urls-table > div.right { text-align: right; }

.url-row {
  display: grid;
  grid-template-columns: 24px 36px 1fr 90px 60px 60px 70px 65px 80px 56px 60px;   /* S19 + C.6 + Sprint URL · +2 cols PV día / Users día */
  align-items: center;
  padding: 8px 20px;
  border-top: 1px solid rgba(42, 42, 58, 0.3);
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}
.url-row:hover { background: rgba(139, 92, 246, 0.04); border-top-color: rgba(139, 92, 246, 0.25); }   /* Polish IA · hover morado sutil */
.url-row__rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.url-row__thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.url-row__thumb--bg1 { background: linear-gradient(135deg, #2A2A3A, #1C1C2A); }
.url-row__thumb--bg2 { background: linear-gradient(135deg, #3A2A2A, #2A1C1C); }
.url-row__thumb--bg3 { background: linear-gradient(135deg, #2A3A3A, #1C2A2A); }
.url-row__thumb--bg4 { background: linear-gradient(135deg, #3A2A3A, #2A1C2A); }
.url-row__thumb--bg5 { background: linear-gradient(135deg, #3A3A2A, #2A2A1C); }
.url-row__title {
  min-width: 0;
  padding-right: 10px;
}
.url-row__title-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
.url-row__title-line strong {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  /* S12 · truncado a 2 líneas para títulos largos reales (160-180 chars) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.url-row__source {
  /* S21 · color/background/border los aplica style inline según medium */
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 8px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* S22 · tooltip global URL hover · breakdown por medium + tendencia 30min */
.url-tooltip {
  position: fixed;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 11px;
  min-width: 220px;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.url-tooltip__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.url-tooltip__rows { display: flex; flex-direction: column; gap: 6px; }
.url-tooltip__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.url-tooltip__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  text-transform: capitalize;
}
.url-tooltip__dot { width: 8px; height: 8px; border-radius: 2px; }
.url-tooltip__value { font-family: 'Anton', sans-serif; font-size: 13px; color: var(--text); }
.url-tooltip__total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.url-tooltip__total-label { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.06em; }
.url-tooltip__total-value { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--yellow); }
.url-tooltip__trend { font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-left: 8px; }
.url-tooltip__trend--up   { color: var(--green); }
.url-tooltip__trend--down { color: var(--red); }
.url-tooltip__trend--flat { color: var(--text-3); }

/* S21 · mini barra apilada de breakdown por medium (bajo el título) */
.url-row__breakdown {
  margin: 6px 0 4px;
}
.url-row__breakdown-bar {
  display: flex;
  height: 3px;
  background: var(--bg-4);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.url-row__breakdown-seg {
  height: 100%;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.url-row__breakdown-seg:first-child { border-radius: 2px 0 0 2px; }
.url-row__breakdown-seg:last-child  { border-radius: 0 2px 2px 0; }
.url-row__breakdown-legend {
  display: flex;
  gap: 10px;          /* S22 · antes 8px */
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;    /* S22 · antes 8px */
  color: var(--text-3);
  letter-spacing: 0.06em;
}
.url-row__breakdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.url-row__breakdown-dot {
  width: 7px;         /* S22 · antes 6px */
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.url-row__author {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sprint URL · 2 columnas día (PV día / Users día) en desktop · entre AUTOR y PUBLICADO */
.url-row__day {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  text-align: right; color: var(--text-2); font-weight: 600;
}
.url-row__day--users { color: var(--text-3); }
.urls-col-day { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3); }

/* Sprint URL · línea mobile bajo título con badges "X PV · Y users día" · hidden en desktop */
.url-row__day-stats {
  display: none;
  font-size: 10px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* Sprint URL · cursor pointer en filas con URL real (link a url.html) */
.url-row--clickable { cursor: pointer; }

/* Sprint URL · sort triggers (HISTÓRICO hero + KPI Pageviews + KPI Usuarios).
   Hover suave morado, click toggle, estado activo con borde mostaza marcado + glow. */
.sort-trigger {
  cursor: pointer; position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sort-trigger:hover { border-color: rgba(139, 92, 246, 0.5) !important; }
/* Sprint clon · check ✓ aura idéntica al patrón de .kpi.active. */
.sort-trigger--active {
  border: 2px solid var(--yellow) !important;
  box-shadow: 0 0 16px rgba(255, 200, 87, 0.25);
  background: linear-gradient(135deg, rgba(245, 184, 0, 0.08) 0%, transparent 100%) !important;
}
.sort-trigger--active::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  color: var(--yellow);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}
/* Badge "ORDENANDO" obsoleto · el check ✓ ya comunica estado activo. Hidden por defecto. */
.sort-trigger__badge { display: none; }

/* Etiqueta debajo del header URLs · "Ordenado por PV día ↓" */
.urls-active-sort {
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: rgba(245, 184, 0, 0.08);
  border-left: 3px solid var(--yellow);
  border-radius: 0 4px 4px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-2);
}
.urls-active-sort strong { color: var(--yellow); font-weight: 700; }
.urls-active-sort a { color: var(--text-3); text-decoration: underline; cursor: pointer; }
.urls-active-sort a:hover { color: var(--yellow); }

.url-row__time { font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; text-align: right; }
.url-row__scroll { font-size: 12px; font-family: 'JetBrains Mono', monospace; text-align: right; font-weight: 600; }
.url-row__scroll.high { color: var(--green); }
.url-row__scroll.mid { color: var(--orange); }
.url-row__scroll.low { color: var(--red); }
.url-row__readers {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: var(--yellow);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1;
}

/* S19 · sparkline column (verde sube / rojo baja / gris plano) */
.url-row__spark {
  width: 80px;
  height: 24px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.url-row__spark svg { display: block; width: 100%; height: 100%; }

/* ========== INTELLIGENCE CARDS ========== */
.intel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .intel-cards { grid-template-columns: 1fr; } }
.intel-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  border-left: 3px solid var(--text-3);
  position: relative;
  overflow: hidden;
}
.intel-card--surge { border-left-color: var(--orange); }
.intel-card--drop { border-left-color: var(--red); }
.intel-card--competitor { border-left-color: var(--purple); }
.intel-card--trend { border-left-color: var(--green); }

.intel-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.intel-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  flex: 1;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
}
.intel-card--surge .intel-card__type { background: rgba(251, 146, 60, 0.12); color: var(--orange); }
.intel-card--drop .intel-card__type { background: rgba(248, 113, 113, 0.12); color: var(--red); }
.intel-card--competitor .intel-card__type { background: rgba(109, 91, 208, 0.15); color: #9D8FE3; }
.intel-card--trend .intel-card__type { background: rgba(74, 222, 128, 0.12); color: var(--green); }

.intel-card__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}
.intel-card__article {
  background: var(--bg-3);
  padding: 10px 12px;
  border-radius: 5px;
  margin-bottom: 12px;
  border-left: 2px solid var(--line);
}
.intel-card__article-title { font-size: 12px; color: var(--text); margin-bottom: 3px; font-weight: 600; }
.intel-card__article-meta {
  font-size: 10px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
.intel-card__reasoning { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; }
.intel-card__action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.intel-card__action-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.15em;
  flex: 1;
}
.intel-card__btn {
  background: var(--yellow);
  color: black;
  border: none;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}
.intel-card__btn--ghost {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--line);
}

/* ========== CALIDAD EDITORIAL TABLE ========== */
.help-table {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.help-table__head, .help-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 11px 18px;
  align-items: center;
}
.help-table__head {
  background: var(--bg-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.help-table__row { border-top: 1px solid var(--line); }
.help-table__title { font-size: 13px; font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
.help-table__meta {
  font-size: 10px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
.score {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-family: 'Anton', sans-serif;
  font-size: 13px;
}
.score--high { background: rgba(74, 222, 128, 0.15); color: var(--green); }
.score--mid { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
.score--low { background: rgba(248, 113, 113, 0.15); color: var(--red); }
.help-table__overall { font-family: 'Anton', sans-serif; font-size: 18px; text-align: right; letter-spacing: 0.04em; }
.help-table__overall--high { color: var(--green); }
.help-table__overall--mid { color: var(--orange); }
.help-table__overall--low { color: var(--red); }

/* ============================================================
   S7 · HISTÓRICO
   ============================================================ */

/* Page head — compartido S7/S8/S9 */
.page-head { margin-bottom: 24px; }
.page-head__num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--yellow); letter-spacing: 0.2em; margin-bottom: 6px; }
.page-head__title { font-family: 'Anton', sans-serif; font-size: 32px; letter-spacing: 0.04em; margin-bottom: 6px; }
.page-head__sub { font-size: 14px; color: var(--text-2); }

/* Period selector */
.period-bar {
  display: flex; gap: 8px; background: var(--bg-2); padding: 12px 16px;
  border-radius: 8px; border: 1px solid var(--line); margin-bottom: 20px;
  align-items: center; flex-wrap: wrap;
}
.period-bar__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); letter-spacing: 0.1em; margin-right: 8px; }
.period-bar button {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2);
  padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer;
  font-family: 'Anton', sans-serif; letter-spacing: 0.06em;
}
.period-bar button.active { background: var(--yellow); color: black; border-color: var(--yellow); }
.period-bar__sep { color: var(--text-3); margin: 0 4px; }
.period-bar__date {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--text-2); background: var(--bg-3); padding: 6px 12px; border-radius: 4px;
}

/* KPI grid - comparativos · S26.5.4 · 5 cols (PV/SESIÓN added) */
.kpi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px;
}
@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-big {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; position: relative; overflow: visible;
}
.kpi-big__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); letter-spacing: 0.15em; margin-bottom: 12px; text-transform: uppercase; }
/* S26.5.4 · tooltip explicativo en hover sobre PV/SESIÓN label */
.kpi-big__label--has-tooltip { cursor: help; position: relative; }
.kpi-big__label--has-tooltip::before {
  content: '?'; display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--text-3);
  font-size: 9px; margin-left: 6px; font-weight: 700; vertical-align: middle;
}
.kpi-big__label--has-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: rgba(20,20,30,0.97); border: 1px solid rgba(245,184,0,0.3);
  border-radius: 4px; padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text); letter-spacing: 0.02em; line-height: 1.5;
  width: 280px; max-width: 90vw; white-space: normal; text-transform: none;
  z-index: 1001; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.kpi-big__value-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; min-width: 0; }
.kpi-big__value { font-family: 'Anton', sans-serif; font-size: 38px; color: var(--text); letter-spacing: 0.02em; line-height: 1; }
/* Sprint 6 fix · nowrap interno + min-width:0 padre · evita corte de "+67.X%" en cards estrechas */
.kpi-big__delta { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; white-space: nowrap; }
.kpi-big__delta.up      { color: var(--green); }
.kpi-big__delta.down    { color: var(--red); }
.kpi-big__delta.neutral { color: var(--text-3); }
/* S26.3 · loading state vista histórico */
.historico--loading { position: relative; opacity: 0.55; pointer-events: none; transition: opacity 200ms; }
.historico--loading::after {
  content: 'CARGANDO…';
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.15em;
  color: var(--text-3); pointer-events: none; z-index: 100;
}
/* ============================================================
   S26.5 · Date Range Picker + Bucket dropdown + Chips
   ============================================================ */

/* Trigger común (date range + bucket) */
.date-range-trigger, .bucket-trigger {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em;
  padding: 8px 12px; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 200ms;
}
.date-range-trigger:hover, .bucket-trigger:hover { border-color: var(--yellow); }
.date-range-trigger__label { font-weight: 500; }
.date-range-trigger__chevron, .bucket-trigger__chevron { color: var(--text-3); font-size: 9px; }

/* Popover base (date + bucket) */
.date-picker-popover, .bucket-popover {
  position: fixed; z-index: 1000;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 220px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text);
  padding: 0;
  max-height: 80vh; overflow-y: auto;
}
.date-picker-popover { width: 360px; }

.date-picker-popover__tabs {
  display: flex; border-bottom: 1px solid var(--line);
}
.date-picker-popover__tab {
  flex: 1; background: transparent; border: 0; color: var(--text-3);
  padding: 10px 0; cursor: pointer; font-family: inherit; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.date-picker-popover__tab.is-active {
  color: var(--text); border-bottom-color: var(--yellow);
}
.date-picker-popover__tab:hover { color: var(--text); }

.date-picker-popover__body {
  padding: 8px; max-height: 360px; overflow-y: auto;
}
.date-picker-popover__body--custom { padding: 12px; }

.date-picker-popover__group-title {
  font-size: 9px; color: var(--text-3); letter-spacing: 0.1em;
  padding: 8px 8px 4px;
}
.date-picker-popover__option {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 8px 12px; cursor: pointer; border-radius: 3px;
  font-family: inherit; font-size: 11px;
}
.date-picker-popover__option:hover { background: var(--bg-2); }
.date-picker-popover__sep {
  height: 1px; background: var(--line); margin: 6px 8px;
}

.date-picker-popover__inputs {
  display: flex; gap: 6px; align-items: center; margin-bottom: 12px;
}
.date-picker-popover__input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); padding: 6px 8px; border-radius: 3px;
  font-family: inherit; font-size: 11px;
}
.date-picker-popover__input.is-error { border-color: var(--red); }

.date-picker-popover__cal-nav {
  display: grid; grid-template-columns: 32px 1fr 32px;
  align-items: center; margin-bottom: 8px;
}
.date-picker-popover__cal-nav button {
  background: transparent; border: 0; color: var(--text);
  cursor: pointer; padding: 6px; font-size: 14px;
}
.date-picker-popover__cal-nav button:hover { color: var(--yellow); }
.date-picker-popover__cal-nav span {
  text-align: center; font-weight: 600; letter-spacing: 0.05em;
}
.date-picker-popover__cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  color: var(--text-3); font-size: 10px; padding: 4px 0;
}
.date-picker-popover__cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.date-picker-popover__cal-day {
  background: transparent; border: 0; color: var(--text);
  padding: 8px 0; cursor: pointer; border-radius: 3px;
  font-family: inherit; font-size: 11px;
}
.date-picker-popover__cal-day:hover { background: var(--bg-2); }
.date-picker-popover__cal-day.is-other { color: var(--text-3); opacity: 0.4; }
.date-picker-popover__cal-day.is-disabled {
  color: var(--text-3); opacity: 0.25; cursor: not-allowed;
}
.date-picker-popover__cal-day.is-disabled:hover { background: transparent; }
.date-picker-popover__cal-day.is-in-range {
  background: rgba(245, 184, 0, 0.15);
}
.date-picker-popover__cal-day.is-start, .date-picker-popover__cal-day.is-end {
  background: var(--yellow); color: #000; font-weight: 700;
}

.date-picker-popover__actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.date-picker-popover__btn {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: 6px 14px; cursor: pointer; border-radius: 3px;
  font-family: inherit; font-size: 11px; letter-spacing: 0.05em;
}
.date-picker-popover__btn:hover { border-color: var(--yellow); }
.date-picker-popover__btn--primary {
  background: var(--yellow); border-color: var(--yellow); color: #000; font-weight: 700;
}

/* Bucket popover */
.bucket-popover { width: 160px; padding: 4px; }
.bucket-popover__option {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 8px 12px; cursor: pointer; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.bucket-popover__option:hover { background: var(--bg-2); }
.bucket-popover__option.is-active { color: var(--yellow); font-weight: 700; }

/* ============================================================
   S26.6 · Chips inline + popover "+ Filtro" + editor
   ============================================================ */
/* It2-rev · filter-bar legacy · URLs view aún lo usa con su botón "Acotar resultados".
   LIVE/HISTÓRICO migraron a filter-icon-btn + active-chips-strip (más abajo). */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.filter-bar:empty { display: none; }
.filter-bar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-bar__chips:empty { display: none; }
.filter-bar__add {
  background: var(--bg-2); border: 1px dashed var(--line); color: var(--text-2);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
  transition: border-color 200ms, color 200ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.filter-bar__add:hover { border-color: var(--morado); color: var(--text); }
.filter-bar__add-icon { color: var(--text-3); flex-shrink: 0; }
.filter-bar__add:hover .filter-bar__add-icon { color: var(--morado); }

/* Chips legacy (URLs view aún los usa) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 4px;
  padding: 4px 4px 4px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  cursor: pointer;
  transition: border-color 200ms;
}
.chip:hover { border-color: rgba(139, 92, 246, 0.6); }
.chip__field { color: rgba(255,255,255,0.7); }
.chip__op    { color: var(--text-3); font-style: italic; }
.chip__values{ color: #fff; font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__remove {
  background: transparent; border: 0; color: rgba(255,255,255,0.5);
  cursor: pointer; padding: 4px 6px; font-size: 14px; line-height: 1;
  border-left: 1px solid rgba(139, 92, 246, 0.25); margin-left: 4px;
}
.chip__remove:hover { color: var(--red); }

/* It2-rev · filter icon button · compacto en section-head al lado del título */
.filter-icon-btn {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  position: relative;
  margin-left: 10px;
  vertical-align: middle;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filter-icon-btn:hover {
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--morado);
  background: rgba(139, 92, 246, 0.08);
}
.filter-icon-btn.has-filters {
  border-color: rgba(139, 92, 246, 0.4);
  color: var(--morado);
  background: rgba(139, 92, 246, 0.1);
}
.filter-icon-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--morado);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.filter-icon-btn.has-filters .filter-icon-count { display: inline-flex; }

/* It2-rev · active chips strip · fila fina debajo del section-head, hidden si vacío */
.active-chips-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 14px;
}
.active-chips-strip:empty { display: none; }

.chip-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: border-color 0.15s;
}
.chip-active:hover { border-color: rgba(139, 92, 246, 0.55); }

.chip-remove {
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  border-radius: 3px;
  margin-left: 2px;
}
.chip-remove:hover {
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}

.chips-clear-all {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 4px;
}
.chips-clear-all:hover { color: var(--red); }

/* + Filtro popover */
.filter-add-popover {
  position: fixed; z-index: 1000;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 240px; padding: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  max-height: 80vh; overflow-y: auto;
}
.filter-add-popover__group { margin-bottom: 6px; }
.filter-add-popover__group:last-child { margin-bottom: 0; }
.filter-add-popover__group-title {
  font-size: 9px; color: var(--text-3); letter-spacing: 0.1em;
  padding: 4px 8px;
  display: flex; align-items: center; gap: 6px;
}
.filter-add-popover__group-title svg { color: var(--text-3); flex-shrink: 0; }
.filter-add-popover__option {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 6px 12px; cursor: pointer; border-radius: 3px;
  font-family: inherit; font-size: 11px;
}
.filter-add-popover__option:hover { background: var(--bg-2); }

/* Fix3 · mobile · popover ocupa casi todo el viewport para no recortarse */
@media (max-width: 768px) {
  .filter-add-popover {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 70vh;
  }
}

/* Filter editor (3 tipos) */
.filter-editor-popover {
  position: fixed; z-index: 1010;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  width: 320px; padding: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  max-height: 80vh; overflow-y: auto;
}
.filter-editor-popover__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.filter-editor-popover__field { font-weight: 700; letter-spacing: 0.05em; }
.filter-editor-popover__op {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 11px; padding: 4px 8px; border-radius: 3px;
}
.filter-editor-popover__search {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); padding: 6px 8px; border-radius: 3px;
  font-family: inherit; font-size: 11px; margin-bottom: 8px;
}
.filter-editor-popover__opts {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 12px;
}
.filter-editor-popover__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer;
}
.filter-editor-popover__opt:hover { background: var(--bg-2); }
.filter-editor-popover__opt input { accent-color: var(--yellow); }
.filter-editor-popover__opt span { color: var(--text); }
.filter-editor-popover__text {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); padding: 8px 10px; border-radius: 3px;
  font-family: inherit; font-size: 11px; margin-bottom: 12px;
}
.filter-editor-popover__range {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.filter-editor-popover__range input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); padding: 6px 8px; border-radius: 3px;
  font-family: inherit; font-size: 11px;
}
.filter-editor-popover__actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.filter-editor-popover__btn {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: 6px 14px; cursor: pointer; border-radius: 3px;
  font-family: inherit; font-size: 11px; letter-spacing: 0.05em;
}
.filter-editor-popover__btn:hover { border-color: var(--yellow); }
.filter-editor-popover__btn--primary {
  background: var(--yellow); border-color: var(--yellow); color: #000; font-weight: 700;
}

/* C.6 · Quality cell + rich tooltip */
.quality-cell {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: help;
  display: inline-block;
  text-align: center;
  min-width: 36px;
  transition: background 0.15s, transform 0.15s;
}
.quality-cell--good    { color: #4ADE80; background: rgba(74,222,128,0.1); }
.quality-cell--medium  { color: #FACC15; background: rgba(250,204,21,0.1); }
.quality-cell--bad     { color: #EF4444; background: rgba(239,68,68,0.1); }
.quality-cell--pending { color: #555;    background: transparent; font-weight: 400; cursor: default; }
.quality-cell:not(.quality-cell--pending):hover { background: rgba(255,255,255,0.06); transform: scale(1.05); }

.quality-tooltip {
  position: fixed;
  background: rgba(15, 15, 20, 0.98);
  /* Polish IA · borde gradient mostaza→morado · capa IA en analítica calidad */
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--mostaza) 0%, var(--morado) 100%) 1;
  border-radius: 6px;
  padding: 16px 20px;
  min-width: 360px;
  max-width: 440px;
  font-size: 12px;
  line-height: 1.5;
  z-index: 10000;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
/* It2.F2 · mobile · tooltip ocupa casi todo el viewport · positionPopoverSmart aún
   posiciona top, el !important sobreescribe left/right + max-width para que entre. */
@media (max-width: 768px) {
  .quality-tooltip {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    padding: 14px 16px;
  }
}
.quality-tooltip__header {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--yellow);
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}
.quality-tooltip__criterion {
  display: grid;
  grid-template-columns: 110px 36px 1fr;
  gap: 8px;
  margin: 6px 0;
  align-items: start;
}
.quality-tooltip__criterion-label {
  color: rgba(255,255,255,0.7);
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 11px;
}
.quality-tooltip__criterion-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--yellow);
  text-align: right;
}
.quality-tooltip__criterion-reason {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-family: 'Manrope', 'Inter', sans-serif;
  line-height: 1.4;
}
.quality-tooltip__action {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.quality-tooltip__action-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--yellow);
  margin-bottom: 6px;
}
.quality-tooltip__action-text {
  color: rgba(255,255,255,0.85);
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
.quality-tooltip__footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* S26.5.1 · chart tooltip floating */
.chart-tooltip {
  position: fixed;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(245, 184, 0, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #fff;
  pointer-events: none;
  z-index: 10000;
  min-width: 160px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip__date {
  font-weight: 600;
  color: var(--text-3);
  font-size: 10px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chart-tooltip__row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
  gap: 16px;
}
.chart-tooltip__row strong { font-weight: 700; }
.chart-tooltip__compare {
  color: var(--text-3);
  font-size: 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.chart-card__svg circle.is-active {
  r: 5.5; stroke: #fff; stroke-width: 2;
}

/* S26.3 · coverage warning badge */
.historico__coverage-badge {
  display: inline-block; padding: 4px 10px; margin-left: 12px;
  background: rgba(245, 184, 0, 0.12); border: 1px solid rgba(245, 184, 0, 0.3);
  border-radius: 4px; color: var(--yellow);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.historico__coverage-badge[hidden] { display: none; }
.kpi-big__compare { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.kpi-big__compare strong { color: var(--text-2); font-weight: 600; }
.kpi-big__spark { height: 40px; width: 100%; }

/* Chart card (HISTÓRICO version — diferente de .chart-section LIVE) */
.chart-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px; margin-bottom: 20px;
}
.chart-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.chart-card__title { font-family: 'Anton', sans-serif; font-size: 16px; letter-spacing: 0.04em; }
.chart-card__sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); letter-spacing: 0.1em; }
.chart-card__svg { width: 100%; height: 280px; display: block; }
.chart-card__x-axis { display: flex; justify-content: space-between; padding: 8px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); letter-spacing: 0.08em; }
.chart-card__toggle {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  cursor: pointer; padding: 6px 12px; border-radius: 4px;
  letter-spacing: 0.06em;
}
.chart-card__toggle--yellow { color: var(--yellow); background: rgba(245,184,0,0.1); border: 1px solid rgba(245,184,0,0.3); }
.chart-card__toggle--cyan   { color: var(--cyan);   background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.3); }
.chart-card__toggle-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-card__toggle-dot--yellow { background: var(--yellow); }
.chart-card__toggle-dot--cyan   { background: var(--cyan); }

/* Compare grid */
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
/* S26.4.1 · evitar desborde de hijos por content largo (titles canónicos) */
.compare-grid > * { min-width: 0; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }

/* Top tables */
.table-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.table-card__title { font-family: 'Anton', sans-serif; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.t-row {
  /* Sprint 6 fix · 5 cols [rank] [thumb] [title] [quality] [PV] · TOP URLs histórico
     añade qualityCell entre title y num · antes 4 cols → num wrap a 2ª fila bajo thumb. */
  display: grid; grid-template-columns: 24px 36px minmax(0, 1fr) auto auto;
  gap: 12px; padding: 0; align-items: center; height: 76px;
  border-bottom: 1px solid rgba(42,42,58,0.4);
}
.t-row:last-child { border-bottom: none; }
.t-row__rank { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); }
.t-row__thumb {
  width: 36px; height: 36px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, #2A2A3A, #1C1C2A); border: 1px solid var(--line);
}
.t-row__thumb--bg1 { background: linear-gradient(135deg, #2A2A3A, #1C1C2A); }
.t-row__thumb--bg2 { background: linear-gradient(135deg, #3A2A2A, #2A1C1C); }
.t-row__thumb--bg3 { background: linear-gradient(135deg, #2A3A3A, #1C2A2A); }
.t-row__thumb--bg4 { background: linear-gradient(135deg, #3A2A3A, #2A1C2A); }
.t-row__thumb--bg5 { background: linear-gradient(135deg, #3A3A2A, #2A2A1C); }
/* S26.4 · imagen real dentro del thumb (Top URLs histórico) */
.t-row__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 200ms; }
/* S26.4 · variante sin thumb (Top Autores histórico) — grid 2 cols + título compacto */
.t-row--no-thumb { grid-template-columns: 24px minmax(0, 1fr) auto; height: 76px; }
/* S26.4.1 · título 2 líneas máx (URLs canónicos con thumb) → fila uniforme 64px */
.t-row__title {
  font-size: 13px; color: var(--text); font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.35;
  word-break: break-word;
}
/* Autores: 1 línea fija nowrap (no necesitan clamp) */
.t-row--no-thumb .t-row__title {
  font-size: 14px;
  display: block; -webkit-line-clamp: initial; -webkit-box-orient: initial;
  white-space: nowrap;
}
.t-row__meta { font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; margin-top: 3px; }
.t-row__num { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--yellow); text-align: right; letter-spacing: 0.04em; }
.t-row__num-sub { font-size: 10px; color: var(--text-3); text-align: right; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }

/* Heatmap calendar */
.heatmap-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-bottom: 20px; }
.heatmap-card__title { font-family: 'Anton', sans-serif; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 16px; }
.heatmap { display: grid; grid-template-columns: 60px repeat(24, 1fr); gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; }
.heatmap__row-label { color: var(--text-3); display: flex; align-items: center; }
.heatmap__cell { aspect-ratio: 1; border-radius: 2px; background: rgba(245,184,0,0.05); }
.heatmap__col-label { color: var(--text-3); text-align: center; padding: 4px 0; }

/* Source breakdown */
.breakdown-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 1100px) { .breakdown-grid { grid-template-columns: 1fr; } }
.bd-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.bd-card__title { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bd-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(42,42,58,0.3); font-size: 12px; }
.bd-row:last-child { border-bottom: none; }
.bd-row__label { display: flex; align-items: center; gap: 8px; color: var(--text); }
.bd-row__dot { width: 8px; height: 8px; border-radius: 50%; }
.bd-row__num { font-family: 'Anton', sans-serif; font-size: 14px; color: var(--yellow); }
.bd-row__pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); margin-left: 8px; }

/* ============================================================
   S8 · URLS (variante grande, scoped a .urls-section--full)
   ============================================================ */

.filter-bar {
  display: flex; gap: 12px; padding: 14px 18px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px;
  align-items: center; flex-wrap: wrap;
}
.filter-bar__search {
  flex: 1; min-width: 200px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 14px; color: var(--text); font-size: 13px; font-family: 'Manrope', sans-serif;
}
.filter-bar__search::placeholder { color: var(--text-3); }
.filter-bar__group { display: flex; gap: 4px; }
.filter-bar__group button {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2);
  padding: 7px 12px; border-radius: 4px; font-size: 11px; cursor: pointer;
  font-family: 'Anton', sans-serif; letter-spacing: 0.06em;
}
.filter-bar__group button.active { background: var(--yellow); color: black; border-color: var(--yellow); }
.filter-bar__select {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2);
  padding: 7px 12px; border-radius: 4px; font-size: 11px; cursor: pointer;
  font-family: 'Anton', sans-serif; letter-spacing: 0.06em;
}

.counter-bar {
  display: flex; gap: 14px; margin-bottom: 16px;
  padding: 0 4px; align-items: center; flex-wrap: wrap;
}
.counter-pill {
  background: var(--bg-3); padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-2); display: flex; align-items: center; gap: 8px;
}
.counter-pill strong { color: var(--yellow); font-family: 'Anton', sans-serif; font-size: 13px; }

/* Variante grande de URLs · scoped para no pisar la lista LIVE */
.urls-section--full { padding: 0; }
.urls-section--full .urls-table-head {
  display: grid;
  grid-template-columns: 32px 48px 1fr 110px 80px 70px 70px 70px 70px;
  gap: 10px; padding: 12px 20px;
  background: var(--bg-3);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase;
  align-items: center;
}
.urls-section--full .urls-table-head > div.right { text-align: right; }
.urls-section--full .url-row {
  display: grid;
  grid-template-columns: 32px 48px 1fr 110px 80px 70px 70px 70px 70px;
  gap: 10px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid rgba(42, 42, 58, 0.5);
  cursor: pointer;
  transition: background 0.1s;
}
.urls-section--full .url-row:hover { background: rgba(139, 92, 246, 0.04); border-top-color: rgba(139, 92, 246, 0.25); }   /* Polish IA · hover morado sutil */
.urls-section--full .url-row__thumb {
  width: 48px; height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.urls-section--full .url-row__title { min-width: 0; padding-right: 0; }
.urls-section--full .url-row__title-line {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 6px; margin-bottom: 4px;
  flex-wrap: wrap; line-height: 1.4;
}
.urls-section--full .url-row__title-text { font-size: 13px; color: var(--text); font-weight: 600; }
.urls-section--full .url-row__source { margin-top: 2px; }
.urls-section--full .url-row__url {
  font-size: 10px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.urls-section--full .url-row__author {
  font-size: 11px; color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.urls-section--full .url-row__num {
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
  text-align: right; font-weight: 600; color: var(--text);
}
.urls-section--full .url-row__num.high { color: var(--green); }
.urls-section--full .url-row__num.mid  { color: var(--orange); }
.urls-section--full .url-row__num.low  { color: var(--red); }
/* S25.1 · calidad pending (worker no expone score todavía) */
.url-row__num--pending {
  color: var(--text-3) !important;
  cursor: help;
}

.pagination {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3); letter-spacing: 0.06em;
}
.pagination__pages { display: flex; gap: 4px; }
.pagination__pages button {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2);
  padding: 6px 12px; border-radius: 4px; font-size: 11px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.pagination__pages button.active { background: var(--yellow); color: black; border-color: var(--yellow); }

/* ============================================================
   S9 · AJUSTES
   ============================================================ */

.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}
@media (max-width: 1000px) { .settings-layout { grid-template-columns: 1fr; } }

.settings-nav {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 0;
  height: fit-content;
  position: sticky;
  top: 80px;
}
.settings-nav__group { padding: 8px 0; border-bottom: 1px solid var(--line); }
.settings-nav__group:last-child { border-bottom: none; }
.settings-nav__group-title {
  padding: 6px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.settings-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.settings-nav a:hover { color: var(--text); background: rgba(245,184,0,0.04); }
.settings-nav a.active {
  color: var(--yellow);
  border-left-color: var(--yellow);
  background: rgba(245,184,0,0.06);
  font-weight: 600;
}
.settings-nav a span.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  background: rgba(74, 222, 128, 0.15);
  color: var(--green);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.06em;
}
.settings-nav a span.tag.warn {
  background: rgba(251, 146, 60, 0.15);
  color: var(--orange);
}

.settings-content { display: flex; flex-direction: column; gap: 18px; }
.settings-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px;
}
.settings-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.settings-card__title {
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.settings-card__sub {
  font-size: 12px;
  color: var(--text-3);
}
.settings-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.settings-card__status--ok {
  background: rgba(74, 222, 128, 0.12);
  color: var(--green);
}
.settings-card__status--warn {
  background: rgba(251, 146, 60, 0.12);
  color: var(--orange);
}
.settings-card__status .pulse-dot { background: currentColor; }

.field-row { margin-bottom: 16px; }
.field-row:last-child { margin-bottom: 0; }
.field-row__label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.field-row__hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
}
.input {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
}
.input:focus { outline: none; border-color: var(--yellow); }
.input--mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) { .field-grid-2 { grid-template-columns: 1fr; } }

.code-block {
  background: #08080F;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  position: relative;
}
.code-block__copy {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.code-block__copy:hover { background: var(--yellow); color: black; border-color: var(--yellow); }
.code-tag-yellow { color: var(--yellow); }
.code-tag-cyan { color: var(--cyan); }
.code-tag-pink { color: var(--pink); }

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(42, 42, 58, 0.4);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row__info { flex: 1; padding-right: 18px; }
.toggle-row__title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.toggle-row__sub { font-size: 12px; color: var(--text-3); }
.toggle {
  position: relative;
  width: 42px;
  height: 22px;
  background: var(--bg-4);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-3);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.toggle.on { background: var(--yellow); }
.toggle.on::after { transform: translateX(20px); background: black; }

.tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 4px;
  min-height: 44px;
  align-items: center;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 184, 0, 0.12);
  border: 1px solid rgba(245, 184, 0, 0.25);
  color: var(--yellow);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.tag-pill__x {
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.tag-pill__x:hover { color: var(--red); }
.tags-input input {
  background: none;
  border: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  flex: 1;
  min-width: 100px;
  padding: 4px 0;
}
.tags-input input:focus { outline: none; }

.team-row {
  display: grid;
  grid-template-columns: 36px 1fr 100px 100px 80px;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(42, 42, 58, 0.4);
  align-items: center;
}
.team-row:last-child { border-bottom: none; }
.team-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: black;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.team-avatar--purple { background: linear-gradient(135deg, var(--purple), #9D8FE3); color: white; }
.team-avatar--cyan { background: linear-gradient(135deg, var(--cyan), #67E8F9); color: black; }
.team-avatar--pink { background: linear-gradient(135deg, var(--pink), #F9A8D4); color: black; }
.team-row__info { overflow: hidden; }
.team-row__name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.team-row__email { font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row__role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.team-row__last {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}
.team-row__action { text-align: right; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-3);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--red); border-color: var(--red); }

.plan-card {
  background: linear-gradient(135deg, rgba(245, 184, 0, 0.06) 0%, rgba(109, 91, 208, 0.04) 100%);
  border: 1px solid rgba(245, 184, 0, 0.2);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.plan-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.plan-card__name { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--yellow); letter-spacing: 0.2em; margin-bottom: 4px; }
.plan-card__title { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 0.04em; }
.plan-card__price { font-family: 'Anton', sans-serif; font-size: 24px; color: var(--yellow); }
.plan-card__price small { font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; margin-left: 4px; }
.plan-card__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 16px;
}
.plan-card__feature { display: flex; align-items: center; gap: 8px; }
.plan-card__check { color: var(--green); }
.plan-card__usage {
  background: var(--bg-3);
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.plan-card__usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.plan-card__usage-row:last-child { margin-bottom: 0; }
.plan-card__usage-row strong { color: var(--text); font-family: 'Anton', sans-serif; font-size: 13px; }
.plan-card__usage-bar {
  height: 4px;
  background: var(--bg-4);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.plan-card__usage-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: 2px;
}

.actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.btn-primary {
  background: var(--yellow);
  color: black;
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.08em;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.08em;
}
.btn-secondary:hover { color: var(--text); border-color: var(--text-3); }

.token-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  align-items: center;
  margin-bottom: 10px;
}
.token-row:last-child { margin-bottom: 0; }
.token-row__info { overflow: hidden; }
.token-row__name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.token-row__meta { font-size: 10px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; }
.token-row__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--line);
}

/* ============================================================
   S12 · Dinamismo: pulse update, filter pill, filter rows
   ============================================================ */

@keyframes pulseUpdate {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}
.pulse-update {
  animation: pulseUpdate 600ms ease-out;
  border-radius: 6px;
}

/* S12 fix · filtros acumulativos: container flex con N pills + clear-all */
.filter-pill {
  position: sticky;
  top: 64px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  padding: 6px 0;
  background: var(--bg);
}
.filter-pill__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: black;
  padding: 6px 12px;
  border-radius: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.filter-pill__type {
  opacity: 0.6;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.filter-pill__value { font-weight: 700; }
.filter-pill__close {
  cursor: pointer;
  font-size: 13px;
  opacity: 0.7;
  user-select: none;
  padding-left: 4px;
  border-left: 1px solid rgba(0,0,0,0.2);
}
.filter-pill__close:hover { opacity: 1; }
.filter-pill__clear-all {
  background: transparent;
  border: 1px solid var(--text-3);
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 18px;
  font-family: 'Anton', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.filter-pill__clear-all:hover { color: var(--text); border-color: var(--text-2); }

/* S13 · botón "cargar más" en URLs LIVE list */
.urls-load-more {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--text-2);
  padding: 14px;
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 0 0 8px 8px;
}
.urls-load-more:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(245, 184, 0, 0.04);
}

/* ========== S16 · CHART HOVER · tooltip + dot + vertical line ========== */
.chart-tooltip {
  position: absolute;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 11px;
  min-width: 200px;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.chart-tooltip__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.chart-tooltip__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chart-tooltip__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.chart-tooltip__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  text-transform: capitalize;
}
.chart-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.chart-tooltip__value {
  font-family: 'Anton', sans-serif;
  font-size: 13px;
  color: var(--text);
}
.chart-tooltip__delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  margin-left: 6px;
}
.chart-tooltip__delta--up   { color: var(--green); }
.chart-tooltip__delta--down { color: var(--red); }
.chart-tooltip__total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.chart-tooltip__total-label {
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.chart-tooltip__total-value {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: var(--yellow);
}
.chart-tooltip__total-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  margin-left: 8px;
}

.chart-hover-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--bg);
  pointer-events: none;
  z-index: 15;
  transform: translate(-50%, -50%);
}
.chart-hover-line {
  position: absolute;
  width: 1px;
  background: var(--text-3);
  opacity: 0.3;
  pointer-events: none;
  z-index: 14;
  top: 0;
  bottom: 0;
}

.row-clickable { cursor: pointer; }
.filter-active {
  background: rgba(245, 184, 0, 0.08);
  border-left: 2px solid var(--yellow);
  padding-left: 6px;
  margin-left: -8px;
}

/* ===========================================
   S20 · MOBILE/TABLET REFORMULADO (<=768px)
   - hero 2x2, chart 140px, KPIs scroll horizontal
   - nav strip horizontal bajo topbar (sustituye nav vertical)
   - paneles convertidos a fila scroll horizontal de pills
   =========================================== */

/* Defaults globales (siempre ocultos excepto en mobile) */
.topbar__hamburger { display: none; }
.nav-strip { display: none; }

@media (max-width: 768px) {

  /* ------- MAIN ------- */
  /* Sin overflow-x aquí · si lo ponemos `hidden` rompe el scroll-x touch
     de los panels hijos. La defensa contra body-scroll vive en `body { overflow-x: hidden }`
     declarado al inicio del archivo (no establece scroll context para los panels). */
  .main {
    padding: 12px;
    max-width: 100vw;
  }

  /* ------- TOPBAR COMPACTO ------- */
  .topbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .topbar__left { gap: 8px; flex-shrink: 0; }
  .topbar__brand .topbar__title,
  .topbar__title { font-size: 12px; }
  .topbar__nav { display: none; }
  .topbar__site {
    font-size: 10px;
    padding: 4px 8px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar__realtime {
    font-size: 9px;
    padding: 4px 8px;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  /* Hamburger oculto: el nav-strip lo sustituye en mobile */
  .topbar__hamburger { display: none !important; }

  /* ------- NAV STRIP HORIZONTAL ------- */
  .nav-strip {
    display: flex;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    padding: 0 12px;
    scrollbar-width: none;
  }
  .nav-strip::-webkit-scrollbar { display: none; }
  .nav-strip__link {
    font-family: 'Anton', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-3);
    padding: 12px 16px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-strip__link--active {
    color: var(--yellow);
    border-bottom-color: var(--yellow);
  }

  /* ------- HERO MENU 2x2 ------- */
  .hero-menu {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .hero-card { padding: 10px 12px; min-height: 0; }
  .hero-card__num    { font-size: 8px; }
  .hero-card__title  { font-size: 10px; }
  .hero-card__metric { font-size: 22px; }
  .hero-card__delta  { font-size: 9px; }
  .hero-card__arrow  { display: none; }

  /* ------- CHART HERO ------- */
  /* It2.F6 · mobile · altura 200px (no 140), tabs más chicas, marker AHORA visible */
  .chart-section {
    margin: 0 -12px 14px;
    padding: 0 12px;
    overflow: visible;          /* permite que el AHORA marker no se recorte */
  }
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  .chart-title { font-size: 12px; }
  .chart-meta  { font-size: 9px; }
  .range-bar { align-self: flex-start; font-size: 10px; }
  .range-bar button { padding: 4px 8px; font-size: 10px; }
  .chart-svg-wrap { margin: 0 -12px; overflow: visible; }
  .chart-svg { height: 200px; }
  .chart-x-axis {
    padding: 4px 12px 0;
    font-size: 8px;
  }
  .chart-x-axis span:nth-child(even) { display: none; }

  /* Tooltip OFF en touch */
  .chart-tooltip,
  .chart-hover-dot,
  .chart-hover-line { display: none !important; }

  /* ------- SECTION HEAD ------- */
  .section-head { margin: 14px 0 10px; }
  .section-head__num   { font-size: 9px; }
  .section-head__title { font-size: 14px; }

  /* ------- KPIs SCROLL HORIZONTAL ------- */
  .kpis {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi {
    flex: 0 0 110px;
    padding: 10px 14px;
  }
  .kpi__label { font-size: 8px; }
  .kpi__value { font-size: 20px; }
  .kpi__meta  { font-size: 8px; }

  /* ------- DASHBOARD: flex column (S20 reorder vía JS apila aquí los hijos) ------- */
  .dashboard {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 0;
    /* Clamp · ningún panel hijo (margin negativo, scroll-x interno) puede expandir
       el dashboard más allá del viewport. min-width: 0 permite shrink en flex column. */
    max-width: 100%;
    min-width: 0;
  }

  /* ------- PANELES como sección con title arriba + scroll horizontal de pills ------- */
  /* S22 fix · sustituye el approach S20 (flex-wrap:nowrap + title flex 0 0 100%)
     que escondía las pills detrás del scroll. Nuevo: panel block con
     overflow-x + white-space:nowrap, title block normal arriba, rows
     inline-flex en línea horizontal scrolleable. */
  /* Fix1 · padding-right 16 · evita que la última card se pegue al borde y se vea cortada
     al hacer scroll horizontal hasta el final. scroll-padding ayuda al snap touch. */
  /* CRITICAL · width clamp · sin esto el panel se expande al ancho del contenido
     (clientWidth === scrollWidth) y overflow-x: auto NO activa scroll porque no
     hay diferencia. min-width: 0 venceMin-content default en flex columns. */
  .panel {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 -12px 14px;
    padding: 0 16px 4px 12px;
    display: block;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    white-space: nowrap !important;
    touch-action: pan-x !important;
    cursor: grab;
  }
  .panel:active { cursor: grabbing; }
  .panel::-webkit-scrollbar { display: none; }
  /* Defensa · ningún ancestor puede tener overflow-x clip/hidden que rompa el scroll */
  .main,
  .dashboard {
    overflow-x: visible !important;
  }
  .panel__title {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
    white-space: normal;
    font-family: 'Anton', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-2);
    cursor: default;
    align-items: center;
    justify-content: space-between;
    /* S23 fix · sticky para que el title NO scrollee con las pills.
       Background sólido tapa las pills que pasan por debajo. */
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 2;
    padding-right: 8px;
  }
  .panel__title::after {
    content: 'desliza →';
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: var(--text-3);
    letter-spacing: 0.1em;
    text-transform: none;
  }

  /* Cada bar-row / list-row se convierte en pill inline-flex
     (clave del fix S22 · no usar `flex` en el .panel padre) */
  .bar-row,
  .list-row {
    display: inline-flex !important;
    flex-direction: column;
    width: 130px;
    vertical-align: top;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 8px 0 0;
    gap: 6px;
    white-space: normal;
    cursor: pointer;
  }
  .bar-row:last-child,
  .list-row:last-child { margin-right: 0; }

  /* Fix2 · CARPETAS TOP en mobile · lista vertical exclusiva (paths se ven mal en pills 130px).
     Override panel + list-row solo cuando la clase .panel--paths está aplicada. */
  .panel.panel--paths {
    overflow-x: visible !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    background: transparent;
  }
  .panel.panel--paths .panel__title {
    position: static !important;
    background: transparent !important;
    padding-right: 0 !important;
    margin-bottom: 6px;
  }
  .panel.panel--paths .panel__title::after { content: '' !important; display: none !important; }
  .panel.panel--paths .list-row {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(42, 42, 58, 0.4);
    border-radius: 0;
    padding: 8px 0 !important;
    margin: 0 !important;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }
  .panel.panel--paths .list-row:last-child { border-bottom: none; }
  .panel.panel--paths .list-row__label {
    flex: 1;
    min-width: 0;
    font-size: 12px;
  }
  .panel.panel--paths .list-row__text {
    direction: rtl;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .panel.panel--paths .list-row__num {
    flex-shrink: 0;
    color: var(--yellow);
    font-weight: 700;
    padding-left: 0;
  }
  .bar-row__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .bar-row__label,
  .list-row__label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .bar-row__num,
  .list-row__num {
    font-family: 'Anton', sans-serif;
    font-size: 13px;
    flex-shrink: 0;
  }
  .bar-row__track {
    height: 3px;
    width: 100%;
  }

  /* Filter-active visible en mobile */
  .filter-active {
    border-left: none !important;
    border: 1px solid var(--yellow) !important;
    background: rgba(245, 184, 0, 0.08) !important;
    padding: 10px 12px !important;
    margin: 0 !important;
  }

  /* ------- URLS LIVE ROWS ------- */
  .urls-section { margin: 0 -12px 14px; padding: 14px 0 0; }
  /* S23 fix · header stack vertical (en desktop es flex horizontal con space-between
     que desbordaba el viewport mobile · "URLS LIVE..." + chip + "ORDENAR..." = ~525px) */
  .urls-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 12px 10px;
  }
  .urls-title {
    font-size: 13px;
    flex-wrap: wrap;
    align-items: center;
  }
  .urls-title__count {
    font-size: 10px;
    padding: 3px 8px;
  }
  .urls-sort {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 10px;
    font-size: 10px;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .urls-sort::-webkit-scrollbar { display: none; }
  .urls-sort > * { flex-shrink: 0; }
  .urls-table { display: none; }       /* header de tabla oculto en mobile */
  .url-row {
    display: grid !important;
    grid-template-columns: 60px 1fr 50px 50px !important;
    gap: 10px;
    padding: 10px 12px;
  }
  .url-row__rank { display: none; }
  .url-row__thumb {
    width: 60px;
    height: 60px;
  }
  .url-row__author,
  .url-row__time,
  .url-row__scroll,
  .url-row__day {
    display: none !important;
  }
  /* Sprint URL mobile · línea con badges PV día + Users día bajo el título */
  .url-row__day-stats { display: block !important; }
  .url-row__title-line strong { font-size: 12px; }
  .url-row__source {
    font-size: 8px;
    padding: 2px 6px;
  }
  .url-row__spark {
    width: 50px;
    height: 18px;
  }
  .url-row__readers {
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    text-align: right;
  }

  /* S21 · ocultar legend de breakdown en mobile (la barra sí queda visible) */
  .url-row__breakdown-legend { display: none; }

  /* ------- FILTER PILL ------- */
  .filter-pill {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .filter-pill__item {
    width: 100%;
    justify-content: space-between;
  }
}

/* ===========================================
   S22 · MOBILE AJUSTES (<=768px)
   =========================================== */
@media (max-width: 768px) {
  /* Settings layout · ya colapsa a <1000px (1 col), compactar gap */
  .settings-layout { gap: 14px; }

  /* Settings nav lateral → strip horizontal scrolleable */
  .settings-nav {
    display: flex !important;
    overflow-x: auto;
    gap: 0;
    margin: 0 -12px 14px;
    padding: 4px 12px;
    scrollbar-width: none;
    position: static;            /* override sticky desktop */
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav__group {
    flex-shrink: 0;
    border-bottom: none;
    padding: 0;
    display: flex;
    align-items: center;
    margin-right: 12px;
  }
  .settings-nav__group:last-child { margin-right: 0; }
  .settings-nav__group-title { display: none; }
  .settings-nav a {
    flex-shrink: 0;
    font-size: 10px;
    padding: 6px 12px;
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-right: 4px;
  }
  .settings-nav a.active { border-left: none; border-bottom-color: var(--yellow); }

  /* Settings cards full width compactas */
  .settings-card { padding: 14px; }
  .settings-card__title { font-size: 13px; }
  .settings-card__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Field rows */
  .field-row__label { font-size: 11px; }
  .input            { font-size: 12px; padding: 8px 10px; }
  .field-grid-2     { grid-template-columns: 1fr; }

  /* Toggle row */
  .toggle-row { padding: 10px 0; gap: 12px; }
  .toggle-row__title { font-size: 12px; }
  .toggle-row__sub   { font-size: 11px; }

  /* Tags input */
  .tags-input { gap: 4px; }
  .tag-pill   { font-size: 10px; padding: 3px 8px; }

  /* Team row · stack vertical · grid 5 cols se rompe en 375px */
  .team-row {
    display: grid !important;
    grid-template-columns: 36px 1fr auto !important;
    grid-template-areas:
      'avatar info  action'
      'avatar role  last'
      'avatar email email';
    gap: 4px 10px;
    padding: 10px;
    align-items: center;
  }
  .team-avatar     { grid-area: avatar; width: 36px; height: 36px; align-self: start; }
  .team-row__info  { grid-area: info; }
  .team-row__name  { font-size: 12px; }
  .team-row__email { grid-area: email; font-size: 10px; }
  .team-row__role  { grid-area: role; font-size: 10px; }
  .team-row__last  { grid-area: last; font-size: 10px; text-align: right; }
  .team-row__action { grid-area: action; }

  /* Token row compacto */
  .token-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 10px;
  }
  .token-row__value { font-size: 9px; }

  /* Plan card */
  .plan-card { padding: 14px; }
  .plan-card__head { flex-direction: column; gap: 8px; align-items: flex-start; }
  .plan-card__title { font-size: 18px; }
  .plan-card__features { grid-template-columns: 1fr; gap: 8px; }

  /* Code block scroll horizontal interno */
  .code-block {
    overflow-x: auto;
    max-width: 100%;
    font-size: 10px;
    padding: 10px;
    word-wrap: normal;
  }
  .code-block::-webkit-scrollbar { height: 4px; background: transparent; }
  .code-block::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

  /* Action buttons */
  .actions { flex-direction: column; gap: 8px; }
  .actions button { width: 100%; }
}

/* ===========================================
   S24 · MOBILE HISTÓRICO (<=768px)
   Approach: scroll horizontal en KPIs/breakdown,
   chart full width edge-to-edge, heatmap scroll
   horizontal interno, compare-grid stack vertical
   =========================================== */
@media (max-width: 768px) {

  .page-head { padding: 0; margin-bottom: 14px; }
  .page-head__num   { font-size: 9px; letter-spacing: 0.2em; }
  .page-head__title { font-size: 22px; letter-spacing: 0.03em; margin: 4px 0; }
  .page-head__sub   { font-size: 12px; }

  /* Period bar real: <span label> + <button>s + <span sep> + <span label> + <button>s + <span date> */
  .period-bar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 0 0 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .period-bar__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-3);
    flex-shrink: 0;
  }
  .period-bar button {
    flex-shrink: 0;
    padding: 5px 10px;
    font-family: 'Anton', sans-serif;
    font-size: 9px;
    letter-spacing: 0.08em;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--text-2);
    border-radius: 14px;
    white-space: nowrap;
  }
  .period-bar button.active {
    background: var(--yellow);
    color: black;
    border-color: var(--yellow);
  }
  .period-bar__sep { display: none; }
  .period-bar__date {
    flex: 1 0 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.05em;
    margin-top: 4px;
    margin-left: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    background: transparent;
    padding: 0;
  }
  .period-bar__date::-webkit-scrollbar { display: none; }

  /* KPI grid (HISTÓRICO): scroll horizontal de cards 160px */
  .kpi-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  .kpi-grid::-webkit-scrollbar { display: none; }
  .kpi-big {
    flex: 0 0 160px;
    min-width: 160px;
    padding: 12px 14px;
  }
  .kpi-big__label   { font-size: 9px; }
  .kpi-big__value   { font-size: 26px; }
  .kpi-big__delta   { font-size: 10px; }
  .kpi-big__compare { font-size: 10px; margin-top: 4px; }
  .kpi-big__spark   { height: 30px; margin-top: 8px; }
  /* Sprint 6 fix · cards 160px estrechas · permitir wrap del delta a 2ª línea
     cuando value+delta no caben en una fila (ej. "25.5K · ▲ +123.5%"). */
  .kpi-big__value-row {
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  /* Chart card edge-to-edge sin caja */
  .chart-card {
    margin: 0 -12px 16px;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .chart-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
  }
  .chart-card__title { font-size: 13px; letter-spacing: 0.06em; }
  .chart-card__sub   { font-size: 10px; color: var(--text-3); }
  /* S24.1 fix #1 · sin doble compensación. El .chart-card padre ya es edge-to-edge */
  .chart-card__svg   { height: 180px !important; width: 100% !important; display: block; margin: 0; }
  .chart-card__x-axis { padding: 4px 12px 0; font-size: 8px; }
  .chart-card__x-axis span:nth-child(even) { display: none; }

  /* Heatmap card scroll horizontal interno */
  /* S24.1 fix #2 · scroll en el card padre, no en el grid (display: grid + overflow no
     scrollea, el grid se estira y desborda viewport) */
  .heatmap-card {
    margin: 0 -12px 16px;
    padding: 12px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .heatmap-card::-webkit-scrollbar { display: none; }
  .heatmap-card__title {
    padding: 0 12px;
    font-size: 13px;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .heatmap-card__title::after {
    content: 'desliza →';
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: var(--text-3);
    letter-spacing: 0.1em;
    font-weight: normal;
  }
  .heatmap-card .heatmap {
    /* sin overflow propio · padding recompensa el margin negativo del padre */
    min-width: 600px;
    padding: 0 12px;
  }

  /* Compare grid (TOP URLS / TOP AUTORES) · 1 col stack */
  .compare-grid {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 12px;
    margin-bottom: 14px;
  }
  .table-card { padding: 12px; }
  .table-card__title { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px; }
  /* S24.1 fix #3 · sin rank en mobile · título en 2 líneas (override desktop nowrap) */
  .t-row {
    /* Sprint 6 fix · mobile · rank hidden, thumb 36px, title flex, quality auto, num auto.
       Antes 3 cols → num wrap bajo thumb (PV "encima del thumbnail"). Ahora 4 cols. */
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    font-size: 11px;
  }
  /* S26.4 · variante autores también en mobile (sin thumb) */
  .t-row--no-thumb { grid-template-columns: 1fr auto !important; }
  .t-row__rank   { display: none !important; }
  .t-row__thumb  { width: 36px; height: 36px; }
  .t-row__title  {
    font-size: 12px;
    line-height: 1.3;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .t-row__meta   { font-size: 9px; }
  .t-row__num    { font-size: 14px; }
  .t-row__num-sub { font-size: 8px; }

  /* Breakdown grid (TRAFFIC SOURCE / DEVICES / PAÍSES) · scroll horizontal */
  .breakdown-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  .breakdown-grid::-webkit-scrollbar { display: none; }
  .bd-card {
    flex: 0 0 220px;
    min-width: 220px;
    padding: 12px;
  }
  .bd-card__title { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 8px; }
  .bd-row { font-size: 11px; padding: 6px 0; }
  .bd-row__num { font-size: 13px; }
  .bd-row__pct { font-size: 10px; }
}

/* ===========================================
   S24 · MOBILE URLS (<=768px)
   Approach: filtros stack vertical, counter pills
   scroll horizontal, URL cards verticales con
   métricas inline labeladas vía data-label
   =========================================== */
@media (max-width: 768px) {

  /* Filter bar stack vertical */
  /* S24.1 fix #4 · flex-direction: row + flex-wrap. Search y group ocupan
     fila completa (flex: 1 1 100%); selects ocupan medio (flex: 1 1 50%-4px).
     En column-direction el flex-basis 50% no produce 2-por-fila. */
  .filter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
  }
  .filter-bar__search {
    flex: 1 1 100% !important;
    width: 100%;
    min-width: 0 !important;
    padding: 9px 12px;
    font-size: 13px;
  }
  .filter-bar__group {
    flex: 1 1 100% !important;
    display: flex;
    background: var(--bg-3);
    border-radius: 6px;
    padding: 2px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-bar__group::-webkit-scrollbar { display: none; }
  .filter-bar__group button {
    flex: 1;
    min-width: 50px;
    padding: 6px 10px;
    font-size: 9px;
    background: transparent;
    border: none;
    color: var(--text-2);
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .filter-bar__group button.active {
    background: var(--yellow);
    color: black;
    border-color: transparent;
  }
  .filter-bar__select {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0;
    padding: 8px 10px;
    font-size: 9px;
    width: auto;
  }

  /* Counter bar scroll horizontal de pills */
  .counter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    overflow-x: auto;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  .counter-bar::-webkit-scrollbar { display: none; }
  .counter-pill {
    flex-shrink: 0;
    font-size: 10px;
    padding: 6px 12px;
    white-space: nowrap;
  }
  .counter-pill strong { font-size: 12px; }

  /* URLs section sin caja */
  .urls-section--full {
    margin: 0 -12px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
  }
  .urls-section--full .urls-table-head { display: none !important; }

  /* Cada .url-row · grid 3-col: thumb | center | readers */
  /* S24.1 fix #5 · cambiar a flex-wrap (no grid). Métricas como chips
     inline-flex con flex: 0 0 auto se distribuyen horizontalmente con
     wrap natural. order garantiza el orden visual: thumb → title → readers
     en row 1, métricas en row 2+ con wrap. */
  .urls-section--full .url-row {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 6px 10px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
  }
  .urls-section--full .url-row__rank { display: none !important; }
  .urls-section--full .url-row__thumb {
    flex: 0 0 60px;
    width: 60px !important;
    height: 60px !important;
    order: 1;
  }
  .urls-section--full .url-row__title {
    flex: 1 1 calc(100% - 130px);
    min-width: 0;
    order: 2;
  }
  .urls-section--full .url-row__title-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .urls-section--full .url-row__source {
    font-size: 8px;
    padding: 2px 6px;
  }
  .urls-section--full .url-row__title-text {
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .urls-section--full .url-row__url {
    font-size: 9px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }
  /* Lectores grandes mostaza arriba a la derecha (row 1) */
  .urls-section--full .url-row__readers {
    flex: 0 0 50px;
    order: 3;
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    color: var(--yellow);
    text-align: right;
    line-height: 1;
    align-self: flex-start;
  }
  /* Métricas como chips inline-flex · flex 0 0 auto + order: 4 → row 2 con wrap */
  .urls-section--full .url-row__author,
  .urls-section--full .url-row__time,
  .urls-section--full .url-row__num {
    flex: 0 0 auto !important;
    order: 4;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-2);
    background: var(--bg-3);
    padding: 3px 8px;
    border-radius: 12px;
    width: auto !important;
    margin: 0;
    text-align: left !important;
    font-weight: normal !important;
  }
  .urls-section--full .url-row__num.high  { color: var(--green); }
  .urls-section--full .url-row__num.mid   { color: var(--orange); }
  .urls-section--full .url-row__num.low   { color: var(--red); }
  .urls-section--full .url-row__author[data-label]::before,
  .urls-section--full .url-row__time[data-label]::before,
  .urls-section--full .url-row__num[data-label]::before {
    content: attr(data-label) ': ';
    color: var(--text-3);
    font-weight: normal;
    margin-right: 2px;
  }

  /* Pagination compacta */
  .pagination {
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    align-items: stretch;
    text-align: center;
    font-size: 10px;
  }
  .pagination__pages {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .pagination__pages button {
    padding: 6px 10px;
    font-size: 10px;
  }
}

/* ===========================================
   S25.4 · Multi-select custom dropdown (URLs filtros)
   + paginación dinámica con dots
   =========================================== */
.multi-select {
  position: relative;
  display: inline-block;
  min-width: 140px;
}
.multi-select__trigger {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 28px 7px 12px;
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-select__trigger::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.multi-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.multi-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-2);
  border-radius: 4px;
}
.multi-select__option:hover { background: var(--bg-2); }
.multi-select__option input[type="checkbox"] { accent-color: var(--yellow); }
.multi-select__empty {
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
}
/* S25.5 · UX feedback durante fetch histórico */
.multi-select--loading { opacity: 0.55; pointer-events: none; }
.multi-select--loading .multi-select__trigger::after {
  content: '⋯';
  animation: ms-loading-pulse 1s ease-in-out infinite;
}
@keyframes ms-loading-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.pagination__dots {
  color: var(--text-3);
  padding: 6px 4px;
  font-family: 'JetBrains Mono', monospace;
}
.pagination__btn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 6px 12px;
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
}
.pagination__btn:hover:not(:disabled):not(.active) {
  border-color: var(--text-3);
  color: var(--text);
}
.pagination__btn.active {
  background: var(--yellow);
  color: black;
  border-color: var(--yellow);
}
.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================================
 * C.5 · Vista INTELIGENCIA · alertas SURGE/DROP/MISMATCH
 * ============================================================ */

/* Badges nav (count alertas activas) */
.topbar__navbadge,
.nav-strip__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: 1px;
}
.topbar__navbadge[hidden],
.nav-strip__badge[hidden] { display: none; }

/* Hero card severity (INTELIGENCIA) — borde izq color */
.hero-card--low      { border-left: 3px solid #22c55e; }
.hero-card--medium   { border-left: 3px solid #facc15; }
.hero-card--high     { border-left: 3px solid #f97316; }
.hero-card--critical { border-left: 3px solid #ef4444; }
/* Hero card calidad — borde izq color */
.hero-card--good { border-left: 3px solid #22c55e; }
.hero-card--bad  { border-left: 3px solid #ef4444; }

/* Filtros */
.alerts-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.alerts-filter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.alerts-filter:hover { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.25); }
/* Polish IA · INTELIGENCIA es la "IA editorial" → active state morado para identidad */
.alerts-filter--active {
  color: var(--morado);
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.35);
}
.alerts-filter__sep { color: rgba(255,255,255,0.2); margin: 0 6px; }

/* Lista + empty */
.alerts-list { display: flex; flex-direction: column; gap: 0; }
.alerts-empty {
  padding: 60px 20px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* Card */
.alert-card {
  background: rgba(20, 20, 28, 0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 3px solid var(--alert-accent, #FFB800);
  border-radius: 6px;
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: opacity 0.3s, border-color 0.2s;
}
.alert-card--critical { --alert-accent: #ef4444; }
.alert-card--high     { --alert-accent: #f97316; }
.alert-card--medium   { --alert-accent: #facc15; }
.alert-card--low      { --alert-accent: #22c55e; }

.alert-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.alert-card__type { color: var(--alert-accent); font-weight: 700; }

.alert-card__title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  margin: 0 0 12px;
  line-height: 1.4;
}

.alert-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.alert-metric strong { color: #FFB800; font-weight: 600; }
.alert-metric--negative strong { color: #ef4444; }
.alert-metric-sep { color: rgba(255,255,255,0.3); }

.alert-card__recommendation {
  padding: 12px 14px;
  background: rgba(255,184,0,0.06);
  border-radius: 4px;
  margin-bottom: 14px;
}
.alert-card__rec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #FFB800;
  display: block;
  margin-bottom: 6px;
}
.alert-card__recommendation p {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

.alert-card__actions {
  display: flex;
  gap: 8px;
}
.alert-action {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.alert-action:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
.alert-action--dismiss { color: rgba(255,255,255,0.5); }
.alert-action--dismiss:hover { color: #ef4444; border-color: rgba(239,68,68,0.5); }
.alert-action[disabled] { opacity: 0.4; cursor: not-allowed; }

.alerts-head__sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  margin-left: 8px;
}

/* FX · color por type (sin emojis) en cards y filtros */
.alert-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.alert-card__type--surge       { color: #f97316; }
.alert-card__type--drop        { color: #ef4444; }
.alert-card__type--mismatch    { color: #facc15; }
.alert-card__type--opportunity { color: #22c55e; }

/* Filtros con tinte cuando inactivos · acentúa el color al activar */
.alerts-filter--surge:not(.alerts-filter--active)    { color: #f97316; border-color: rgba(249,115,22,0.25); }
.alerts-filter--drop:not(.alerts-filter--active)     { color: #ef4444; border-color: rgba(239,68,68,0.25); }
.alerts-filter--mismatch:not(.alerts-filter--active) { color: #facc15; border-color: rgba(250,204,21,0.25); }

/* FX · empty state celebratorio (MISMATCH 0) */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.empty-state h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.85);
}
.empty-state p {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  margin: 0 0 8px;
}
.empty-state__hint {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.empty-state--positive {
  border-color: rgba(74,222,128,0.3);
  background: rgba(74,222,128,0.03);
}
.empty-state--positive h3 { color: #4ade80; }

/* ============================================================
 * Polish IA · capa morado discreta global
 *   Mostaza sigue siendo color primario. Morado es ACENTO secundario,
 *   limitado a hover borders, INTELIGENCIA active states, accent lines
 *   y la card hero INTELIGENCIA.
 * ============================================================ */

/* Panel hover · borde morado sutil (resto del estilo intacto) */
.panel { transition: border-color 0.15s; }
.panel:hover { border-color: rgba(139, 92, 246, 0.3); }

/* Section accent line bajo el header de sección · gradient horizontal sutil */
.section-head { position: relative; }
.section-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--mostaza) 0%, var(--morado) 100%);
  opacity: 0.7;
  border-radius: 1px;
}

/* Hero card INTELIGENCIA · borde base morado fijo (identidad IA editorial) */
.hero-card[data-card="intel"] {
  border-color: rgba(139, 92, 246, 0.25);
}
.hero-card[data-card="intel"]:hover {
  border-color: rgba(139, 92, 246, 0.5);
}

/* Sidebar/topbar nav INTELIGENCIA · active state morado en lugar de mostaza */
.topbar__navlink[href="inteligencia.html"].topbar__navlink--active,
.nav-strip__link[href="inteligencia.html"].nav-strip__link--active {
  color: var(--morado);
  background: rgba(139, 92, 246, 0.12);
}

/* ============================================
   FIX MOBILE SCROLL HORIZONTAL · OVERRIDE FINAL
   ============================================ */
@media (max-width: 768px) {

  /* Cualquier panel con cards horizontales */
  .panel,
  .panel--medium,
  .panel--source,
  .panel--authors,
  .panel--categories,
  .panel--countries,
  .panel--devices,
  .panel--reading-time,
  .panel--scroll-depth,
  [class*="panel"]:not(.panel--paths) {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    flex-wrap: nowrap !important;
    display: block !important;
    scroll-snap-type: x proximity;
    padding-right: 16px !important;
  }

  /* Cards/rows dentro de los panels: ancho fijo, no comprimir */
  .panel:not(.panel--paths) .bar-row,
  .panel:not(.panel--paths) .list-row,
  [class*="panel"]:not(.panel--paths) .bar-row,
  [class*="panel"]:not(.panel--paths) .list-row {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    margin-right: 8px !important;
    vertical-align: top !important;
    white-space: normal !important;
    scroll-snap-align: start;
  }

  /* CARPETAS TOP excepción · vertical, no scroll horizontal */
  .panel.panel--paths {
    overflow-x: visible !important;
    white-space: normal !important;
    display: block !important;
    flex-wrap: nowrap !important;
  }

  .panel.panel--paths .list-row {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Red de seguridad: nada del body se sale del viewport */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .main, .dashboard {
    overflow-x: visible !important;
    max-width: 100vw !important;
  }
}

/* ============================================
   FIX MOBILE · KPIs strip + desliza separator
   ============================================ */
@media (max-width: 768px) {

  /* KPIs strip principal · scroll horizontal */
  .kpi-strip,
  .live-kpis,
  .kpi-grid,
  [class*="kpi-strip"],
  [class*="kpis"],
  [data-kpis],
  .live-overview > div:first-of-type,
  .live-overview-kpis {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    gap: 8px !important;
    padding-right: 16px !important;
    scroll-snap-type: x proximity;
  }

  .kpi-strip > *,
  .live-kpis > *,
  .kpi-grid > *,
  [class*="kpi-strip"] > *,
  [class*="kpis"] > *,
  .live-overview-kpis > * {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-width: 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    scroll-snap-align: start;
  }

  /* Separación del texto "desliza →" del título del panel */
  .panel-h-title + *,
  .panel__title + *,
  .panel-header > *:not(:first-child),
  [class*="desliza"],
  [data-hint="swipe"] {
    margin-left: 12px !important;
  }

  /* O si "desliza →" está dentro del mismo elemento del título */
  .panel-h-title,
  .panel__title {
    display: inline-block !important;
    margin-right: 12px !important;
  }
}

@media (max-width: 768px) {
  .panel__title::after {
    margin-left: 10px !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}


/* ===========================================
 * Sprint URL · vista detalle url.html
 * Reusa kpi/section-head/chart-section. Layout vertical, mobile 2x2 KPIs.
 * =========================================== */

.url-detail__back {
  margin: 12px 0 0 0;
  padding: 0 4px;
}
.url-detail__back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3); text-decoration: none;
  letter-spacing: 0.1em; padding: 6px 0;
  transition: color 150ms;
}
.url-detail__back-link:hover { color: var(--yellow); }
.url-detail__back-arrow { font-size: 16px; }

.url-detail__hero {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; margin: 16px 0;
}
.url-detail__hero-thumb {
  width: 200px; height: 130px; border-radius: 6px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #2A2A3A, #1C1C2A);
}
.url-detail__hero-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3);
  letter-spacing: 0.05em; margin-bottom: 12px;
}
.url-detail__sep { padding: 0 8px; opacity: 0.5; }
.url-detail__hero-title {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.3; margin: 0 0 12px 0;
  color: var(--text);
}
.url-detail__hero-url {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3); text-decoration: none;
  word-break: break-all;
}
.url-detail__hero-url:hover { color: var(--yellow); }

/* BUG 3 fix · NO override de columnas · hereda el grid del .kpis del LIVE
   (7 cols default, 4 cols ≤1500px, 3 cols ≤900px, 2 cols ≤700px). El override
   anterior forzaba 4 cols y rompía el strip de 7 KPIs en url.html. */

.url-detail__chart-section { margin-bottom: 16px; }
.url-detail__chart-svg { height: 220px; }

.url-detail__sources { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.url-detail__source-row {
  display: grid; grid-template-columns: 12px 1fr 50px 70px;
  gap: 12px; align-items: center;
  padding: 10px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px;
}
.url-detail__source-dot { width: 8px; height: 8px; border-radius: 50%; }
.url-detail__source-label { color: var(--text); }
.url-detail__source-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); text-align: right; }
.url-detail__source-pv { font-family: 'Anton', sans-serif; font-size: 16px; color: var(--yellow); text-align: right; letter-spacing: 0.04em; }
.url-detail__sources-empty,
.url-detail__quality-empty,
.url-detail__alerts-empty {
  padding: 24px; text-align: center; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--bg-2); border: 1px dashed var(--line); border-radius: 8px;
  margin-bottom: 16px;
}

/* Sprint url-detail · panel calidad usa los mismos estilos quality-tooltip__*
   pero como bloque normal (no fixed). Wrapper le da fondo, borde y padding · los
   hijos del helper rich (.quality-tooltip__header/criterion/action/footer) aplican
   tipografía idéntica a la del tooltip hover. */
.url-detail__quality {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--mostaza) 0%, var(--morado) 100%) 1;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.url-detail__quality .quality-tooltip__criterion-reason {
  white-space: normal;             /* permite wrap en sección normal · el tooltip
                                       reserva 1 línea por reason en hover */
}
/* Estado vacío de quality (sin score aún) */
.quality-tooltip__empty {
  text-align: center; padding: 12px 0;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  font-style: italic;
}

/* 404 elegante */
.url-detail__notfound {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; gap: 14px; text-align: center;
}
.url-detail__notfound-title {
  font-family: 'Anton', sans-serif; font-size: 28px; color: var(--text);
  letter-spacing: 0.04em;
}
.url-detail__notfound-msg {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-3);
  word-break: break-all; max-width: 600px;
}
.url-detail__notfound-back {
  margin-top: 12px;
  padding: 10px 24px;
  background: var(--yellow); color: #111;
  font-family: 'Anton', sans-serif; letter-spacing: 0.06em;
  text-decoration: none; border-radius: 4px;
  transition: opacity 150ms;
}
.url-detail__notfound-back:hover { opacity: 0.85; }

.url-detail__alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.url-detail__alert {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px;
}
.url-detail__alert--critical { border-left: 3px solid var(--red); }
.url-detail__alert--high     { border-left: 3px solid var(--orange); }
.url-detail__alert--medium   { border-left: 3px solid var(--yellow); }
.url-detail__alert--low      { border-left: 3px solid var(--text-3); }
.url-detail__alert--resolved,
.url-detail__alert--dismissed,
.url-detail__alert--expired { opacity: 0.6; }
.url-detail__alert-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; margin-bottom: 8px;
}
.url-detail__alert-type { font-weight: 700; color: var(--text); }
.url-detail__alert-sev--critical { color: var(--red); }
.url-detail__alert-sev--high     { color: var(--orange); }
.url-detail__alert-sev--medium   { color: var(--yellow); }
.url-detail__alert-status { color: var(--text-3); }
.url-detail__alert-date { margin-left: auto; color: var(--text-3); }
.url-detail__alert-rec { font-size: 13px; color: var(--text); line-height: 1.5; }
.url-detail__alert-rec--empty { color: var(--text-3); font-style: italic; }

@media (max-width: 768px) {
  .url-detail__hero {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 12px;
  }
  .url-detail__hero-thumb { width: 100%; height: 160px; }
  .url-detail__hero-title { font-size: 18px; }
  .url-detail__hero-meta { font-size: 10px; }
  .url-detail__hero-url { font-size: 10px; }

  /* BUG 3 fix · KPIs strip mobile hereda comportamiento del LIVE (horizontal scroll
     en flex con cards de 160px). NO forzar grid 2x2 · rompe la consistencia con LIVE. */

  .url-detail__chart-svg { height: 180px; }

  .url-detail__source-row {
    grid-template-columns: 10px 1fr auto auto;
    gap: 8px; padding: 8px 10px; font-size: 12px;
  }
  .url-detail__source-pv { font-size: 14px; }

  .url-detail__quality-summary {
    grid-template-columns: 60px 1fr; gap: 12px; padding: 14px;
  }
  .url-detail__quality-score { font-size: 28px; padding: 8px 0; }
  .url-detail__quality-action { font-size: 12px; }
  .url-detail__quality-dims { grid-template-columns: 1fr; gap: 8px; }
  .url-detail__quality-dim { padding: 10px; }

  .url-detail__alert-head { font-size: 9px; gap: 8px; }
  .url-detail__alert-rec { font-size: 12px; }
}

/* ===========================================
 * Sprint quality · range tabs chart URL + traffic panels + detailed analysis
 * =========================================== */

/* Range bar dentro del section-head right · estilo idéntico a las range-bar del LIVE */
.url-detail__range-bar {
  display: inline-flex;
  gap: 4px;
}
.url-detail__range-bar a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.url-detail__range-bar a:hover { color: var(--text); }
.url-detail__range-bar a.active {
  color: var(--yellow);
  border-color: var(--yellow);
}

/* Tooltip del chart URL · misma estructura que el LIVE chart-tooltip */
.url-detail__chart-tooltip {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  min-width: 180px;
  background: rgba(15, 15, 20, 0.97);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Sección TRAFFIC URL · 2 paneles lado a lado en desktop */
.url-detail__traffic {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 16px;
}
.url-detail__traffic-panel {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px;
}
.url-detail__traffic-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; color: var(--text-3);
  margin-bottom: 12px;
}
.url-detail__traffic-empty {
  color: var(--text-3); font-size: 11px; font-style: italic;
  padding: 12px 0; text-align: center;
}
.url-detail__traffic-foot {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 10px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}

/* TRAFFIC MEDIUM · barras horizontales */
.url-detail__traffic-row {
  display: grid;
  grid-template-columns: 70px 1fr 36px 40px;
  gap: 8px; align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
}
.url-detail__traffic-label { color: var(--text); }
.url-detail__traffic-bar {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.url-detail__traffic-fill { height: 100%; transition: width 250ms ease; }
.url-detail__traffic-pct {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-3); text-align: right;
}
.url-detail__traffic-count {
  font-family: 'Anton', sans-serif; font-size: 14px;
  color: var(--yellow); text-align: right; letter-spacing: 0.04em;
}

/* TRAFFIC SOURCE · mini rows top sources */
.url-detail__source-mini {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 8px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}
.url-detail__source-mini:last-child { border-bottom: none; }
.url-detail__source-mini-dot { width: 6px; height: 6px; border-radius: 50%; }
.url-detail__source-mini-label { color: var(--text); }
.url-detail__source-mini-pv {
  font-family: 'Anton', sans-serif; font-size: 14px;
  color: var(--yellow); letter-spacing: 0.04em;
}

/* Análisis detallado · botón + bloque resultado */
.url-detail__detailed { margin: 0 0 24px 0; }
.url-detail__detailed-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  font-family: 'Anton', sans-serif;
  font-size: 13px; letter-spacing: 0.08em;
  border: none; border-radius: 4px;
  cursor: pointer;
  transition: opacity 150ms, transform 150ms;
}
.url-detail__detailed-btn--primary {
  background: var(--yellow); color: #111;
  box-shadow: 0 0 12px rgba(255, 200, 87, 0.3);
}
.url-detail__detailed-btn--primary:hover { opacity: 0.9; transform: translateY(-1px); }
.url-detail__detailed-btn--secondary {
  background: transparent; color: var(--text-3);
  border: 1px solid var(--line);
  font-size: 10px; padding: 6px 12px;
  letter-spacing: 0.1em;
}
.url-detail__detailed-btn--secondary:hover { color: var(--yellow); border-color: var(--yellow); }
.url-detail__detailed-hint {
  margin-top: 8px;
  font-size: 10px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.url-detail__detailed-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.url-detail__detailed-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--yellow);
}
.url-detail__detailed-body {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--mostaza) 0%, var(--morado) 100%) 1;
  border-radius: 6px;
  padding: 18px 22px;
  font-size: 14px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Manrope', sans-serif;
}
.url-detail__detailed-loading {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 18px;
}
.url-detail__detailed-skeleton {
  height: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 3px; margin-bottom: 8px;
}
.url-detail__detailed-skeleton--short { width: 60%; }
.url-detail__detailed-loading-label {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-3); letter-spacing: 0.08em;
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.url-detail__detailed-error {
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #fca5a5;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}

/* ===========================================
 * Mobile · paneles traffic stack vertical, range bar compacta, botón full-width
 * =========================================== */
@media (max-width: 768px) {
  .url-detail__range-bar a {
    font-size: 9px; padding: 3px 6px;
  }
  .url-detail__traffic {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .url-detail__traffic-panel { padding: 12px; }
  .url-detail__traffic-row {
    grid-template-columns: 56px 1fr 30px 36px;
    gap: 6px;
    font-size: 10px;
  }
  .url-detail__source-mini {
    font-size: 10px;
  }
  .url-detail__detailed-btn--primary {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    font-size: 12px;
  }
  .url-detail__detailed-body {
    padding: 14px 16px;
    font-size: 13px;
  }
  .url-detail__detailed-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .url-detail__chart-tooltip {
    min-width: 140px; font-size: 10px; padding: 8px 10px;
  }
}

/* ===========================================
 * Sprint clon · url.html breakdown block + sidebar paridad
 * =========================================== */

/* Breakdown 6 métricas live · grid horizontal estilo bloque destacado */
.url-detail__breakdown {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.url-detail__breakdown-cell {
  text-align: left;
  padding: 8px 4px;
  border-left: 2px solid rgba(245, 184, 0, 0.18);
  padding-left: 12px;
}
.url-detail__breakdown-cell:first-child { border-left-color: var(--yellow); }
.url-detail__breakdown-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.url-detail__breakdown-value {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* En url.html el dashboard usa solo sidebar LEFT · grid 2 cols (sin sidebar right) */
.page-url-detail .dashboard {
  grid-template-columns: 240px 1fr;
}
@media (max-width: 1100px) {
  .page-url-detail .dashboard { grid-template-columns: 1fr; }
}

/* Mobile · breakdown 2x3, sidebar full-width arriba */
@media (max-width: 768px) {
  .url-detail__breakdown {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
  }
  .url-detail__breakdown-value { font-size: 18px; }
  .url-detail__breakdown-label { font-size: 9px; }

  /* KPIs strip url-detail también horizontal scroll en mobile (igual al LIVE) */
  .page-url-detail .kpis {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .page-url-detail .kpis::-webkit-scrollbar { display: none; }
}

/* BUG 3 fix · panels vacíos sidebar url-detail · microcopy en lugar de cuadro gris muerto */
.panel--empty {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.panel--empty .panel__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.panel--empty .panel__empty-msg {
  text-align: center;
  padding: 14px 8px;
  color: var(--text-3);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-style: italic;
  opacity: 0.7;
}

/* ===========================================
 * Sprint redesign · KPIs strip único + paneles traffic full-width
 * =========================================== */

/* 6 KPIs anchas full-width · clon visual del .kpis del LIVE pero forzado a 6 cols.
   El strip del LIVE tiene 7 cols; aquí adaptamos a 6 para no dejar columna vacía. */
.url-detail__kpis-strip {
  grid-template-columns: repeat(6, 1fr) !important;
  margin-bottom: 24px;
}
@media (max-width: 1500px) {
  .url-detail__kpis-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .url-detail__kpis-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  /* Mobile · horizontal scroll igual que el LIVE strip */
  .url-detail__kpis-strip {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    gap: 10px;
    scrollbar-width: none;
    margin: 0 -12px 16px;
    padding: 0 12px 4px;
  }
  .url-detail__kpis-strip::-webkit-scrollbar { display: none; }
  .url-detail__kpis-strip .kpi {
    flex: 0 0 160px;
    min-width: 160px;
  }
}

/* Paneles traffic 50/50 ancho completo */
.url-detail__traffic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.url-detail__traffic-pane {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
}
.url-detail__pane-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--yellow);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.url-detail__pane-row {
  display: grid;
  grid-template-columns: 90px 1fr 38px 38px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
.url-detail__pane-row:last-child { margin-bottom: 0; }
.url-detail__pane-label {
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.url-detail__pane-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.url-detail__pane-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.url-detail__pane-fill {
  height: 100%;
  transition: width 250ms ease;
}
.url-detail__pane-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}
.url-detail__pane-count {
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  color: var(--yellow);
  letter-spacing: 0.04em;
  text-align: right;
}
.url-detail__pane-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  text-align: right;
}
.url-detail__pane-empty {
  text-align: center;
  padding: 28px 8px;
  color: var(--text-3);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-style: italic;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .url-detail__traffic-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .url-detail__traffic-pane { padding: 16px; }
  .url-detail__pane-row {
    grid-template-columns: 70px 1fr 32px 36px;
    gap: 8px;
    font-size: 11px;
  }
  .url-detail__pane-count { font-size: 14px; }
}

/* TRAFFIC SOURCE pane · solo 3 cols (no pct) */
.url-detail__traffic-pane[data-detail-traffic-source-pane] .url-detail__pane-row {
  grid-template-columns: 1fr 100px 38px;
}
@media (max-width: 768px) {
  .url-detail__traffic-pane[data-detail-traffic-source-pane] .url-detail__pane-row {
    grid-template-columns: 1fr 70px 36px;
  }
}

/* ===========================================
 * Tier gating · bloque premium para análisis detallado (plan Strategic)
 * =========================================== */
.url-detail__premium {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid rgba(245, 184, 0, 0.3);
  border-radius: 8px;
  padding: 20px 24px;
}
.url-detail__premium-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--yellow);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.url-detail__premium-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  font-style: italic;
  margin-bottom: 14px;
  font-family: 'Manrope', sans-serif;
}
.url-detail__premium-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.url-detail__premium-cta strong {
  color: var(--yellow);
  font-weight: 600;
}
@media (max-width: 768px) {
  .url-detail__premium { padding: 16px; }
  .url-detail__premium-body { font-size: 12px; }
}

/* Sprint no-regen · footer simple "Análisis editorial · {fecha}" sin botón regen */
.url-detail__detailed-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-align: right;
}

/* Sprint URLs · empty state historic + microcopy búsqueda */
.urls-empty-state {
  padding: 40px 20px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  margin: 16px 0;
}
.urls-empty-state strong {
  color: var(--yellow);
  font-weight: 700;
}