/*
 * KPI Bar (DS V2)
 *
 * Contract
 * - Scope: ONLY under `.ui-v2` (either as an ancestor or on the root itself).
 * - Layout: CSS grid (desktop 6 cols → tablet 3 cols → mobile 2 cols → 1 col if needed).
 * - Card: 102px height, radius 12px, 1px border, surface background.
 * - No gradients. No visible shadow.
 * - Typography:
 *   - Label: 14px, bold, uppercase, text-tertiary
 *   - Value: responsive (clamp), bold, text-primary, tabular numbers
 * - No horizontal overflow.
 *
 * Notes
 * - This stylesheet is intentionally component-scoped and does not redefine global tokens.
 * - Values rely on token variables; no hard-coded palette is introduced.
 *
 * Value hierarchy tuning (2026-02-18)
 * - Desktop: value 20px / 700 for presence without overpowering the hero in 6-column layouts.
 * - Mobile: value 18px.
 * - Descenders (e.g. "g" in "kg") must not be clipped.
 *
 * Header layout (2026-02-18)
 * - Icon + label are rendered on a single line for consistent alignment.
 * - Icon size normalized to match label weight visually.
 *
 * Card centering & hierarchy (2026-02-18)
 * - Center all card content to reduce visual noise in dense grids.
 * - Icon smaller and lighter; value slightly larger for clarity.
 * - Increase vertical breathing room between header and value.
 * - Slightly reduce card height.
 * - Reduce grid gap to avoid a stretched look on desktop.
 */

/* Root container */
.ui-v2 .np-kpi-bar,
.ui-v2.np-kpi-bar {
  width: 100%;
  box-sizing: border-box;
  margin: var(--spacing-4, 16px) 0;
  overflow-x: hidden;
}

/* Grid: 6 → 3 → 2 → 1 */
.ui-v2 .np-kpi-grid,
.ui-v2.np-kpi-bar .np-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Tighten spacing: large desktop grids can otherwise feel "stretched". */
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Desktop adaptation (N < 6)
 *
 * Goal: keep the exact 6-column desktop layout for N=6 (Ingresos/Ventas reference),
 * but avoid the "stretched / empty right side" look when fewer KPI cards exist.
 *
 * Contract:
 * - kpi_bar.html emits data-kpi-count="N".
 * - We override columns only for N=1..5 and only on desktop (>1024px).
 */
@media (min-width: 1025px) {
  .ui-v2.np-kpi-bar[data-kpi-bar="v2"][data-kpi-count="5"] .np-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: calc((5 * 220px) + (4 * 10px));
    margin-left: auto;
    margin-right: auto;
  }

  .ui-v2.np-kpi-bar[data-kpi-bar="v2"][data-kpi-count="4"] .np-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: calc((4 * 220px) + (3 * 10px));
    margin-left: auto;
    margin-right: auto;
  }

  .ui-v2.np-kpi-bar[data-kpi-bar="v2"][data-kpi-count="3"] .np-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: calc((3 * 220px) + (2 * 10px));
    margin-left: auto;
    margin-right: auto;
  }

  .ui-v2.np-kpi-bar[data-kpi-bar="v2"][data-kpi-count="2"] .np-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc((2 * 220px) + (1 * 10px));
    margin-left: auto;
    margin-right: auto;
  }

  .ui-v2.np-kpi-bar[data-kpi-bar="v2"][data-kpi-count="1"] .np-kpi-grid {
    grid-template-columns: 1fr;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  .ui-v2 .np-kpi-grid,
  .ui-v2.np-kpi-bar .np-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ui-v2 .np-kpi-grid,
  .ui-v2.np-kpi-bar .np-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .ui-v2 .np-kpi-grid,
  .ui-v2.np-kpi-bar .np-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.ui-v2 .np-kpi-card,
.ui-v2.np-kpi-bar .np-kpi-card {
  box-sizing: border-box;
  height: 82px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3, 12px);
  /* Slightly reduce vertical padding to improve balance in dense (6-col) grids. */
  padding: 8px 12px;

  width: 100%;

  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);

  text-decoration: none;
  color: inherit;

  text-align: center;

  /* Avoid descender clipping while still preventing sideways overflow. */
  overflow-x: hidden;
  overflow-y: visible;
}

@media (max-width: 1024px) {
  .ui-v2 .np-kpi-card,
  .ui-v2.np-kpi-bar .np-kpi-card {
    padding: var(--spacing-3, 12px);
    gap: var(--spacing-2, 8px);
  }
}

.ui-v2 .np-kpi-card:focus-visible,
.ui-v2.np-kpi-bar .np-kpi-card:focus-visible {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}

/* Header wrapper (icon + label on one line) */
.ui-v2 .kpi-card__head,
.ui-v2.np-kpi-bar .kpi-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

/* Icon slot
 *
 * Supports either:
 * - Emoji/text icon content inside the element, OR
 * - Optional image icon sets via CSS backgrounds (see below).
 */
.ui-v2 .np-kpi-icon,
.ui-v2.np-kpi-bar .np-kpi-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0.75;
}

/* Icono por imagen (icon_src): mismo tamano que el slot emoji (16px) para alineacion con otras vistas. */
.ui-v2 .np-kpi-icon--img,
.ui-v2.np-kpi-bar .np-kpi-icon--img {
  width: 16px;
  height: 16px;
  font-size: 0;
}

.ui-v2 .np-kpi-icon--img img,
.ui-v2.np-kpi-bar .np-kpi-icon--img img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

/* Content */
.ui-v2 .np-kpi-body,
.ui-v2.np-kpi-bar .np-kpi-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 100%;
}

.ui-v2 .np-kpi-label,
.ui-v2.np-kpi-bar .np-kpi-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  min-width: 0;
  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-v2 .np-kpi-value,
.ui-v2.np-kpi-bar .np-kpi-value {
  /* Typography hierarchy (desktop): less aggressive than the initial V2 spec,
    to avoid dominating 6-column KPI grids while keeping good readability. */
  font-size: 22px;
  font-weight: 700;
  /* Use a safe line-height + a tiny bottom padding to prevent descender clipping ("g", "p", "y"). */
  line-height: 1.25;
  padding-bottom: 1px;
  margin-top: 6px;

  /* Contract: values are neutral by default (Ingresos reference).
     Views may opt into semantic coloring by passing explicit classes, but the base
     style is always `--color-text-primary`. */
  color: var(--color-text-primary);
  min-width: 0;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  display: block;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Defensive: prevent nested legacy classes (e.g. spans/links) from overriding the neutral KPI value color. */
.ui-v2 .np-kpi-value *,
.ui-v2.np-kpi-bar .np-kpi-value * {
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Hardening: increase specificity so DS V2 KPI typography wins over legacy per-view rules.
   (Ingresos is the visual reference; Ventas may include additional legacy CSS.) */
.ui-v2.np-kpi-bar[data-kpi-bar="v2"] .np-kpi-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ui-v2.np-kpi-bar[data-kpi-bar="v2"] .np-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  /* Labels largos: hasta 2 lineas en grillas de 2 cols (evita "REVERSIONES..."). 2026-03-29 */
  .ui-v2 .np-kpi-card,
  .ui-v2.np-kpi-bar .np-kpi-card {
    height: auto;
    min-height: 82px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ui-v2 .np-kpi-label,
  .ui-v2.np-kpi-bar .np-kpi-label {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    line-height: 1.2;
    max-height: 2.64em;
  }

  .ui-v2 .np-kpi-value,
  .ui-v2.np-kpi-bar .np-kpi-value {
    font-size: 18px;
    line-height: 1.25;
    margin-top: 6px;
  }
}

/* Optional: image icon set sourced from /static/figma_desing/kpi_*.png
   Enabled by adding data-kpi-icon-set="figma" on .np-kpi-bar (template opt-in). */
.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Hide any emoji/text content when using image icons. */
  font-size: 0;
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--productos {
  background-image: url("../figma_desing/kpi_productos.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--bodegas {
  background-image: url("../figma_desing/kpi_bodegas.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--stock {
  background-image: url("../figma_desing/kpi_stock.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--ventas {
  background-image: url("../figma_desing/kpi_ventas.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--ventashoy {
  background-image: url("../figma_desing/kpi_ventashoy.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--costos-mes {
  background-image: url("../figma_desing/kpi_costos_mes.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="figma"] .np-kpi-icon--iva {
  background-image: url("../figma_desing/kpi_iva.png");
}

/* Optional: ingresos icon set sourced from /static/imagenes/ingresos/kpi_*.png
   Enabled by adding data-kpi-icon-set="ingresos" on .np-kpi-bar. */
.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Hide any emoji/text content when using image icons. */
  font-size: 0;
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--productos {
  background-image: url("/static/imagenes/ingresos/kpi_productos.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--bodegas {
  background-image: url("/static/imagenes/ingresos/kpi_bodegas.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--ingresos {
  background-image: url("/static/imagenes/ingresos/kpi_ingresos.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--compras {
  background-image: url("/static/imagenes/ingresos/kpi_compras.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--produccion {
  background-image: url("/static/imagenes/ingresos/kpi_produccion.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--valor {
  background-image: url("/static/imagenes/ingresos/kpi_valor.png");
}

/* Stock view-specific icons (ingresos icon set) */
.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--stockactual {
  background-image: url("/static/imagenes/ingresos/kpi_stockactual.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--costosproduccion {
  background-image: url("/static/imagenes/ingresos/kpi_costosproduccion.png");
}

/* Ingresos KPI Summary V2 additions (2026-02-19)
 *
 * We intentionally reuse existing assets already present in the repository.
 * No new images are introduced.
 */
.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--stock {
  /* Reuse the shared Figma stock icon asset. */
  background-image: url("/static/figma_desing/kpi_stock.png");
}

.ui-v2.np-kpi-bar[data-kpi-icon-set="ingresos"] .np-kpi-icon--lotes {
  /* No dedicated lot icon exists; reuse the Ingresos 'productos' icon. */
  background-image: url("/static/imagenes/ingresos/kpi_productos.png");
}

/* Optional semantic variants (inherit existing naming from legacy data) */
.ui-v2 .np-kpi-value.success,
.ui-v2.np-kpi-bar .np-kpi-value.success {
  color: var(--color-alert-success, var(--color-text-primary));
}

.ui-v2 .np-kpi-value.warning,
.ui-v2.np-kpi-bar .np-kpi-value.warning {
  color: var(--color-alert-warning, var(--color-text-primary));
}

.ui-v2 .np-kpi-value.danger,
.ui-v2.np-kpi-bar .np-kpi-value.danger {
  color: var(--color-alert-error, var(--color-text-primary));
}

.ui-v2 .np-kpi-value.info,
.ui-v2.np-kpi-bar .np-kpi-value.info {
  color: var(--color-alert-info, var(--color-text-primary));
}