/* ============================================================
   PYM360 · MÓDULOS COMPRA ÁGIL
   Estilos compartidos por Resultados (resultados.js) e
   Inteligencia de Mercado (mercado.js). Prefijo .res-* / .merc-*.
   Construido sobre los tokens del design system.
   ============================================================ */

/* Subtítulo de página / texto secundario */
.pym-page-sub{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  margin-top:4px;
  line-height:1.45;
}

/* ===== Barra de progreso (importación) ===== */
.res-progress{
  height:6px;
  background:var(--pym-color-surface-2);
  border-radius:var(--pym-radius-pill);
  overflow:hidden;
  max-width:440px;
}
.res-progress-fill{
  height:100%;
  background:var(--pym-color-accent-2);
  border-radius:var(--pym-radius-pill);
  transition:width .4s ease;
}

/* ===== Barra de selector de período ===== */
.res-rango-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px 20px;
  flex-wrap:wrap;
  padding:10px 16px;
  margin-bottom:14px;
}
.res-rango-l{
  display:flex;
  align-items:center;
  gap:9px;
}
.res-rango-ico{
  width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;flex-shrink:0;
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text-muted);
}
.res-rango-ico svg{width:14px;height:14px}
.res-rango-r{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--pym-color-text-muted);
}
.res-rango-val{
  font-family:var(--pym-font-mono);
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
}
.res-rango-dot{color:var(--pym-color-border)}

/* ===== Grid de paneles del dashboard ===== */
.res-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:14px;
  align-items:start;            /* cada card a su alto natural — sin estirar */
}

/* Grid de 12 columnas con spans explícitos (layout deliberado) */
.res-dash-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  align-items:start;
}
.res-dash-grid > .res-col-4{grid-column:span 4}
.res-dash-grid > .res-col-6{grid-column:span 6}
.res-dash-grid > .res-col-8{grid-column:span 8}
.res-dash-grid > .res-col-12{grid-column:span 12}
@media (max-width:900px){
  .res-dash-grid > [class*="res-col-"]{grid-column:span 12}
}
.res-panel-h{
  font-size:var(--pym-fs-xs);
  font-weight:var(--pym-fw-semibold);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--pym-color-text-muted);
  margin-bottom:12px;
}

/* Panel con acento de color por sección (estilo dashboard) */
.res-panel--accent{
  border-top:2px solid var(--res-accent, var(--pym-color-accent-2));
}

/* ===== Fila con barra (tendencias / rankings) ===== */
.res-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
}
.res-row + .res-row{border-top:1px solid var(--pym-color-border)}
.res-row-main{flex:1;min-width:0}
.res-row-label{
  font-size:12px;
  color:var(--pym-color-text);
  margin-bottom:6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.res-row-val{
  width:56px;
  text-align:right;
  font-size:13px;
  font-weight:var(--pym-fw-semibold);
  font-family:var(--pym-font-mono);
  color:var(--pym-color-text);
}
.res-row-sub{
  width:78px;
  text-align:right;
  font-size:11px;
  color:var(--pym-color-text-muted);
  font-family:var(--pym-font-mono);
}

/* ===== Barra ===== */
.res-bar{
  height:8px;
  background:var(--pym-color-surface-2);
  border-radius:var(--pym-radius-pill);
  overflow:hidden;
}
.res-bar-fill{
  height:100%;
  border-radius:var(--pym-radius-pill);
  transition:width .3s ease;
}
.res-bar-fill--ok{background:var(--pym-color-success)}
.res-bar-fill--warn{background:var(--pym-color-warning)}
.res-bar-fill--danger{background:var(--pym-color-danger)}
.res-bar-fill--accent{background:var(--pym-color-accent-2)}
.res-bar-fill--purple{background:var(--pym-color-purple)}

/* ===== Paginador ===== */
.res-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:14px;
  font-size:12px;
  color:var(--pym-color-text-muted);
}

/* ===== Card de análisis IA ===== */
.res-ia-card{
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-left:3px solid var(--pym-color-accent-2);
  border-radius:var(--pym-radius-lg);
  padding:14px 16px;
}
.res-ia-h{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.res-ia-list{
  font-size:12px;
  color:var(--pym-color-text-muted);
  margin:6px 0;
  padding-left:18px;
}
.res-ia-list li{margin-bottom:5px}

/* ===== Grid de datos clave (modal detalle) ===== */
.res-dato-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--pym-color-border);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-lg);
  overflow:hidden;
  margin-bottom:16px;
}
.res-dato{
  background:var(--pym-color-surface);
  padding:9px 12px;
}
.res-dato-lbl{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--pym-color-text-muted);
  margin-bottom:3px;
}
.res-dato-val{
  font-size:13px;
  color:var(--pym-color-text);
}
.res-kv{
  font-size:12.5px;
  margin-bottom:8px;
  line-height:1.5;
}

/* ===== Card de recomendación del consultor IA ===== */
.merc-rec{
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-left:3px solid var(--pym-color-accent-2);
  border-radius:var(--pym-radius-lg);
  padding:18px;
}
.merc-rec-precio{
  font-size:26px;
  font-weight:var(--pym-fw-semibold);
  font-family:var(--pym-font-mono);
  letter-spacing:-.02em;
  color:var(--pym-color-text);
  margin:6px 0 12px;
}
.merc-rec-precio small{
  font-size:12px;
  font-weight:var(--pym-fw-regular);
  color:var(--pym-color-text-muted);
  font-family:var(--pym-font-sans);
}

/* ============================================================
   DASHBOARD RICO — basado en el mockup aprobado (claude.ai/design)
   ============================================================ */

/* Paleta de acentos del dashboard */
.res-dash{
  --ca-indigo:#4f46e5;  --ca-indigo-soft:rgba(79,70,229,.12);
  --ca-emerald:#0e9f6e; --ca-emerald-soft:rgba(14,159,110,.13);
  --ca-rose:#e11d48;    --ca-rose-soft:rgba(225,29,72,.12);
  --ca-amber:#d97706;   --ca-amber-soft:rgba(217,119,6,.14);
  --ca-violet:#7c3aed;  --ca-violet-soft:rgba(124,58,237,.12);
  --ca-blue:#2563eb;    --ca-blue-soft:rgba(37,99,235,.12);
}

/* ===== KPI cards ===== */
.res-kpi-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:1100px){ .res-kpi-row{grid-template-columns:repeat(2,1fr)} }
.res-kpi{
  position:relative;
  overflow:hidden;
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-lg);
  padding:14px 16px;
}
.res-kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ca-accent,var(--ca-indigo));
}
.res-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.res-kpi-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--pym-color-text-muted);font-weight:var(--pym-fw-medium);
}
.res-kpi-ico{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--ca-accent-soft,var(--ca-indigo-soft));
  color:var(--ca-accent,var(--ca-indigo));flex-shrink:0;
}
.res-kpi-ico svg{width:14px;height:14px}
.res-kpi-val{
  font-family:var(--pym-font-mono);font-size:28px;font-weight:var(--pym-fw-semibold);
  letter-spacing:-.025em;color:var(--pym-color-text);margin-top:8px;line-height:1;
}
.res-kpi-val small{font-size:15px;color:var(--pym-color-text-muted);margin-left:1px}
.res-kpi-foot{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.res-trend{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:var(--pym-fw-medium);
  padding:2px 7px;border-radius:var(--pym-radius-pill);
}
.res-trend svg{width:11px;height:11px}
.res-trend--up{color:#047857;background:rgba(16,185,129,.14)}
.res-trend--down{color:#b91c1c;background:rgba(225,29,72,.13)}
.res-trend--flat{color:var(--pym-color-text-muted);background:var(--pym-color-surface-2)}
.res-kpi-sub{font-size:11px;color:var(--pym-color-text-muted)}
.res-spark{position:absolute;right:12px;bottom:10px;width:78px;height:26px;opacity:.85}

/* ===== Panel rico ===== */
.res-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}
.res-panel-title{
  font-size:13.5px;font-weight:var(--pym-fw-semibold);
  letter-spacing:-.01em;color:var(--pym-color-text);
}
.res-panel-desc{font-size:11.5px;color:var(--pym-color-text-muted);margin-top:2px}
.res-panel-chips{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.res-chip{
  border:1px solid var(--pym-color-border);border-radius:var(--pym-radius-sm);
  font-size:11px;padding:3px 8px;color:var(--pym-color-text-dim);
  background:var(--pym-color-surface);white-space:nowrap;
}
.res-chip--accent{
  background:var(--ca-accent-soft,var(--ca-indigo-soft));
  color:var(--ca-accent,var(--ca-indigo));border-color:transparent;
  font-weight:var(--pym-fw-medium);
}

/* ===== Donut ===== */
.res-donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.res-donut{position:relative;flex:0 0 150px;width:150px;height:150px}
.res-donut svg{display:block;width:150px;height:150px}
.res-donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.res-donut-big{font-family:var(--pym-font-mono);font-size:26px;font-weight:var(--pym-fw-semibold);letter-spacing:-.02em;color:var(--pym-color-text)}
.res-donut-lbl{font-size:10px;color:var(--pym-color-text-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.08em}
.res-legend{flex:1;min-width:170px;display:flex;flex-direction:column;gap:7px}
.res-legend-row{
  display:grid;grid-template-columns:12px 1fr auto auto;
  align-items:center;gap:10px;font-size:12px;
  padding:7px 10px;border-radius:var(--pym-radius-sm);
  background:var(--pym-color-surface-2);border:1px solid var(--pym-color-border);
}
.res-legend-sw{width:10px;height:10px;border-radius:3px}
.res-legend-nm{color:var(--pym-color-text-dim)}
.res-legend-ct{color:var(--pym-color-text-muted);font-family:var(--pym-font-mono);font-size:11.5px}
.res-legend-pc{color:var(--pym-color-text);font-family:var(--pym-font-mono);font-weight:var(--pym-fw-semibold);font-size:12px;min-width:42px;text-align:right}

/* ===== Line chart ===== */
.res-line-stats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.res-line-stat{font-size:11px;color:var(--pym-color-text-muted)}
.res-line-stat b{
  display:block;font-family:var(--pym-font-mono);font-size:17px;
  color:var(--pym-color-text);font-weight:var(--pym-fw-semibold);margin-top:2px;
}

/* ===== Bar rankings ===== */
.res-bars{display:flex;flex-direction:column;gap:9px}
.res-bar-item{display:grid;grid-template-columns:20px 1fr 64px;gap:10px;align-items:center}
.res-rank{
  width:20px;height:20px;border-radius:5px;
  background:var(--pym-color-surface-2);color:var(--pym-color-text-muted);
  font-size:10.5px;font-weight:var(--pym-fw-semibold);
  display:grid;place-items:center;border:1px solid var(--pym-color-border);
  font-family:var(--pym-font-mono);
}
.res-bar-body{min-width:0}
.res-bar-nm{
  font-size:12px;color:var(--pym-color-text-dim);
  display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;
}
.res-bar-nm span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-bar-nm .res-bar-meta{
  color:var(--pym-color-text-muted);font-family:var(--pym-font-mono);
  font-size:11px;flex-shrink:0;
}
.res-bar-track{
  position:relative;height:9px;border-radius:5px;
  background:var(--pym-color-surface-2);overflow:hidden;
  border:1px solid var(--pym-color-border);
}
.res-bar-track > i{
  position:absolute;left:0;top:0;bottom:0;border-radius:5px;
  background:var(--ca-accent,var(--ca-indigo));
}
.res-bar-num{
  font-family:var(--pym-font-mono);font-size:12.5px;
  color:var(--pym-color-text);font-weight:var(--pym-fw-semibold);text-align:right;
}
.res-bar-num small{
  color:var(--pym-color-text-muted);font-weight:var(--pym-fw-regular);
  font-size:10px;display:block;margin-top:1px;
}

/* ===== Tabla pivote (análisis cruzado) ===== */
.piv-wrap{overflow:auto;max-height:70vh}
.piv-table{border-collapse:separate;border-spacing:0;font-size:11.5px;width:100%}
.piv-table th{
  position:sticky;top:0;z-index:1;
  background:var(--pym-color-surface-2);
  padding:7px 10px;text-align:right;
  font-weight:var(--pym-fw-semibold);font-size:10.5px;
  color:var(--pym-color-text-muted);white-space:nowrap;
  border-bottom:1px solid var(--pym-color-border);
}
.piv-table th.piv-corner{
  text-align:left;left:0;z-index:2;
  color:var(--pym-color-text-dim);
}
.piv-table th.piv-tot{color:var(--pym-color-text)}
.piv-cell{
  padding:6px 10px;text-align:right;
  font-family:var(--pym-font-mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--pym-color-text);
  border-bottom:1px solid var(--pym-color-border);
  border-left:1px solid var(--pym-color-border);
}
.piv-rowh{
  position:sticky;left:0;z-index:1;
  background:var(--pym-color-surface);
  padding:6px 12px;font-size:11px;color:var(--pym-color-text);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid var(--pym-color-border);
}
.piv-cell.piv-tot,
.piv-totrow .piv-cell{
  font-weight:var(--pym-fw-semibold);
  background:var(--pym-color-surface-2);
}
.piv-totrow .piv-rowh{
  font-weight:var(--pym-fw-semibold);
  background:var(--pym-color-surface-2);
}

/* ===== Tabla de organismos ===== */
.res-org-table{width:100%;border-collapse:collapse;font-size:12.5px}
.res-org-table thead th{
  text-align:left;padding:8px 12px;font-weight:var(--pym-fw-medium);
  font-size:10.5px;color:var(--pym-color-text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--pym-color-border);
  background:var(--pym-color-surface-2);
}
.res-org-table thead th.num{text-align:right}
.res-org-table tbody td{
  padding:9px 12px;border-bottom:1px solid var(--pym-color-border);
  vertical-align:middle;color:var(--pym-color-text);
}
.res-org-table tbody tr:last-child td{border-bottom:none}
.res-org-table tbody tr:hover td{background:var(--pym-color-surface-2)}
.res-org-table td.num{font-family:var(--pym-font-mono);text-align:right;font-variant-numeric:tabular-nums}
.res-org-mark{
  width:28px;height:28px;border-radius:7px;
  background:var(--pym-color-surface-2);color:var(--pym-color-text-dim);
  display:inline-grid;place-items:center;font-size:10.5px;
  font-weight:var(--pym-fw-semibold);font-family:var(--pym-font-mono);
  margin-right:10px;vertical-align:middle;border:1px solid var(--pym-color-border);
}
.res-org-name{color:var(--pym-color-text);font-weight:var(--pym-fw-medium)}
.res-mini-bar{
  position:relative;width:90px;height:6px;border-radius:3px;
  background:var(--pym-color-surface-2);display:inline-block;
  vertical-align:middle;margin-right:8px;border:1px solid var(--pym-color-border);
}
.res-mini-bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}