/*
 * Adaptación oscura del dashboard ejecutivo.
 *
 * dashboard_v2.css conserva estructura y geometría. Esta capa, cargada después
 * del tema general, define contraste, profundidad y estados visuales propios
 * del panel sin modificar cálculos ni comportamiento.
 */

:root {
  --dashboard-panel: #0e2434;
  --dashboard-panel-raised: #132d40;
  --dashboard-panel-soft: #17364a;
  --dashboard-track: #29485b;
  --dashboard-divider: #33566a;
  --dashboard-copy: #d7e3ea;
  --dashboard-muted: #9db1bd;
}

.dashboard-period-card,
.analytics-card,
.recent-panel {
  border-color: var(--border);
  background: linear-gradient(155deg, var(--dashboard-panel-raised), var(--dashboard-panel));
  box-shadow: var(--shadow-sm);
}

.dashboard-period-card small,
.dashboard-section-heading > p,
.chart-note,
.trend-axis,
.visual-ranking-row span,
.metric-footer small,
.operational-metric small {
  color: var(--dashboard-muted);
}

.dashboard-section-heading h2,
.analytics-heading h2,
.visual-ranking-row strong {
  color: var(--text);
}

.analytics-heading a,
.dashboard-panel-heading a,
.dashboard-health-strip a {
  color: var(--brand-strong);
}

/* Indicadores operativos: una misma familia visual con acentos semánticos. */
.operational-metric {
  border-color: var(--border);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 68%),
    var(--dashboard-panel-raised);
  box-shadow: 0 12px 28px rgb(0 0 0 / 16%);
}

.operational-metric > span,
.operational-metric small {
  color: var(--dashboard-muted);
}

.operational-metric strong {
  color: var(--text);
}

.metric-collections {
  border-top-color: var(--dash-cyan);
  background: linear-gradient(145deg, rgb(105 212 234 / 13%), var(--dashboard-panel-raised) 62%);
}

.metric-receivable {
  border-top-color: var(--dash-amber);
  background: linear-gradient(145deg, rgb(244 201 111 / 12%), var(--dashboard-panel-raised) 62%);
}

.metric-purchase {
  border-top-color: var(--dash-blue);
  background: linear-gradient(145deg, rgb(115 184 255 / 13%), var(--dashboard-panel-raised) 62%);
}

.metric-payable {
  border-top-color: var(--dash-rose);
  background: linear-gradient(145deg, rgb(255 154 170 / 12%), var(--dashboard-panel-raised) 62%);
}

.metric-expense {
  border-top-color: #ff9379;
  background: linear-gradient(145deg, rgb(255 147 121 / 13%), var(--dashboard-panel-raised) 62%);
}

.metric-inventory {
  border-top-color: var(--dash-violet);
  background: linear-gradient(145deg, rgb(179 163 255 / 13%), var(--dashboard-panel-raised) 62%);
}

/* Gráfica de evolución. */
.trend-chart-frame {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  gap: .65rem;
}

.trend-y-axis {
  min-width: 4.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .15rem 0 1.35rem;
  color: var(--dashboard-muted);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.trend-chart-canvas {
  min-width: 0;
}

.chart-grid-line {
  stroke: #31576c;
}

.chart-dot {
  stroke: var(--dashboard-panel);
  stroke-width: .72;
}

.chart-legend,
.trend-axis {
  color: var(--dashboard-muted);
}

/* Dona de cobranza. */
.donut-track {
  stroke: var(--dashboard-track);
}

.donut-number {
  fill: var(--text);
}

.donut-label {
  fill: var(--dashboard-muted);
}

.donut-details > div {
  border-color: var(--border);
  background: linear-gradient(145deg, var(--dashboard-panel-soft), var(--dashboard-panel-raised));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.donut-details span {
  color: var(--dashboard-copy);
}

.donut-details strong {
  color: var(--text);
}

/* Proyección: integrada al tema y distinguible sin convertirse en una franja blanca. */
.projection-strip {
  border-color: #584d8a;
  background:
    radial-gradient(circle at 92% 18%, rgb(179 163 255 / 12%), transparent 24rem),
    linear-gradient(135deg, #252541, var(--dashboard-panel-raised));
  box-shadow: var(--shadow-sm);
}

.projection-strip > div {
  border-color: rgb(179 163 255 / 22%);
}

.projection-strip span,
.projection-strip p {
  color: #c0b8e5;
}

.projection-strip strong {
  color: #eeeaff;
}

.projection-strip p > strong {
  color: var(--dash-violet);
}

/* Barras: pistas discretas y progreso protagonista. */
.bar-track {
  fill: var(--dashboard-track);
}

.bar-sales {
  fill: var(--brand-strong);
}

.bar-inventory {
  fill: var(--dash-violet);
}

.visual-ranking-row svg {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 18%));
}

/* Estado saludable sin abandonar la paleta oscura. */
.dashboard-alert-panel {
  border-color: var(--warning-border);
  background: linear-gradient(145deg, var(--warning-soft), var(--dashboard-panel));
}

.dashboard-health-strip {
  border-color: var(--success-border);
  background:
    linear-gradient(135deg, rgb(105 220 162 / 10%), transparent 60%),
    var(--dashboard-panel);
  box-shadow: var(--shadow-sm);
}

.dashboard-health-strip > span {
  background: var(--success-soft);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgb(105 220 162 / 18%);
}

.dashboard-health-strip strong {
  color: var(--success);
}

.dashboard-health-strip small {
  color: var(--dashboard-copy);
}

/* Actividad reciente más compacta y con salida clara al historial. */
.recent-panel .dashboard-panel-heading {
  align-items: center;
}

.recent-panel .dashboard-row {
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.recent-panel .dashboard-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .trend-chart-frame {
    grid-template-columns: 1fr;
  }

  .trend-y-axis {
    display: none;
  }

  .projection-strip > div {
    border-color: rgb(179 163 255 / 22%);
  }

  .dashboard-health-strip {
    align-items: start;
  }
}

@media print {
  .projection-strip,
  .donut-details > div,
  .dashboard-health-strip,
  .operational-metric {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }
}