/*
 * Fase 7.3 — Dashboard ejecutivo SaaS
 *
 * Conserva la jerarquía funcional de la fase 3 y elimina los patrones de
 * plantilla: tarjetas uniformes, sombras repetidas, decoración gratuita y
 * simetría automática. La composición se apoya en ritmo, escala, divisores
 * y una sola acción operativa prioritaria.
 */

body.navigation-hierarchy-v1 .dashboard-phase3 {
  --dashboard-rule: color-mix(in srgb, var(--color-border) 88%, transparent);
  --dashboard-soft: color-mix(in srgb, var(--color-canvas) 72%, var(--color-surface));
  --dashboard-dark-rule: color-mix(in srgb, var(--tenant-on-secondary) 18%, transparent);
  display: grid;
  gap: 0;
  padding-bottom: var(--space-10);
  color: var(--color-text);
}

body.navigation-hierarchy-v1 .dashboard-phase3 > * {
  min-width: 0;
}

/* Apertura ejecutiva: una lectura dominante y una sola decisión siguiente. */
body.navigation-hierarchy-v1 .phase3-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .52fr);
  gap: 0;
  border-top: 1px solid var(--dashboard-rule);
  border-bottom: 1px solid var(--dashboard-rule);
  background: var(--color-surface);
}

body.navigation-hierarchy-v1 .phase3-health,
body.navigation-hierarchy-v1 .phase3-next-action,
body.navigation-hierarchy-v1 .phase3-attention,
body.navigation-hierarchy-v1 .phase3-trends,
body.navigation-hierarchy-v1 .phase3-kpis,
body.navigation-hierarchy-v1 .phase3-disclosure {
  border-radius: 0;
  box-shadow: none;
}

body.navigation-hierarchy-v1 .phase3-health {
  min-height: 238px;
  padding: 34px 36px 32px;
  gap: var(--space-8);
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
}

body.navigation-hierarchy-v1 .phase3-health::after {
  display: none;
}

body.navigation-hierarchy-v1 .phase3-health h2 {
  max-width: 17ch;
  color: var(--tenant-on-secondary);
  font-size: clamp(var(--type-3xl), 3.2vw, var(--type-4xl));
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.04;
}

body.navigation-hierarchy-v1 .phase3-health p {
  max-width: 66ch;
  margin-top: var(--space-3);
  color: color-mix(in srgb, var(--tenant-on-secondary) 74%, transparent);
  font-size: var(--type-md);
  line-height: 1.62;
}

body.navigation-hierarchy-v1 .phase3-amounts {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: var(--space-8);
}

body.navigation-hierarchy-v1 .phase3-amounts div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--dashboard-dark-rule);
}

body.navigation-hierarchy-v1 .phase3-amounts dt {
  color: color-mix(in srgb, var(--tenant-on-secondary) 64%, transparent);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: .05em;
}

body.navigation-hierarchy-v1 .phase3-amounts dd {
  margin-top: var(--space-2);
  color: var(--tenant-on-secondary);
  font-size: var(--type-2xl);
  font-weight: 720;
  letter-spacing: -.025em;
}

body.navigation-hierarchy-v1 .phase3-next-action {
  min-height: 238px;
  padding: 34px 32px 30px;
  border-left: 1px solid var(--dashboard-rule);
  color: var(--color-text);
  background: var(--color-surface);
}

body.navigation-hierarchy-v1 .phase3-next-action > span {
  display: none;
}

body.navigation-hierarchy-v1 .phase3-next-action h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--color-text);
  font-size: var(--type-2xl);
  font-weight: 680;
  letter-spacing: -.028em;
  line-height: 1.15;
}

body.navigation-hierarchy-v1 .phase3-next-action p {
  max-width: 40ch;
  margin: var(--space-3) 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--type-sm);
  line-height: 1.62;
}

body.navigation-hierarchy-v1 .phase3-primary-action {
  min-height: 44px;
  margin-top: auto;
  padding: 10px 15px;
  border: 1px solid var(--tenant-secondary);
  border-radius: var(--radius-control);
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
  box-shadow: none;
  font-size: var(--type-sm);
  font-weight: 720;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

body.navigation-hierarchy-v1 .phase3-primary-action:hover {
  border-color: var(--tenant-secondary-hover);
  background: var(--tenant-secondary-hover);
  box-shadow: none;
  transform: none;
}

/* Indicadores como franja de lectura, no cuatro tarjetas independientes. */
body.navigation-hierarchy-v1 .phase3-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) repeat(3, minmax(0, 1fr));
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--dashboard-rule);
  background: transparent;
}

body.navigation-hierarchy-v1 .phase3-kpi {
  min-height: 138px;
  padding: 24px 22px 22px;
  border: 0;
  border-right: 1px solid var(--dashboard-rule);
  color: var(--color-text);
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

body.navigation-hierarchy-v1 .phase3-kpi:last-child {
  border-right: 0;
}

body.navigation-hierarchy-v1 .phase3-kpi:hover {
  background: color-mix(in srgb, var(--tenant-primary) 4%, transparent);
}

body.navigation-hierarchy-v1 .phase3-kpi span {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: 680;
}

body.navigation-hierarchy-v1 .phase3-kpi strong {
  margin-top: var(--space-3);
  color: var(--color-text);
  font-size: var(--type-3xl);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1;
}

body.navigation-hierarchy-v1 .phase3-kpi small {
  padding-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  line-height: 1.45;
}

body.navigation-hierarchy-v1 .phase3-kpi.ok strong {
  color: var(--color-success);
}

body.navigation-hierarchy-v1 .phase3-kpi.warn strong {
  color: var(--color-warning);
}

body.navigation-hierarchy-v1 .phase3-kpi.bad strong {
  color: var(--color-error);
}

/* Secciones de trabajo en flujo editorial. */
body.navigation-hierarchy-v1 .phase3-attention,
body.navigation-hierarchy-v1 .phase3-trends {
  padding: 32px 0;
  border: 0;
  border-bottom: 1px solid var(--dashboard-rule);
  background: transparent;
}

body.navigation-hierarchy-v1 .phase3-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
}

body.navigation-hierarchy-v1 .phase3-section-heading h2 {
  color: var(--color-text);
  font-size: var(--type-xl);
  font-weight: 680;
  letter-spacing: -.022em;
  line-height: 1.2;
}

body.navigation-hierarchy-v1 .phase3-section-heading p {
  max-width: 62ch;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-sm);
  line-height: 1.55;
}

body.navigation-hierarchy-v1 .phase3-attention-total,
body.navigation-hierarchy-v1 .phase3-period {
  padding-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: 680;
}

body.navigation-hierarchy-v1 .phase3-attention-list {
  margin-top: var(--space-5);
  border-top: 1px solid var(--dashboard-rule);
}

body.navigation-hierarchy-v1 .phase3-attention-row {
  min-height: 74px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--dashboard-rule);
  background: transparent;
}

body.navigation-hierarchy-v1 .phase3-attention-row:hover {
  background: color-mix(in srgb, var(--tenant-primary) 3%, transparent);
}

body.navigation-hierarchy-v1 .phase3-attention-row strong {
  color: var(--color-text);
  font-size: var(--type-sm);
  font-weight: 680;
}

body.navigation-hierarchy-v1 .phase3-attention-row small {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  line-height: 1.45;
}

body.navigation-hierarchy-v1 .phase3-attention-row b {
  min-width: 54px;
  color: var(--color-warning);
  font-size: var(--type-2xl);
  font-weight: 720;
  letter-spacing: -.025em;
}

body.navigation-hierarchy-v1 .phase3-attention-row.bad b {
  color: var(--color-error);
}

body.navigation-hierarchy-v1 .phase3-attention-clear {
  padding: var(--space-6) 2px 0;
}

body.navigation-hierarchy-v1 .phase3-attention-clear strong {
  color: var(--color-success);
  font-size: var(--type-sm);
}

body.navigation-hierarchy-v1 .phase3-attention-clear span {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
}

body.navigation-hierarchy-v1 .phase3-trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr);
  gap: 30px;
  margin-top: var(--space-6);
}

body.navigation-hierarchy-v1 .phase3-chart {
  min-height: 328px;
}

body.navigation-hierarchy-v1 .phase3-chart + .phase3-chart {
  padding-left: 30px;
  border-left: 1px solid var(--dashboard-rule);
}

body.navigation-hierarchy-v1 .phase3-chart figcaption {
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

body.navigation-hierarchy-v1 .phase3-chart figcaption strong {
  color: var(--color-text);
  font-size: var(--type-sm);
  font-weight: 680;
}

body.navigation-hierarchy-v1 .phase3-chart figcaption span {
  max-width: 58ch;
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  line-height: 1.5;
}

/* Profundidad secundaria: disponible, pero fuera de la primera lectura. */
body.navigation-hierarchy-v1 .phase3-disclosure {
  border: 0;
  border-bottom: 1px solid var(--dashboard-rule);
  background: transparent;
}

body.navigation-hierarchy-v1 .phase3-disclosure summary {
  min-height: 66px;
  padding: 18px 0;
  color: var(--color-text);
}

body.navigation-hierarchy-v1 .phase3-disclosure summary span {
  font-size: var(--type-sm);
  font-weight: 680;
}

body.navigation-hierarchy-v1 .phase3-disclosure summary small {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: 600;
}

body.navigation-hierarchy-v1 .phase3-disclosure summary::after {
  color: var(--color-text-muted);
  font-size: var(--type-lg);
}

body.navigation-hierarchy-v1 .phase3-disclosure-body {
  padding: 0 0 var(--space-6);
}

body.navigation-hierarchy-v1 .dashboard-phase3 .chart-grid.drill-charts {
  gap: var(--space-6);
}

body.navigation-hierarchy-v1 .dashboard-phase3 .chart-grid.drill-charts .panel {
  padding-top: var(--space-5);
  border-top: 1px solid var(--dashboard-rule);
  background: transparent;
}

body.navigation-hierarchy-v1 .dashboard-phase3 .chart-grid.drill-charts h2 {
  color: var(--color-text);
  font-size: var(--type-sm);
  font-weight: 680;
}

body.navigation-hierarchy-v1 .dashboard-phase3 .tenant-tree.panel {
  background: transparent;
}

@media (max-width: 1080px) {
  body.navigation-hierarchy-v1 .phase3-command-grid {
    grid-template-columns: 1fr;
  }

  body.navigation-hierarchy-v1 .phase3-next-action {
    min-height: 176px;
    border-top: 1px solid var(--dashboard-rule);
    border-left: 0;
  }

  body.navigation-hierarchy-v1 .phase3-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.navigation-hierarchy-v1 .phase3-kpi:nth-child(2) {
    border-right: 0;
  }

  body.navigation-hierarchy-v1 .phase3-kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--dashboard-rule);
  }

  body.navigation-hierarchy-v1 .phase3-trend-grid {
    grid-template-columns: 1fr;
  }

  body.navigation-hierarchy-v1 .phase3-chart + .phase3-chart {
    padding-top: var(--space-6);
    padding-left: 0;
    border-top: 1px solid var(--dashboard-rule);
    border-left: 0;
  }
}

@media (max-width: 700px) {
  body.navigation-hierarchy-v1 .phase3-health,
  body.navigation-hierarchy-v1 .phase3-next-action {
    min-height: 0;
    padding: 26px 22px;
  }

  body.navigation-hierarchy-v1 .phase3-health h2 {
    font-size: var(--type-3xl);
  }

  body.navigation-hierarchy-v1 .phase3-amounts {
    gap: var(--space-5);
  }

  body.navigation-hierarchy-v1 .phase3-kpis {
    grid-template-columns: 1fr;
  }

  body.navigation-hierarchy-v1 .phase3-kpi,
  body.navigation-hierarchy-v1 .phase3-kpi:nth-child(2) {
    min-height: 112px;
    border-right: 0;
    border-bottom: 1px solid var(--dashboard-rule);
  }

  body.navigation-hierarchy-v1 .phase3-kpi:last-child {
    border-bottom: 0;
  }

  body.navigation-hierarchy-v1 .phase3-attention,
  body.navigation-hierarchy-v1 .phase3-trends {
    padding: 26px 0;
  }

  body.navigation-hierarchy-v1 .phase3-section-heading {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  body.navigation-hierarchy-v1 .phase3-attention-total,
  body.navigation-hierarchy-v1 .phase3-period {
    padding-top: 0;
  }

  body.navigation-hierarchy-v1 .phase3-disclosure summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body.navigation-hierarchy-v1 .phase3-disclosure summary small {
    width: calc(100% - 32px);
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 430px) {
  body.navigation-hierarchy-v1 .phase3-amounts {
    grid-template-columns: 1fr;
  }

  body.navigation-hierarchy-v1 .phase3-attention-row {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.navigation-hierarchy-v1 .phase3-primary-action,
  body.navigation-hierarchy-v1 .phase3-kpi,
  body.navigation-hierarchy-v1 .phase3-attention-row {
    transition: none;
  }
}