/* index.css - estilos dedicados de index.html (Tier D, 2026-05-27) */

    /* ============================================================
       DASHBOARD V2 — Ola 16-E
       KPIs mini + gráfico producción + accesos rápidos + atajos
       ============================================================ */
    .kpi-row {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: var(--h-space-3); margin-bottom: var(--h-space-4);
    }
    @media (max-width: 720px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
    .kpi-mini {
      background: var(--h-surface); border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-lg); padding: var(--h-space-4) var(--h-space-5);
      position: relative; overflow: hidden;
      transition: border-color 180ms ease-out, box-shadow 220ms ease-out, transform 180ms ease-out;
    }
    .kpi-mini::after {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at top right, var(--kpi-glow, transparent), transparent 60%);
      opacity: 0; pointer-events: none;
      transition: opacity 220ms ease-out;
    }
    .kpi-mini:hover {
      border-color: var(--h-border-soft);
      box-shadow: var(--h-shadow-sm);
      transform: translateY(-2px);
    }
    .kpi-mini:hover::after { opacity: 0.6; }
    .kpi-mini-label {
      font-size: 10px; color: var(--h-muted);
      text-transform: uppercase; letter-spacing: 1.4px;
      font-weight: 600;
      display: flex; align-items: center; gap: 6px;
    }
    .kpi-mini-label::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--kpi-dot, var(--h-faint));
      flex-shrink: 0;
    }
    .kpi-mini-value {
      font-family: var(--h-font-mono);
      font-size: 30px; font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.5px;
      line-height: 1.1;
      margin-top: 6px;
      color: var(--h-ink);
    }
    .kpi-mini-trend {
      font-size: var(--h-text-xs); color: var(--h-muted);
      margin-top: 4px;
      display: flex; align-items: center; gap: 6px;
    }
    /* Audit sprint 2 §8 — trend chip con icono arrow */
    .kpi-trend-chip {
      display: inline-flex; align-items: center; gap: 2px;
      padding: 1px 6px;
      border-radius: var(--h-radius-pill);
      font-size: 10px;
      font-weight: var(--h-weight-semibold);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }
    .kpi-trend-chip.is-up   { background: var(--h-ok-soft);     color: var(--h-ok); }
    .kpi-trend-chip.is-down { background: var(--h-danger-soft); color: var(--h-danger); }
    .kpi-trend-chip.is-flat { background: var(--h-nest);        color: var(--h-muted); }
    .kpi-trend-chip svg { width: 10px; height: 10px; }
    /* Variantes: dot + glow + color del valor */
    .kpi-mini.is-warn   { --kpi-dot: var(--h-warn);          --kpi-glow: rgba(232,184,75,0.10); }
    .kpi-mini.is-danger { --kpi-dot: var(--h-danger);        --kpi-glow: rgba(184,90,86,0.10); }
    .kpi-mini.is-ok     { --kpi-dot: var(--h-ok);            --kpi-glow: rgba(123,168,138,0.10); }
    .kpi-mini.is-info   { --kpi-dot: var(--hx-steel);        --kpi-glow: rgba(107,141,201,0.10); }
    .kpi-mini.is-brand  { --kpi-dot: var(--h-brand-primary); --kpi-glow: rgba(224,120,102,0.10); }
    .kpi-mini.is-warn .kpi-mini-value   { color: var(--h-warn); }
    .kpi-mini.is-danger .kpi-mini-value { color: var(--h-danger); }
    .kpi-mini.is-ok .kpi-mini-value     { color: var(--h-ok); }
    .kpi-mini.is-info .kpi-mini-value   { color: var(--hx-steel); }
    .kpi-mini.is-brand .kpi-mini-value  { color: var(--h-brand-primary); }

    .dash-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: var(--h-space-4);
    }
    @media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

    .dash-card {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      padding: var(--h-space-4);
    }
    .dash-card-title {
      font-size: var(--h-text-md);
      font-weight: 600;
      color: var(--h-ink);
      margin-bottom: var(--h-space-3);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dash-card-title .section-action { color: var(--h-brand-primary); font-size: var(--h-text-xs); }

    /* Mini gráfico SVG */
    .chart-wrap {
      width: 100%;
      height: 180px;
      position: relative;
    }
    .chart-svg { width: 100%; height: 100%; }
    .chart-bar {
      transition: opacity var(--h-transition-fast);
    }
    .chart-bar:hover { opacity: 0.8; cursor: pointer; }
    .chart-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 180px;
      color: var(--h-muted);
      font-size: var(--h-text-sm);
    }

    /* Lista top prácticas */
    .top-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .top-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--h-space-3);
      align-items: center;
      padding: var(--h-space-2) var(--h-space-3);
      border-radius: var(--h-radius-sm);
      transition: background var(--h-transition-fast);
    }
    .top-item:hover { background: var(--h-nest); }
    .top-rank {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--h-nest);
      color: var(--h-muted);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: var(--h-text-xs);
      font-weight: 700;
      font-family: var(--h-font-mono);
    }
    .top-item:nth-child(1) .top-rank { background: var(--h-warn); color: white; }
    .top-item:nth-child(2) .top-rank { background: var(--h-nest); color: var(--h-ink); }
    .top-item:nth-child(3) .top-rank { background: var(--h-warn-soft); color: var(--h-warn); }
    .top-bar {
      grid-column: 1 / -1;
      height: 4px;
      background: var(--h-nest);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 4px;
    }
    .top-bar-fill {
      height: 100%;
      background: var(--h-brand-primary);
      transition: width var(--h-transition-base);
    }

    /* Accesos rápidos grid */
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--h-space-2);
    }
    .quick-link {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: var(--h-space-3);
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      text-decoration: none;
      color: var(--h-ink);
      transition: all var(--h-transition-fast);
    }
    .quick-link:hover {
      border-color: var(--h-brand-primary);
      box-shadow: var(--h-shadow-sm);
      transform: translateY(-1px);
    }
    .quick-link-icon {
      width: 32px; height: 32px;
      border-radius: var(--h-radius-sm);
      background: var(--h-brand-primary-soft);
      color: var(--h-brand-primary);
      display: flex; align-items: center; justify-content: center;
    }
    .quick-link-icon svg { width: 18px; height: 18px; }
    .quick-link-label { font-weight: 600; font-size: var(--h-text-sm); }
    .quick-link-sub { font-size: var(--h-text-xs); color: var(--h-muted); }

    /* Estado de servicios externos */
    .svc-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--h-space-2);
      align-items: center;
      padding: var(--h-space-2);
      font-size: var(--h-text-sm);
    }
    .svc-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--h-muted);
    }
    .svc-dot.is-ok    { background: var(--h-ok); box-shadow: 0 0 0 3px rgba(110, 157, 126, 0.20); }
    .svc-dot.is-warn  { background: var(--h-warn); }
    .svc-dot.is-down  { background: var(--h-danger); }
    .svc-meta { color: var(--h-muted); font-size: var(--h-text-xs); }
    /* .kbd vive ahora como atom en design-system/atoms/kbd.css */