/* Zaindu — sistema de diseño propio (Spec 002, plan.md §2.1). Sin frameworks ni build. */
@layer tokens, base, layout, components, utilities;

/* ============================== tokens ============================== */
@layer tokens {
  :root {
    color-scheme: light;
    --font: system-ui, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    --radius: 8px; --radius-sm: 6px; --radius-pill: 999px;
    --side-w: 250px; --side-w-mini: 64px; --top-h: 56px;

    --bg: #f3f4f6; --surface: #fff; --surface-2: #f9fafb; --border: #e5e7eb; --border-soft: #f1f2f4;
    --text: #111827; --text-2: #374151; --muted: #5b6472; --link: #1d4ed8;
    --accent: #2563eb; --accent-text: #fff; --focus: #2563eb;
    --shadow: 0 1px 2px rgb(0 0 0 / .05); --shadow-lg: 0 10px 30px rgb(0 0 0 / .15);

    --side-bg: #1f2937; --side-bg-2: #111827; --side-text: #cbd5e1; --side-muted: #94a3b8;
    --side-hover: #374151; --side-sub: #a7b0bd;

    /* Severidad (spec.md §6.1): color sólido + fondo/texto para badges con contraste AA */
    --sev-CRITICAL: #b91c1c; --sev-CRITICAL-bg: #fee2e2; --sev-CRITICAL-fg: #991b1b;
    --sev-HIGH: #ea580c;     --sev-HIGH-bg: #ffedd5;     --sev-HIGH-fg: #9a3412;
    --sev-MEDIUM: #d97706;   --sev-MEDIUM-bg: #fef3c7;   --sev-MEDIUM-fg: #92400e;
    --sev-LOW: #2563eb;      --sev-LOW-bg: #dbeafe;      --sev-LOW-fg: #1e40af;
    --sev-INFO: #94a3b8;     --sev-INFO-bg: #f1f5f9;     --sev-INFO-fg: #475569;
    --sev-UNKNOWN: #7c3aed;  --sev-UNKNOWN-bg: #ede9fe;  --sev-UNKNOWN-fg: #5b21b6;

    /* Semáforo (spec.md §6.2) */
    --light-CRITICAL: #dc2626;  --light-CRITICAL-bg: #fee2e2;  --light-CRITICAL-fg: #991b1b;
    --light-ATTENTION: #d97706; --light-ATTENTION-bg: #fef3c7; --light-ATTENTION-fg: #92400e;
    --light-OK: #16a34a;        --light-OK-bg: #dcfce7;        --light-OK-fg: #166534;
    --light-NO_DATA: #9ca3af;   --light-NO_DATA-bg: #f3f4f6;   --light-NO_DATA-fg: #4b5563;

    /* Categorías y licencias (gráficas) */
    --cat-SCA: #0891b2; --cat-SAST: #4f46e5; --cat-SECRET: #7c3aed; --cat-SBOM: #16a34a;
    --lic-0: #2563eb; --lic-1: #0891b2; --lic-2: #16a34a; --lic-3: #64748b; --lic-4: #d97706; --lic-5: #b91c1c;

    /* Tarjetas KPI: fondos oscurecidos para texto blanco con contraste ≥ 4.5:1 */
    --kpi-blue: #0369a1; --kpi-red: #b91c1c; --kpi-purple: #6d28d9;
    --kpi-green: #15803d; --kpi-amber: #b45309; --kpi-dark: #334155;

    --ok-bg: #dcfce7; --ok-fg: #166534; --err-bg: #fee2e2; --err-fg: #991b1b;
    --warn-bg: #fef3c7; --warn-fg: #92400e; --info-bg: #dbeafe; --info-fg: #1e40af;
    --chart-grid: #eef0f3; --chart-text: #5b6472;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0f141b; --surface: #171d26; --surface-2: #1d2430; --border: #2b3441; --border-soft: #232b37;
      --text: #e5e7eb; --text-2: #cbd5e1; --muted: #9aa4b2; --link: #8ab4ff;
      --accent: #2563eb; --focus: #8ab4ff;
      --shadow: 0 1px 2px rgb(0 0 0 / .4); --shadow-lg: 0 10px 30px rgb(0 0 0 / .5);
      --side-bg: #111721; --side-bg-2: #0b1017; --side-hover: #222b38;
      --sev-CRITICAL-bg: #4c1414; --sev-CRITICAL-fg: #fecaca;
      --sev-HIGH-bg: #4a2410;     --sev-HIGH-fg: #fed7aa;
      --sev-MEDIUM-bg: #45300a;   --sev-MEDIUM-fg: #fde68a;
      --sev-LOW-bg: #172b54;      --sev-LOW-fg: #bfdbfe;
      --sev-INFO-bg: #263241;     --sev-INFO-fg: #cbd5e1;
      --sev-UNKNOWN-bg: #33215a;  --sev-UNKNOWN-fg: #ddd6fe;
      --light-CRITICAL-bg: #4c1414;  --light-CRITICAL-fg: #fecaca;
      --light-ATTENTION-bg: #45300a; --light-ATTENTION-fg: #fde68a;
      --light-OK-bg: #11351f;        --light-OK-fg: #bbf7d0;
      --light-NO_DATA-bg: #263241;   --light-NO_DATA-fg: #cbd5e1;
      --ok-bg: #11351f; --ok-fg: #bbf7d0; --err-bg: #4c1414; --err-fg: #fecaca;
      --warn-bg: #45300a; --warn-fg: #fde68a; --info-bg: #172b54; --info-fg: #bfdbfe;
      --chart-grid: #2b3441; --chart-text: #9aa4b2;
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f141b; --surface: #171d26; --surface-2: #1d2430; --border: #2b3441; --border-soft: #232b37;
    --text: #e5e7eb; --text-2: #cbd5e1; --muted: #9aa4b2; --link: #8ab4ff;
    --accent: #2563eb; --focus: #8ab4ff;
    --shadow: 0 1px 2px rgb(0 0 0 / .4); --shadow-lg: 0 10px 30px rgb(0 0 0 / .5);
    --side-bg: #111721; --side-bg-2: #0b1017; --side-hover: #222b38;
    --sev-CRITICAL-bg: #4c1414; --sev-CRITICAL-fg: #fecaca;
    --sev-HIGH-bg: #4a2410;     --sev-HIGH-fg: #fed7aa;
    --sev-MEDIUM-bg: #45300a;   --sev-MEDIUM-fg: #fde68a;
    --sev-LOW-bg: #172b54;      --sev-LOW-fg: #bfdbfe;
    --sev-INFO-bg: #263241;     --sev-INFO-fg: #cbd5e1;
    --sev-UNKNOWN-bg: #33215a;  --sev-UNKNOWN-fg: #ddd6fe;
    --light-CRITICAL-bg: #4c1414;  --light-CRITICAL-fg: #fecaca;
    --light-ATTENTION-bg: #45300a; --light-ATTENTION-fg: #fde68a;
    --light-OK-bg: #11351f;        --light-OK-fg: #bbf7d0;
    --light-NO_DATA-bg: #263241;   --light-NO_DATA-fg: #cbd5e1;
    --ok-bg: #11351f; --ok-fg: #bbf7d0; --err-bg: #4c1414; --err-fg: #fecaca;
    --warn-bg: #45300a; --warn-fg: #fde68a; --info-bg: #172b54; --info-fg: #bfdbfe;
    --chart-grid: #2b3441; --chart-text: #9aa4b2;
  }
}

/* ============================== base ============================== */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; font: 14px/1.45 var(--font); background: var(--bg); color: var(--text); }
  h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.25; }
  h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 14px; }
  p { margin: 0 0 var(--sp-3); }
  a { color: var(--link); text-decoration: none; }
  a:hover { text-decoration: underline; }
  code, pre, kbd { font-family: var(--mono); font-size: 12.5px; }
  pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
  img, svg { max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
  [hidden] { display: none !important; }
}

/* ============================== layout ============================== */
@layer layout {
  .app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
  .app-main { min-width: 0; display: flex; flex-direction: column; }
  .content { padding: var(--sp-5) var(--sp-6) 40px; flex: 1; }

  /* Menú lateral */
  .sidebar { background: var(--side-bg); color: var(--side-text); min-height: 100vh; }
  .sidebar-inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding-bottom: var(--sp-6); }
  .brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 18px; font-weight: 700;
    letter-spacing: .12em; color: #fff; background: var(--side-bg-2); border-bottom: 1px solid #374151; }
  .brand:hover { text-decoration: none; }
  .brand .ic { width: 26px; height: 26px; color: #60a5fa; }
  .nav-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted);
    padding: 16px 18px 6px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-list, .subnav { list-style: none; margin: 0; padding: 0; }
  .nav-item { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 2px 10px;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit;
    font-size: 13.5px; text-align: left; cursor: pointer; }
  .nav-item:hover { background: var(--side-hover); text-decoration: none; color: #fff; }
  .nav-item.is-active { background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgb(37 99 235 / .4); }
  .nav-item.is-exit { color: #fca5a5; }
  .nav-item .ic { width: 17px; height: 17px; flex: none; }
  .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-badge { background: var(--side-hover); color: #e5e7eb; font-size: 11px; border-radius: 10px; padding: 0 7px; }
  .nav-item.is-active .nav-badge { background: rgb(255 255 255 / .2); }
  .nav-group > summary { list-style: none; }
  .nav-group > summary::-webkit-details-marker { display: none; }
  .nav-caret { transition: transform .15s; }
  .nav-group[open] .nav-caret { transform: rotate(90deg); }
  .subnav a { display: block; margin: 0 10px; padding: 6px 10px 6px 47px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--side-sub); }
  .subnav a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
  .subnav a[aria-current="page"] { color: #fff; font-weight: 600; }
  .nav-form { margin: 0; }

  /* Menú contraído (solo iconos) */
  .nav-collapsed .app { grid-template-columns: var(--side-w-mini) minmax(0, 1fr); }
  .nav-collapsed .sidebar .nav-label, .nav-collapsed .sidebar .nav-badge, .nav-collapsed .sidebar .nav-caret,
  .nav-collapsed .sidebar .subnav, .nav-collapsed .sidebar .brand-name { display: none; }
  .nav-collapsed .sidebar .nav-section-title { font-size: 0; padding: 10px 0 0; border-top: 1px solid var(--side-hover); margin: 6px 12px 0; }
  .nav-collapsed .sidebar .nav-item { justify-content: center; padding: 9px 0; }
  .nav-collapsed .brand { justify-content: center; padding: 0; }

  /* Barra superior */
  .topbar { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center;
    gap: var(--sp-3); padding: 0 var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border); }
  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }
  .topbar > .tb-btn { flex: none; }
  .tb-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-2); cursor: pointer; }
  .tb-btn:hover { background: var(--bg); }
  .tb-btn .ic { width: 19px; height: 19px; }
  .global-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: var(--sp-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; background: var(--surface-2); color: var(--muted); }
  .global-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 7px 0; }
  .global-search input:disabled { cursor: not-allowed; }
  .theme-dark-ic { display: none; }
  :root[data-theme="dark"] .theme-dark-ic { display: inline; }
  :root[data-theme="dark"] .theme-light-ic { display: none; }

  /* Encabezado de pantalla */
  .page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    flex-wrap: wrap; margin-bottom: var(--sp-4); }
  .page-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
  .page-title .ic { width: 22px; height: 22px; color: var(--accent); }
  .page-sub { color: var(--muted); margin: 4px 0 0; }
  .page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0;
    font-size: 13px; color: var(--muted); }
  .crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
  .crumbs-back { display: none; font-size: 13px; }

  /* Rejillas de contenido */
  .stack > * + * { margin-top: var(--sp-4); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
  .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }

  /* Layout de autenticación */
  .auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
  .auth-box { width: 100%; max-width: 420px; }
  .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--sp-5);
    font-weight: 700; letter-spacing: .12em; font-size: 18px; }
  .auth-brand .ic { width: 30px; height: 30px; color: var(--accent); }

  .backdrop { display: none; }

  @media (max-width: 991.98px) {
    .app, .nav-collapsed .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: min(var(--side-w), 85vw); z-index: 40;
      transform: translateX(-100%); transition: transform .2s; }
    .nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
    .nav-open .backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / .4); }
    .nav-collapsed .sidebar .nav-label, .nav-collapsed .sidebar .nav-badge, .nav-collapsed .sidebar .nav-caret,
    .nav-collapsed .sidebar .brand-name { display: revert; }
    .nav-collapsed .sidebar .subnav { display: block; }
    .nav-collapsed .sidebar .nav-section-title { font-size: 10.5px; padding: 16px 18px 6px; border: 0; margin: 0; }
    .nav-collapsed .sidebar .nav-item { justify-content: flex-start; padding: 8px 10px; }
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .user-meta { display: none; }
  }
  @media (max-width: 767.98px) {
    .content { padding: var(--sp-4) var(--sp-4) 32px; }
    .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
    .global-search { display: none; }
    .page-head { flex-direction: column; align-items: flex-start; }
    .crumbs ol { display: none; }
    .crumbs-back { display: inline-flex; align-items: center; gap: 4px; }
    .project-switch > summary small { display: none; }
    .form-grid .field { flex: 1 1 140px; min-width: 0; }
  }
}

/* ============================== components ============================== */
@layer components {
  .ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

  /* Tarjeta y panel con franja de color */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card-body { padding: var(--sp-4); }
  .panel-h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .panel-h h2 { margin: 0; font-size: 15px; }
  .panel-h small { color: var(--muted); }
  .panel-b { padding: 14px var(--sp-4); }
  .panel-b > :last-child { margin-bottom: 0; }
  .accent-blue { border-top: 3px solid var(--accent); }
  .accent-red { border-top: 3px solid var(--light-CRITICAL); }
  .accent-amber { border-top: 3px solid var(--light-ATTENTION); }
  .accent-purple { border-top: 3px solid var(--sev-UNKNOWN); }
  .accent-green { border-top: 3px solid var(--light-OK); }

  /* Tarjetas KPI */
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  .kpi { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);
    color: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .08); }
  .kpi:hover { text-decoration: none; filter: brightness(1.06); }
  .kpi-body { position: relative; z-index: 1; flex: 1; padding: 14px 14px 10px; }
  .kpi-num { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .kpi-label { font-weight: 600; }
  .kpi-sub { font-size: 12px; opacity: .92; margin-top: 2px; }
  .kpi-ic { position: absolute; right: 10px; top: 12px; width: 54px; height: 54px; opacity: .22; }
  .kpi-foot { background: rgb(0 0 0 / .14); text-align: center; font-size: 12.5px; font-weight: 600; padding: 5px; }
  .kpi-blue { background: var(--kpi-blue); } .kpi-red { background: var(--kpi-red); }
  .kpi-purple { background: var(--kpi-purple); } .kpi-green { background: var(--kpi-green); }
  .kpi-amber { background: var(--kpi-amber); } .kpi-dark { background: var(--kpi-dark); }

  /* Severidad */
  .sev { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; line-height: 1.6;
    border-radius: var(--radius-pill); padding: 0 9px; white-space: nowrap; }
  .sev-CRITICAL { background: var(--sev-CRITICAL-bg); color: var(--sev-CRITICAL-fg); }
  .sev-HIGH { background: var(--sev-HIGH-bg); color: var(--sev-HIGH-fg); }
  .sev-MEDIUM { background: var(--sev-MEDIUM-bg); color: var(--sev-MEDIUM-fg); }
  .sev-LOW { background: var(--sev-LOW-bg); color: var(--sev-LOW-fg); }
  .sev-INFO { background: var(--sev-INFO-bg); color: var(--sev-INFO-fg); }
  .sev-UNKNOWN { background: var(--sev-UNKNOWN-bg); color: var(--sev-UNKNOWN-fg); }

  /* Chips (filtros, conteos) */
  .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 2px 10px; font-size: 12.5px; background: var(--surface); color: var(--text-2); white-space: nowrap; }
  a.chip:hover { text-decoration: none; border-color: var(--accent); }
  .chip.is-active { border-color: var(--accent); background: var(--info-bg); color: var(--info-fg); }
  .chip b { font-variant-numeric: tabular-nums; }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; }
  .chip-remove { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; display: inline-flex; }

  /* Semáforo */
  .light { position: relative; display: inline-flex; flex-direction: column; min-width: 128px; padding: 5px 10px 5px 26px;
    border-radius: var(--radius-sm); font-weight: 600; font-size: 12.5px; line-height: 1.35; }
  a.light:hover { text-decoration: none; filter: brightness(.97); }
  .light small { font-weight: 400; font-size: 11px; opacity: .9; }
  .light .dot { position: absolute; left: 10px; top: 10px; width: 9px; height: 9px; border-radius: 50%; }
  .light-CRITICAL { background: var(--light-CRITICAL-bg); color: var(--light-CRITICAL-fg); }
  .light-CRITICAL .dot { background: var(--light-CRITICAL); }
  .light-ATTENTION { background: var(--light-ATTENTION-bg); color: var(--light-ATTENTION-fg); }
  .light-ATTENTION .dot { background: var(--light-ATTENTION); }
  .light-OK { background: var(--light-OK-bg); color: var(--light-OK-fg); }
  .light-OK .dot { background: var(--light-OK); }
  .light-NO_DATA { background: var(--light-NO_DATA-bg); color: var(--light-NO_DATA-fg); }
  .light-NO_DATA .dot { background: var(--light-NO_DATA); }

  /* Badges de estado genéricos */
  .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; line-height: 1.6;
    border-radius: var(--radius-pill); padding: 0 8px; white-space: nowrap; }
  .badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
  .badge-danger { background: var(--err-bg); color: var(--err-fg); }
  .badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
  .badge-info { background: var(--info-bg); color: var(--info-fg); }
  .badge-muted { background: var(--light-NO_DATA-bg); color: var(--light-NO_DATA-fg); }

  /* Avisos en página */
  .alert { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius); border: 1px solid transparent; }
  .alert-warning { background: var(--warn-bg); color: var(--warn-fg); }
  .alert-error { background: var(--err-bg); color: var(--err-fg); }
  .alert-success { background: var(--ok-bg); color: var(--ok-fg); }
  .alert-info { background: var(--info-bg); color: var(--info-fg); }
  .alert .ic { margin-top: 2px; }

  /* Tablas */
  .table-wrap { overflow-x: auto; }
  .table { width: 100%; border-collapse: collapse; }
  .table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
  .table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .table tr.is-clickable { cursor: pointer; }
  .table tr.is-clickable:hover td { background: var(--surface-2); }
  .table-empty { text-align: center; color: var(--muted); padding: var(--sp-6) !important; }
  .kv th { width: 200px; text-transform: none; letter-spacing: 0; font-size: 13px; background: none; vertical-align: top; }
  .row-title { font-weight: 600; display: block; }
  /* Tarjetas por debajo de 992 px (menú en panel): ninguna tabla desborda (US25.5) */
  @media (max-width: 991.98px) {
    .table-cards, .table-cards tbody { display: block; width: 100%; }
    .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table-cards tr { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
    .table-cards td { display: block; border: 0; padding: 4px 12px; text-align: right; }
    .table-cards td::before { content: attr(data-label); float: left; margin-right: var(--sp-3); font-weight: 600; color: var(--muted); text-align: left; max-width: 45%; }
    .table-cards td { overflow-wrap: anywhere; min-width: 0; }
    .kv th { width: 35%; }
    .kv td { overflow-wrap: anywhere; }
  }

  /* Formularios */
  .form-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
  .form-stack > * + * { margin-top: 14px; }
  .field { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
  .field-grow { flex: 1; min-width: 260px; }
  .field label, .field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
  .input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; background: var(--surface); }
  .field input[type="file"] { padding: 5px; }
  .field-hint { font-size: 12px; color: var(--muted); }
  .field-error { font-size: 12px; color: var(--err-fg); }
  .filter-bar { padding: 14px var(--sp-4); }

  /* Botones */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent;
    border-radius: var(--radius-sm); padding: 7px 14px; font-weight: 600; font-size: 13px; line-height: 1.3;
    cursor: pointer; white-space: nowrap; background: var(--accent); color: var(--accent-text); }
  .btn:hover { text-decoration: none; filter: brightness(1.08); }
  .btn:disabled { opacity: .6; cursor: not-allowed; }
  .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-secondary:hover { background: var(--surface-2); filter: none; }
  .btn-danger { background: #b91c1c; color: #fff; }
  .btn-ghost { background: none; color: var(--link); padding-inline: 6px; }
  .btn-sm { padding: 4px 10px; font-size: 12.5px; }
  .btn-block { width: 100%; }
  .inline-form { display: inline; margin: 0; }

  /* Menús desplegables (<details>) */
  .dropdown { position: relative; }
  .dropdown > summary { list-style: none; cursor: pointer; }
  .dropdown > summary::-webkit-details-marker { display: none; }
  .dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 240px; max-height: 70vh;
    overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); }
  .dropdown-menu.is-right { left: auto; right: 0; }
  .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); text-align: left; cursor: pointer; }
  .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); text-decoration: none; }
  .dropdown-menu a[aria-current="true"] { font-weight: 700; color: var(--link); }
  .dropdown-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
  .dropdown-menu .input { margin-bottom: 6px; }
  .dropdown-menu small { color: var(--muted); }
  .project-switch { min-width: 0; }
  .project-switch > summary { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px 10px; font-weight: 600; max-width: 320px; }
  .project-switch > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .project-switch > summary small { color: var(--muted); font-weight: 400; }
  .user-menu > summary { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px; border-radius: var(--radius-sm); }
  .user-menu > summary:hover { background: var(--bg); }
  .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
    font-size: 13px; background: var(--info-bg); color: var(--info-fg); }
  .user-meta { line-height: 1.2; }
  .user-meta small { display: block; color: var(--muted); }

  /* Pestañas */
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); overflow-x: auto; }
  .tabs a { padding: 9px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
  .tabs a:hover { color: var(--text); text-decoration: none; }
  .tabs a[aria-current="page"] { color: var(--link); border-bottom-color: var(--accent); }

  /* Paginación */
  .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4); font-size: 13px; color: var(--muted); }
  .pagination ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .pagination a, .pagination span[aria-current] { display: inline-grid; place-items: center; min-width: 32px; height: 32px;
    padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
  .pagination a:hover { text-decoration: none; background: var(--surface-2); }
  .pagination span[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

  /* Diálogo nativo */
  .dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(480px, calc(100vw - 32px));
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
  .dialog::backdrop { background: rgb(0 0 0 / .45); }
  .dialog-body { padding: var(--sp-5); }
  .dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5);
    background: var(--surface-2); border-top: 1px solid var(--border); }

  /* Notificaciones */
  .toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60; display: flex; flex-direction: column;
    gap: var(--sp-2); width: min(380px, calc(100vw - 32px)); }
  .toast { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: var(--surface); }
  .toast-success { border-left: 4px solid var(--light-OK); }
  .toast-error { border-left: 4px solid var(--light-CRITICAL); }
  .toast-warning { border-left: 4px solid var(--light-ATTENTION); }
  .toast-info { border-left: 4px solid var(--accent); }
  .toast-msg { flex: 1; }
  .toast-close { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; }

  /* Estado vacío */
  .empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--muted); }
  .empty-state > .ic { width: 36px; height: 36px; color: var(--muted); margin-bottom: var(--sp-2); }
  .empty-state h3 { color: var(--text); margin-bottom: 4px; }
  .empty-state-actions { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

  /* Copiar */
  .copy { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
  .copy code { overflow-wrap: anywhere; }
  .copy-btn { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    padding: 3px 6px; cursor: pointer; color: var(--muted); display: inline-flex; }
  .copy-btn:hover { color: var(--text); }
  .copy-btn.is-done { color: var(--light-OK); border-color: var(--light-OK); }
  .code-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: var(--sp-3); overflow-x: auto; }

  /* Datos técnicos plegables */
  .disclosure > summary { cursor: pointer; font-weight: 600; padding: var(--sp-3) var(--sp-4); }
  .disclosure[open] > summary { border-bottom: 1px solid var(--border); }

  /* Indicador de carga HTMX */
  .htmx-indicator { opacity: 0; transition: opacity .2s; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
  .htmx-request.is-loading-target, .htmx-request .is-loading-target { opacity: .55; }
  .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Gráficas SVG (plan.md §6) */
  .chart { display: block; width: 100%; max-width: 760px; height: auto; }
  .chart .grid { stroke: var(--chart-grid); }
  .chart .axis { font-size: 10.5px; fill: var(--chart-text); }
  .chart .axis-label { font-size: 12.5px; fill: var(--text-2); }
  .chart .strong { font-weight: 700; }
  .chart .bar-num { font-size: 11px; fill: #fff; font-weight: 700; pointer-events: none; }
  .chart .bar-num.on-light { fill: #111827; }
  .chart a:hover rect, .chart a:focus rect { opacity: .85; }
  .chart .line { fill: none; stroke-width: 2.2; }
  .donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .donut { width: 160px; flex: none; }
  .donut .ring { fill: none; }
  .donut-num { font-size: 22px; font-weight: 700; fill: var(--text); }
  .donut .axis { font-size: 10.5px; fill: var(--chart-text); }
  .legend { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--text-2); }
  .legend-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 130px; font-size: 13px; }
  .legend-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
  .legend-list b { margin-left: auto; font-variant-numeric: tabular-nums; }
  .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; flex: none; }
  .chart-table-toggle { font-size: 12px; margin-top: var(--sp-2); }
  .chart-table-toggle > summary { cursor: pointer; color: var(--link); }

  .fill-sev-CRITICAL { fill: var(--sev-CRITICAL); } .swatch-sev-CRITICAL { background: var(--sev-CRITICAL); }
  .fill-sev-HIGH { fill: var(--sev-HIGH); }         .swatch-sev-HIGH { background: var(--sev-HIGH); }
  .fill-sev-MEDIUM { fill: var(--sev-MEDIUM); }     .swatch-sev-MEDIUM { background: var(--sev-MEDIUM); }
  .fill-sev-LOW { fill: var(--sev-LOW); }           .swatch-sev-LOW { background: var(--sev-LOW); }
  .fill-sev-INFO { fill: var(--sev-INFO); }         .swatch-sev-INFO { background: var(--sev-INFO); }
  .fill-sev-UNKNOWN { fill: var(--sev-UNKNOWN); }   .swatch-sev-UNKNOWN { background: var(--sev-UNKNOWN); }
  .stroke-cat-SCA { stroke: var(--cat-SCA); }       .fill-cat-SCA { fill: var(--cat-SCA); }       .swatch-cat-SCA { background: var(--cat-SCA); }
  .stroke-cat-SAST { stroke: var(--cat-SAST); }     .fill-cat-SAST { fill: var(--cat-SAST); }     .swatch-cat-SAST { background: var(--cat-SAST); }
  .stroke-cat-SECRET { stroke: var(--cat-SECRET); } .fill-cat-SECRET { fill: var(--cat-SECRET); } .swatch-cat-SECRET { background: var(--cat-SECRET); }
  .stroke-lic-0 { stroke: var(--lic-0); } .swatch-lic-0 { background: var(--lic-0); }
  .stroke-lic-1 { stroke: var(--lic-1); } .swatch-lic-1 { background: var(--lic-1); }
  .stroke-lic-2 { stroke: var(--lic-2); } .swatch-lic-2 { background: var(--lic-2); }
  .stroke-lic-3 { stroke: var(--lic-3); } .swatch-lic-3 { background: var(--lic-3); }
  .stroke-lic-4 { stroke: var(--lic-4); } .swatch-lic-4 { background: var(--lic-4); }
  .stroke-lic-5 { stroke: var(--lic-5); } .swatch-lic-5 { background: var(--lic-5); }
}

/* ---- Fase 5: repositorio, hallazgos y detalle (US21, US25, US26) ---- */
@layer components {
  .repo-head { padding: var(--sp-3) var(--sp-4); }
  .repo-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); margin: 0; }
  .repo-meta dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .repo-meta dd { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
  .repo-meta select { padding: 4px 8px; }
  .cat-num { font-size: 15px; margin-bottom: var(--sp-2); }
  .cat-num strong { font-size: 24px; }
  .finding-cell { min-width: 220px; }
  .finding-cell small { display: block; margin-top: 2px; }
  .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
  .finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .finding-meta .ic { vertical-align: -2px; }
  .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
  .triage-panel { position: sticky; top: var(--sp-4); }
  .fix-line { font-size: 16px; }
  .fix-to strong { background: var(--ok-bg); color: var(--ok-fg); border-radius: var(--radius-sm); padding: 1px 6px; }
  .pre-line { white-space: pre-line; }
  .ref-list { padding-left: 18px; }
  .timeline { list-style: none; margin: 0; padding-left: 0; }
  .timeline > li { position: relative; padding: 0 0 var(--sp-3) var(--sp-5); border-left: 2px solid var(--border); margin-left: 6px; }
  .timeline > li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
  .timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
  @media (max-width: 991.98px) {
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
    .triage-panel { position: static; }
  }
}

/* ---- Fase 6: cargar reportes, tokens, alta y configuración (US23, US24, US28) ---- */
@layer components {
  .narrow { max-width: 640px; }
  .step { border: 0; border-bottom: 1px solid var(--border-soft); margin: 0; padding: var(--sp-4); min-width: 0; }
  .step legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; margin-bottom: var(--sp-3); padding: 0; }
  .step legend + * { clear: both; }
  .step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 12px; }
  .dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6); border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; text-align: center; }
  .dropzone .ic { width: 28px; height: 28px; color: var(--muted); }
  .dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--accent); }
  .dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
  .ci-example > summary { cursor: pointer; font-weight: 600; padding: var(--sp-1) 0; }
  .code-copy { position: relative; margin-top: var(--sp-2); }
  .code-copy .code-block { margin: 0; padding-right: 44px; white-space: pre; overflow-x: auto; }
  .code-copy .copy-btn { position: absolute; top: 8px; right: 8px; }
  .dialog form { margin: 0; }
  .dialog .copy code { word-break: break-all; }
}

/* ---- Fase 7: inicio, línea de tiempo, búsqueda, CSV, formatos (US22, US27, T272–T274) ---- */
@layer components {
  .global-search { position: relative; }
  .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .search-results:empty { display: none; }
  .search-group h3 { margin: 0; padding: 8px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .search-group ul { list-style: none; margin: 0; padding: 0 0 6px; }
  .search-group a { display: block; padding: 6px 12px; color: var(--text); }
  .search-group a:hover, .search-group a:focus { background: var(--surface-2); text-decoration: none; }
  .search-empty { margin: 0; padding: 12px; color: var(--muted); }
  .scan-list { list-style: none; margin: 0; padding: 0; }
  .scan-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-soft); }
  .scan-item:first-child { border-top: 0; }
  .scan-main small { display: block; margin-top: 2px; }
  .scan-sum { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .cat-chip { justify-self: start; }
  .list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .cmd-line { display: flex; align-items: center; gap: var(--sp-2); }
  .cmd-line + .cmd-line { margin-top: 4px; }
  .chart-data { overflow-x: auto; margin-top: var(--sp-2); }
  @media (max-width: 767.98px) {
    .scan-item { grid-template-columns: 1fr; }
    .scan-sum { justify-content: flex-start; }
  }
}

/* ============================== utilities ============================== */
@layer utilities {
  .muted { color: var(--muted); }
  .mono { font-family: var(--mono); font-size: 12.5px; }
  .num { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }
  .break { overflow-wrap: anywhere; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; left: var(--sp-2); top: -40px; z-index: 100; padding: 6px 12px; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; }
  .skip-link:focus { top: var(--sp-2); }
  .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
  .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); }
  .flex { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
  .text-right { text-align: right; }
}