/* Zahren 0.17.3 · Executive Light Contract
   Geometria compartilhada entre temas. O tema altera somente a cor.
   Referências aprovadas: 06 (KPIs), 14 (faixas operacionais), 15 (consolidado). */

@media screen {
  /* ================================================================
     1. GEOMETRIA ÚNICA — vale igualmente para claro e escuro
     ================================================================ */
  body .btn {
    width: auto;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px;
    padding: 0 15px !important;
    border-radius: 7px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.1;
    white-space: nowrap;
  }
  body .btn.btn-sm {
    min-height: 34px !important;
    height: 34px;
    padding-inline: 12px !important;
  }
  body .page-actions .btn { min-width: 126px !important; }
  body :is(.filter-bar, .filters, .toolbar, .table-toolbar, .control-bar) > .btn {
    width: auto !important;
    min-width: 112px !important;
    justify-self: end;
    align-self: end;
  }
  body .ignored-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(240px, 1.2fr) minmax(220px, .75fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
  }
  body .ignored-filter-bar .filter-submit {
    width: auto !important;
    min-width: 128px !important;
    justify-self: end !important;
  }

  body :is(.manager-summary, .management-kpis, .phase-kpis, .capacity-kpis, .mirror-tracking-kpis) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body .program-pulse {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body .finalized-secondary-kpis {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  body .operational-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
    gap: 12px;
    align-items: stretch;
    margin: 12px 0;
  }
  body .operational-secondary-grid > .operational-snapshot {
    min-width: 0;
    height: 100%;
    margin: 0 !important;
  }
  /* A hierarquia dos blocos secundarios e geometria, nao tema. Sem este
     contrato o claro herdava cabecalho de 58px e o escuro o legado de 36px. */
  body #page .operational-snapshot-secondary {
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  body #page .operational-snapshot-secondary .snapshot-heading {
    min-height: 58px !important;
    margin: 0 !important;
    padding: 12px 15px !important;
  }
  body .snapshot-cards.supply-decision-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  body .snapshot-cards.purchase-coverage-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body .snapshot-cards.aging-snapshot {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  @media (max-width: 1180px) {
    body .operational-secondary-grid { grid-template-columns: 1fr; }
    body .finalized-secondary-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 900px) {
    body :is(.manager-summary, .management-kpis, .phase-kpis, .capacity-kpis, .mirror-tracking-kpis) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body .program-pulse { grid-template-columns: 1fr !important; }
    body :is(.supply-decision-cards, .purchase-coverage-cards, .aging-snapshot) {
      overflow-x: auto !important;
      grid-auto-flow: column !important;
      justify-content: start !important;
    }
    body .snapshot-cards.supply-decision-cards { grid-template-columns: repeat(5, minmax(155px, 1fr)) !important; }
    body .snapshot-cards.purchase-coverage-cards { grid-template-columns: repeat(3, minmax(180px, 1fr)) !important; }
    body .snapshot-cards.aging-snapshot { grid-template-columns: repeat(5, minmax(175px, 1fr)) !important; }
    body .ignored-filter-bar { grid-template-columns: 1fr 1fr auto !important; }
  }
  @media (max-width: 680px) {
    body :is(.manager-summary, .management-kpis, .phase-kpis, .capacity-kpis, .mirror-tracking-kpis),
    body .finalized-secondary-kpis { grid-template-columns: 1fr !important; }
    body .ignored-filter-bar { grid-template-columns: 1fr !important; }
    body .ignored-filter-bar .filter-submit { width: 100% !important; }
  }

  /* ================================================================
     2. PALETA E BASE DO MODO CLARO
     ================================================================ */
  html[data-theme="light"] {
    --x-red: #ef233c;
    --x-red-dark: #c9142d;
    --x-blue: #1267e8;
    --x-blue-dark: #084eae;
    --x-sky: #009fe8;
    --x-teal: #009ca8;
    --x-teal-dark: #006f78;
    --x-green: #0aa657;
    --x-green-dark: #08743f;
    --x-amber: #ee9700;
    --x-amber-dark: #a96900;
    --x-orange: #ef5d28;
    --x-orange-dark: #b63d14;
    --x-purple: #7a42d1;
    --x-purple-dark: #55249e;
    --x-ink: #17252f;
    --x-copy: #344752;
    --x-muted: #61727d;
    --x-line: #d8e0e5;
    --x-line-soft: #e9eef1;
    --x-canvas: #f5f7f9;
    --x-white: #ffffff;

    --accent: var(--x-blue);
    --accent-dark: var(--x-blue-dark);
  }
  html[data-theme="light"] body {
    background: var(--x-canvas) !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body :is(.app-shell, .main, .page) {
    background: transparent !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body :is(.red, .critical, .danger, .tone-red, .is-error) {
    --accent: var(--x-red) !important;
    --accent-dark: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body :is(.blue, .neutral, .tone-blue) {
    --accent: var(--x-blue) !important;
    --accent-dark: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body :is(.teal, .tone-teal) {
    --accent: var(--x-teal) !important;
    --accent-dark: var(--x-teal-dark) !important;
  }
  html[data-theme="light"] body :is(.green, .healthy, .success, .tone-green) {
    --accent: var(--x-green) !important;
    --accent-dark: var(--x-green-dark) !important;
  }
  html[data-theme="light"] body :is(.amber, .yellow, .attention, .warning, .tone-amber, .tone-yellow) {
    --accent: var(--x-amber) !important;
    --accent-dark: var(--x-amber-dark) !important;
  }
  html[data-theme="light"] body :is(.orange, .tone-orange) {
    --accent: var(--x-orange) !important;
    --accent-dark: var(--x-orange-dark) !important;
  }
  html[data-theme="light"] body :is(.purple, .violet, .tone-purple, .tone-violet) {
    --accent: var(--x-purple) !important;
    --accent-dark: var(--x-purple-dark) !important;
  }

  /* ================================================================
     3. SUPERFÍCIES NEUTRAS — branco executivo, sem placas pastel
     ================================================================ */
  html[data-theme="light"] body :is(.top-navigation, .topbar, .sidebar, .nav-submenu) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(
    .page-heading, .panel, .card, .table-card, .chart-card, .chart-panel,
    .analytics-panel, .decision-panel, .alert-panel, .program-batch,
    .program-card, .program-type-card, .shortage-card, .purchase-card,
    .aging-card, .batch-card, .product-card, .report-model-card,
    .setting-card, .settings-card, .summary-card, .sync-card,
    .report-model-builder, .program-type-manager, .program-confirm-panel,
    .program-archive, .phase-registration, .phase-client-filter,
    .phase-saved-panel, .phase-details-panel, .settings-section,
    .settings-side, .settings-form, .user-access, .scenario-panel,
    .activity-builder, .workforce-flow-panel, .mega-source-panel,
    .personal-mega-form, .export-favorites, .picking-client-summary,
    .people-category-panel, .people-category, .ignored-rules,
    .ignored-client-form, .ignored-audit, .help-step, .help-notice,
    .danger-zone, .staging-refresh-card, .decision-command-bar,
    .decision-list, .status-bars, .insight-card, .audit-explainer,
    .program-tab-note, .report-runner, .saved-report-models
  ) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
    box-shadow: 0 5px 16px rgba(23, 37, 47, .055) !important;
  }
  html[data-theme="light"] body #page .page-heading {
    border-left: 3px solid var(--x-red) !important;
  }
  html[data-theme="light"] body #page :is(.page-heading, .panel, .card, .table-card, .chart-card, .chart-panel) :is(h1, h2, h3, h4, strong) {
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(.page-heading, .panel, .card) :is(p, small) {
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body #page :is(.panel-head, .card-head, .section-title, .report-model-builder-head) {
    border-bottom-color: var(--x-line-soft) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(.eyebrow, .page-heading .eyebrow) {
    color: var(--x-red) !important;
    opacity: 1 !important;
  }

  /* ================================================================
     4. KPI PRINCIPAL — modelo 06/15
     Branco, acento vivo, microárea localizada. Nunca fundo integral.
     ================================================================ */
  html[data-theme="light"] body #page :is(
    .kpi-grid > .kpi-card,
    .manager-summary > article,
    .management-kpis > article,
    .ptn-indicator-grid > button,
    .ignored-kpis > .kpi-card,
    .summary-grid > article,
    .mirror-tracking-kpis > article
  ) {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--x-line) !important;
    border-left: 2px solid var(--accent) !important;
    border-radius: 8px !important;
    background:
      radial-gradient(75% 62% at 103% 108%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 68%),
      #fff !important;
    background-color: #fff !important;
    color: var(--x-ink) !important;
    box-shadow: 0 6px 17px rgba(23, 37, 47, .065) !important;
  }
  html[data-theme="light"] body #page :is(
    .kpi-grid > .kpi-card,
    .manager-summary > article,
    .management-kpis > article,
    .ptn-indicator-grid > button,
    .summary-grid > article,
    .mirror-tracking-kpis > article
  ):hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--x-line)) !important;
    border-left-color: var(--accent) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 11%, transparent) !important;
    transform: translateY(-1px) !important;
  }
  html[data-theme="light"] body #page :is(
    .kpi-grid > .kpi-card,
    .manager-summary > article,
    .management-kpis > article,
    .ptn-indicator-grid > button,
    .summary-grid > article,
    .mirror-tracking-kpis > article
  ) :is(.kpi-title, .kpi-link, span, em) {
    color: var(--accent-dark) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #page :is(
    .kpi-grid > .kpi-card,
    .manager-summary > article,
    .management-kpis > article,
    .ptn-indicator-grid > button,
    .summary-grid > article,
    .mirror-tracking-kpis > article
  ) :is(.kpi-number, strong) {
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(
    .kpi-grid > .kpi-card,
    .manager-summary > article,
    .management-kpis > article,
    .ptn-indicator-grid > button,
    .summary-grid > article,
    .mirror-tracking-kpis > article
  ) :is(.kpi-breakdown, small) {
    color: var(--x-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #page :is(.kpi-symbol, .ptn-indicator-icon) {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--x-line)) !important;
    background: color-mix(in srgb, var(--accent) 8%, #fff) !important;
    color: var(--accent) !important;
  }
  html[data-theme="light"] body #page :is(.kpi-sparkline, .ptn-indicator-grid svg) {
    color: var(--accent) !important;
    stroke: var(--accent) !important;
  }
  html[data-theme="light"] body #page .kpi-sparkline polygon {
    fill: var(--accent) !important;
    fill-opacity: .08 !important;
  }

  /* ================================================================
     5. INDICADORES SECUNDÁRIOS — modelo 15
     Compactos, brancos, sinal vivo. Sem preenchimento pastel.
     ================================================================ */
  html[data-theme="light"] body #page :is(
    .phase-kpis > article,
    .capacity-kpis > article,
    .alert-kpis > article,
    .decision-snapshot > article,
    .finalized-secondary-kpis > .finalized-mini-card,
    .program-pulse > button,
    .role-guide > article,
    .activity-list > article
  ) {
    position: relative !important;
    overflow: hidden !important;
    min-height: 82px !important;
    border: 1px solid var(--x-line) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 7px !important;
    background:
      linear-gradient(105deg, color-mix(in srgb, var(--accent) 5%, #fff) 0%, #fff 42%, #fff 100%) !important;
    background-color: #fff !important;
    color: var(--x-ink) !important;
    box-shadow: 0 4px 12px rgba(23, 37, 47, .045) !important;
  }
  html[data-theme="light"] body #page :is(
    .phase-kpis > article,
    .capacity-kpis > article,
    .alert-kpis > article,
    .decision-snapshot > article,
    .finalized-secondary-kpis > .finalized-mini-card,
    .program-pulse > button,
    .role-guide > article,
    .activity-list > article
  ) :is(span, em) {
    color: var(--accent-dark) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #page :is(
    .phase-kpis > article,
    .capacity-kpis > article,
    .alert-kpis > article,
    .decision-snapshot > article,
    .finalized-secondary-kpis > .finalized-mini-card,
    .program-pulse > button,
    .role-guide > article,
    .activity-list > article
  ) strong {
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(
    .phase-kpis > article,
    .capacity-kpis > article,
    .alert-kpis > article,
    .decision-snapshot > article,
    .finalized-secondary-kpis > .finalized-mini-card,
    .program-pulse > button,
    .role-guide > article,
    .activity-list > article
  ) small {
    color: var(--x-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #page .program-pulse {
    border: 1px solid var(--x-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(23, 37, 47, .045) !important;
  }
  html[data-theme="light"] body #page .program-pulse > button {
    min-height: 58px !important;
    border: 0 !important;
    border-right: 1px solid var(--x-line-soft) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #page .program-pulse > button:last-child { border-right: 0 !important; }

  /* ================================================================
     6. AGING PRINCIPAL E HIERARQUIA DE AGUARDANDO PEÇAS
     ================================================================ */
  html[data-theme="light"] body #page .operational-snapshot {
    border: 1px solid var(--x-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
    box-shadow: 0 5px 15px rgba(23, 37, 47, .05) !important;
  }
  html[data-theme="light"] body #page .snapshot-heading {
    border-bottom-color: var(--x-line-soft) !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page .snapshot-heading > b { color: var(--x-red) !important; }
  html[data-theme="light"] body #page .aging-snapshot > button {
    --snapshot-tone: var(--accent);
    position: relative !important;
    overflow: hidden !important;
    min-height: 104px !important;
    border: 1px solid var(--x-line) !important;
    border-left: 2px solid var(--accent) !important;
    border-radius: 7px !important;
    background:
      radial-gradient(90% 72% at 105% 108%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 68%),
      #fff !important;
    background-color: #fff !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #page .aging-snapshot > button :is(span, em) {
    color: var(--accent-dark) !important;
  }
  html[data-theme="light"] body #page .aging-snapshot > button strong { color: var(--x-ink) !important; }
  html[data-theme="light"] body #page .aging-snapshot > button small {
    color: var(--x-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #page .aging-snapshot > button .snapshot-icon {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--x-line)) !important;
    background: color-mix(in srgb, var(--accent) 8%, #fff) !important;
    color: var(--accent) !important;
  }
  html[data-theme="light"] body #page .aging-snapshot > button > u { background: #e7ecef !important; }
  html[data-theme="light"] body #page .aging-snapshot > button > u > b { background: var(--accent) !important; }

  html[data-theme="light"] body #page .operational-snapshot-secondary {
    padding: 0 !important;
    overflow: hidden !important;
  }
  html[data-theme="light"] body #page .operational-snapshot-secondary .snapshot-heading {
    min-height: 58px;
    padding: 12px 15px !important;
    margin: 0 !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) {
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button {
    --snapshot-tone: var(--accent);
    min-height: 112px !important;
    border: 0 !important;
    border-right: 1px solid var(--x-line-soft) !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button:last-child {
    border-right: 0 !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button:hover,
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button.selected {
    background: color-mix(in srgb, var(--accent) 6%, #fff) !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button :is(span, em) {
    color: var(--accent-dark) !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button strong {
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button small {
    color: var(--x-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button .snapshot-icon {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--x-line)) !important;
    background: color-mix(in srgb, var(--accent) 8%, #fff) !important;
    color: var(--accent) !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button > u {
    background: #e9eef1 !important;
  }
  html[data-theme="light"] body #page :is(.supply-decision-cards, .purchase-coverage-cards) > button > u > b {
    background: var(--accent) !important;
  }

  /* ================================================================
     7. CARTEIRA POR CLIENTE — primário neutro e legível
     ================================================================ */
  html[data-theme="light"] body #page .picking-client-summary {
    background: #fff !important;
    background-image: none !important;
    border-color: var(--x-line) !important;
  }
  html[data-theme="light"] body #page .client-picking-cards > button {
    border: 1px solid var(--x-line) !important;
    border-radius: 7px !important;
    background:
      radial-gradient(70% 60% at 104% 112%, rgba(18, 103, 232, .07), transparent 70%),
      #fff !important;
    color: var(--x-ink) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #page .client-picking-cards > button :is(span, strong) { color: var(--x-ink) !important; }
  html[data-theme="light"] body #page .client-picking-cards > button small { color: var(--x-muted) !important; }
  html[data-theme="light"] body #page .client-rank {
    background: rgba(0, 156, 168, .09) !important;
    color: var(--x-teal-dark) !important;
  }
  html[data-theme="light"] body #page .client-meter { background: #e7ecef !important; }
  html[data-theme="light"] body #page .client-meter i {
    background: linear-gradient(90deg, var(--x-teal), var(--x-blue)) !important;
  }

  /* ================================================================
     8. FILTROS, CONTROLES, TABS E BOTÕES
     ================================================================ */
  html[data-theme="light"] body #page :is(
    .filter-bar, .filters, .toolbar, .table-toolbar, .control-bar,
    .page-actions, .portfolio-toolbar, .mass-toolbar, .phase-registration-grid,
    .phase-client-filter, .report-runner-row, .activity-grid,
    .scenario-grid, .confirm-program-grid, .row-actions
  ) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
    box-shadow: 0 3px 10px rgba(23, 37, 47, .035) !important;
  }
  html[data-theme="light"] body :is(input, select, textarea, .multi-filter > summary, .multi-filter-menu, .search-wrap) {
    min-height: 38px !important;
    border-color: #cbd6dd !important;
    border-radius: 6px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body :is(input, select, textarea, .multi-filter > summary)::placeholder {
    color: #7b8992 !important;
  }
  html[data-theme="light"] body :is(input, select, textarea):focus,
  html[data-theme="light"] body .multi-filter[open] > summary {
    border-color: var(--x-blue) !important;
    box-shadow: 0 0 0 3px rgba(18, 103, 232, .11) !important;
  }
  html[data-theme="light"] body .multi-filter-menu {
    background: #fff !important;
    color: var(--x-ink) !important;
    box-shadow: 0 14px 34px rgba(23, 37, 47, .16) !important;
  }
  html[data-theme="light"] body .multi-filter-menu label {
    border-bottom-color: var(--x-line-soft) !important;
    background: #fff !important;
    color: var(--x-copy) !important;
  }
  html[data-theme="light"] body .multi-filter-menu label:hover { background: #f5f8fa !important; }

  html[data-theme="light"] body .btn-primary {
    border-color: var(--x-red-dark) !important;
    background: linear-gradient(135deg, #f63248 0%, #df1530 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(239, 35, 60, .18) !important;
  }
  html[data-theme="light"] body .btn-secondary {
    border-color: var(--x-blue-dark) !important;
    background: linear-gradient(135deg, #2780f5 0%, #1267e8 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(18, 103, 232, .17) !important;
  }
  html[data-theme="light"] body :is(.btn-excel, .btn-success) {
    border-color: var(--x-green-dark) !important;
    background: linear-gradient(135deg, #16b765 0%, #078e49 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(10, 166, 87, .17) !important;
  }
  html[data-theme="light"] body :is(.btn-ghost, .btn-clear-filters) {
    border-color: #c8d3da !important;
    background: #fff !important;
    background-image: none !important;
    color: #2e414c !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body :is(.btn-ghost, .btn-clear-filters):hover {
    border-color: #9eadb6 !important;
    background: #f5f8fa !important;
  }
  html[data-theme="light"] body :is(.program-tabs, .purchase-tabs) {
    border-color: var(--x-line) !important;
    background: #fff !important;
  }
  html[data-theme="light"] body :is(.program-tabs, .purchase-tabs) button {
    background: #fff !important;
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body :is(.program-tabs, .purchase-tabs) button.active {
    border-bottom-color: var(--x-red) !important;
    background: #fff !important;
    color: var(--x-red) !important;
    box-shadow: inset 0 -2px 0 var(--x-red) !important;
  }

  /* ================================================================
     9. TABELAS, LISTAS, GRÁFICOS E ALERTAS — neutros
     ================================================================ */
  html[data-theme="light"] body #page :is(.table-wrap, .data-table, table, thead, tbody, tr, th, td) {
    border-color: var(--x-line-soft) !important;
  }
  html[data-theme="light"] body #page :is(.table-wrap, .data-table, table, tbody, tr, td) {
    background: #fff !important;
    background-image: none !important;
    color: var(--x-copy) !important;
  }
  html[data-theme="light"] body #page :is(.data-table thead, .data-table th, table thead, table th) {
    background: #f8fafb !important;
    background-image: none !important;
    color: #344752 !important;
  }
  html[data-theme="light"] body #page :is(.data-table tbody tr:nth-child(even), table tbody tr:nth-child(even)) {
    background: #fff !important;
  }
  html[data-theme="light"] body #page :is(.data-table tbody tr:hover, table tbody tr:hover) {
    background: #f8fbfd !important;
  }
  html[data-theme="light"] body #page :is(.metric-bar, .status-bars > div, .count-list > div, .scope-list > div,
    .decision-item, .manager-access-list > div, .management-programs > div,
    .phase-saved-card, .phase-average-list > div, .people-category button,
    .navigation-view-grid > label, .permission-grid label, .switch-row, .checkbox-row) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-copy) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #page :is(.metric-bar, .status-bars > div, .decision-item, .people-category button):hover {
    background: #f8fbfd !important;
  }
  html[data-theme="light"] body #page :is(.chart-grid-line, .chart-axis) { stroke: #e6ecef !important; }
  html[data-theme="light"] body #page :is(.chart-card, .chart-panel, .manager-chart-grid > article, .analytics-grid > article) {
    background: #fff !important;
    background-image: none !important;
  }

  /* ================================================================
     10. ABRIR PTN — branco absoluto, informação viva
     ================================================================ */
  html[data-theme="light"] body #ptnDrawer,
  html[data-theme="light"] body #ptnDrawer :is(
    .drawer-head, .drawer-content, .drawer-actions, .drawer-section,
    .drawer-profile, .drawer-profile form, .drawer-profile-grid label,
    .section-title, .drawer-summary > div, .detail-grid > div, .detail-box,
    .mini-table, .history-list, .timeline > div, .refresh-banner,
    .program-strip, .section-empty, .empty-inline
  ) {
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #ptnDrawer {
    border-color: var(--x-line) !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(.drawer-section, .drawer-profile, .mini-table, .history-list) {
    border-color: var(--x-line) !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(.drawer-summary > div, .detail-grid > div, .detail-box, .drawer-profile-grid label) {
    border: 1px solid var(--x-line) !important;
    border-left: 3px solid #71838f !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(.drawer-summary > div, .detail-grid > div, .detail-box, .drawer-profile-grid label) :is(span, small, label) {
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(.drawer-summary > div, .detail-grid > div, .detail-box, .drawer-profile-grid label) :is(strong, b) {
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(.section-title :is(h3, h4, strong), .drawer-section > h4) {
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .refresh-banner {
    border: 1px solid var(--x-line) !important;
    border-left: 4px solid var(--x-green) !important;
    color: var(--x-green-dark) !important;
    font-weight: 750 !important;
  }
  html[data-theme="light"] body #ptnDrawer .refresh-banner + .refresh-banner {
    border-left-color: var(--x-amber) !important;
    color: var(--x-amber-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .mini-table > .mini-head {
    border-bottom: 2px solid var(--drawer-table-accent, var(--x-blue)) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--drawer-table-accent, var(--x-blue-dark)) !important;
  }
  html[data-theme="light"] body #ptnDrawer .mini-table > div:not(.mini-head):nth-child(n) {
    border-bottom-color: var(--x-line-soft) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-copy) !important;
  }
  html[data-theme="light"] body #ptnDrawer .mini-table > div:not(.mini-head):hover {
    background: #f8fbfd !important;
  }
  html[data-theme="light"] body #ptnDrawer .picking-mini { --drawer-table-accent: var(--x-red); }
  html[data-theme="light"] body #ptnDrawer .parts-mini { --drawer-table-accent: var(--x-amber); }
  html[data-theme="light"] body #ptnDrawer .purchase-mini { --drawer-table-accent: var(--x-blue); }
  html[data-theme="light"] body #ptnDrawer :is(.picking-mini, .parts-mini, .purchase-mini) > div:not(.mini-head) > span:nth-child(-n+2) strong {
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .mini-table small { color: var(--x-muted) !important; }
  html[data-theme="light"] body #ptnDrawer .history-list > div:nth-child(n) {
    border-color: var(--x-line-soft) !important;
    background: #fff !important;
    background-image: none !important;
  }
  html[data-theme="light"] body #ptnDrawer .history-list > .history-reserved { border-left: 4px solid var(--x-green) !important; }
  html[data-theme="light"] body #ptnDrawer .history-list > .history-waiting { border-left: 4px solid var(--x-amber) !important; }
  html[data-theme="light"] body #ptnDrawer .history-list > .history-repeat-old { border-left: 4px solid var(--x-red) !important; }
  html[data-theme="light"] body #ptnDrawer .history-list > .history-reserved :is(strong, time) { color: var(--x-green-dark) !important; }
  html[data-theme="light"] body #ptnDrawer .history-list > .history-waiting :is(strong, time) { color: var(--x-amber-dark) !important; }
  html[data-theme="light"] body #ptnDrawer .history-list > .history-repeat-old :is(strong, time) { color: var(--x-red-dark) !important; }
  html[data-theme="light"] body #ptnDrawer .timeline > div {
    border-color: var(--x-line-soft) !important;
    background: #fff !important;
    background-image: none !important;
  }
  html[data-theme="light"] body #ptnDrawer .timeline > div::before { background: var(--x-teal) !important; }
  html[data-theme="light"] body #ptnDrawer .missing-info { color: var(--x-red) !important; }

  /* ================================================================
     11. MODAIS E AUTENTICAÇÃO
     ================================================================ */
  html[data-theme="light"] body :is(
    .modal-card, .auth-card, .report-preview-shell, .report-preview-content,
    .report-preview-toolbar, .modal-head, .modal-actions, .auth-form
  ) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body :is(.modal-card, .auth-card, .report-preview-shell) {
    box-shadow: 0 24px 60px rgba(23, 37, 47, .22) !important;
  }
  html[data-theme="light"] body :is(.modal-head, .modal-actions, .report-preview-toolbar) {
    border-color: var(--x-line) !important;
  }

  /* ================================================================
     12. BADGES E SINAIS — sempre vivos
     ================================================================ */
  html[data-theme="light"] body :is(.tag-red, .tag-critical) {
    border-color: rgba(239, 35, 60, .34) !important;
    background: #fff0f2 !important;
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body :is(.tag-blue, .tag-neutral) {
    border-color: rgba(18, 103, 232, .30) !important;
    background: #eef5ff !important;
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body :is(.tag-green, .tag-healthy) {
    border-color: rgba(10, 166, 87, .30) !important;
    background: #edfbf4 !important;
    color: var(--x-green-dark) !important;
  }
  html[data-theme="light"] body :is(.tag-amber, .tag-attention) {
    border-color: rgba(238, 151, 0, .34) !important;
    background: #fff8e9 !important;
    color: var(--x-amber-dark) !important;
  }
  html[data-theme="light"] body :is(.tag-purple, .tag-violet) {
    border-color: rgba(122, 66, 209, .30) !important;
    background: #f5efff !important;
    color: var(--x-purple-dark) !important;
  }
  html[data-theme="light"] body :is(.missing-info, .print-missing) {
    color: var(--x-red) !important;
    font-weight: 800 !important;
  }
}

/* ==================================================================
   12B. CONTRATO UNICO DE CARD INTERATIVO
   Estado e deslocamento identicos nos dois temas. A lista e explicita
   para nunca promover graficos, tabelas, linhas ou paineis informativos.
   ================================================================== */
@media screen {
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ) {
    --interaction-tone: #4b7ebc;
    --interaction-ruby: #a72d52;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      background-image 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  html[data-theme="light"] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ) {
    --interaction-tone: var(--accent, #315f9b);
  }

  /* O nome semantico do proprio quadrante sempre vence o azul neutro. */
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.red, .critical, .danger, .tone-red, .is-error) { --interaction-tone: #e2233d; }
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.green, .healthy, .positive, .success, .tone-green) { --interaction-tone: #0b9f50; }
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.amber, .yellow, .attention, .warning, .tone-amber, .tone-yellow) { --interaction-tone: #e48a00; }
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.orange, .tone-orange) { --interaction-tone: #ef632f; }
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.blue, .neutral, .tone-blue) { --interaction-tone: #176ee8; }
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.teal, .tone-teal) { --interaction-tone: #009da7; }
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .decision-tile,
    .schedule-card
  ):is(.purple, .violet, .tone-purple, .tone-violet) { --interaction-tone: #8050d1; }

  html[data-theme] body .batch-card.active { --interaction-tone: #0b9f50; }
  html[data-theme] body .batch-card.draft { --interaction-tone: #e48a00; }
  html[data-theme] body .phase-saved-card.active { --interaction-tone: #009da7; }
  html[data-theme] body .management-programs > div:has(button) { --interaction-tone: #e2233d; }
  html[data-theme] body .audit-failures { --interaction-tone: #e2233d; }
  html[data-theme] body .staging-refresh-card:has(.tag-green) { --interaction-tone: #0b9f50; }
  html[data-theme] body .staging-refresh-card:has(.tag-red) { --interaction-tone: #e2233d; }

  /* Geometria de estado compartilhada: nenhum salto ao trocar de tema. */
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ):is(:hover, :focus-visible, :focus-within) {
    transform: translateY(-2px) !important;
    outline: none !important;
  }

  /* O segundo contorno e reservado ao teclado/foco; hover usa so a borda. */
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ):is(:focus-visible, :focus-within) {
    outline: 2px solid color-mix(in srgb, var(--interaction-tone) 62%, transparent) !important;
    outline-offset: 2px !important;
  }

  /* Claro: faixa especular mais presente, ainda branca e sem halo neon. */
  html[data-theme="light"] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ):is(:hover, :focus-visible, :focus-within) {
    border-color: color-mix(in srgb, var(--interaction-tone) 88%, var(--x-line)) !important;
    background:
      linear-gradient(
        108deg,
        transparent 0%,
        transparent 31%,
        rgba(255, 255, 255, .96) 41%,
        color-mix(in srgb, var(--interaction-tone) 14%, #fff) 49%,
        rgba(255, 255, 255, .98) 57%,
        transparent 69%,
        transparent 100%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--interaction-tone) 4%, #fff) 0%, #fff 72%) !important;
    background-color: #fff !important;
    box-shadow:
      0 15px 32px color-mix(in srgb, var(--interaction-tone) 16%, transparent),
      0 4px 11px rgba(23, 37, 47, .085),
      inset 0 1px 0 #fff,
      inset 0 -2px 0 color-mix(in srgb, var(--interaction-ruby) 13%, transparent) !important;
  }

  /* Escuro: mesma elevacao e mesma faixa, com reflexo controlado. */
  html[data-theme="dark"] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ):is(:hover, :focus-visible, :focus-within) {
    border-color: color-mix(in srgb, var(--interaction-tone) 82%, var(--line)) !important;
    background:
      linear-gradient(
        108deg,
        transparent 0%,
        transparent 31%,
        rgba(255, 255, 255, .025) 41%,
        color-mix(in srgb, var(--interaction-tone) 15%, transparent) 49%,
        rgba(255, 255, 255, .075) 56%,
        transparent 69%,
        transparent 100%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--interaction-tone) 8%, var(--card)) 0%, var(--card) 74%) !important;
    background-color: var(--card) !important;
    box-shadow:
      0 15px 32px color-mix(in srgb, var(--interaction-tone) 18%, transparent),
      0 4px 11px rgba(0, 0, 0, .24),
      inset 0 1px 0 rgba(255, 255, 255, .08),
      inset 0 -2px 0 color-mix(in srgb, var(--interaction-ruby) 15%, transparent) !important;
  }

  /* Abrir PTN modelo 2 permanece integralmente liso, inclusive em hover. */
  html[data-theme="light"] body #ptnDrawer :is(
    .drawer-profile,
    .drawer-profile-grid label
  ):is(:hover, :focus-visible, :focus-within) {
    border-color: var(--x-teal) !important;
    background: #fbfcfd !important;
    background-image: none !important;
    box-shadow:
      0 11px 24px rgba(0, 111, 120, .12),
      inset 0 1px 0 #fff !important;
  }
  html[data-theme="dark"] body #ptnDrawer :is(
    .drawer-profile,
    .drawer-profile-grid label
  ):is(:hover, :focus-visible, :focus-within) {
    background: var(--card) !important;
    background-image: none !important;
  }
}

/* ==================================================================
   12C. PALETA DE GRAFICOS — TEMA CLARO
   Cores fortes, correspondencia exata com legendas e miolo branco.
   Nenhum seletor desta secao cria hover ou eleva grafico/tabela.
   ================================================================== */
@media screen {
  html[data-theme="light"] body {
    --chart-red: var(--x-red, #e2233d);
    --chart-green: var(--x-green, #0b9f50);
    --chart-blue: var(--x-blue, #176ee8);
    --chart-teal: var(--x-teal, #009da7);
    --chart-amber: var(--x-amber, #e48a00);
    --chart-orange: var(--x-orange, #ef632f);
    --chart-purple: var(--x-purple, #8050d1);
  }

  html[data-theme="light"] body .chart-grid-line { stroke: #dbe5ea !important; }
  html[data-theme="light"] body :is(.trend-chart, .chart-panel, .chart-card) svg text {
    fill: #506671 !important;
  }
  html[data-theme="light"] body .chart-line.entries { stroke: var(--chart-red) !important; }
  html[data-theme="light"] body .chart-line.finished { stroke: var(--chart-blue) !important; }
  html[data-theme="light"] body .chart-line.programmed { stroke: var(--chart-green) !important; }
  html[data-theme="light"] body .chart-legend span:nth-child(1) i { background: var(--chart-red) !important; }
  html[data-theme="light"] body .chart-legend span:nth-child(2) i { background: var(--chart-blue) !important; }
  html[data-theme="light"] body .chart-legend span:nth-child(3) i { background: var(--chart-green) !important; }

  html[data-theme="light"] body .single-line svg polyline:nth-of-type(1) { stroke: var(--chart-teal) !important; }
  html[data-theme="light"] body .single-line svg polyline:nth-of-type(2) { stroke: #4667dc !important; }
  html[data-theme="light"] body .single-line svg polyline:nth-of-type(3) { stroke: var(--chart-amber) !important; }
  html[data-theme="light"] body .single-line #finalizedGradient stop:first-child { stop-color: var(--chart-teal) !important; }
  html[data-theme="light"] body .chart-series-legend .total::before { background: var(--chart-teal) !important; }
  html[data-theme="light"] body .chart-series-legend .white::before { background: #4667dc !important; }
  html[data-theme="light"] body .chart-series-legend .portable::before { background: var(--chart-amber) !important; }

  html[data-theme="light"] body :is(.chart-legend, .chart-series-legend, .donut-legend) {
    color: #425965 !important;
  }
  html[data-theme="light"] body :is(.metric-bars i, .status-bars i, .client-meter, .coverage-track) {
    background: #e1e9ed !important;
  }
  html[data-theme="light"] body .metric-bars.teal u { background: var(--chart-teal) !important; }
  html[data-theme="light"] body .metric-bars.blue u { background: var(--chart-blue) !important; }
  html[data-theme="light"] body .metric-bars.green u { background: var(--chart-green) !important; }
  html[data-theme="light"] body .metric-bars.amber u { background: var(--chart-amber) !important; }
  html[data-theme="light"] body .metric-bars.orange u { background: var(--chart-orange) !important; }
  html[data-theme="light"] body .metric-bars.red u { background: var(--chart-red) !important; }
  html[data-theme="light"] body .metric-bars.purple u { background: var(--chart-purple) !important; }

  /* A composicao preserva percentuais e tokens configurados sem alterar a cor. */
  html[data-theme="light"] body .donut-chart {
    filter: none !important;
    box-shadow:
      0 0 0 1px #cbd8de,
      0 10px 24px rgba(31, 54, 66, .11) !important;
  }
  html[data-theme="light"] body .donut-chart::after {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #dce6ea !important;
  }
  html[data-theme="light"] body .donut-chart strong { color: #172832 !important; }
  html[data-theme="light"] body .donut-legend div {
    border-bottom-color: #e1e9ed !important;
    color: #314853 !important;
  }
  html[data-theme="light"] body .donut-legend i {
    filter: none !important;
    box-shadow: 0 0 0 1px rgba(23, 40, 50, .12);
  }
  html[data-theme="light"] body .donut-legend div > strong { color: #172832 !important; }
  html[data-theme="light"] body :is(.donut-legend small, .metric-bars small) { color: #5b707b !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(
    button.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .decision-item,
    .decision-tile,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article:has(button),
    .saved-types > article:has(button),
    .activity-list > article:has(button),
    .management-programs > div:has(button),
    .staging-refresh-card.panel:has(button),
    .user-access,
    .print-profile,
    .program-type-manager,
    .audit-failures,
    .drawer-profile
  ) {
    transition: none !important;
  }
}

/* ==================================================================
   13. CONTRATO FINAL DE GEOMETRIA
   Mantem controles e cartoes com as mesmas dimensoes nos dois temas.
   Este bloco fica por ultimo para neutralizar medidas antigas de v06-v21.
   ================================================================== */
@media screen {
  /* Campos de texto usam um unico piso; checkbox/radio nao podem herda-lo. */
  html[data-theme] body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, textarea, .multi-filter > summary, .search-wrap
  ) {
    min-height: 38px !important;
    border-radius: 6px !important;
  }
  html[data-theme] body input:is([type="checkbox"], [type="radio"]) {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    padding: 0 !important;
  }

  /* Acoes diretas de grids devem medir pelo conteudo, nunca pela coluna inteira. */
  html[data-theme] body :is(
    #pickingProfileForm,
    .confirm-program-form,
    .user-form,
    .user-access-form,
    .activity-builder,
    .drawer-profile form,
    .report-runner-row,
    .phase-filter-grid
  ) > .btn {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: end !important;
  }

  /* Barras densas nao reservam 154px para cada acao. */
  html[data-theme] body .mass-toolbar .btn,
  html[data-theme] body .page-heading.many-page-actions .page-actions .btn {
    min-width: 0 !important;
  }

  /* Navegacao local: a mesma altura no claro e no escuro. */
  html[data-theme] body :is(.program-tabs, .purchase-tabs) button {
    min-height: 42px !important;
  }

  /* Cartoes clicaveis grandes possuem contrato proprio, fora de .btn. */
  html[data-theme] body #page .ptn-indicator-grid > button {
    position: relative !important;
    display: grid !important;
    min-height: 104px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto 1fr !important;
    gap: 2px 10px !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: left !important;
  }
  html[data-theme] body #page .ptn-indicator-icon {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    grid-row: 1 / 4 !important;
    place-items: center !important;
    border-radius: 50% !important;
  }
  html[data-theme] body #page .ptn-indicator-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button > :is(span, strong, small) {
    grid-column: 2 !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button > span {
    min-height: 0 !important;
  }
  html[data-theme] body #page .ptn-indicator-grid > button > em {
    position: absolute !important;
    bottom: 9px !important;
    left: 12px !important;
  }
  html[data-theme] body #page :is(
    .aging-snapshot,
    .supply-decision-cards,
    .purchase-coverage-cards
  ) > button {
    min-height: 104px !important;
  }
  html[data-theme] body #page .program-pulse > button {
    min-height: 58px !important;
  }
  html[data-theme] body #page :is(
    .phase-kpis > article,
    .capacity-kpis > article,
    .alert-kpis > article,
    .decision-snapshot > article,
    .finalized-secondary-kpis > .finalized-mini-card,
    .role-guide > article,
    .activity-list > article
  ) {
    min-height: 82px !important;
  }

  /* Excecoes intencionais: login e acoes de modal no celular continuam largas. */
  html[data-theme] body .auth-form > .btn {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* ==================================================================
   14. INTERACAO EXECUTIVA + ABRIR PTN / MODELO 2
   Somente pintura e profundidade: nenhuma medida muda entre temas.
   Graficos, barras de dados, tabelas e linhas permanecem fora do efeito.
   ================================================================== */
@media screen {
  /* Cartoes cujo proprio elemento executa uma acao. */
  html[data-theme="light"] body :is(
    .kpi-card.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .finalized-mini-card.metric-card-button,
    .decision-item,
    .decision-tile,
    .people-category button,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row
  ) {
    --interaction-tone: var(--accent, #315f9b);
    --interaction-ruby: #a72d52;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      background-image 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  /* Cartoes compostos: a acao mora dentro, portanto o foco sobe ao card. */
  html[data-theme="light"] body #page :is(
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article,
    .saved-types > article,
    .activity-list > article,
    .management-programs > div,
    .staging-refresh-card.panel,
    .user-access,
    .print-profile,
    .program-type-manager
  ) {
    --interaction-tone: var(--accent, #315f9b);
    --interaction-ruby: #a72d52;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      background-image 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  /* Semantica conhecida dos cards compostos. */
  html[data-theme="light"] body #page .batch-card.active { --interaction-tone: var(--x-green); }
  html[data-theme="light"] body #page .batch-card.draft { --interaction-tone: var(--x-amber); }
  html[data-theme="light"] body #page .phase-saved-card.active { --interaction-tone: var(--x-teal); }
  html[data-theme="light"] body #page .management-programs > div { --interaction-tone: var(--x-red); }
  html[data-theme="light"] body #page .staging-refresh-card:has(.tag-green) { --interaction-tone: var(--x-green); }
  html[data-theme="light"] body #page .staging-refresh-card:has(.tag-red) { --interaction-tone: var(--x-red); }

  /*
   * Reflexo branco localizado + duas sombras de baixa opacidade.
   * O rubi aparece apenas como segunda leitura nos cards neutros;
   * o contorno continua pertencendo integralmente a cor semantica.
   */
  html[data-theme="light"] body :is(
    .kpi-card.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .finalized-mini-card.metric-card-button,
    .decision-item,
    .decision-tile,
    .people-category button,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row
  ):is(:hover, :focus-visible, :focus-within),
  html[data-theme="light"] body #page :is(
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article,
    .saved-types > article,
    .activity-list > article,
    .management-programs > div,
    .staging-refresh-card.panel,
    .user-access,
    .print-profile,
    .program-type-manager
  ):is(:hover, :focus-within) {
    border-color: color-mix(in srgb, var(--interaction-tone) 88%, var(--x-line)) !important;
    background:
      linear-gradient(
        108deg,
        transparent 0%,
        transparent 31%,
        rgba(255, 255, 255, .96) 41%,
        color-mix(in srgb, var(--interaction-tone) 14%, #fff) 49%,
        rgba(255, 255, 255, .98) 57%,
        transparent 69%,
        transparent 100%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--interaction-tone) 4%, #fff) 0%, #fff 72%) !important;
    background-color: #fff !important;
    box-shadow:
      0 15px 32px color-mix(in srgb, var(--interaction-tone) 16%, transparent),
      0 4px 11px rgba(23, 37, 47, .085),
      inset 0 1px 0 #fff,
      inset 0 -2px 0 color-mix(in srgb, var(--interaction-ruby) 13%, transparent) !important;
    transform: translateY(-2px) !important;
  }

  html[data-theme="light"] body :is(
    .kpi-card.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .finalized-mini-card.metric-card-button,
    .decision-item,
    .decision-tile,
    .people-category button,
    .schedule-card,
    .navigation-view-grid > label,
    .permission-grid label,
    .export-field-grid label,
    .model-field-grid label,
    .report-columns label,
    .drawer-profile-grid label,
    .switch-row,
    .checkbox-row
  ):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--interaction-tone) 62%, #fff) !important;
    outline-offset: 2px !important;
  }

  /*
   * Abrir PTN — modelo 2 escolhido.
   * O reset de imagem elimina todos os gradientes herdados (inclusive os
   * prateados antigos); tags continuam com seus preenchimentos solidos.
   */
  html[data-theme="light"] body #ptnDrawer,
  html[data-theme="light"] body #ptnDrawer * {
    background-image: none !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(
    .drawer-head,
    .drawer-content,
    .drawer-section,
    .drawer-profile,
    .drawer-profile form,
    .mini-table,
    .history-list,
    .timeline > div,
    .program-strip,
    .refresh-banner,
    .rule-note,
    .exclusion-alert,
    .drawer-loading
  ) {
    background-color: #fff !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(
    .drawer-summary > div,
    .detail-grid > div,
    .detail-box,
    .drawer-profile-grid label,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .empty-inline,
    .section-empty
  ) {
    background: #fbfcfd !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-head {
    border-bottom-color: var(--x-line) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-head .eyebrow {
    color: var(--x-red) !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-head h2 {
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-head .icon-btn {
    border-color: color-mix(in srgb, var(--x-red) 38%, var(--x-line)) !important;
    background: #fff !important;
    color: var(--x-red-dark) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-head .icon-btn:is(:hover, :focus-visible) {
    border-color: var(--x-red) !important;
    background: #fff !important;
    box-shadow: 0 7px 16px rgba(201, 20, 45, .12) !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(
    .section-title :is(h3, h4, strong),
    .drawer-section > h4,
    .drawer-profile summary strong,
    .drawer-profile form > div > strong
  ) {
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-profile summary span {
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .program-strip {
    border-left-color: var(--x-teal) !important;
  }
  html[data-theme="light"] body #ptnDrawer .program-strip :is(h4, strong) {
    color: var(--x-teal-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .program-strip span {
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body #ptnDrawer .rule-note {
    border-color: var(--x-line) !important;
    border-left: 4px solid var(--x-teal) !important;
    background: #fbfcfd !important;
    color: var(--x-copy) !important;
  }
  html[data-theme="light"] body #ptnDrawer .rule-note strong {
    color: var(--x-teal-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .exclusion-alert {
    border-color: var(--x-line) !important;
    border-left: 4px solid var(--x-red) !important;
    background: #fff !important;
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-profile-grid label:has(input:checked) {
    border-color: color-mix(in srgb, var(--x-teal) 62%, var(--x-line)) !important;
    background: #fbfcfd !important;
    color: var(--x-teal-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer input:is([type="checkbox"], [type="radio"]) {
    accent-color: var(--x-teal) !important;
  }

  /* Alternancia de 1–2% de cinza: leitura de tabela sem placa colorida. */
  html[data-theme="light"] body #ptnDrawer .mini-table > .mini-head {
    background: #fbfcfd !important;
  }
  html[data-theme="light"] body #ptnDrawer .mini-table > div:not(.mini-head):nth-child(odd),
  html[data-theme="light"] body #ptnDrawer .history-list > div:nth-child(even) {
    background: #fbfcfd !important;
  }
  html[data-theme="light"] body #ptnDrawer .mini-table > div:not(.mini-head):nth-child(even),
  html[data-theme="light"] body #ptnDrawer .history-list > div:nth-child(odd) {
    background: #fff !important;
  }

  /* Botoes vivos, mas solidos: o drawer inteiro continua sem gradientes. */
  html[data-theme="light"] body #ptnDrawer .btn-primary {
    border-color: var(--x-red-dark) !important;
    background: var(--x-red) !important;
    color: #fff !important;
  }
  html[data-theme="light"] body #ptnDrawer .btn-secondary {
    border-color: var(--x-blue-dark) !important;
    background: var(--x-blue) !important;
    color: #fff !important;
  }
  html[data-theme="light"] body #ptnDrawer .btn-success {
    border-color: var(--x-green-dark) !important;
    background: var(--x-green) !important;
    color: #fff !important;
  }
  html[data-theme="light"] body #ptnDrawer :is(.btn-ghost, .btn-clear-filters) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    color: var(--x-copy) !important;
  }

  /* O perfil do drawer tambem e interativo, mas nunca recebe reflexo/gradiente. */
  html[data-theme="light"] body #ptnDrawer .drawer-profile-grid label:is(:hover, :focus-within) {
    border-color: var(--x-teal) !important;
    background: #fbfcfd !important;
    box-shadow:
      0 9px 20px rgba(0, 111, 120, .09),
      inset 0 1px 0 #fff !important;
    transform: translateY(-2px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body :is(
    .kpi-card.metric-card-button,
    .ptn-indicator-grid > button,
    .snapshot-cards > button,
    .program-pulse > button,
    .client-picking-cards > button,
    .finalized-mini-card.metric-card-button,
    .decision-item,
    .decision-tile,
    .people-category button,
    .schedule-card,
    .batch-card,
    .phase-saved-card,
    .saved-report-models > article,
    .saved-types > article,
    .activity-list > article,
    .management-programs > div,
    .staging-refresh-card.panel,
    .user-access,
    .print-profile,
    .program-type-manager
  ) {
    transition: none !important;
  }
}

/* ==================================================================
   15. QUADRANTES NOVOS + DRAWER MODELO 2
   Toda a geometria abaixo e compartilhada por claro e escuro.
   ================================================================== */
@media screen {
  /* KPIs executivos: quantidade declarada no markup, sem card orfao. */
  html[data-theme] body #page .overview-top-kpis--six {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html[data-theme] body #page .overview-top-kpis--four {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Programacao: quatro numeros principais e sete estados realmente compactos. */
  html[data-theme] body #page .program-summary-board {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
  }
  html[data-theme] body #page .program-summary-primary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  html[data-theme] body #page :is(.program-counter, .program-status-counter) {
    --program-tone: var(--blue);
    min-width: 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--program-tone);
    background: var(--card);
    color: var(--ink);
  }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-red { --program-tone: #df4358; }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-blue { --program-tone: #3974f6; }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-teal { --program-tone: #00a0aa; }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-green { --program-tone: #16a164; }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-amber { --program-tone: #e79a18; }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-purple { --program-tone: #7a55cd; }
  html[data-theme] body #page :is(.program-counter, .program-status-counter).tone-gray { --program-tone: #758590; }
  html[data-theme] body #page .program-counter {
    display: grid;
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 3px 10px;
    align-items: start;
    border-radius: 8px;
    padding: 12px 13px;
  }
  html[data-theme] body #page .program-counter > span {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .035em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  html[data-theme] body #page .program-counter > strong {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--program-tone);
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1;
  }
  html[data-theme] body #page .program-counter > small {
    align-self: end;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
  }
  html[data-theme] body #page .program-status-distribution {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    padding: 13px;
  }
  html[data-theme] body #page .program-status-distribution > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
  }
  html[data-theme] body #page .program-status-distribution > header > div {
    min-width: 0;
  }
  html[data-theme] body #page .program-status-distribution > header span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
  }
  html[data-theme] body #page .program-status-distribution > header h2 {
    margin: 2px 0 0;
    font-size: 17px;
  }
  html[data-theme] body #page .program-status-distribution > header > strong {
    color: var(--red);
    font-size: 14px;
    white-space: nowrap;
  }
  html[data-theme] body #page .program-status-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
  }
  html[data-theme] body #page .program-status-counter {
    display: grid;
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border-radius: 7px;
    padding: 9px 10px;
  }
  html[data-theme] body #page .program-status-counter > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  html[data-theme] body #page .program-status-counter span {
    overflow: hidden;
    font-size: 10px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .program-status-counter small,
  html[data-theme] body #page .program-status-distribution > p {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.3;
  }
  html[data-theme] body #page .program-status-counter > strong {
    color: var(--program-tone);
    font-size: 22px;
    line-height: 1;
  }
  html[data-theme] body #page .program-status-distribution > p {
    margin: 9px 1px 0;
  }

  /* Finalizados 2: quadrantes com ranking, nome e total em uma linha. */
  html[data-theme] body #page .people-category-quadrants {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html[data-theme] body #page .people-category-quadrant {
    display: grid;
    min-width: 0;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    padding: 0;
  }
  html[data-theme] body #page .people-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
  }
  html[data-theme] body #page .people-category-header > div:first-child {
    min-width: 0;
  }
  html[data-theme] body #page .people-category-header span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
  }
  html[data-theme] body #page .people-category-header h3 {
    margin: 2px 0 0;
    font-size: 17px;
  }
  html[data-theme] body #page .people-category-subtotal {
    display: grid;
    justify-items: end;
    gap: 1px;
  }
  html[data-theme] body #page .people-category-subtotal > strong {
    color: var(--teal);
    font-size: 25px;
    line-height: 1;
  }
  html[data-theme] body #page .people-category-subtotal > small {
    color: var(--muted);
    font-size: 9px;
  }
  html[data-theme] body #page .people-category-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: 6px !important;
    padding: 10px;
  }
  html[data-theme] body #page .people-category-person {
    display: grid !important;
    min-width: 0;
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 9px !important;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    color: var(--ink);
    padding: 8px 10px !important;
    text-align: left;
  }
  html[data-theme] body #page .people-category-rank {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
  }
  html[data-theme] body #page .people-category-name {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  html[data-theme] body #page .people-category-name > strong,
  html[data-theme] body #page .people-category-name > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #page .people-category-name > strong {
    color: var(--ink);
    font-size: 12px;
  }
  html[data-theme] body #page .people-category-name > small {
    color: var(--muted);
    font-size: 9px;
  }
  html[data-theme] body #page .people-category-total {
    justify-self: end;
    color: var(--teal);
    font-size: 21px;
    line-height: 1;
    text-align: right;
  }
  html[data-theme] body #page .people-category-quadrant > footer {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 8px 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding: 9px 13px;
    font-size: 9px;
  }
  html[data-theme] body #page .people-category-quadrant > footer strong {
    color: var(--ink);
  }

  /* Abrir PTN / modelo 2: identidade, tabs e leitura principal + rastreio. */
  html[data-theme] body #ptnDrawer .drawer-identity-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(480px, .9fr);
    align-items: center;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    padding: 15px 16px;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-copy > span,
  html[data-theme] body #ptnDrawer .drawer-identity-copy > small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-copy > span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-copy > h3 {
    overflow: hidden;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-copy > small {
    font-size: 10px;
  }
  html[data-theme] body #ptnDrawer .drawer-identity-summary {
    margin: 0;
  }
  html[data-theme] body #ptnDrawer .drawer-tabs {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    align-items: end;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    scrollbar-width: thin;
  }
  html[data-theme] body #ptnDrawer .drawer-tab {
    display: inline-flex;
    min-width: max-content;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    padding: 0 13px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
  }
  html[data-theme] body #ptnDrawer .drawer-tab > b {
    display: grid;
    min-width: 23px;
    height: 21px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 9px;
  }
  html[data-theme] body #ptnDrawer .drawer-tab:is(:hover, :focus-visible),
  html[data-theme] body #ptnDrawer .drawer-tab.active {
    border-bottom-color: var(--teal);
    color: var(--teal);
  }
  html[data-theme] body #ptnDrawer .drawer-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal) 48%, transparent);
    outline-offset: -2px;
  }
  html[data-theme] body #ptnDrawer .drawer-tab-panel {
    min-width: 0;
  }
  html[data-theme] body #ptnDrawer .drawer-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    align-items: start;
    gap: 14px;
  }
  html[data-theme] body #ptnDrawer .drawer-overview-aside {
    display: grid;
    min-width: 0;
    gap: 14px;
  }
  html[data-theme] body #ptnDrawer .drawer-essential-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-theme] body #ptnDrawer .drawer-trace-grid {
    grid-template-columns: 1fr;
  }
  html[data-theme] body #ptnDrawer .drawer-trace-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  html[data-theme] body #ptnDrawer .drawer-trace-summary > article {
    --trace-tone: var(--blue);
    display: grid;
    min-width: 0;
    min-height: 75px;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--trace-tone);
    border-radius: 7px;
    background: var(--card);
    color: var(--ink);
    padding: 10px 11px;
  }
  html[data-theme] body #ptnDrawer .drawer-trace-summary > article:nth-child(1) { --trace-tone: var(--red); }
  html[data-theme] body #ptnDrawer .drawer-trace-summary > article:nth-child(2) { --trace-tone: var(--amber); }
  html[data-theme] body #ptnDrawer .drawer-trace-summary > article:nth-child(3) { --trace-tone: var(--blue); }
  html[data-theme] body #ptnDrawer .drawer-trace-summary > article:nth-child(4) { --trace-tone: var(--purple); }
  html[data-theme] body #ptnDrawer .drawer-trace-summary span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
  }
  html[data-theme] body #ptnDrawer .drawer-trace-summary strong {
    color: var(--trace-tone);
    font-size: 22px;
    line-height: 1;
  }
  html[data-theme] body #ptnDrawer .drawer-trace-summary small {
    color: var(--muted);
    font-size: 9px;
  }

  @media (max-width: 1280px) {
    html[data-theme] body #page .program-status-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 1120px) {
    html[data-theme] body #page .overview-top-kpis--six {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    html[data-theme] body #page .overview-top-kpis--four {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 900px) {
    html[data-theme] body #page .overview-top-kpis--six {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html[data-theme] body #page .program-summary-primary,
    html[data-theme] body #page .program-status-grid,
    html[data-theme] body #page .people-category-quadrants {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html[data-theme] body #page .program-status-grid > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
    html[data-theme] body #ptnDrawer .drawer-identity-header,
    html[data-theme] body #ptnDrawer .drawer-overview-layout {
      grid-template-columns: 1fr;
    }
    html[data-theme] body #ptnDrawer .drawer-overview-aside {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    html[data-theme] body #page :is(
      .overview-top-kpis--six,
      .overview-top-kpis--four,
      .program-summary-primary,
      .program-status-grid,
      .people-category-quadrants
    ) {
      grid-template-columns: 1fr !important;
    }
    html[data-theme] body #page .program-status-grid > :last-child:nth-child(odd) {
      grid-column: auto;
    }
    html[data-theme] body #page .people-category-quadrant > footer {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html[data-theme] body #ptnDrawer .drawer-identity-summary,
    html[data-theme] body #ptnDrawer .drawer-essential-grid,
    html[data-theme] body #ptnDrawer .drawer-trace-summary {
      grid-template-columns: 1fr;
    }
  }
}

/* Pintura clara das classes novas: branco liso, nenhum gradiente. */
@media screen {
  html[data-theme="light"] body #page :is(
    .program-counter,
    .program-status-counter,
    .program-status-distribution,
    .people-category-quadrant,
    .people-category-header,
    .people-category-person,
    .people-category-quadrant > footer
  ) {
    border-color: var(--x-line) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #page :is(.program-counter, .program-status-counter) {
    border-left-color: var(--program-tone) !important;
  }
  html[data-theme="light"] body #page :is(
    .program-counter > span,
    .program-counter > small,
    .program-status-counter small,
    .program-status-distribution > p,
    .people-category-header span,
    .people-category-subtotal > small,
    .people-category-name > small,
    .people-category-quadrant > footer
  ) {
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body #page :is(
    .program-status-distribution h2,
    .people-category-header h3,
    .people-category-name > strong,
    .people-category-quadrant > footer strong
  ) {
    color: var(--x-ink) !important;
  }

  html[data-theme="light"] body #ptnDrawer :is(
    .drawer-identity-header,
    .drawer-tabs,
    .drawer-tab-panel,
    .drawer-overview-layout,
    .drawer-overview-main,
    .drawer-overview-aside,
    .drawer-trace-summary,
    .drawer-trace-summary > article,
    .drawer-traceability,
    .drawer-section-disabled
  ) {
    background: #fff !important;
    background-image: none !important;
    color: var(--x-ink) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-identity-header,
  html[data-theme="light"] body #ptnDrawer .drawer-tabs,
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary > article {
    border-color: var(--x-line) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary > article {
    border-left-color: var(--trace-tone) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-identity-copy > span {
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-identity-copy > h3 {
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-identity-copy > small {
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-tab {
    border-bottom-color: transparent !important;
    background: #fff !important;
    color: var(--x-muted) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-tab > b {
    border-color: var(--x-line) !important;
    background: #fbfcfd !important;
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-tab:is(:hover, :focus-visible) {
    border-bottom-color: color-mix(in srgb, var(--x-blue) 58%, var(--x-red)) !important;
    background: #fff !important;
    color: var(--x-blue-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-tab.active {
    border-bottom-color: var(--x-red) !important;
    background: #fff !important;
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-tab.active > b {
    border-color: color-mix(in srgb, var(--x-red) 34%, var(--x-line)) !important;
    color: var(--x-red-dark) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary > article:nth-child(1) { --trace-tone: var(--x-red); }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary > article:nth-child(2) { --trace-tone: var(--x-amber); }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary > article:nth-child(3) { --trace-tone: var(--x-blue); }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary > article:nth-child(4) { --trace-tone: var(--x-purple); }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary span,
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary small {
    color: var(--x-muted) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-trace-summary strong {
    color: var(--trace-tone) !important;
  }
  html[data-theme="light"] body #ptnDrawer .drawer-section-disabled {
    border-color: var(--x-line) !important;
  }

  /* O hover de tabela deve vencer a alternancia branca/cinza. */
  html[data-theme="light"] body #ptnDrawer .mini-table > div:not(.mini-head):hover {
    background: #f8fbfd !important;
  }
}