/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/design-tokens.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
 * Console de Despacho — Editorial Industrial
 *
 * Direção estética:
 *  - Não é Notion. Não é Linear. Não é Material. Não é SaaS azul-roxo.
 *  - Mesa de despacho: fundo "paper" warm cream (não white puro), accent
 *    laranja-sinalização (industrial transporte = caminhão, cone, colete),
 *    sidebar warm graphite. Texto warm-black (não pure black).
 *  - Tipografia editorial-técnica: Instrument Sans (UI/títulos) +
 *    Azeret Mono (números/códigos com tabular-nums + slashed-zero).
 *  - Densidade: a info ESCRITA é o produto. Hairline borders, sem sombras
 *    decorativas, sem cards-flutuantes. Hierarquia por tipo + tracking +
 *    border-weight, não por cor.
 * ========================================================================= */

:root {
  /* -------------------- Cores: superfícies / texto --------------------
   * Iteração v5 — identidade purple refletida no bg (lilás warm) para
   * conversar com `--cc-primary` (#6843dd) sem competir. O light theme
   * abandona o cinza-azulado neutro e adota um lilás claríssimo que dá
   * unidade visual com o accent, breadcrumb roxo e spine editorial.
   * Contraste com `--cc-ink: #070e16` permanece WCAG AAA (~17:1).
   * Arquitetura editorial mantida (spine, numerais, breadcrumb).
   * -------------------------------------------------------------------- */
  --cc-bg:               #f5f1fb;          /* lilás warm claríssimo — identidade purple */
  --cc-bg-sunken:        #e8dff5;          /* lilás 2-3 shades mais escuro p/ hairline tint */
  --cc-surface:          #ffffff;
  --cc-surface-raised:   #f6f3ff;          /* lilás claríssimo — accent surface */
  --cc-surface-elevated: #ffffff;

  --cc-ink:              #070e16;          /* preto azulado escuro */
  --cc-ink-strong:       #03080e;          /* quase preto */
  --cc-ink-muted:        #4e5662;
  --cc-ink-soft:         #828a98;
  --cc-ink-inverse:      #ffffff;

  /* -------------------- Linhas / bordas (cool greys) -------------------- */
  --cc-line:             #e4e4e8;
  --cc-line-strong:      #c8cad0;
  --cc-line-soft:        #eff2f5;

  /* -------------------- Cores semânticas (vívidas SaaS, multi-status)
   * Trocamos o "tom queimado" v1 por tons saturados que conversam entre si
   * sem brigar com o purple. Cada um tem variant strong (texto sobre soft)
   * e soft (fundos de badge/state).
   * -------------------------------------------------------------------- */
  --cc-primary:          #6843dd;          /* PURPLE — accent principal */
  --cc-primary-strong:   #4317a4;          /* purple escuro p/ texto sobre soft */
  --cc-primary-soft:     rgba(104, 67, 221, 0.10);
  --cc-primary-ink:      #29107a;

  --cc-warn:             #fc9f30;          /* laranja vivo (saturado) */
  --cc-warn-strong:      #b8680a;
  --cc-warn-soft:        rgba(252, 159, 48, 0.12);

  --cc-error:            #e0394c;          /* crimson SaaS (não muted) */
  --cc-error-strong:     #9c1a2a;
  --cc-error-soft:       rgba(224, 57, 76, 0.10);

  --cc-info:             #3892ed;          /* azul vivo */
  --cc-info-strong:      #0049a0;
  --cc-info-soft:        rgba(56, 146, 237, 0.10);

  --cc-success:          #0ea053;          /* verde vívido (não emerald, não forest) */
  --cc-success-strong:   #0a6e3a;
  --cc-success-soft:     rgba(14, 160, 83, 0.10);

  --cc-neutral:          #4e5662;
  --cc-neutral-soft:     rgba(78, 86, 98, 0.10);

  /* -------------------- Sidebar (quase-preto azulado)
   * Inspirada no site referência: dark navy próximo do preto, alto
   * contraste com o bg claro. Accent purple claro pra item ativo.
   * -------------------------------------------------------------------- */
  --cc-sidebar-bg:         #070e16;
  --cc-sidebar-bg-raised:  #11192a;
  --cc-sidebar-ink:        #dde2eb;
  --cc-sidebar-ink-muted:  #828a98;
  --cc-sidebar-ink-strong: #ffffff;
  --cc-sidebar-line:       #1a2230;
  --cc-sidebar-accent:     #9e7eed;          /* purple claro p/ contraste no fundo escuro */

  /* -------------------- Tipografia (híbrido v3)
   * Inter: UI body principal (alinhado ao site referência portaldotransportador.com).
   * Space Grotesk: títulos editoriais — page header, brand, KPI mega.
   * Azeret Mono: códigos/números/datas — mantém character do portal-unificado.
   * -------------------------------------------------------------------- */
  --cc-font-ui:      var(--font-geist, "Geist"), "Helvetica Neue", system-ui, sans-serif;
  --cc-font-display: var(--font-space-grotesk, "Space Grotesk"), "Helvetica Neue", system-ui, sans-serif;
  --cc-font-mono:    var(--font-geist-mono, "Geist Mono"), "JetBrains Mono", "SFMono-Regular", "Menlo", monospace;

  /* Escala — editorial mas densa. Títulos têm presença, mas grade base
   * é 13px (mesa de despacho não é landing page). */
  --cc-fs-2xs:  10px;
  --cc-fs-xs:   11px;
  --cc-fs-sm:   12px;
  --cc-fs-base: 13px;
  --cc-fs-md:   14px;
  --cc-fs-lg:   16px;
  --cc-fs-xl:   20px;
  --cc-fs-2xl:  26px;
  --cc-fs-3xl:  34px;
  --cc-fs-4xl:  44px;
  --cc-fs-5xl:  56px;  /* numerais editoriais "wow" — page count, KPI hero */
  --cc-fs-display: 72px; /* reserva: hero pages */

  --cc-lh-tight:   1.12;
  --cc-lh-normal:  1.38;
  --cc-lh-relaxed: 1.55;

  --cc-fw-regular:  400;
  --cc-fw-medium:   500;
  --cc-fw-semibold: 600;
  --cc-fw-bold:     700;

  --cc-tracking-tight:  -0.015em;
  --cc-tracking-normal: 0;
  --cc-tracking-wide:   0.06em;
  --cc-tracking-mono:   0.005em;

  /* -------------------- Espaçamento (grade de 4) -------------------- */
  --cc-space-1:  4px;
  --cc-space-2:  8px;
  --cc-space-3:  12px;
  --cc-space-4:  16px;
  --cc-space-5:  20px;
  --cc-space-6:  24px;
  --cc-space-8:  32px;
  --cc-space-10: 40px;
  --cc-space-12: 48px;

  /* -------------------- Geometria
   * Raios pequenos (não pill). Hairline borders.
   * -------------------------------------------------------------------- */
  --cc-radius-sm:   2px;
  --cc-radius-md:   3px;
  --cc-radius-lg:   5px;
  --cc-radius-pill: 999px;

  --cc-border-1: 1px;
  --cc-border-2: 2px;

  /* -------------------- Sombras (mínimas, técnicas)
   * Sombras editoriais — sem "card flutuante de Material". Usadas só pra
   * indicar scroll/overflow e dropdowns.
   * -------------------------------------------------------------------- */
  --cc-shadow-none: none;
  --cc-shadow-sm:   0 1px 0 rgba(27, 24, 21, 0.04);
  --cc-shadow-md:   0 1px 2px rgba(27, 24, 21, 0.06), 0 1px 0 rgba(27, 24, 21, 0.04);
  --cc-shadow-lg:   0 8px 24px rgba(27, 24, 21, 0.10), 0 1px 0 rgba(27, 24, 21, 0.04);
  --cc-shadow-scroll-edge: inset -8px 0 8px -8px rgba(27, 24, 21, 0.14);

  /* -------------------- Densidade (controla altura de linha em tabelas)
   * Iteração 2 — bumpamos +2/+4px pra dar respiração visual sem perder
   * o tom "mesa de despacho". Comfortable agora respira como relatório
   * impresso (linha de 42px = leitura confortável de 2-3 segundos por linha).
   * -------------------------------------------------------------------- */
  --cc-row-height-compact:     32px;
  --cc-row-height-comfortable: 42px;
  --cc-cell-pad-compact-x:     12px;
  --cc-cell-pad-compact-y:     6px;
  --cc-cell-pad-comfortable-x: 14px;
  --cc-cell-pad-comfortable-y: 11px;

  /* -------------------- Editorial — watermarks / spine / accent
   * Tokens novos para a iteração 2: numerais gigantes, faixa lateral
   * "spine de dossier", marcadores numéricos "01/02/03" nos grupos da
   * sidebar, decoração de section.
   * -------------------------------------------------------------------- */
  --cc-watermark-ink:    rgba(104, 67, 221, 0.06);   /* purple soft p/ texturas */
  --cc-watermark-strong: rgba(104, 67, 221, 0.20);   /* spine lateral, accent rules */
  --cc-paper-tint:       rgba(7, 14, 22, 0.025);     /* sutil escuridão azulada */
  --cc-spine-width:      4px;                         /* faixa vertical editorial */

  /* -------------------- Layout (3 modos)
   * normal: sidebar 240px label + max-width container 1400px
   * wide:   sidebar 56px icon-only + content full-bleed
   * focus:  sidebar overlay (z-index acima do main) + content full-bleed
   *
   * Toggles via `data-layout` no <html> (set por (portal)/layout.tsx).
   * -------------------------------------------------------------------- */
  --cc-sidebar-width:           240px;
  --cc-sidebar-width-collapsed: 56px;
  --cc-topbar-height:           48px;
  /* Default NÃO limita largura — relatórios são DENSOS, precisam respirar.
   * No modo `normal` o conteúdo já segue full-bleed; quem quiser conter
   * texto longo usa `max-width: 72ch` localmente (subtítulos, descrições). */
  --cc-content-max:             none;
  --cc-content-pad-x:           20px;

  /* -------------------- Tempo -------------------- */
  --cc-motion-fast:   120ms;
  --cc-motion-normal: 200ms;
  --cc-motion-slow:   320ms;
}

/* -------------------- Layout overrides via data-layout --------------------
 * Os 3 modos ajustam apenas variáveis CSS — o resto do design system
 * responde naturalmente porque consome os tokens.
 * -------------------------------------------------------------------- */
.cc-shell[data-layout="wide"] {
  --cc-sidebar-width: var(--cc-sidebar-width-collapsed);
  --cc-content-max:   none;
  --cc-content-pad-x: 32px;
}

.cc-shell[data-layout="focus"] {
  --cc-sidebar-width: 0px;
  --cc-content-max:   none;
  --cc-content-pad-x: 40px;
}

/* =========================================================================
 * Base layer — reset técnico + defaults globais
 * ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--cc-bg);
  color: var(--cc-ink);
  font-family: var(--cc-font-ui);
  font-size: var(--cc-fs-base);
  line-height: var(--cc-lh-normal);
  font-weight: var(--cc-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv02", "cv03";
  /* Textura sutil "paper" — apenas perceptível em monitores grandes, dá
   * profundidade sem ruído distrativo. Não usa SVG/PNG — só radial-gradient
   * pra economizar bytes. */
  background-image:
    radial-gradient(at 18% 12%, rgba(104, 67, 221, 0.025) 0, transparent 45%),
    radial-gradient(at 80% 88%, rgba(167, 139, 250, 0.04) 0, transparent 50%);
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

code,
kbd,
samp,
pre {
  font-family: var(--cc-font-mono);
  font-size: 0.95em;
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

::selection {
  background: var(--cc-primary);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--cc-primary);
  outline-offset: 2px;
  border-radius: var(--cc-radius-sm);
}

.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc-skip-link {
  position: fixed;
  top: var(--cc-space-3);
  left: var(--cc-space-3);
  z-index: 100;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cc-primary);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface-elevated);
  color: var(--cc-ink-strong);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  font-weight: var(--cc-fw-bold);
  letter-spacing: var(--cc-tracking-wide);
  padding: 0 var(--cc-space-4);
  text-transform: uppercase;
  transform: translateY(calc(-100% - var(--cc-space-6)));
  transition: transform var(--cc-motion-fast) ease;
}

.cc-skip-link:focus-visible {
  transform: translateY(0);
}

/* =========================================================================
 * AppShell layout
 * ========================================================================= */

.cc-shell {
  display: grid;
  grid-template-columns: var(--cc-sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--cc-topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  transition: grid-template-columns var(--cc-motion-normal) ease;
}

.cc-shell__scrim {
  display: none;
}

.cc-shell__sidebar {
  grid-area: sidebar;
  background: var(--cc-sidebar-bg);
  color: var(--cc-sidebar-ink);
  border-right: 1px solid var(--cc-sidebar-line);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  width: var(--cc-sidebar-width);
  transition: width var(--cc-motion-normal) ease;
  z-index: 20;
}

/* Focus mode — sidebar vira overlay (esconde mas mantém acessível via skip-link/hover) */
.cc-shell[data-layout="focus"] .cc-shell {
  grid-template-columns: 0 minmax(0, 1fr);
}
.cc-shell[data-layout="focus"] .cc-shell__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--cc-sidebar-width-collapsed);
  transform: translateX(-100%);
  pointer-events: none;
}
.cc-shell[data-layout="focus"] .cc-shell__sidebar:hover,
.cc-shell[data-layout="focus"] .cc-shell__sidebar:focus-within {
  transform: translateX(0);
  width: 240px;
  pointer-events: auto;
  box-shadow: var(--cc-shadow-lg);
}

.cc-shell__topbar {
  grid-area: topbar;
  background: var(--cc-surface);
  border-bottom: 1px solid var(--cc-line);
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: 0 var(--cc-content-pad-x);
  height: var(--cc-topbar-height);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  /* hairline de detalhe sob a topbar — peça editorial */
  box-shadow: 0 1px 0 var(--cc-line-soft);
}

.cc-shell__main {
  grid-area: main;
  padding: var(--cc-space-5) var(--cc-content-pad-x) var(--cc-space-10);
  min-width: 0;
}

.cc-shell__main-inner {
  max-width: var(--cc-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-6);
}

/* =========================================================================
 * Sidebar / nav
 * ========================================================================= */

.cc-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4);
  border-bottom: 1px solid var(--cc-sidebar-line);
  height: var(--cc-topbar-height);
  flex: 0 0 auto;
}

.cc-sidebar__mobile-close {
  display: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border: 1px solid var(--cc-sidebar-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-sidebar-bg-raised);
  color: var(--cc-sidebar-ink-strong);
}

.cc-sidebar__brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--cc-sidebar-accent);
  color: var(--cc-sidebar-bg);
  border-radius: var(--cc-radius-sm);
  flex: 0 0 auto;
  font-weight: var(--cc-fw-bold);
}

.cc-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: opacity var(--cc-motion-fast) ease;
}

.cc-shell[data-layout="wide"] .cc-sidebar__brand-text {
  opacity: 0;
  pointer-events: none;
}

.cc-sidebar__brand-name {
  font-family: var(--cc-font-ui);
  font-size: var(--cc-fs-md);
  font-weight: var(--cc-fw-semibold);
  letter-spacing: var(--cc-tracking-tight);
  color: var(--cc-sidebar-ink-strong);
  line-height: 1.1;
  white-space: nowrap;
}

.cc-sidebar__brand-sub {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  color: var(--cc-sidebar-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-top: 2px;
  white-space: nowrap;
}

.cc-sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: var(--cc-space-2);
  gap: 1px;
  flex: 1 1 auto;
}

.cc-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cc-sidebar__group + .cc-sidebar__group {
  margin-top: var(--cc-space-3);
  padding-top: var(--cc-space-3);
  border-top: 1px solid var(--cc-sidebar-line);
}

.cc-sidebar__group-label {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  color: var(--cc-sidebar-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  padding: var(--cc-space-2) var(--cc-space-3) var(--cc-space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-shell[data-layout="wide"] .cc-sidebar__group-label {
  /* Em wide, mostra apenas as 2 primeiras letras como "marcador" */
  font-size: 8px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: var(--cc-space-2) 0 0;
  color: var(--cc-sidebar-ink-muted);
  opacity: 0.6;
}

.cc-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: 7px var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-sidebar-ink);
  font-size: var(--cc-fs-md);
  font-weight: var(--cc-fw-medium);
  min-height: 32px;
  transition: background var(--cc-motion-fast) ease, color var(--cc-motion-fast) ease;
  position: relative;
}

.cc-sidebar__item:hover {
  background: var(--cc-sidebar-bg-raised);
  color: var(--cc-sidebar-ink-strong);
}

.cc-sidebar__item--active {
  background: var(--cc-sidebar-bg-raised);
  color: var(--cc-sidebar-ink-strong);
}
.cc-sidebar__item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--cc-sidebar-accent);
  border-radius: 0 2px 2px 0;
}

.cc-sidebar__item--disabled {
  color: var(--cc-sidebar-ink-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.cc-sidebar__item-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.9;
}

.cc-sidebar__item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--cc-motion-fast) ease;
}

.cc-shell[data-layout="wide"] .cc-sidebar__item {
  justify-content: center;
  padding: 7px 0;
}
.cc-shell[data-layout="wide"] .cc-sidebar__item-label,
.cc-shell[data-layout="wide"] .cc-sidebar__item-badge {
  display: none;
}

.cc-sidebar__item-badge {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-sidebar-ink-muted);
  padding: 1px 5px;
  border: 1px solid var(--cc-sidebar-line);
  border-radius: var(--cc-radius-sm);
}

.cc-sidebar__footer {
  padding: var(--cc-space-3);
  border-top: 1px solid var(--cc-sidebar-line);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  color: var(--cc-sidebar-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-2);
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
}

.cc-shell[data-layout="wide"] .cc-sidebar__footer {
  justify-content: center;
  font-size: 8px;
}

/* =========================================================================
 * Topbar
 * ========================================================================= */

.cc-topbar__menu-button {
  display: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface-raised);
  color: var(--cc-ink-strong);
}

.cc-topbar__mobile-brand {
  display: none;
  min-width: 0;
  align-items: center;
  gap: var(--cc-space-2);
  color: var(--cc-ink-strong);
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-md);
  font-weight: var(--cc-fw-bold);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

.cc-topbar__mobile-brand span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-topbar__mobile-brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-primary);
  color: #ffffff;
}

.cc-topbar__search {
  flex: 1 1 auto;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: 4px var(--cc-space-3);
  border: 1px solid var(--cc-line);
  background: var(--cc-bg);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-ink-muted);
  font-size: var(--cc-fs-sm);
  height: 30px;
  transition: border-color var(--cc-motion-fast) ease;
}
.cc-topbar__search:focus-within {
  border-color: var(--cc-primary);
}

.cc-topbar__search-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--cc-font-ui);
  font-size: var(--cc-fs-sm);
  color: var(--cc-ink);
}

.cc-topbar__spacer {
  flex: 1 1 auto;
}

.cc-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
}

.cc-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-fs-sm);
  color: var(--cc-ink);
  min-height: 32px;
}

.cc-topbar__user--mobile {
  display: none;
}

.cc-topbar__user-mono {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  color: var(--cc-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}

/* =========================================================================
 * Badges / Status — versão editorial (hairline borders, sem pastel)
 * ========================================================================= */

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  padding: 2px 7px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  color: var(--cc-ink-muted);
  line-height: 1.4;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.cc-badge--ok,
.cc-badge--success {
  color: var(--cc-success-strong);
  background: var(--cc-success-soft);
  border-color: var(--cc-success);
}

.cc-badge--info {
  color: var(--cc-info-strong);
  background: var(--cc-info-soft);
  border-color: var(--cc-info);
}

.cc-badge--warn {
  color: var(--cc-warn-strong);
  background: var(--cc-warn-soft);
  border-color: var(--cc-warn);
}

.cc-badge--error {
  color: var(--cc-error-strong);
  background: var(--cc-error-soft);
  border-color: var(--cc-error);
}

.cc-badge--neutral {
  color: var(--cc-ink-muted);
  background: var(--cc-bg-sunken);
}

.cc-badge--readonly {
  color: var(--cc-primary-strong);
  background: var(--cc-primary-soft);
  border-color: var(--cc-primary);
}

/* =========================================================================
 * KPI strip — placa de instrumentação
 * ========================================================================= */

.cc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1px;
  gap: 1px;
  background: var(--cc-line);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
}

.cc-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--cc-space-3) var(--cc-space-4);
  background: var(--cc-surface);
  min-height: 70px;
  position: relative;
}

.cc-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--cc-primary);
}

.cc-kpi__label {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  color: var(--cc-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  font-weight: var(--cc-fw-semibold);
}

.cc-kpi__value {
  font-family: var(--cc-font-ui);
  font-size: var(--cc-fs-2xl);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink-strong);
  line-height: var(--cc-lh-tight);
  letter-spacing: var(--cc-tracking-tight);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-kpi__value--mono {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-lg);
}

.cc-kpi__hint {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  color: var(--cc-ink-soft);
  margin-top: 2px;
}

/* =========================================================================
 * Section / page header — editorial scale
 * ========================================================================= */

.cc-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cc-space-4);
  padding-bottom: var(--cc-space-4);
  border-bottom: 1px solid var(--cc-line);
  position: relative;
}
.cc-page-header::after {
  /* Doublerule editorial — segundo traço hairline 6px abaixo */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--cc-line-soft);
}

.cc-page-header__title {
  margin: 0;
  font-size: var(--cc-fs-2xl);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink-strong);
  letter-spacing: var(--cc-tracking-tight);
  line-height: var(--cc-lh-tight);
}

.cc-page-header__subtitle {
  margin: 4px 0 0;
  font-size: var(--cc-fs-md);
  color: var(--cc-ink-muted);
  max-width: 72ch;
}

.cc-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  flex-shrink: 0;
}

.cc-section {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
}

.cc-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-3);
}

.cc-section__title {
  margin: 0;
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink-strong);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  font-family: var(--cc-font-mono);
}

.cc-section__hint {
  margin: 0;
  font-size: var(--cc-fs-sm);
  color: var(--cc-ink-muted);
}

/* =========================================================================
 * Module hub tile — bordered, accent-left
 * ========================================================================= */

.cc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: var(--cc-space-3);
  gap: var(--cc-space-3);
}

.cc-hub-tile {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  padding: var(--cc-space-4);
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-md);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color var(--cc-motion-fast) ease, background var(--cc-motion-fast) ease, transform var(--cc-motion-fast) ease;
  min-height: 116px;
  overflow: hidden;
}

.cc-hub-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background var(--cc-motion-fast) ease;
}

.cc-hub-tile--ready:hover {
  border-color: var(--cc-primary);
  background: var(--cc-surface-raised);
  transform: translateY(-1px);
}
.cc-hub-tile--ready:hover::before {
  background: var(--cc-primary);
}

.cc-hub-tile--coming,
.cc-hub-tile--blocked {
  cursor: not-allowed;
  background: var(--cc-bg-sunken);
  opacity: 0.7;
}

.cc-hub-tile--coming .cc-hub-tile__title,
.cc-hub-tile--blocked .cc-hub-tile__title {
  color: var(--cc-ink-muted);
}

.cc-hub-tile__head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}

.cc-hub-tile__icon {
  color: var(--cc-primary);
  flex: 0 0 auto;
}

.cc-hub-tile--coming .cc-hub-tile__icon,
.cc-hub-tile--blocked .cc-hub-tile__icon {
  color: var(--cc-ink-soft);
}

.cc-hub-tile__title {
  font-size: var(--cc-fs-md);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink-strong);
  letter-spacing: var(--cc-tracking-tight);
}

.cc-hub-tile__desc {
  font-size: var(--cc-fs-sm);
  color: var(--cc-ink-muted);
  margin: 0;
  line-height: var(--cc-lh-normal);
}

.cc-hub-tile__status {
  position: absolute;
  top: var(--cc-space-3);
  right: var(--cc-space-3);
}

/* =========================================================================
 * Data Table — densa, sticky header + sticky first column + scroll shadows
 * ========================================================================= */

.cc-table-wrap {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
  overflow: auto;
  /* Ocupar quase toda a viewport vertical disponível — relatório é o
   * protagonista; reservar só topbar(48) + header(~140) + paginação(48).
   * Isso dá ~25 linhas em uma 14" laptop e 40+ em 27" desktop. */
  max-height: calc(100vh - 240px);
  position: relative;
  /* Indicador de scroll horizontal — sombra nas bordas só quando há overflow.
   * `background-attachment: local` faz a sombra "ficar parada" durante o
   * scroll horizontal, criando o efecto de "fade-edge" dos relatórios da FT. */
  background-image:
    linear-gradient(to right, var(--cc-surface) 30%, rgba(251, 248, 242, 0)),
    linear-gradient(to right, rgba(251, 248, 242, 0), var(--cc-surface) 70%),
    radial-gradient(at left center, rgba(27, 24, 21, 0.15), transparent 70%),
    radial-gradient(at right center, rgba(27, 24, 21, 0.15), transparent 70%);
  background-position: left center, right center, left center, right center;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.cc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--cc-fs-base);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--cc-bg-sunken);
  color: var(--cc-ink-strong);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  text-align: left;
  border-bottom: 1px solid var(--cc-line);
  padding: 8px var(--cc-cell-pad-compact-x);
  white-space: nowrap;
  min-width: 60px;
}

.cc-table tbody td {
  border-bottom: 1px solid var(--cc-line-soft);
  color: var(--cc-ink);
  vertical-align: middle;
  background: var(--cc-surface);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-table--compact tbody td {
  padding: var(--cc-cell-pad-compact-y) var(--cc-cell-pad-compact-x);
  height: var(--cc-row-height-compact);
  line-height: var(--cc-lh-tight);
}

.cc-table--comfortable tbody td {
  padding: var(--cc-cell-pad-comfortable-y) var(--cc-cell-pad-comfortable-x);
  height: var(--cc-row-height-comfortable);
}

/* Zebra warm — não risca, só um fundo leve nas linhas pares */
.cc-table tbody tr:nth-child(even) td {
  background: var(--cc-surface-raised);
}

.cc-table tbody tr:hover td {
  background: rgba(104, 67, 221, 0.06);
}

.cc-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Sticky first column — usa `.cc-table--sticky-first`. O `<th>` e `<td>`
 * da primeira coluna ficam fixos durante scroll horizontal. */
.cc-table--sticky-first thead th:first-child,
.cc-table--sticky-first tbody td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  /* sombra à direita só quando há overflow horizontal — peça editorial */
  box-shadow: var(--cc-shadow-scroll-edge);
}
.cc-table--sticky-first thead th:first-child {
  z-index: 4; /* acima dos outros th's (z=3) e do tbody (z=2) */
  background: var(--cc-bg-sunken);
}
.cc-table--sticky-first tbody tr:nth-child(even) td:first-child {
  background: var(--cc-surface-raised);
}
.cc-table--sticky-first tbody tr:hover td:first-child {
  background: rgba(104, 67, 221, 0.08);
}

.cc-table__cell--mono {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  color: var(--cc-ink);
}

.cc-table__cell--num {
  font-family: var(--cc-font-mono);
  text-align: right;
}

.cc-table__cell--muted {
  color: var(--cc-ink-muted);
}

.cc-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3);
  border: 1px solid var(--cc-line);
  border-bottom: 0;
  border-radius: var(--cc-radius-md) var(--cc-radius-md) 0 0;
  background: var(--cc-surface-raised);
}

.cc-table-toolbar + .cc-table-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* =========================================================================
 * Pagination
 * ========================================================================= */

.cc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding-top: var(--cc-space-3);
}

.cc-pagination__info {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  color: var(--cc-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}

.cc-pagination__nav {
  display: flex;
  gap: var(--cc-space-2);
}

.cc-pagination__link,
.cc-pagination__link--disabled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  padding: 5px var(--cc-space-3);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  color: var(--cc-ink);
  transition: border-color var(--cc-motion-fast) ease, color var(--cc-motion-fast) ease;
}

.cc-pagination__link:hover {
  border-color: var(--cc-primary);
  color: var(--cc-primary-strong);
}

.cc-pagination__link--disabled {
  color: var(--cc-ink-soft);
  background: var(--cc-bg-sunken);
  pointer-events: none;
}

/* =========================================================================
 * Density toggle + Layout toggle (3 níveis)
 * ========================================================================= */

.cc-density,
.cc-layout-toggle {
  display: inline-flex;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  background: var(--cc-surface);
}

.cc-density__opt,
.cc-layout-toggle__opt {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  padding: 4px var(--cc-space-2);
  color: var(--cc-ink-muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background var(--cc-motion-fast) ease, color var(--cc-motion-fast) ease;
}

.cc-density__opt + .cc-density__opt,
.cc-layout-toggle__opt + .cc-layout-toggle__opt {
  border-left: 1px solid var(--cc-line);
}

.cc-density__opt:hover,
.cc-layout-toggle__opt:hover {
  background: var(--cc-bg-sunken);
  color: var(--cc-ink);
}

.cc-density__opt--active,
.cc-layout-toggle__opt--active {
  background: var(--cc-ink-strong);
  color: var(--cc-surface);
}

/* =========================================================================
 * States: Empty / Error / Blocked / Forbidden
 * ========================================================================= */

.cc-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-10) var(--cc-space-6);
  border: 1px dashed var(--cc-line);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
  color: var(--cc-ink-muted);
}

.cc-state--error {
  border-style: solid;
  border-color: var(--cc-error);
  background: var(--cc-error-soft);
  color: var(--cc-error-strong);
}

.cc-state--blocked {
  border-color: var(--cc-warn);
  background: var(--cc-warn-soft);
  color: var(--cc-warn-strong);
}

.cc-state--forbidden {
  border-color: var(--cc-neutral);
  color: var(--cc-ink);
}

.cc-state__icon {
  flex: 0 0 auto;
  opacity: 0.7;
}

.cc-state__title {
  font-size: var(--cc-fs-lg);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink-strong);
  letter-spacing: var(--cc-tracking-tight);
}

.cc-state--error .cc-state__title {
  color: var(--cc-error-strong);
}

.cc-state--blocked .cc-state__title {
  color: var(--cc-warn-strong);
}

.cc-state__text {
  font-size: var(--cc-fs-md);
  max-width: 560px;
  line-height: var(--cc-lh-relaxed);
  margin: 0;
}

.cc-state__action {
  margin-top: var(--cc-space-2);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  color: var(--cc-primary-strong);
  text-decoration: underline;
}

/* =========================================================================
 * CNPJ + mono text
 * ========================================================================= */

.cc-mono {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  letter-spacing: var(--cc-tracking-mono);
  color: var(--cc-ink);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-cnpj {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  letter-spacing: var(--cc-tracking-mono);
  color: var(--cc-ink);
  cursor: default;
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-cnpj--copyable {
  cursor: copy;
}

.cc-cnpj--copyable:hover {
  color: var(--cc-primary-strong);
}

/* =========================================================================
 * Readonly badge (topbar pin)
 * ========================================================================= */

.cc-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-primary-strong);
  background: var(--cc-primary-soft);
  border: 1px solid var(--cc-primary);
  padding: 3px var(--cc-space-2);
  border-radius: var(--cc-radius-sm);
}

/* =========================================================================
 * Responsive
 * ========================================================================= */

@media (min-width: 640px) and (max-width: 1023px) {
  .cc-shell {
    --cc-sidebar-width: 64px;
    --cc-content-pad-x: 16px;
  }

  .cc-shell__sidebar {
    width: 64px;
  }

  .cc-sidebar__brand {
    justify-content: center;
    padding: 0;
  }

  .cc-sidebar__brand-text,
  .cc-sidebar__item-label,
  .cc-sidebar__item-badge,
  .cc-sidebar__footer span {
    display: none;
  }

  .cc-sidebar__nav {
    align-items: stretch;
    padding: var(--cc-space-2);
  }

  .cc-sidebar__group-label {
    justify-content: center;
    padding: var(--cc-space-2) 0 var(--cc-space-1);
    font-size: 0;
  }

  .cc-sidebar__group-label::before {
    font-size: 8px;
  }

  .cc-sidebar__item {
    justify-content: center;
    min-height: 44px;
    padding: 0;
  }

  .cc-sidebar__item--active::after {
    display: none;
  }

  .cc-sidebar__footer {
    justify-content: center;
  }

  .cc-shell__topbar {
    gap: var(--cc-space-2);
  }

  .cc-topbar__search {
    flex: 0 1 240px;
    min-width: 156px;
    max-width: 240px;
  }

  .cc-topbar__breadcrumb {
    max-width: 190px;
  }

  .cc-topbar__actions {
    gap: var(--cc-space-2);
  }

  .cc-readonly-badge span,
  .cc-topbar__user--desktop span,
  .cc-density__opt span,
  .cc-layout-toggle__opt span,
  .cc-theme-toggle__opt span {
    display: none;
  }

  .cc-density__opt,
  .cc-layout-toggle__opt,
  .cc-theme-toggle__opt {
    min-width: 34px;
    justify-content: center;
    padding-right: var(--cc-space-2);
    padding-left: var(--cc-space-2);
  }

  .cc-page-header__title {
    font-size: var(--cc-fs-3xl);
  }
}

@media (max-width: 639px) {
  .cc-shell {
    --cc-content-pad-x: 12px;
    --cc-topbar-height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .cc-shell__topbar {
    min-height: 56px;
    height: auto;
    flex-wrap: wrap;
    gap: var(--cc-space-2);
    padding: var(--cc-space-2);
  }

  .cc-topbar__menu-button,
  .cc-topbar__mobile-brand,
  .cc-topbar__user--mobile {
    display: inline-flex;
  }

  .cc-topbar__menu-button {
    flex: 0 0 auto;
  }

  .cc-topbar__mobile-brand {
    flex: 1 1;
  }

  .cc-topbar__user--mobile {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .cc-topbar__user--mobile span {
    display: none;
  }

  .cc-live-indicator,
  .cc-topbar__search,
  .cc-topbar__breadcrumb,
  .cc-topbar__spacer,
  .cc-topbar__user--desktop {
    display: none;
  }

  .cc-topbar__search-input,
  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }

  .cc-topbar__actions {
    order: 10;
    width: 100%;
    min-width: 0;
    gap: var(--cc-space-2);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .cc-readonly-badge,
  .cc-badge,
  .cc-density__opt,
  .cc-layout-toggle__opt,
  .cc-theme-toggle__opt {
    min-height: 44px;
    align-items: center;
  }

  .cc-readonly-badge,
  .cc-badge {
    flex: 0 0 auto;
  }

  .cc-density,
  .cc-layout-toggle,
  .cc-theme-toggle {
    flex: 0 0 auto;
  }

  .cc-density__opt,
  .cc-layout-toggle__opt,
  .cc-theme-toggle__opt {
    padding-right: var(--cc-space-3);
    padding-left: var(--cc-space-3);
  }

  .cc-shell__sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(88vw, 320px);
    height: 100dvh;
    max-height: none;
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    box-shadow: var(--cc-shadow-lg);
    transition:
      transform var(--cc-motion-normal) ease,
      visibility var(--cc-motion-normal) ease;
  }

  .cc-shell--mobile-nav-open .cc-shell__sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .cc-shell__scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    border: 0;
    background: rgba(3, 8, 14, 0.58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--cc-motion-normal) ease,
      visibility var(--cc-motion-normal) ease;
  }

  .cc-shell--mobile-nav-open .cc-shell__scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .cc-sidebar__brand {
    min-height: 56px;
    height: auto;
    padding: var(--cc-space-2) var(--cc-space-3);
  }

  .cc-sidebar__mobile-close {
    display: inline-flex;
  }

  .cc-sidebar__item {
    min-height: 44px;
    padding-top: var(--cc-space-2);
    padding-bottom: var(--cc-space-2);
  }

  .cc-shell__main {
    padding-top: var(--cc-space-4);
  }

  .cc-shell__main-inner {
    padding-right: 0;
    padding-left: var(--cc-space-3);
  }

  .cc-page-footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    letter-spacing: var(--cc-tracking-wide);
  }

  .cc-page-footer__rule {
    flex-basis: 100%;
    order: 10;
    margin: var(--cc-space-1) 0 0;
  }

  .cc-page-header__title {
    font-size: var(--cc-fs-2xl);
    line-height: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================================
 * ITERAÇÃO 2 — Camada Editorial
 *
 * Nada aqui sobrescreve a camada funcional acima — só ADICIONA peças com
 * mais identidade visual. Filosofia: "página de manual técnico industrial
 * + suplemento de revista". Numerais grandes em Azeret Mono carregam o
 * peso visual; tipografia Instrument Sans assina; safety-orange aparece
 * em traços finos, nunca em fundo cheio.
 * ========================================================================= */

/* -------------------- AppShell — spine lateral editorial --------------------
 * Faixa vertical fina à esquerda do main area, com cor accent. Não decora —
 * marca território. Quando o usuário rola, ela continua como referência
 * visual de "página de relatório". */

.cc-shell__main {
  position: relative;
  background: linear-gradient(
    to right,
    var(--cc-watermark-strong) 0,
    var(--cc-watermark-strong) var(--cc-spine-width),
    transparent var(--cc-spine-width),
    transparent 100%
  );
}

.cc-shell[data-layout="focus"] .cc-shell__main {
  /* No modo focus, queremos atmosfera ainda mais editorial — spine fica
   * 6px e ganha gradiente sutil. */
  background: linear-gradient(
    to right,
    rgba(104, 67, 221, 0.22) 0,
    rgba(104, 67, 221, 0.22) 6px,
    transparent 6px,
    transparent 100%
  );
}

.cc-shell__main-inner {
  /* Mais respiração lateral — afasta do spine, conversa com a margem direita */
  padding-left: var(--cc-space-4);
  padding-right: var(--cc-space-2);
}

/* -------------------- Page header editorial --------------------
 * Substitui o `.cc-page-header` plain. Tem 4 zonas:
 *   1. breadcrumb mono uppercase (caminho atual)
 *   2. título grande Instrument 32-40px tracking-tight
 *   3. subtítulo respirável
 *   4. actions à direita
 *   5. (opcional) numeral count gigante em mono — usar `.cc-page-header__count`
 *
 * O `::after` injeta uma "régua editorial" laranja 32px de comprimento
 * (não um traço de 100% como SaaS) — peça óbvia. */

.cc-page-header {
  padding: var(--cc-space-2) 0 var(--cc-space-5);
  border-bottom: 1px solid var(--cc-line);
  align-items: flex-start;
  position: relative;
}

.cc-page-header::after {
  /* Régua editorial — 96px laranja 3px, mais presença que a v1 (48px×2px).
   * Alinha ao início do título e funciona como "assinatura" da página. */
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 96px;
  height: 3px;
  background: var(--cc-primary);
}

.cc-page-header__title {
  /* Title é o "cartaz" da página — bumpa pra ser inconfundível em telas
   * largas. Em 1920px sobe pra 56px, em laptop 14" fica em ~38px. */
  font-size: clamp(34px, 4.2vw, var(--cc-fs-5xl));
  font-weight: var(--cc-fw-semibold);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 var(--cc-space-3);
}

.cc-page-header__subtitle {
  margin: 0;
  font-size: var(--cc-fs-md);
  color: var(--cc-ink-muted);
  max-width: 68ch;
  line-height: var(--cc-lh-relaxed);
}

.cc-page-header__breadcrumb {
  display: block;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-primary-strong);
  margin: 0 0 var(--cc-space-3);
}

.cc-page-header__count {
  /* Numeral gigante mono à direita do título — "wow" editorial. Pensa
   * num placar de instrumento de avião. */
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-5xl);
  font-weight: var(--cc-fw-medium);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cc-ink-strong);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-page-header__count-label {
  display: block;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-ink-muted);
  margin-top: 2px;
  text-align: right;
}

/* Variante "editorial" com leading numeric — mostra contador grande
 * no canto direito como mancha visual */
.cc-page-header--editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: var(--cc-space-6);
  gap: var(--cc-space-6);
  align-items: end;
}

/* -------------------- Sidebar — numerais editoriais nos grupos --------------------
 * Cada grupo ganha um numeral mono pequeno tipo "01" "02" "03" como
 * marker editorial. Vignelli-grade. */

.cc-sidebar__group-label {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}

.cc-sidebar__group-label::before {
  content: attr(data-num);
  font-family: var(--cc-font-mono);
  font-size: 9px;
  font-weight: var(--cc-fw-semibold);
  letter-spacing: 0.08em;
  color: var(--cc-sidebar-accent);
  background: rgba(228, 93, 47, 0.10);
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.0;
  min-width: 18px;
  text-align: center;
}

.cc-shell[data-layout="wide"] .cc-sidebar__group-label::before {
  font-size: 8px;
  padding: 1px 3px;
}

/* -------------------- Sidebar — brand markup mais editorial -------------------- */

.cc-sidebar__brand-mark {
  font-family: var(--cc-font-mono);
  font-weight: var(--cc-fw-bold);
  font-size: 13px;
  letter-spacing: -0.02em;
  /* glyph sutil "▼" pra dar peso visual */
}

.cc-sidebar__brand-name {
  font-size: var(--cc-fs-md);
  letter-spacing: -0.02em;
}

.cc-sidebar__brand-sub {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* -------------------- Topbar — breadcrumb mono + status legível -------------------- */

.cc-topbar__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cc-ink-muted);
  padding: 0 var(--cc-space-3);
  border-left: 1px solid var(--cc-line);
  border-right: 1px solid var(--cc-line);
  height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.cc-topbar__breadcrumb-sep {
  color: var(--cc-primary);
  font-weight: var(--cc-fw-bold);
  margin: 0 2px;
}

/* -------------------- KPI strip — cluster de instrumentos --------------------
 * Bumpa drasticamente o peso dos números. Cada KPI vira uma "mancha
 * numérica" como mostrador de painel. Label virou micro-mono uppercase. */

.cc-kpi-strip {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-radius: var(--cc-radius-md);
  overflow: hidden;
  border: 1px solid var(--cc-line);
  background: var(--cc-line);
  gap: 1px;
}

.cc-kpi {
  padding: var(--cc-space-4) var(--cc-space-5) var(--cc-space-4);
  min-height: 96px;
  position: relative;
  background: var(--cc-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--cc-space-3);
}

.cc-kpi::before {
  /* Faixa vertical de identidade — 3px laranja, do topo até a base */
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--cc-primary);
}

.cc-kpi__label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--cc-ink-muted);
  order: -1;
}

.cc-kpi__value {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-3xl);
  font-weight: var(--cc-fw-medium);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--cc-ink-strong);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-kpi__value--mono {
  font-size: var(--cc-fs-2xl);
}

.cc-kpi__hint {
  font-size: var(--cc-fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-soft);
  margin: 0;
}

/* -------------------- Hub tiles — editorial cards (não SaaS) --------------------
 * Tile vira "página de catálogo" — número de módulo, ícone outlined,
 * título com tracking-tight, descrição respirável, accent bottom ao hover. */

.cc-hub-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--cc-space-4);
}

.cc-hub-tile {
  padding: var(--cc-space-5);
  min-height: 140px;
  background: var(--cc-surface);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  text-decoration: none;
  color: inherit;
  overflow: visible;
  transition: border-color var(--cc-motion-fast) ease,
              background var(--cc-motion-fast) ease,
              transform var(--cc-motion-fast) ease;
}

.cc-hub-tile::before {
  /* Faixa lateral some por default; vira accent ao hover */
  width: 3px;
  background: transparent;
}

.cc-hub-tile--ready::after {
  /* Marca editorial no canto superior direito: 2px de orange */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 2px;
  background: var(--cc-primary);
}

.cc-hub-tile--ready:hover {
  border-color: var(--cc-ink-strong);
  background: var(--cc-surface-raised);
  transform: none;
}

.cc-hub-tile--ready:hover::before {
  background: var(--cc-primary);
}

.cc-hub-tile__head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
}

.cc-hub-tile__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--cc-primary-soft);
  color: var(--cc-primary);
  border-radius: var(--cc-radius-sm);
  flex: 0 0 auto;
}

.cc-hub-tile--coming .cc-hub-tile__icon,
.cc-hub-tile--blocked .cc-hub-tile__icon {
  background: var(--cc-bg-sunken);
  color: var(--cc-ink-soft);
}

.cc-hub-tile__title {
  font-size: var(--cc-fs-lg);
  font-weight: var(--cc-fw-semibold);
  letter-spacing: -0.018em;
  line-height: 1.1;
}

.cc-hub-tile__desc {
  font-size: var(--cc-fs-sm);
  line-height: var(--cc-lh-relaxed);
  color: var(--cc-ink-muted);
}

/* -------------------- Filter group — "cartão" agrupador editorial --------------------
 * Quando uma tela tem 10+ filtros (gerencial: 15), use este wrapper
 * para criar 2-3 grupos visuais separados por hairline rule. */

.cc-filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-gap: var(--cc-space-3);
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) var(--cc-space-4);
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
}

.cc-filter-group + .cc-filter-group {
  border-top: 0;
}

.cc-filter-group:first-child {
  border-radius: var(--cc-radius-sm) var(--cc-radius-sm) 0 0;
}

.cc-filter-group:last-child {
  border-radius: 0 0 var(--cc-radius-sm) var(--cc-radius-sm);
}

.cc-filter-group__heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-ink-muted);
  margin: 0 0 var(--cc-space-1);
  padding-bottom: var(--cc-space-2);
  border-bottom: 1px solid var(--cc-line-soft);
}

.cc-filter-group__heading::before {
  content: attr(data-num);
  display: inline-block;
  font-family: var(--cc-font-mono);
  font-size: 9px;
  font-weight: var(--cc-fw-bold);
  letter-spacing: 0.08em;
  color: var(--cc-primary);
  background: var(--cc-primary-soft);
  padding: 2px 5px;
  border-radius: 2px;
  line-height: 1.0;
}

/* -------------------- Table — refinos editoriais --------------------
 * Header maior + peso visual. Hover virou "luz" sutil (rgba laranja
 * muito soft) em vez de fundo preenchido. Borda inferior do header
 * grossa pra marcar a transição.
 * -------------------------------------------------------------------- */

.cc-table thead th {
  padding: 11px var(--cc-cell-pad-compact-x);
  font-size: 10px;
  letter-spacing: 0.14em;
  border-bottom: 2px solid var(--cc-ink-strong);
  background: var(--cc-bg);
}

.cc-table--sticky-first thead th:first-child {
  background: var(--cc-bg);
  border-right: 1px solid var(--cc-line);
}

.cc-table--sticky-first tbody td:first-child {
  font-weight: var(--cc-fw-medium);
  color: var(--cc-ink-strong);
  border-right: 1px solid var(--cc-line);
}

.cc-table tbody tr:nth-child(even) td {
  background: rgba(231, 223, 208, 0.35);
}

.cc-table tbody tr:hover td {
  background: rgba(104, 67, 221, 0.05);
  box-shadow: inset 2px 0 0 var(--cc-primary);
}

.cc-table--sticky-first tbody tr:hover td:first-child {
  background: rgba(104, 67, 221, 0.08);
  box-shadow: inset 2px 0 0 var(--cc-primary);
}

/* -------------------- Pagination — botões editoriais --------------------
 * Botões mais "manuais" — tipografia mono maior, hover com box-shadow
 * em vez de border-color. */

.cc-pagination {
  padding-top: var(--cc-space-4);
  padding-bottom: var(--cc-space-2);
  border-top: 1px solid var(--cc-line-soft);
}

.cc-pagination__link,
.cc-pagination__link--disabled {
  padding: 6px var(--cc-space-4);
  font-size: var(--cc-fs-xs);
  letter-spacing: 0.1em;
  font-weight: var(--cc-fw-semibold);
  background: var(--cc-surface);
}

.cc-pagination__link:hover {
  background: var(--cc-primary);
  color: #fff;
  border-color: var(--cc-primary);
}

/* -------------------- Density / Layout toggle — refinamento -------------------- */

.cc-density,
.cc-layout-toggle {
  border-radius: var(--cc-radius-sm);
  border-color: var(--cc-line-strong);
}

.cc-density__opt,
.cc-layout-toggle__opt {
  padding: 5px var(--cc-space-3);
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: var(--cc-fw-semibold);
}

.cc-density__opt--active,
.cc-layout-toggle__opt--active {
  background: var(--cc-primary);
  color: #ffffff;
}

/* -------------------- Status badge — refinamento mono -------------------- */

.cc-badge {
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
}

/* -------------------- Section heading — peça editorial -------------------- */

.cc-section__heading {
  position: relative;
  padding-top: var(--cc-space-2);
  padding-bottom: var(--cc-space-2);
  border-bottom: 1px solid var(--cc-line-soft);
  margin-bottom: var(--cc-space-3);
}

.cc-section__title {
  font-size: var(--cc-fs-sm);
  letter-spacing: 0.14em;
  font-weight: var(--cc-fw-bold);
}

.cc-section__hint {
  font-size: var(--cc-fs-sm);
  color: var(--cc-ink-soft);
}

/* -------------------- Page footer — rodapé minimalista editorial --------------------
 * Aparece no final da main area. Mostra path em mono, env, mode atual.
 * Pegada "número de página de dossier". */

.cc-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-4);
  padding: var(--cc-space-5) 0 var(--cc-space-3);
  margin-top: var(--cc-space-8);
  border-top: 1px solid var(--cc-line);
  font-family: var(--cc-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-ink-muted);
  font-weight: var(--cc-fw-semibold);
}

.cc-page-footer__rule {
  flex: 1 1;
  height: 1px;
  background: var(--cc-line);
  margin: 0 var(--cc-space-3);
}

.cc-page-footer__brand {
  color: var(--cc-ink-strong);
}

.cc-page-footer__sep {
  color: var(--cc-primary);
  margin: 0 6px;
  font-weight: var(--cc-fw-bold);
}

/* -------------------- Sidebar item active — mark mais editorial -------------------- */

.cc-sidebar__item--active::before {
  width: 3px;
  background: var(--cc-sidebar-accent);
}

.cc-sidebar__item--active::after {
  /* Marca à direita ao item ativo: número de página de dossier */
  content: "→";
  position: absolute;
  right: var(--cc-space-3);
  color: var(--cc-sidebar-accent);
  font-family: var(--cc-font-mono);
  font-size: 10px;
}

.cc-shell[data-layout="wide"] .cc-sidebar__item--active::after {
  display: none;
}

/* -------------------- Readonly badge — mais editorial -------------------- */

.cc-readonly-badge {
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 4px var(--cc-space-2);
  border-width: 1px;
}


/* =========================================================================
 * ITERAÇÃO 3 — Tipografia híbrida (Space Grotesk para títulos editoriais)
 *
 * Inter mantém o body/UI. Space Grotesk vira a fonte das peças "wow":
 * page headers grandes, brand da sidebar, KPI mega numbers. Azeret Mono
 * segue como mono assinatura.
 * ========================================================================= */

.cc-page-header__title,
.cc-page-header__count {
  font-family: var(--cc-font-display);
}

.cc-sidebar__brand-name {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-fw-bold);
}

/* Section title pequenos continuam mono — peça editorial */


/* =========================================================================
 * ITERAÇÃO 4 — Operations HUD (Dark Cockpit + Violet Signal)
 *
 * Tema escuro default — operação 24h reduz fadiga ocular.
 * Conceito: cockpit moderno de caminhão. Asfalto noturno + HUD verde violet.
 * Não é Linear cópia, não é Vercel cópia — é TMS de verdade.
 *
 * Toggle via `data-theme="dark|light"` no `.cc-shell` (set por (portal)/layout.tsx).
 * Default = dark. Light mode mantém arquitetura editorial mas inverte palette.
 * ========================================================================= */

/* -------------------- Live indicator (sempre visível) --------------------
 * Bolinha violet pulsando no canto da topbar = "TMS conectado, dados live".
 * Animação CSS-only, respeitando prefers-reduced-motion. */

.cc-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--cc-space-3);
  border-right: 1px solid var(--cc-line);
  font-family: var(--cc-font-mono);
  font-size: 10px;
  font-weight: var(--cc-fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-ink-strong);
  height: 28px;
  flex: 0 0 auto;
}

.cc-live-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7), 0 0 6px rgba(167, 139, 250, 0.5);
  animation: cc-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex: 0 0 auto;
}

@keyframes cc-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7), 0 0 6px rgba(167, 139, 250, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(167, 139, 250, 0), 0 0 6px rgba(167, 139, 250, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0), 0 0 6px rgba(167, 139, 250, 0.5);
  }
}

/* -------------------- ThemeToggle (visual igual aos outros toggles) -------------------- */

.cc-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--cc-line-strong);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  background: var(--cc-surface);
}

.cc-theme-toggle__opt {
  font-family: var(--cc-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--cc-fw-semibold);
  padding: 5px var(--cc-space-3);
  color: var(--cc-ink-muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background var(--cc-motion-fast) ease, color var(--cc-motion-fast) ease;
}

.cc-theme-toggle__opt + .cc-theme-toggle__opt {
  border-left: 1px solid var(--cc-line);
}

.cc-theme-toggle__opt:hover {
  background: var(--cc-bg-sunken);
  color: var(--cc-ink);
}

.cc-theme-toggle__opt--active {
  background: var(--cc-primary);
  color: #ffffff;
}

/* =========================================================================
 * DARK THEME OVERRIDES — Operations HUD
 *
 * Paleta:
 *   bg:           #1a1438 (v7 deep purple noturno)
 *   surface:      #241c52 (purple raised)
 *   surface elev: #362c7a
 *   ink:          #e6efe9 (cream com leve tint verde — anti-glare)
 *   primary:      #a78bfa (violet neon — HUD signature)
 *   info:         #22d3ee (cyan)
 *   warn:         #fbbf24 (amber faróis)
 *   success:      #4ade80 (violet HUD)
 *   error:        #fb7185 (coral)
 *
 * Glow tátil em KPIs/sidebar ativo. Hover row com pulse.
 * Glassmorphism leve em hub tiles. Bg gradient sutil (não flat).
 * ========================================================================= */

.cc-shell[data-theme="dark"] {
  /* v7 — dark roxo (deep purple noturno) em vez de quase-preto.
   * User pediu identidade purple também no dark theme. Tons ficam
   * num eixo violeta escuro mantendo contraste AAA com texto cream. */
  --cc-bg:               #1a1438;          /* deep purple noturno */
  --cc-bg-sunken:        #15102e;          /* mais escuro pra hairlines */
  --cc-surface:          #241c52;          /* purple raised */
  --cc-surface-raised:   #2d2466;
  --cc-surface-elevated: #362c7a;

  --cc-ink:              #ece7fb;          /* cream com tint roxo */
  --cc-ink-strong:       #ffffff;
  --cc-ink-muted:        #9489c9;
  --cc-ink-soft:         #635585;
  --cc-ink-inverse:      #1a1438;

  --cc-line:             #2d2466;
  --cc-line-strong:      #4a3d8c;
  --cc-line-soft:        #1f1846;

  --cc-primary:          #a78bfa;     /* violet neon — HUD signature */
  --cc-primary-strong:   #7c3aed;
  --cc-primary-soft:     rgba(167, 139, 250, 0.12);
  --cc-primary-ink:      #0f0a26;

  --cc-warn:             #fbbf24;     /* amber faróis */
  --cc-warn-strong:      #f59e0b;
  --cc-warn-soft:        rgba(251, 191, 36, 0.12);

  --cc-error:            #fb7185;     /* coral — não vermelho terror */
  --cc-error-strong:     #f43f5e;
  --cc-error-soft:       rgba(251, 113, 133, 0.12);

  --cc-info:             #22d3ee;     /* cyan HUD */
  --cc-info-strong:      #06b6d4;
  --cc-info-soft:        rgba(34, 211, 238, 0.12);

  --cc-success:          #4ade80;     /* violet HUD */
  --cc-success-strong:   #22c55e;
  --cc-success-soft:     rgba(74, 222, 128, 0.12);

  --cc-neutral:          #8a9890;
  --cc-neutral-soft:     rgba(138, 152, 144, 0.10);

  /* Sidebar — ainda mais escura que o main (depth real) */
  --cc-sidebar-bg:         #0e0926;          /* deepest purple */
  --cc-sidebar-bg-raised:  #1a1438;
  --cc-sidebar-ink:        #d4ccef;
  --cc-sidebar-ink-muted:  #9185bd;
  --cc-sidebar-ink-strong: #ffffff;
  --cc-sidebar-line:       #211940;
  --cc-sidebar-accent:     #a78bfa;

  --cc-watermark-ink:    rgba(167, 139, 250, 0.06);
  --cc-watermark-strong: rgba(167, 139, 250, 0.30);

  --cc-shadow-sm:   0 1px 0 rgba(0, 0, 0, 0.4);
  --cc-shadow-md:   0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.3);
  --cc-shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --cc-shadow-scroll-edge: inset -8px 0 12px -8px rgba(0, 0, 0, 0.6);
}

/* -------------------- Dark — atmosfera de fundo --------------------
 * v6 — removido radial-gradient do dark theme. User reclamou de padrão
 * "quadriculado" visível em monitores grandes: a combinação de 2 radial-
 * gradients fixos com o linear-gradient do spine (scroll) gerava moiré /
 * banding em telas amplas. Mantemos APENAS o spine purple 4px à esquerda
 * sobre cor sólida `--cc-bg` (#1a1438 — v7 deep purple). Topbar `backdrop-filter` permanece
 * intacto. */

.cc-shell[data-theme="dark"] .cc-shell__main {
  background:
    linear-gradient(
      to right,
      var(--cc-watermark-strong) 0,
      var(--cc-watermark-strong) var(--cc-spine-width),
      transparent var(--cc-spine-width),
      transparent 100%
    ),
    var(--cc-bg);
}

.cc-shell[data-theme="dark"] body {
  background: var(--cc-bg);
  background-image: none;
}

/* -------------------- Dark — Topbar com depth -------------------- */

.cc-shell[data-theme="dark"] .cc-shell__topbar {
  background: rgba(19, 26, 23, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--cc-line);
}

/* -------------------- Dark — Tabela respira melhor -------------------- */

.cc-shell[data-theme="dark"] .cc-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}

.cc-shell[data-theme="dark"] .cc-table tbody tr:hover td {
  background: rgba(167, 139, 250, 0.06);
  box-shadow: inset 2px 0 0 var(--cc-primary), 0 0 0 1px rgba(167, 139, 250, 0.08);
}

.cc-shell[data-theme="dark"] .cc-table--sticky-first tbody tr:hover td:first-child {
  background: rgba(167, 139, 250, 0.09);
}

.cc-shell[data-theme="dark"] .cc-table thead th {
  background: var(--cc-bg-sunken);
  border-bottom: 2px solid var(--cc-primary);
  color: var(--cc-ink-strong);
}

/* -------------------- Dark — KPI hero com glow tátil -------------------- */

.cc-shell[data-theme="dark"] .cc-kpi {
  background: var(--cc-surface);
}

.cc-shell[data-theme="dark"] .cc-kpi::before {
  background: var(--cc-primary);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}

.cc-shell[data-theme="dark"] .cc-kpi__value {
  color: var(--cc-ink-strong);
  text-shadow: 0 0 22px rgba(167, 139, 250, 0.15);
}

/* -------------------- Dark — Hub tile com glassmorphism sutil -------------------- */

.cc-shell[data-theme="dark"] .cc-hub-tile {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0%, transparent 60%),
    var(--cc-surface);
  border: 1px solid var(--cc-line);
}

.cc-shell[data-theme="dark"] .cc-hub-tile--ready:hover {
  border-color: var(--cc-primary);
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, transparent 50%),
    var(--cc-surface-raised);
  box-shadow: 0 0 0 1px var(--cc-primary-soft), 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.cc-shell[data-theme="dark"] .cc-hub-tile__icon {
  background: rgba(167, 139, 250, 0.12);
  color: var(--cc-primary);
}

.cc-shell[data-theme="dark"] .cc-hub-tile--ready::after {
  background: var(--cc-primary);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.6);
}

/* -------------------- Dark — Sidebar item ativo com glow -------------------- */

.cc-shell[data-theme="dark"] .cc-sidebar__item--active {
  background: rgba(167, 139, 250, 0.10);
  color: var(--cc-sidebar-ink-strong);
}

.cc-shell[data-theme="dark"] .cc-sidebar__item--active::before {
  background: var(--cc-sidebar-accent);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
}

.cc-shell[data-theme="dark"] .cc-sidebar__brand-mark {
  background: var(--cc-sidebar-accent);
  color: var(--cc-sidebar-bg);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}

.cc-shell[data-theme="dark"] .cc-sidebar__group-label::before {
  background: rgba(167, 139, 250, 0.12);
  color: var(--cc-sidebar-accent);
}

.cc-shell[data-theme="dark"] .cc-topbar__mobile-brand-mark {
  color: var(--cc-primary-ink);
}

/* -------------------- Dark — Inputs/selects da toolbar de filtros -------------------- */

.cc-shell[data-theme="dark"] input[type="search"],
.cc-shell[data-theme="dark"] input[type="text"],
.cc-shell[data-theme="dark"] input[type="date"],
.cc-shell[data-theme="dark"] input[type="number"],
.cc-shell[data-theme="dark"] select,
.cc-shell[data-theme="dark"] textarea {
  background: var(--cc-bg);
  color: var(--cc-ink);
  border-color: var(--cc-line-strong);
}

.cc-shell[data-theme="dark"] input::placeholder,
.cc-shell[data-theme="dark"] textarea::placeholder {
  color: var(--cc-ink-soft);
}

.cc-shell[data-theme="dark"] input:focus,
.cc-shell[data-theme="dark"] select:focus,
.cc-shell[data-theme="dark"] textarea:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
  outline: none;
}

/* -------------------- Dark — Página header título mais "HUD" -------------------- */

.cc-shell[data-theme="dark"] .cc-page-header__title {
  color: var(--cc-ink-strong);
  text-shadow: 0 0 40px rgba(167, 139, 250, 0.10);
}

.cc-shell[data-theme="dark"] .cc-page-header::after {
  background: var(--cc-primary);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
}

.cc-shell[data-theme="dark"] .cc-page-header__breadcrumb {
  color: var(--cc-primary);
}

/* -------------------- Dark — Pagination buttons com glow no hover -------------------- */

.cc-shell[data-theme="dark"] .cc-pagination__link:hover {
  background: var(--cc-primary);
  color: var(--cc-primary-ink);
  border-color: var(--cc-primary);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

/* -------------------- Dark — Toggles (density/layout/theme) ativos com glow -------------------- */

.cc-shell[data-theme="dark"] .cc-density__opt--active,
.cc-shell[data-theme="dark"] .cc-layout-toggle__opt--active,
.cc-shell[data-theme="dark"] .cc-theme-toggle__opt--active {
  background: var(--cc-primary);
  color: var(--cc-primary-ink);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}

/* -------------------- Dark — Readonly badge mantém presença -------------------- */

.cc-shell[data-theme="dark"] .cc-readonly-badge {
  color: var(--cc-primary);
  background: var(--cc-primary-soft);
  border-color: var(--cc-primary);
}

/* -------------------- Dark — Page footer com glow violet no separador -------------------- */

.cc-shell[data-theme="dark"] .cc-page-footer__sep {
  color: var(--cc-primary);
  text-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
}

/* -------------------- Reduced motion — desliga pulse + glow animations -------------------- */

@media (prefers-reduced-motion: reduce) {
  .cc-live-indicator__dot {
    animation: none;
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
  }
}

/* =========================================================================
 * OTD Dashboard tokens — paleta dedicada das 6 barras + aliases semânticos
 *
 * Os 4 tokens novos (`--cc-bar-gold`, `--cc-bar-violet`, `--cc-bar-sage`,
 * `--cc-bar-blue`) cobrem as variantes do legado PHP que NÃO mapeiam
 * limpamente nos status semânticos (despachadas, devolvidos, sem-otd,
 * sem-notfis). As barras de prazo (ok / error) reusam tokens existentes
 * (`--cc-success`, `--cc-error`).
 *
 * `--cc-status-*` são aliases pedidos pelo brief do agente — não substituem
 * `--cc-success/--cc-error/--cc-info/--cc-warn`, só dão um namespace mais
 * explícito para o threshold do KPI badge.
 * ========================================================================= */

:root,
.cc-shell[data-theme="light"] {
  --cc-bar-gold:   #d9a300;
  --cc-bar-violet: #8b5cf6;
  --cc-bar-sage:   #75a992;
  --cc-bar-blue:   #6b8ad6;

  --cc-status-ok:    var(--cc-success);
  --cc-status-info:  var(--cc-info);
  --cc-status-warn:  var(--cc-warn);
  --cc-status-error: var(--cc-error);
}

.cc-shell[data-theme="dark"] {
  --cc-bar-gold:   #f7c948;
  --cc-bar-violet: #a78bfa;
  --cc-bar-sage:   #8fb8a4;
  --cc-bar-blue:   #8aa5e0;

  --cc-status-ok:    var(--cc-success);
  --cc-status-info:  var(--cc-info);
  --cc-status-warn:  var(--cc-warn);
  --cc-status-error: var(--cc-error);
}

/* -------------------- Grid principal do dashboard OTD -------------------- */

.cc-otd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: var(--cc-space-4);
  gap: var(--cc-space-4);
}

@media (max-width: 900px) {
  .cc-otd-grid {
    grid-template-columns: 1fr;
  }
}

.cc-otd-card {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  padding: var(--cc-space-5);
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-md);
  min-height: 360px;
  position: relative;
}

.cc-otd-card::before {
  /* Régua editorial 32px no canto superior esquerdo do card. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--cc-primary);
}

.cc-otd-card__title {
  margin: 0;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-ink-muted);
}

.cc-otd-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
}

.cc-otd-grid--stacked {
  margin-top: var(--cc-space-4);
}

.cc-otd-occ-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: var(--cc-space-3);
  gap: var(--cc-space-3);
}

.cc-otd-occ-summary > div {
  padding: var(--cc-space-3);
  border: 1px solid var(--cc-line-soft);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-bg-subtle);
}

.cc-otd-occ-summary__value {
  display: block;
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-lg);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink-strong);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-otd-occ-summary__label {
  display: block;
  margin-top: 2px;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-ink-muted);
}

.cc-otd-modal {
  margin-top: auto;
}

.cc-otd-modal__panel {
  margin-top: var(--cc-space-3);
  padding: var(--cc-space-3);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  overflow-x: auto;
}

/* -------------------- KPI badge gigante "XX% OTD" -------------------- */

.cc-otd-kpi {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--cc-space-3) var(--cc-space-5);
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-otd-kpi-color, var(--cc-status-info));
  background: color-mix(in srgb, var(--cc-otd-kpi-color, var(--cc-status-info)) 12%, var(--cc-surface));
  color: var(--cc-otd-kpi-color-strong, var(--cc-ink-strong));
  align-self: flex-start;
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-otd-kpi__value {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-3xl);
  font-weight: var(--cc-fw-semibold);
  line-height: 1;
  letter-spacing: -0.025em;
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-otd-kpi__metric {
  margin-left: 6px;
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-lg);
  font-weight: var(--cc-fw-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  opacity: 0.85;
}

.cc-otd-kpi__sub {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-ink-muted);
  margin-top: 4px;
}

/* -------------------- Pizza SVG -------------------- */

.cc-otd-pizza {
  display: flex;
  flex-direction: row;
  gap: var(--cc-space-5);
  align-items: center;
  flex-wrap: wrap;
}

.cc-otd-pizza__svg {
  width: 200px;
  height: 200px;
  flex: 0 0 auto;
  display: block;
}

.cc-otd-pizza__legend {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  flex: 1 1 auto;
  min-width: 160px;
}

.cc-otd-pizza__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: var(--cc-space-2);
  gap: var(--cc-space-2);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
}

.cc-otd-pizza__chip {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--cc-otd-chip, var(--cc-ink-muted));
  flex: 0 0 auto;
}

.cc-otd-pizza__label {
  color: var(--cc-ink);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  font-weight: var(--cc-fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-otd-pizza__value {
  color: var(--cc-ink-strong);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
  font-weight: var(--cc-fw-semibold);
}

.cc-otd-pizza__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  width: 100%;
  min-height: 200px;
  color: var(--cc-ink-soft);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}

/* -------------------- Barras horizontais OTD -------------------- */

.cc-otd-bars {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
}

.cc-otd-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-otd-bar__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cc-space-2);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-ink);
  font-weight: var(--cc-fw-semibold);
}

.cc-otd-bar__count {
  color: var(--cc-ink-muted);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
}

.cc-otd-bar__track {
  position: relative;
  height: 14px;
  background: var(--cc-bg-sunken);
  border-radius: var(--cc-radius-pill);
  overflow: hidden;
  border: 1px solid var(--cc-line-soft);
}

.cc-otd-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cc-otd-bar-color, var(--cc-primary));
  border-radius: var(--cc-radius-pill);
  width: var(--cc-otd-bar-width, 0%);
  transition: width var(--cc-motion-normal) ease;
}

.cc-otd-bar__pct {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--cc-font-mono);
  font-size: 9px;
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cc-ink-strong);
  font-feature-settings: tabular-nums slashed-zero;
  font-variant-numeric: tabular-nums slashed-zero;
  pointer-events: none;
}

/* -------------------- Hint do período máximo -------------------- */

.cc-otd-hint {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-ink-soft);
}

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/styles.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg: #ece7dc;
  --bg-ink: #151817;
  --surface: #fffdf7;
  --surface-raised: #f7f1e6;
  --surface-muted: #e5ddd0;
  --line: #c9beb0;
  --line-strong: #938777;
  --text: #171a19;
  --muted: #6e675e;
  --accent: #0f6a66;
  --accent-strong: #083f3c;
  --safety: #d7602a;
  --rail: #2f6076;
  --ok: #2f7d55;
  --warning: #a67119;
  --radius: 6px;
  --shadow-sm: 0 1px 0 rgba(21, 24, 23, 0.08), 0 12px 30px rgba(21, 24, 23, 0.08);
  --shadow-md: 0 1px 0 rgba(21, 24, 23, 0.1), 0 22px 52px rgba(21, 24, 23, 0.14);
  --font-ui: "Avenir Next Condensed", "DIN Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --font-mono: "Berkeley Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(21, 24, 23, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(21, 24, 23, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 12% 12%, rgba(215, 96, 42, 0.08), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.45;
}

body::selection {
  background: rgba(215, 96, 42, 0.28);
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 253, 247, 0.13);
  background:
    linear-gradient(135deg, rgba(215, 96, 42, 0.16), transparent 34%),
    linear-gradient(180deg, #111413, #1b211f 56%, #101313);
  color: #f6efe3;
  padding: 22px 16px;
}

.sidebar::after {
  content: "";
  display: block;
  height: 120px;
  margin-top: 24px;
  border: 1px solid rgba(255, 253, 247, 0.12);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(215, 96, 42, 0.42) 0 10px,
      rgba(255, 253, 247, 0.08) 10px 20px
    );
  opacity: 0.55;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 24px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 253, 247, 0.18);
  border-radius: var(--radius);
  background: #d7602a;
  color: #161817;
  box-shadow: inset 0 -10px 18px rgba(21, 24, 23, 0.18);
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  max-width: 170px;
  font-size: 21px;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}

.brand span {
  margin-top: 6px;
  color: #b9afa1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #e7dece;
  font-weight: 750;
  text-transform: uppercase;
}

.nav-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.55;
}

.nav-item svg {
  color: #d7602a;
}

.nav-item:hover {
  border-color: rgba(255, 253, 247, 0.16);
  background: rgba(255, 253, 247, 0.08);
}

.main-content {
  min-width: 0;
  padding: 34px;
}

.page-stack {
  display: grid;
  grid-gap: 22px;
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
}

.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  grid-gap: 20px;
  gap: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bg-ink);
}

.page-header h1 {
  max-width: 850px;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--safety);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.primary-action,
.mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.primary-action {
  border: 1px solid #0a3734;
  background: var(--accent);
  color: #fffdf7;
  box-shadow: 4px 4px 0 #151817;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.primary-action:hover {
  transform: translate(2px, 2px);
  background: var(--accent-strong);
  box-shadow: 2px 2px 0 #151817;
}

.mode-pill {
  border: 1px solid rgba(15, 106, 102, 0.28);
  background: rgba(15, 106, 102, 0.12);
  color: var(--accent-strong);
}

.status-grid,
.metric-grid,
.source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.source-grid,
.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-item,
.metric-card,
.source-card,
.decision-panel,
.flow-panel,
.check-list,
.section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.86);
  box-shadow: var(--shadow-sm);
}

.status-item {
  position: relative;
  display: grid;
  align-content: space-between;
  grid-gap: 10px;
  gap: 10px;
  min-height: 132px;
  overflow: hidden;
  padding: 18px;
}

.status-item::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -20px;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(21, 24, 23, 0.1);
  transform: rotate(18deg);
}

.status-item:nth-child(2n) {
  background: rgba(232, 239, 239, 0.9);
}

.status-item:nth-child(3n) {
  background: rgba(249, 236, 221, 0.9);
}

.status-item svg {
  color: var(--safety);
}

.status-item span,
.metric-card span,
.metric-card small,
.source-card p,
.section-heading p,
.flow-item p,
.decision-panel p {
  color: var(--muted);
}

.status-item span,
.metric-card span,
.metric-card small,
.source-card dt,
.source-badge,
.tag-list span,
th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-item strong {
  max-width: 100%;
  font-size: 28px;
  font-weight: 900;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.section {
  padding: 22px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.section-heading h2,
.decision-panel h2,
.flow-panel h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.section-heading p,
.decision-panel p {
  max-width: 560px;
  margin: 0;
}

.source-card,
.metric-card {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
  padding: 18px;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.source-card:hover,
.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.source-card h3 {
  margin: 12px 0 8px;
  font-size: 24px;
  font-weight: 900;
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.source-card p {
  margin: 0;
  line-height: 1.45;
}

.source-badge {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(21, 24, 23, 0.16);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--accent-strong);
  padding: 0 10px;
}

.source-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.source-card dt {
  color: var(--muted);
}

.source-card dd {
  margin: 5px 0 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  grid-gap: 18px;
  gap: 18px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-list span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 9px 10px;
}

.decision-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(15, 106, 102, 0.14), transparent 55%),
    rgba(255, 253, 247, 0.92);
}

.decision-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(215, 96, 42, 0.34) 0 8px,
      rgba(21, 24, 23, 0.06) 8px 16px
    );
  opacity: 0.55;
}

.decision-panel > * {
  position: relative;
  max-width: calc(100% - 68px);
}

.metric-card strong {
  font-family: var(--font-mono);
  font-size: 34px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.dashboard-page {
  max-width: 1380px;
}

.dashboard-page__header {
  align-items: end;
}

.dashboard-period-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.88);
  padding: 4px;
}

.dashboard-period-toggle a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-period-toggle a.is-active {
  background: var(--bg-ink);
  color: #fffdf7;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) repeat(2, minmax(260px, 0.9fr));
  grid-gap: 14px;
  gap: 14px;
}

.dashboard-kpi-card,
.dashboard-performance,
.dashboard-transportes {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.9);
  box-shadow: var(--shadow-sm);
}

.dashboard-kpi-card {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  min-height: 278px;
  padding: 18px;
}

.dashboard-kpi-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dashboard-kpi-card__top > div:nth-child(2) {
  min-width: 0;
}

.dashboard-kpi-card__icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(15, 106, 102, 0.22);
  border-radius: var(--radius);
  background: rgba(15, 106, 102, 0.12);
  color: var(--accent-strong);
}

.dashboard-kpi-card__top span,
.dashboard-kpi-card__trend span,
.dashboard-kpi-card__details dt,
.dashboard-kpi-card__details small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-kpi-card h2 {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.dashboard-kpi-card__action {
  display: inline-grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-left: auto;
  place-items: center;
  border: 1px solid rgba(255, 156, 0, 0.32);
  border-radius: var(--radius);
  background: rgba(255, 156, 0, 0.12);
  color: var(--warning);
}

.dashboard-kpi-card__main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dashboard-kpi-card__main strong {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 44px;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.dashboard-kpi-card__main span {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-kpi-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.dashboard-kpi-card__trend {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 9px;
}

.dashboard-kpi-card__trend--positive {
  color: var(--ok);
}

.dashboard-kpi-card__trend--negative {
  color: #b8424e;
}

.dashboard-kpi-card__trend--neutral {
  color: var(--muted);
}

.dashboard-kpi-card__trend strong {
  font-family: var(--font-mono);
}

.dashboard-kpi-card__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
}

.dashboard-kpi-card__details div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 10px;
}

.dashboard-kpi-card__details dd {
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 900;
}

.dashboard-performance,
.dashboard-transportes,
.dashboard-adjacent {
  padding: 22px;
}

.dashboard-adjacent {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.9);
  box-shadow: var(--shadow-sm);
}

.dashboard-adjacent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.dashboard-readonly-action {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 0 11px;
}

.dashboard-readonly-action--primary {
  border-color: rgba(255, 156, 0, 0.36);
  background: rgba(255, 156, 0, 0.14);
  color: var(--warning);
}

.dashboard-adjacent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.dashboard-adjacent__card {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 16px;
}

.dashboard-adjacent__card header {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.dashboard-adjacent__card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

.dashboard-adjacent__card header span,
.dashboard-adjacent__card dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-adjacent__card dl {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
}

.dashboard-adjacent__card dd {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 900;
}

.dashboard-adjacent__card strong {
  align-self: center;
  color: var(--warning);
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
}

.dashboard-performance__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.dashboard-performance__slice {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  min-height: 230px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 18px;
}

.dashboard-performance__slice.is-current {
  border-color: rgba(15, 106, 102, 0.42);
  background: rgba(232, 239, 239, 0.72);
}

.dashboard-performance__slice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-performance__slice-head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-performance__slice-head strong {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 0.95;
}

.dashboard-performance__bar {
  height: 20px;
  overflow: hidden;
  border: 1px solid rgba(21, 24, 23, 0.18);
  border-radius: var(--radius);
  background: #ead7d5;
}

.dashboard-performance__bar span {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--accent);
}

.dashboard-performance__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
}

.dashboard-performance__stats div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.72);
  padding: 10px;
}

.dashboard-performance__stats dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-performance__stats dd {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 900;
}

.dashboard-performance__empty,
.dashboard-transportes__empty {
  display: grid;
  min-height: 160px;
  place-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: var(--warning);
  text-align: center;
}

.dashboard-performance__empty strong,
.dashboard-transportes__empty strong {
  max-width: 320px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.dashboard-transportes__table td:nth-child(1),
.dashboard-transportes__table td:nth-child(5) {
  white-space: nowrap;
}

.dashboard-technical {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.dashboard-technical .section-heading {
  margin-bottom: 0;
}

.dashboard-technical__metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  background: #1a1f1d;
  color: #f1e9dc;
}

td {
  font-family: var(--font-mono);
  font-size: 13px;
}

tr:last-child td {
  border-bottom: 0;
}

tr:hover td {
  background: rgba(215, 96, 42, 0.08);
}

.flow-panel {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  padding: 20px;
}

.flow-item {
  display: flex;
  gap: 12px;
}

.flow-item svg {
  flex: 0 0 auto;
  color: var(--rail);
  margin-top: 2px;
}

.flow-item strong {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-item p {
  margin: 4px 0 0;
  line-height: 1.38;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.flow-item.boxed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(247, 241, 230, 0.78);
  padding: 16px;
}

.check-list {
  padding: 10px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.check-row:last-child {
  border-bottom: 0;
}

.check-row svg {
  color: var(--ok);
}

.check-row svg + span {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    height: auto;
    padding: 14px;
  }

  .sidebar::after {
    display: none;
  }

  .brand {
    padding-bottom: 12px;
  }

  .nav-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .main-content {
    padding: 24px 16px;
  }

  .page-header,
  .two-column {
    grid-template-columns: 1fr;
  }

  .page-header h1 {
    font-size: 34px;
  }

  .status-grid,
  .source-grid,
  .metric-grid,
  .flow-grid,
  .dashboard-kpi-grid,
  .dashboard-performance__grid,
  .dashboard-adjacent__grid,
  .dashboard-technical__metrics {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: grid;
  }

  .dashboard-period-toggle {
    width: 100%;
  }

  .dashboard-period-toggle a {
    flex: 1 1;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 16px;
  }

  .brand strong {
    font-size: 18px;
  }

  .page-header h1 {
    font-size: 29px;
  }

  .primary-action,
  .mode-pill {
    width: 100%;
  }

  .source-card dl {
    grid-template-columns: 1fr;
  }

  .dashboard-kpi-card__details,
  .dashboard-performance__stats {
    grid-template-columns: 1fr;
  }

  .decision-panel > * {
    max-width: 100%;
  }

  .decision-panel::before {
    display: none;
  }
}