/* ============================================================
   NTIZAR DATA PACK — KPIs, dashboards, stats
   Depende de: ntizar.css

   Activación: <link rel="stylesheet" href="ntizar.data.css">

   API pública:
     .nz-kpi, .nz-kpi__label, .nz-kpi__value, .nz-kpi__delta
     .nz-stat-tile
     .nz-progress, .nz-progress__bar
     .nz-meter
     .nz-skeleton, .nz-skeleton--text, .nz-skeleton--circle
     .nz-avatar, .nz-avatar-stack
     .nz-timeline, .nz-timeline__item
     .nz-stat-grid--2, --3, --4
     .nz-tag (chip compacto)
   ============================================================ */

@layer ntizar.components {

  .nz :where(.nz-stat-grid) {
    display: grid;
    gap: var(--nz-space-4);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .nz :where(.nz-stat-grid--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nz :where(.nz-stat-grid--3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nz :where(.nz-stat-grid--4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ---------- Rendimiento: content-visibility en grids de stats ----------
     Omite renderizado de celdas fuera de viewport. Mejora dramática en
     dashboards con 12+ stat-tiles. Soporte: Chrome 85+, Firefox 123+, Safari 17.4+
     Uso: <div class="nz-stat-grid nz-stat-grid--4"> ... </div>
  */
  .nz :where(.nz-stat-grid) {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
  }
  .nz :where(.nz-stat-grid--2, .nz-stat-grid--3, .nz-stat-grid--4) {
    contain-intrinsic-size: auto 300px;
  }

  @media (max-width: 860px) {
    .nz :where(.nz-stat-grid--2, .nz-stat-grid--3, .nz-stat-grid--4) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 540px) {
    .nz :where(.nz-stat-grid--2, .nz-stat-grid--3, .nz-stat-grid--4) {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- KPI ---------- */
  .nz :where(.nz-kpi) {
    display: grid;
    gap: 0.4rem;
    padding: var(--nz-space-5);
    border: 1px solid var(--nz-border-soft);
    border-radius: var(--nz-radius-lg);
    background: var(--nz-surface-base);
    box-shadow: var(--nz-shadow-sm);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .nz :where(.nz-kpi)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--nz-color-brand) 6%, transparent), transparent 60%);
    pointer-events: none;
  }

  .nz :where(.nz-kpi--accent)::before {
    background: linear-gradient(135deg, color-mix(in srgb, var(--nz-color-accent) 8%, transparent), transparent 60%);
  }

  .nz :where(.nz-kpi--aurora) {
    border-color: var(--nz-border-brand);
    box-shadow: var(--nz-shadow-aurora);
  }
  .nz :where(.nz-kpi--aurora)::before {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--nz-color-brand) 10%, transparent),
      color-mix(in srgb, var(--nz-color-accent) 10%, transparent) 100%);
  }

  /* ---------- Rendimiento: content-visibility en KPIs ----------
     Útil cuando hay muchos KPIs en un dashboard (12+ elementos).
     El navegador omite el renderizado hasta que el KPI entra en viewport.
  */
  .nz :where(.nz-kpi) {
    contain-intrinsic-size: auto 180px;
  }

  .nz :where(.nz-kpi__label) {
    font-size: var(--nz-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nz-text-muted);
  }

  .nz :where(.nz-kpi__value) {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    color: var(--nz-text-strong);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
  }

  .nz :where(.nz-kpi__sub) {
    font-size: var(--nz-text-sm);
    color: var(--nz-text-muted);
  }

  .nz :where(.nz-kpi__delta) {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--nz-radius-pill);
    font-size: var(--nz-text-xs);
    font-weight: 700;
    width: fit-content;
    background: var(--nz-status-success-soft);
    color: var(--nz-status-success-text);
  }
  .nz :where(.nz-kpi__delta--down) {
    background: var(--nz-status-danger-soft);
    color: var(--nz-status-danger-text);
  }
  .nz :where(.nz-kpi__delta--flat) {
    background: var(--nz-surface-soft);
    color: var(--nz-text-muted);
  }

  /* ---------- STAT TILE (más simple, una sola línea) ---------- */
  .nz :where(.nz-stat-tile) {
    display: flex;
    align-items: center;
    gap: var(--nz-space-3);
    padding: var(--nz-space-4);
    border: 1px solid var(--nz-border-soft);
    border-radius: var(--nz-radius-md);
    background: var(--nz-surface-base);
  }
  .nz :where(.nz-stat-tile__icon) {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--nz-radius-md);
    background: var(--nz-surface-brand-soft);
    color: var(--nz-color-brand-strong);
    font-size: 1.25rem;
    flex: 0 0 auto;
  }
  .nz :where(.nz-stat-tile--accent) .nz-stat-tile__icon {
    background: var(--nz-surface-accent-soft);
    color: var(--nz-color-accent-strong);
  }
  .nz :where(.nz-stat-tile__body) { display: grid; gap: 0.15rem; }
  .nz :where(.nz-stat-tile__value) {
    font-size: var(--nz-text-lg);
    font-weight: 700;
    color: var(--nz-text-strong);
    font-variant-numeric: tabular-nums;
  }
  .nz :where(.nz-stat-tile__label) {
    font-size: var(--nz-text-xs);
    color: var(--nz-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
  }

  /* ---------- PROGRESS ---------- */
  .nz :where(.nz-progress) {
    display: block;
    width: 100%;
    height: 0.625rem;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-surface-soft);
    overflow: hidden;
    border: 1px solid var(--nz-border-soft);
  }
  .nz :where(.nz-progress__bar) {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--nz-gradient-brand);
    transition: width var(--nz-duration-base) var(--nz-ease-standard);
  }
  .nz :where(.nz-progress--accent) .nz-progress__bar { background: var(--nz-gradient-accent); }
  .nz :where(.nz-progress--aurora) .nz-progress__bar { background: var(--nz-gradient-aurora); }
  .nz :where(.nz-progress--lg) { height: 1rem; }
  .nz :where(.nz-progress--sm) { height: 0.375rem; }

  /* ---------- METER (anillo CSS-only) ----------
     Uso: <div class="nz-meter" style="--nz-meter-value: 72;"><span>72%</span></div>
  */
  .nz :where(.nz-meter) {
    --nz-meter-value: 0;
    --nz-meter-size: 7rem;
    --nz-meter-thickness: 0.7rem;
    --nz-meter-color: var(--nz-color-brand);
    width: var(--nz-meter-size);
    height: var(--nz-meter-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
      conic-gradient(var(--nz-meter-color) calc(var(--nz-meter-value) * 1%), var(--nz-surface-soft) 0);
    position: relative;
    flex: 0 0 auto;
  }
  .nz :where(.nz-meter)::before {
    content: "";
    position: absolute;
    inset: var(--nz-meter-thickness);
    border-radius: 50%;
    background: var(--nz-surface-base);
  }
  .nz :where(.nz-meter) > * {
    position: relative;
    font-weight: 800;
    color: var(--nz-text-strong);
    font-variant-numeric: tabular-nums;
  }
  .nz :where(.nz-meter--accent) { --nz-meter-color: var(--nz-color-accent); }
  .nz :where(.nz-meter--aurora) {
    background: conic-gradient(
      from 180deg,
      var(--nz-color-blue-500) 0%,
      var(--nz-color-orange-400) 30%,
      var(--nz-color-orange-500) calc(var(--nz-meter-value) * 1%),
      var(--nz-surface-soft) 0);
  }

  /* ---------- SKELETONS ---------- */
  .nz :where(.nz-skeleton) {
    display: block;
    width: 100%;
    height: 1rem;
    border-radius: var(--nz-radius-sm);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--nz-text-muted) 8%, transparent) 0%,
      color-mix(in srgb, var(--nz-text-muted) 18%, transparent) 50%,
      color-mix(in srgb, var(--nz-text-muted) 8%, transparent) 100%);
    background-size: 200% 100%;
    animation: nz-skeleton-shimmer 1.4s linear infinite;
  }
  .nz :where(.nz-skeleton--text) { height: 0.875rem; max-width: 80%; }
  .nz :where(.nz-skeleton--title) { height: 1.4rem; max-width: 50%; }
  .nz :where(.nz-skeleton--circle) {
    width: 3rem; height: 3rem; border-radius: 50%;
  }
  .nz :where(.nz-skeleton--block) {
    height: 8rem; border-radius: var(--nz-radius-md);
  }

  @keyframes nz-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nz :where(.nz-skeleton) { animation: none; }
  }

  /* ---------- AVATAR ---------- */
  .nz :where(.nz-avatar) {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--nz-gradient-brand);
    color: var(--nz-text-on-brand);
    font-weight: 700;
    font-size: var(--nz-text-sm);
    border: 2px solid var(--nz-surface-base);
    box-shadow: var(--nz-shadow-sm);
    overflow: hidden;
    flex: 0 0 auto;
  }
  .nz :where(.nz-avatar--accent) { background: var(--nz-gradient-accent); }
  .nz :where(.nz-avatar--aurora) { background: var(--nz-gradient-aurora); }
  .nz :where(.nz-avatar--sm) { width: 1.75rem; height: 1.75rem; font-size: var(--nz-text-xs); }
  .nz :where(.nz-avatar--lg) { width: 3.5rem; height: 3.5rem; font-size: var(--nz-text-md); }
  .nz :where(.nz-avatar) img {
    width: 100%; height: 100%; object-fit: cover;
  }

  .nz :where(.nz-avatar-stack) {
    display: inline-flex;
  }
  .nz :where(.nz-avatar-stack) .nz-avatar + .nz-avatar {
    margin-left: -0.65rem;
  }

  /* ---------- TIMELINE ---------- */
  .nz :where(.nz-timeline) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--nz-space-4);
    position: relative;
  }
  .nz :where(.nz-timeline)::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: linear-gradient(180deg, var(--nz-color-brand), var(--nz-color-accent));
    border-radius: 2px;
    opacity: 0.5;
  }
  .nz :where(.nz-timeline__item) {
    position: relative;
    padding-left: 2rem;
  }
  .nz :where(.nz-timeline__item)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--nz-surface-base);
    border: 2px solid var(--nz-color-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-color-brand) 14%, transparent);
  }
  .nz :where(.nz-timeline__item--accent)::before {
    border-color: var(--nz-color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-color-accent) 14%, transparent);
  }
  .nz :where(.nz-timeline__title) {
    font-weight: 700;
    color: var(--nz-text-strong);
  }
  .nz :where(.nz-timeline__meta) {
    font-size: var(--nz-text-xs);
    color: var(--nz-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ---------- TAG (más compacto que badge) ---------- */
  .nz :where(.nz-tag) {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--nz-radius-sm);
    font-size: var(--nz-text-xs);
    font-weight: 600;
    background: var(--nz-surface-soft);
    color: var(--nz-text-default);
    border: 1px solid var(--nz-border-soft);
  }
  .nz :where(.nz-tag--brand) {
    background: var(--nz-surface-brand-soft);
    color: var(--nz-color-brand-strong);
    border-color: color-mix(in srgb, var(--nz-color-brand) 20%, transparent);
  }
  .nz :where(.nz-tag--accent) {
    background: var(--nz-surface-accent-soft);
    color: var(--nz-color-accent-strong);
    border-color: color-mix(in srgb, var(--nz-color-accent) 20%, transparent);
  }

  /* ---------- DATA CARD (card con métrica destacada) ---------- */
  .nz :where(.nz-data-card) {
    display: grid;
    gap: var(--nz-space-3);
    padding: var(--nz-space-5);
    border: 1px solid var(--nz-border-soft);
    border-radius: var(--nz-radius-lg);
    background: var(--nz-surface-base);
    box-shadow: var(--nz-shadow-sm);
  }
  .nz :where(.nz-data-card__head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nz-space-2);
  }
  .nz :where(.nz-data-card__title) {
    font-size: var(--nz-text-sm);
    font-weight: 700;
    color: var(--nz-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
}