/* ══════════════════════════════════════════════════════════════════════════════
   MÓDULO DE MÉTRICAS — Filtros en cascada
══════════════════════════════════════════════════════════════════════════════ */
.metrics-filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 14px;
}
.mf-group { display: flex; flex-direction: column; gap: 4px; }
.mf-label {
  font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.mf-select {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: 5px 10px;
  font-size: 12px; font-family: var(--font); min-width: 130px;
  cursor: pointer; transition: border-color var(--dur);
}
.mf-select:focus { outline: none; border-color: var(--accent2); }
.mf-date {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: 5px 10px;
  font-size: 12px; font-family: var(--font); cursor: pointer;
}
.mf-actions { display: flex; gap: 6px; align-items: flex-end; margin-left: auto; }
.mf-date-range { display: flex; flex-direction: row; align-items: flex-end; gap: 6px; }
.mf-date-range.hidden { display: none !important; }

/* KPI Strip de Métricas */
.metrics-kpi-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.mkpi-card {
  flex: 1; min-width: 120px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color var(--dur), transform var(--dur);
}
.mkpi-card:hover { transform: translateY(-1px); }
.mkpi-val {
  font-size: 1.3rem; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: -.02em;
}
.mkpi-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.mkpi-blue  { border-color: rgba(0,176,255,0.25); }  .mkpi-blue  .mkpi-val { color: #00B0FF; }
.mkpi-red   { border-color: rgba(255,23,68,0.25); }  .mkpi-red   .mkpi-val { color: #FF1744; }
.mkpi-orange{ border-color: rgba(255,69,0,0.25); }   .mkpi-orange.mkpi-val { color: var(--accent); }
.mkpi-green { border-color: rgba(0,230,118,0.25); }  .mkpi-green .mkpi-val { color: var(--ok); }
.mkpi-teal  { border-color: rgba(0,191,165,0.25); }  .mkpi-teal  .mkpi-val { color: var(--teal); }
.mkpi-purple{ border-color: rgba(170,0,255,0.25); }  .mkpi-purple.mkpi-val { color: var(--purple); }
.mkpi-yellow{ border-color: rgba(255,214,0,0.25); }  .mkpi-yellow.mkpi-val { color: var(--warn); }
.mkpi-gray  { border-color: rgba(255,255,255,0.08); } .mkpi-gray  .mkpi-val { color: var(--text); }
.mkpi-orange .mkpi-val { color: var(--accent); }

/* Charts grid */
.metrics-charts-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.metrics-charts-2col { grid-template-columns: 1fr 1fr; }
.metrics-charts-3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .metrics-charts-2col,
  .metrics-charts-3col { grid-template-columns: 1fr; }
}

/* ── Métricas — Tabs de navegación ──────────────────────────────────────── */
.m-tab-nav {
  display: flex; gap: 3px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 4px;
}
.m-tab-btn {
  flex: 1; padding: 9px 14px; border: none; cursor: pointer;
  background: transparent; color: var(--text-muted);
  font-family: var(--font); font-size: 12px; font-weight: 500;
  border-radius: var(--radius); transition: all var(--dur);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; user-select: none;
}
.m-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.m-tab-btn.active {
  color: var(--accent2); background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.2);
}
.tab-count {
  background: rgba(255,23,68,0.2); color: #FF1744;
  border-radius: 10px; padding: 1px 7px;
  font-size: 10px; font-weight: 700; line-height: 1.5;
  display: inline-block; min-width: 18px; text-align: center;
}
.tab-count.hidden { display: none; }
.m-tab-pane { display: none; }
.m-tab-pane.active { display: block; }

/* Empty state para tab sin datos */
.m-tab-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 56px 24px; gap: 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-align: center;
}
.m-tab-empty svg { opacity: 0.22; color: var(--text-dim); }
.m-tab-empty-title { font-size: 14px; color: var(--text-muted); margin: 0; font-weight: 500; }
.m-tab-empty-sub { font-size: 11px; color: var(--text-dim); margin: 0; font-family: var(--font-mono); }

@media (max-width: 760px) {
  .m-tab-nav { flex-wrap: wrap; }
  .m-tab-btn { flex: none; font-size: 11px; padding: 7px 10px; min-width: 80px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   MÉTRICAS — Recommendation blocks
══════════════════════════════════════════════════════════════════════════════ */
.reco-block {
  margin: 12px 0 20px;
  border: 1px solid rgba(0,212,255,0.18);
  border-radius: var(--radius-lg);
  background: rgba(0,212,255,0.04);
  overflow: hidden;
}
.reco-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(0,212,255,0.06);
  border-bottom: 1px solid rgba(0,212,255,0.12);
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: rgba(0,212,255,0.75); font-family: var(--font-mono); text-transform: uppercase;
}
.reco-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.reco-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; background: var(--surface-2);
  border-radius: var(--radius); border: 1px solid var(--border);
  transition: border-color var(--dur);
}
.reco-item:hover { border-color: rgba(0,212,255,0.2); }
.reco-urgency {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .1em;
  font-family: var(--font-mono); padding: 2px 7px; border-radius: 10px; border: 1px solid;
  margin-top: 1px;
}
.reco-alta  { color: var(--danger); border-color: rgba(255,30,68,0.4);  background: rgba(255,30,68,0.1); }
.reco-media { color: var(--warn);   border-color: rgba(255,160,0,0.4);  background: rgba(255,160,0,0.08); }
.reco-baja  { color: var(--ok);     border-color: rgba(0,200,100,0.3);  background: rgba(0,200,100,0.07); }
.reco-text  { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.reco-desc  { font-size: 12px; color: var(--text); line-height: 1.4; }
.reco-action { font-size: 11px; color: rgba(0,212,255,0.65); font-family: var(--font-mono); }


/* -- Banner sin datos en el periodo ---------------------------------------- */
.metrics-no-data-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.3);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 12px;
  font-size: 12px; color: var(--warn);
}
.metrics-no-data-banner.hidden { display: none; }
.btn-no-data-jump {
  background: rgba(255,193,7,0.15); border: 1px solid rgba(255,193,7,0.4);
  color: var(--warn); border-radius: var(--radius); padding: 4px 12px;
  font-size: 11px; cursor: pointer; transition: background var(--dur);
  white-space: nowrap;
}
.btn-no-data-jump:hover { background: rgba(255,193,7,0.25); }