/* Objetivos (KPI). Vista sobria: neutros del sistema + tres tonos de estado
   apagados (salvia / ocre / terracota, definidos en design-tokens.css). El color nunca va solo: siempre lleva
   punto + texto. Todo cuelga de #view-kpis para no filtrarse a otras vistas. */
#view-kpis {
  --kpi-good: var(--tone-good); --kpi-good-bar: var(--tone-good-bar); --kpi-good-soft: var(--tone-good-soft);
  --kpi-warn: var(--tone-warn); --kpi-warn-bar: var(--tone-warn-bar); --kpi-warn-soft: var(--tone-warn-soft);
  --kpi-bad: var(--tone-bad);   --kpi-bad-bar: var(--tone-bad-bar);   --kpi-bad-soft: var(--tone-bad-soft);
  --kpi-track: var(--muted);
  --kpi-hairline: var(--border);
}

#view-kpis .kpi-stack { display: flex; flex-direction: column; gap: 2rem; }

/* Cabecera */
#view-kpis header.kpi-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  background: transparent; border: 0; padding: 0;
}
#view-kpis .kpi-eyebrow {
  font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground);
  letter-spacing: 0.04em; text-transform: uppercase;
}
#view-kpis .kpi-title { font-size: 1.75rem; font-weight: 600; color: var(--foreground); line-height: 1.2; margin-top: 0.25rem; }
#view-kpis .kpi-sub { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.375rem; }
#view-kpis .kpi-sub strong { color: var(--foreground); font-weight: 500; }
#view-kpis .kpi-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px;
  padding: 0.5rem 0.875rem; border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--kpi-hairline); background: var(--card); color: var(--foreground);
  font-size: 0.8125rem; font-weight: 500; transition: background-color .15s;
}
#view-kpis .kpi-btn:hover { background: var(--accent); }
#view-kpis .kpi-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#view-kpis .kpi-btn .ui-icon { font-size: 1rem; color: var(--muted-foreground); }

/* Titular: la cifra arriba, el desglose en una franja debajo */
#view-kpis section.kpi-hero { padding: 0; overflow: hidden; }
#view-kpis .kpi-hero-main { padding: 1.75rem; }
#view-kpis .kpi-hero-value {
  font-size: clamp(2.5rem, 6vw, 3.25rem); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.03em; color: var(--foreground); margin-top: 0.75rem;
}
#view-kpis .kpi-hero-note { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.75rem; }
/* gap de 1px sobre fondo hairline = separadores finos sin bordes dobles */
#view-kpis .kpi-hero-stats {
  display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--kpi-hairline); border-top: 1px solid var(--kpi-hairline);
}
#view-kpis .kpi-hero-stats > .kpi-stat:last-child { grid-column: span 2; }
@media (min-width: 768px) {
  #view-kpis .kpi-hero-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #view-kpis .kpi-hero-stats > .kpi-stat:last-child { grid-column: auto; }
}
#view-kpis .kpi-stat { padding: 1.125rem 1.75rem; background: var(--background); }
#view-kpis .kpi-stat-label { font-size: 0.75rem; color: var(--muted-foreground); }
#view-kpis .kpi-stat-value { font-size: 1.125rem; font-weight: 600; color: var(--foreground); margin-top: 0.25rem; letter-spacing: -0.01em; }

/* Capas */
#view-kpis .kpi-layers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1280px) { #view-kpis .kpi-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
#view-kpis .kpi-layer-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-bottom: 0.875rem; }
#view-kpis .kpi-layer-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--foreground); }
#view-kpis .kpi-layer-title .ui-icon { font-size: 1.125rem; color: var(--muted-foreground); }
#view-kpis .kpi-layer-desc { font-size: 0.8125rem; color: var(--muted-foreground); }
#view-kpis .kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

#view-kpis .kpi-card {
  display: flex; flex-direction: column; padding: 1.25rem;
  background: var(--card); border: 1px solid var(--kpi-hairline); border-radius: var(--radius);
}
#view-kpis .kpi-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
#view-kpis .kpi-card-name { font-size: 0.8125rem; color: var(--muted-foreground); min-width: 0; }
#view-kpis .kpi-card-value { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); margin-top: 0.5rem; line-height: 1.15; }
#view-kpis .kpi-card-target { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }
#view-kpis .kpi-meter { height: 4px; border-radius: 999px; background: var(--kpi-track); overflow: hidden; margin-top: 1.125rem; }
#view-kpis .kpi-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--kpi-tone-bar); }
#view-kpis .kpi-card-foot { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.625rem; font-size: 0.75rem; color: var(--muted-foreground); }
#view-kpis .kpi-card-foot b { font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }
#view-kpis .kpi-card-notes { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--kpi-hairline); }

/* Estado: punto + texto, siempre los dos */
#view-kpis .kpi-status {
  display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0;
  padding: 0.125rem 0.5rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 500; color: var(--kpi-tone); background: var(--kpi-tone-soft);
}
#view-kpis .kpi-status::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--kpi-tone-bar); }
#view-kpis .is-good { --kpi-tone: var(--kpi-good); --kpi-tone-bar: var(--kpi-good-bar); --kpi-tone-soft: var(--kpi-good-soft); }
#view-kpis .is-warn { --kpi-tone: var(--kpi-warn); --kpi-tone-bar: var(--kpi-warn-bar); --kpi-tone-soft: var(--kpi-warn-soft); }
#view-kpis .is-bad  { --kpi-tone: var(--kpi-bad);  --kpi-tone-bar: var(--kpi-bad-bar);  --kpi-tone-soft: var(--kpi-bad-soft); }
#view-kpis .kpi-tone-text { color: var(--kpi-tone); }

/* Tablas */
#view-kpis section.kpi-panel { padding: 0; overflow: hidden; }
#view-kpis .kpi-panel-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--kpi-hairline); }
#view-kpis .kpi-panel-head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--foreground); }
#view-kpis .kpi-panel-head h2 .ui-icon { font-size: 1.125rem; color: var(--muted-foreground); }
#view-kpis .kpi-panel-head p { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.125rem; }
#view-kpis .kpi-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
#view-kpis .kpi-table th {
  padding: 0.75rem 1.5rem; font-size: 0.75rem; font-weight: 500;
  color: var(--muted-foreground); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--kpi-hairline);
}
#view-kpis .kpi-table th:first-child, #view-kpis .kpi-table td:first-child { text-align: left; }
#view-kpis .kpi-table td {
  padding: 0.875rem 1.5rem; text-align: right; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--kpi-hairline); white-space: nowrap;
}
#view-kpis .kpi-table tbody tr:last-child td { border-bottom: 0; }
#view-kpis .kpi-table tbody tr:hover td { background: var(--background); }
#view-kpis .kpi-table td.kpi-strong { color: var(--foreground); font-weight: 500; }
#view-kpis .kpi-table td:first-child { color: var(--foreground); white-space: normal; min-width: 10rem; }

/* Avisos */
#view-kpis .kpi-error {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem;
  border: 1px solid var(--kpi-bad-soft); background: var(--kpi-bad-soft); border-radius: var(--radius); color: var(--kpi-bad);
}
#view-kpis .kpi-error.hidden { display: none; }
#view-kpis .kpi-error p:first-child { font-weight: 600; }
#view-kpis .kpi-error p + p { font-size: 0.8125rem; margin-top: 0.25rem; opacity: 0.9; }
#view-kpis .kpi-spinner {
  width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid var(--kpi-hairline); border-top-color: var(--muted-foreground);
}

@media (max-width: 640px) {
  #view-kpis .kpi-hero-main { padding: 1.25rem; }
  #view-kpis .kpi-stat { padding: 1rem 1.25rem; }
  #view-kpis .kpi-table th, #view-kpis .kpi-table td { padding-left: 1rem; padding-right: 1rem; }
}

/* Las clases de componente de arriba no deben ganar a .hidden (el JS la conmuta) */
#view-kpis .hidden { display: none; }