/* Grupo VW Accessories Intelligence — Estilos v2 (2026-05-24) */
/* Sobrio, ejecutivo, sin ruido visual. */

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --txt: #1d1d1f;
  --mut: #6e6e73;
  --bd: #d2d2d7;
  --acc: #4a3aff;
  --p1: #d70015;
  --p2: #ff9500;
  --p3: #34c759;
  --p4: #5856d6;
  --ev: #00c7be;
  --warn: #ff9500;
  --ok: #34c759;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* HEADER */
.app-header {
  background: #fff;
  border-bottom: 1px solid var(--bd);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--txt);
  font-weight: 600;
}
.brand-mark {
  background: var(--txt);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.brand small { display: block; font-size: 11px; color: var(--mut); font-weight: 400; }

.main-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.main-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--mut);
  font-size: 13px;
  font-weight: 500;
}
.main-nav a:hover { background: #f5f5f7; color: var(--txt); text-decoration: none; }
.main-nav a.active { background: var(--acc); color: #fff; }

/* MAIN */
.page-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 600;
}
h1 + .lead {
  color: var(--mut);
  margin-bottom: 24px;
  font-size: 14px;
}

section.block {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
section.block > h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
}
section.block > h2 .meta {
  color: var(--mut);
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
}
section.block > .sub {
  color: var(--mut);
  font-size: 12px;
  margin: -6px 0 14px;
}

/* KPIS */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: #f5f5f7;
  border-radius: 10px;
  padding: 14px 16px;
}
.kpi .v { font-size: 26px; font-weight: 600; line-height: 1.1; }
.kpi .l { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.kpi .delta { font-size: 12px; color: var(--mut); margin-top: 4px; }
.kpi.danger .v { color: var(--p1); }
.kpi.warn .v { color: var(--warn); }
.kpi.ok .v { color: var(--ok); }
.kpi.acc .v { color: var(--acc); }

/* TABLAS */
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.tbl th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--bd);
}
table.tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid #efefef;
  vertical-align: top;
}
table.tbl tr:hover td { background: #fafafa; }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .strong { font-weight: 600; }
table.tbl .mut { color: var(--mut); font-size: 11px; }

/* PILLS */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.pill.p1 { background: var(--p1); }
.pill.p3 { background: var(--p2); }
.pill.p4 { background: var(--p3); }
.pill.p5 { background: #8e8e93; }
.pill.foco-1 { background: var(--p1); }
.pill.foco-2 { background: var(--acc); }
.pill.foco-3 { background: var(--p2); }
.pill.ev { background: var(--ev); }
.pill.outline {
  background: transparent;
  color: var(--mut);
  border: 1px solid var(--bd);
}

/* ALERTAS */
.alert {
  background: #fff5e6;
  border: 1px solid #ffd591;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.alert strong { color: var(--warn); }
.alert.danger { background: #ffeded; border-color: #ffb4b4; }
.alert.danger strong { color: var(--p1); }

/* SELECTOR */
.selector-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.selector-row label { font-size: 12px; color: var(--mut); margin-right: 6px; }
.selector-row select, .selector-row input[type="search"] {
  padding: 7px 12px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  min-width: 160px;
}
.selector-row button {
  padding: 7px 14px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.selector-row button:hover { background: var(--acc); color: #fff; border-color: var(--acc); }

/* DETAILS plegables */
details { margin-top: 8px; }
summary {
  cursor: pointer;
  padding: 6px 0;
  color: var(--acc);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}
summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }

/* FOOTER pequeño */
.footer-meta {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--bd);
  font-size: 11px;
  color: var(--mut);
}

/* Grid 2 cols responsive */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .page-shell { padding: 16px; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 6px 10px; font-size: 12px; }
  h1 { font-size: 22px; }
}

/* local-admin nav siempre visible — Control + Salud */
.local-admin-nav { display: inline-block; }

/* Utility classes para evitar estilos inline */
h3.sub-title { font-size: 14px; margin: 16px 0 8px; font-weight: 600; }
.card-model { padding: 18px; }
.card-model .v { font-size: 18px; }
.card-model .row-head { display: flex; justify-content: space-between; align-items: flex-start; }
.card-model .body { margin-top: 10px; font-size: 12px; }
.card-model .mut { margin-bottom: 4px; }
.card-model .notes { margin-top: 6px; }

.glossary { margin-top: 8px; }
.evidence-block { margin: 8px 0 0; }
.evidence-block li { margin: 4px 0; }
table.tbl td.evidence { font-size: 11px; color: var(--mut); max-width: 380px; }
.argument {
  background: #f0f9ff;
  border-left: 3px solid var(--acc);
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 13px;
}
.argument strong { color: var(--acc); }
.source-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--mut);
  background: #efefef;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.empty {
  padding: 16px;
  text-align: center;
  color: var(--mut);
  font-size: 13px;
  background: #fafafa;
  border-radius: 8px;
}

/* Banner disclaimer datos ilustrativos — visible en todas las paginas */
.data-banner {
  background: #fff4ce;
  border-bottom: 1px solid #f0c977;
  color: #6b4a00;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 24px;
  text-align: center;
  letter-spacing: 0.2px;
}
.data-banner strong { color: #5a3d00; }

/* Boton imprimir en header */
.print-btn {
  padding: 7px 14px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  margin-left: 12px;
}
.print-btn:hover { background: var(--acc); color: #fff; border-color: var(--acc); }

/* ============================================================
   GUIA RAPIDA — bloque uniforme al inicio de cada pantalla
   ============================================================ */
.guia-rapida {
  background: #f7f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 0;
  overflow: hidden;
}
.guia-rapida > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-user-select: none;
  user-select: none;
}
.guia-rapida > summary::before { content: ""; }
.guia-rapida[open] > summary { border-bottom: 1px solid #e5e7eb; }
.guia-rapida > summary::after {
  content: "▾ ocultar";
  font-size: 11px;
  color: #6e6e73;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.guia-rapida:not([open]) > summary::after { content: "▸ mostrar"; }

.guia-body { padding: 16px 20px 20px; }

.guia-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.guia-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
}
.guia-card.full { grid-column: 1 / -1; }
.guia-card h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 6px;
}
.guia-card h4 .icon { font-size: 14px; }
.guia-card .content {
  font-size: 13px;
  line-height: 1.55;
  color: #1d1d1f;
}
.guia-card ol, .guia-card ul {
  margin: 0;
  padding-left: 18px;
}
.guia-card ol li, .guia-card ul li { margin-bottom: 3px; }
.guia-card.warn { background: #fffbf2; border-color: #fde68a; }
.guia-card.warn h4 { color: #92400e; }
.guia-card.target { background: #f0f9ff; border-color: #93c5fd; }
.guia-card.target h4 { color: #1e3a8a; }
.guia-card .key { font-weight: 600; color: var(--acc); }
.guia-actions {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.guia-actions .label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.guia-actions span.action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1d1d1f;
}

/* ============================================================
   COMPARADOR — pantalla nueva
   ============================================================ */
.comp-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.comp-plantilla {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comp-plantilla:hover {
  border-color: var(--acc);
  box-shadow: 0 2px 8px rgba(74, 58, 255, 0.1);
}
.comp-plantilla.active {
  border-color: var(--acc);
  background: #f0f9ff;
  box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.18);
}
.comp-plantilla h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}
.comp-plantilla .desc {
  font-size: 12px;
  color: var(--mut);
  line-height: 1.5;
  margin-bottom: 8px;
}
.comp-plantilla .meta {
  font-size: 11px;
  color: var(--mut);
  border-top: 1px solid #efefef;
  padding-top: 8px;
}
.comp-plantilla.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.comp-plantilla.disabled:hover {
  border-color: var(--bd);
  box-shadow: none;
}

.comp-toggle {
  display: inline-flex;
  border: 1px solid var(--bd);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.comp-toggle button {
  padding: 6px 14px;
  border: 0;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  cursor: pointer;
  border-right: 1px solid var(--bd);
}
.comp-toggle button:last-child { border-right: 0; }
.comp-toggle button.active {
  background: var(--acc);
  color: #fff;
}

.comp-chart-wrap {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  min-height: 320px;
}
.comp-lectura {
  background: #f0f9ff;
  border-left: 3px solid var(--acc);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
  border-radius: 0 8px 8px 0;
}

.comp-libre-block {
  background: #fafbfc;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 12px;
}
.comp-libre-block h3 { margin: 0 0 12px; font-size: 14px; }

.export-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  margin-top: 12px;
  align-items: center;
}
.export-bar .label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.export-bar button {
  padding: 6px 12px;
  border: 1px solid var(--bd);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.export-bar button:hover {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}

/* ============================================================
   Frescura — indicadores comunes
   ============================================================ */
.fresh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.fresh-dot.green { background: var(--ok); }
.fresh-dot.amber { background: var(--warn); }
.fresh-dot.red { background: var(--p1); }

/* Estilos para impresion / export PDF */
@media print {
  .app-header { position: static; }
  .main-nav, .print-btn, .selector-row button { display: none !important; }
  section.block { break-inside: avoid; page-break-inside: avoid; }
  body { background: #fff; }
  .footer-meta { font-size: 9px; }
  table.tbl { font-size: 10px; }
  .kpi { background: #fafafa; }
  details > summary { display: none; }
  details > *:not(summary) { display: block !important; }
}

/* ===================== Comparador heatmap (2026-05-26) ===================== */
.heatmap-wrap { overflow-x: auto; margin: 8px 0; }
.heatmap-tbl td { padding: 6px 8px; }
.heatmap-tbl th { font-size: 11px; }
.heatmap-legend {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
  font-size: 11px;
}
.hm-cell {
  padding: 3px 8px; border-radius: 4px; font-weight: 600;
  display: inline-block;
}
.hm-c1 { background: #155724; color: #fff; }       /* mucho mas barato que CUPRA */
.hm-c2 { background: #a3d4a3; color: #155724; }    /* mas barato */
.hm-c3 { background: #f7f9fb; color: #475569; }    /* similar */
.hm-c4 { background: #fdd9a3; color: #78350f; }    /* mas caro */
.hm-c5 { background: #b02230; color: #fff; }       /* mucho mas caro */
.libre-marcas-sel { min-width: 200px; height: auto; }

/* ============================================================
   COMPARADOR PROFESIONAL — inspirado en JATO Dynamics / Pricefx
   ============================================================ */
.pro-exec {
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  border: 1px solid var(--bd); border-left: 4px solid var(--acc);
  border-radius: 10px; padding: 18px 22px; margin-bottom: 18px;
}
.pro-exec h3 { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--mut); margin: 0 0 10px; }
.pro-exec p { font-size: 14px; line-height: 1.55; color: var(--txt); margin: 0; }
.pro-exec p + p { margin-top: 8px; }
.pro-exec strong { color: var(--acc); }
.pro-tag { display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; background: #eef0ff; color: var(--acc); margin-right: 4px; }
.pro-tag.warn { background: #fff4e0; color: #b45309; }
.pro-tag.ok { background: #e7faec; color: #166534; }

.pro-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 18px; }
.pro-kpi { background: var(--card); border: 1px solid var(--bd); border-radius: 10px;
  padding: 16px 18px; position: relative; overflow: hidden; }
.pro-kpi::before { content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; background: var(--acc); }
.pro-kpi.ok::before { background: var(--ok); }
.pro-kpi.warn::before { background: var(--warn); }
.pro-kpi.danger::before { background: var(--p1); }
.pro-kpi .l { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--mut); margin-bottom: 8px; }
.pro-kpi .v { font-size: 26px; font-weight: 700; color: var(--txt); line-height: 1; }
.pro-kpi .u { font-size: 12px; font-weight: 500; color: var(--mut); margin-left: 4px; }
.pro-kpi .d { font-size: 11px; color: var(--mut); margin-top: 6px; }
.pro-kpi .d.ok { color: var(--ok); font-weight: 600; }
.pro-kpi .d.warn { color: var(--warn); font-weight: 600; }
.pro-kpi .d.danger { color: var(--p1); font-weight: 600; }
@media (max-width: 980px) { .pro-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.pro-block { background: var(--card); border: 1px solid var(--bd); border-radius: 10px;
  padding: 0; margin-bottom: 18px; overflow: hidden; }
.pro-block-head { padding: 14px 20px; border-bottom: 1px solid var(--bd);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #fafafa; }
.pro-block-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--txt); }
.pro-block-head .pro-sub { font-size: 12px; color: var(--mut); }
.pro-block-head .pro-controls { display: flex; gap: 8px; align-items: center; }
.pro-ctrl-lbl { font-size: 11px; color: var(--mut); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700; }
#pro-fam-select { padding: 6px 10px; font-size: 12px; border: 1px solid var(--bd);
  border-radius: 6px; background: #fff; }
.pro-block-head .pro-controls select,
.pro-block-head .pro-controls button {
  padding: 6px 10px; font-size: 12px; border: 1px solid var(--bd);
  border-radius: 6px; background: #fff; color: var(--txt); cursor: pointer;
}
.pro-block-head .pro-controls button:hover { background: #f5f5f7; }
.pro-block-head .pro-controls button.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.pro-block-body { padding: 18px 20px; }

.pro-heatmap { display: grid; gap: 1px; background: var(--bd);
  border-radius: 6px; overflow: hidden; font-size: 11px; }
.pro-heatmap .pro-hm-cell { padding: 8px 6px; background: var(--card);
  text-align: center; position: relative; min-height: 24px; }
.pro-heatmap .pro-hm-cell.header { font-weight: 700; background: #f5f5f7;
  color: var(--txt); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.pro-heatmap .pro-hm-cell.row-label { font-weight: 600; background: #f9f9fb;
  color: var(--txt); text-align: left; padding-left: 12px; font-size: 11px;
  text-transform: none; letter-spacing: 0; }
.pro-heatmap .pro-hm-cell.empty { background: #fafafa; color: #c8c8cc; }
.pro-heatmap .pro-hm-cell.cupra { background: #1d1d1f; color: #fff; font-weight: 700; }
.pro-hm-c1 { background: #166534 !important; color: #fff !important; }
.pro-hm-c2 { background: #4ade80 !important; color: #052e16 !important; }
.pro-hm-c3 { background: #d1fae5 !important; color: #065f46 !important; }
.pro-hm-c4 { background: #f5f5f7 !important; color: #475569 !important; }
.pro-hm-c5 { background: #fed7aa !important; color: #7c2d12 !important; }
.pro-hm-c6 { background: #fb923c !important; color: #fff !important; }
.pro-hm-c7 { background: #b91c1c !important; color: #fff !important; }
.pro-heatmap .pro-hm-cell .val { display: block; font-weight: 700; }
.pro-heatmap .pro-hm-cell .n { display: block; font-size: 9px; opacity: 0.75; margin-top: 2px; }
.pro-hm-legend { display: flex; gap: 0; align-items: center; margin-top: 12px;
  font-size: 10px; color: var(--mut); }
.pro-hm-legend .pro-hm-swatch { display: inline-block; width: 32px; height: 14px; }
.pro-hm-legend .label { padding: 0 8px; }

.pro-boxplot { display: flex; flex-direction: column; gap: 8px; }
.pro-boxplot-row { display: grid; grid-template-columns: 110px 1fr 80px;
  align-items: center; gap: 12px; }
.pro-boxplot-row.header { font-size: 10px; font-weight: 700; color: var(--mut);
  text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid var(--bd); padding-bottom: 6px; }
.pro-boxplot-row .brand-label { font-size: 12px; font-weight: 600; color: var(--txt); }
.pro-boxplot-row.cupra .brand-label { color: var(--acc); font-weight: 700; }
.pro-boxplot-row .n-refs { font-size: 11px; color: var(--mut); text-align: right; }
.pro-boxplot-track { position: relative; height: 18px;
  background: #f5f5f7; border-radius: 9px; }
.pro-boxplot-whisker { position: absolute; top: 50%;
  transform: translateY(-50%); height: 1px; background: #94a3b8; }
.pro-boxplot-iqr { position: absolute; top: 3px; bottom: 3px;
  background: #cbd5e1; border-radius: 3px; border: 1px solid #94a3b8; }
.pro-boxplot-row.cupra .pro-boxplot-iqr { background: #c7d2fe; border-color: var(--acc); }
.pro-boxplot-median { position: absolute; top: 1px; bottom: 1px; width: 2px; background: #1d1d1f; }
.pro-boxplot-row.cupra .pro-boxplot-median { background: var(--acc); width: 3px; }
.pro-boxplot-scale { display: grid; grid-template-columns: 110px 1fr 80px;
  gap: 12px; margin-top: 8px; font-size: 10px; color: var(--mut); }
.pro-boxplot-scale .scale-axis { display: flex; justify-content: space-between; }

.pro-gap-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pro-gap-card { background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border: 1px solid #fb923c; border-radius: 8px;
  padding: 14px 16px; position: relative; }
.pro-gap-card .pro-gap-sev { position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.4px; }
.pro-gap-card .pro-gap-sev.alto { background: #fef2f2; color: #991b1b; }
.pro-gap-card .pro-gap-sev.medio { background: #fffbeb; color: #92400e; }
.pro-gap-card .pro-gap-sev.bajo { background: #f0fdf4; color: #166534; }
.pro-gap-card h4 { font-size: 13px; font-weight: 700; margin: 0 0 8px;
  padding-right: 60px; color: var(--txt); }
.pro-gap-card .pro-gap-detail { font-size: 12px; line-height: 1.5;
  color: var(--mut); margin-bottom: 10px; }
.pro-gap-card .pro-gap-metrics { display: flex; gap: 16px; font-size: 11px; }
.pro-gap-card .pro-gap-metrics div { display: flex; flex-direction: column; }
.pro-gap-card .pro-gap-metrics .lbl { color: var(--mut);
  text-transform: uppercase; letter-spacing: 0.4px; font-size: 9px; font-weight: 700; }
.pro-gap-card .pro-gap-metrics .val { font-size: 14px; font-weight: 700;
  color: var(--txt); margin-top: 2px; }

.pro-coverage-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pro-coverage-table th { text-align: left; padding: 8px 10px; font-size: 10px;
  font-weight: 700; color: var(--mut); text-transform: uppercase;
  letter-spacing: 0.5px; border-bottom: 1px solid var(--bd); }
.pro-coverage-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f3; }
.pro-coverage-table tr.cupra td { background: #faf8ff; font-weight: 600; }
.pro-coverage-table .pro-cov-bar-wrap { position: relative; height: 14px;
  background: #f5f5f7; border-radius: 7px; overflow: hidden; min-width: 120px; }
.pro-coverage-table .pro-cov-bar { height: 100%;
  background: linear-gradient(90deg, #818cf8 0%, var(--acc) 100%);
  border-radius: 7px; }
.pro-coverage-table tr.cupra .pro-cov-bar {
  background: linear-gradient(90deg, #1d1d1f 0%, var(--acc) 100%); }
.pro-coverage-table .pro-cov-bar-label { position: absolute; right: 6px;
  top: 50%; transform: translateY(-50%); font-size: 10px;
  font-weight: 700; color: var(--txt); }

.pro-bb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pro-bb-table th { position: sticky; top: 0; background: #1d1d1f; color: #fff;
  padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; }
.pro-bb-table th.num { text-align: right; }
.pro-bb-table th.brand-cupra { background: var(--acc); }
.pro-bb-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f3;
  font-size: 12px; color: var(--txt); }
.pro-bb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pro-bb-table td.brand-cupra { background: #faf8ff; font-weight: 600; }
.pro-bb-table tr:hover td { background: #f7f7fb; }
.pro-bb-table tr:hover td.brand-cupra { background: #f0ebff; }
.pro-bb-table .pro-bb-delta { font-size: 10px; font-weight: 600; }
.pro-bb-table .pro-bb-delta.up { color: var(--p1); }
.pro-bb-table .pro-bb-delta.down { color: var(--ok); }
.pro-bb-table .pro-bb-empty { color: #c8c8cc; }
.pro-bb-wrap { overflow-x: auto; max-height: 600px; }
.pro-spark { display: inline-flex; align-items: flex-end; gap: 1px;
  height: 16px; width: 60px; vertical-align: middle; }
.pro-spark span { flex: 1; background: var(--acc); border-radius: 1px 1px 0 0;
  opacity: 0.7; min-height: 1px; }
.pro-spark.cupra span { background: var(--acc); opacity: 1; }

.pro-oem-watch { display: grid; grid-template-columns: 200px 1fr; gap: 18px; }
.pro-oem-stats { display: flex; flex-direction: column; gap: 10px; }
.pro-oem-stat { background: #f9fafb; border: 1px solid var(--bd);
  border-radius: 8px; padding: 10px 12px; }
.pro-oem-stat .l { font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--mut); }
.pro-oem-stat .v { font-size: 20px; font-weight: 700; color: var(--txt); margin-top: 2px; }
.pro-oem-stat .d { font-size: 10px; color: var(--mut); margin-top: 2px; }
.pro-oem-feed { background: #fafbff; border: 1px solid var(--bd);
  border-radius: 8px; padding: 12px 14px; max-height: 280px; overflow-y: auto; }
.pro-oem-feed h4 { font-size: 11px; font-weight: 700; margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--mut); }
.pro-oem-feed-item { display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #e5e7eb; font-size: 11px; }
.pro-oem-feed-item:last-child { border-bottom: none; }
.pro-oem-feed-item .pro-tier { flex-shrink: 0; padding: 2px 6px;
  border-radius: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; height: fit-content; margin-top: 1px; }
.pro-oem-feed-item .pro-tier.tier-1 { background: #d1fae5; color: #065f46; }
.pro-oem-feed-item .pro-tier.tier-2 { background: #fef3c7; color: #92400e; }
.pro-oem-feed-item .pro-tier.tier-3 { background: #fecaca; color: #991b1b; }
.pro-oem-feed-item .feed-text { flex: 1; color: var(--txt); line-height: 1.4; }
.pro-oem-feed-item .feed-time { color: var(--mut); font-size: 10px;
  white-space: nowrap; margin-left: 4px; }
@media (max-width: 760px) {
  .pro-oem-watch { grid-template-columns: 1fr; }
  .pro-block-head { flex-direction: column; align-items: flex-start; }
}

.pro-scope-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: #fafafa; border: 1px solid var(--bd); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 18px; }
.pro-scope-bar .l { font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--mut); margin-right: 6px; }
.pro-scope-chip { padding: 6px 12px; border: 1px solid var(--bd); border-radius: 16px;
  background: #fff; color: var(--txt); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; }
.pro-scope-chip:hover { background: #f0f0f3; }
.pro-scope-chip.active { background: var(--acc); color: #fff;
  border-color: var(--acc); font-weight: 600; }
.pro-scope-chip.disabled { opacity: 0.4; cursor: not-allowed; }
.pro-scope-bar .sep { width: 1px; height: 18px; background: var(--bd); margin: 0 4px; }

.pro-foot { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #f5f5f7; border: 1px solid var(--bd);
  border-radius: 8px; font-size: 11px; color: var(--mut); margin-top: 14px; }
.pro-foot strong { color: var(--txt); font-weight: 600; }