* { box-sizing: border-box; }
/* Sprint 1.1 -- sem isto, o scrollWidth do <html> fica maior que o
   viewport mesmo com todo elemento interno contido (.kanban_board,
   main, .workspace e body já tinham overflow-x correto sozinhos;
   só o documento não tinha um limite) -- rolar sobre o Kanban movia
   a página inteira (window.scrollX chegou a 1000px, medido). Como
   nenhuma tabela do sistema depende de rolagem no nível da página
   (todas usam .table_scroll próprio), é seguro para o site inteiro. */
html { overflow-x: hidden; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--font-base)/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: .4; }
button { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--font-xl); line-height: 1.25; letter-spacing: -.8px; font-weight: 650; }
h2 { font-size: var(--font-md); font-weight: 650; letter-spacing: -.25px; }
h3 { font-size: var(--font-base); font-weight: 600; }
small { font-size: var(--font-sm); }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr_only, .skip_link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip_link:focus { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100; background: white; padding: var(--space-3); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 40; background: var(--color-sidebar); color: #c3d2e0; display: flex; flex-direction: column; padding: var(--space-8) var(--space-4) var(--space-4); overflow-y: auto; }
.brand { display: flex; gap: var(--space-3); align-items: center; padding: 0 var(--space-2); color: white; font-size: 25px; font-weight: 650; letter-spacing: -.8px; }
.brand_mark { width: 39px; height: 39px; display: grid; place-items: center; }
.brand_mark img { width: 100%; height: 100%; object-fit: contain; }
.brand small { display: block; color: #8fa9c2; font-size: 11px; letter-spacing: .1px; font-weight: 400; margin-top: -3px; }
.agency_switch { display: flex; align-items: center; gap: var(--space-3); background: #ffffff07; border: 1px solid #ffffff0e; border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-8) 0 var(--space-5); }
.agency_initial { width: 31px; height: 31px; background: #ffffff12; display: grid; place-items: center; border-radius: var(--radius-sm); }
.agency_initial img { width: 22px; height: 22px; object-fit: contain; }
.agency_switch strong { color: #e8eef5; font-size: var(--font-sm); }
.agency_switch small { display: block; font-size: 12px; color: #93a9c2; }
.agency_switch > .icon { margin-left: auto; --icon-size: 15px; color: #7e97b3; }
.nav_section_label { font-size: 11px; letter-spacing: 1.8px; color: #839da7; padding: 0 var(--space-3); margin: var(--space-2) 0 var(--space-3); font-weight: 600; }
.nav_item { display: flex; align-items: center; gap: var(--space-3); padding: 11px var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-1); font-size: 13px; transition: background var(--duration); }
.nav_item:hover { background: #ffffff0a; color: white; }
.nav_item.is_active { background: #ffffff14; color: white; font-weight: 600; box-shadow: inset 3px 0 var(--color-accent-gold); }
.nav_counter { margin-left: auto; padding: 1px 6px; font-size: 12px; color: #d7ad70; background: #d7ad7017; border-radius: var(--radius-sm); }
.nav_divider { margin-top: var(--space-6); border-top: 1px solid #ffffff0d; padding-top: var(--space-6); }
.sidebar_bottom { margin-top: auto; padding-top: var(--space-10); }
.sidebar_note { padding: var(--space-4); background: #1d3b45; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); }
.sidebar_note .icon { color: #8abdb4; --icon-size: 25px; }
.sidebar_note strong { font-size: var(--font-sm); color: #d3e0e2; line-height: 1.7; }
.sidebar_note > span:last-child { font-size: 12px; color: #87a4ae; }
.sidebar_version { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8da8b1; margin-top: var(--space-5); }
.sidebar_version .status_dot { color: #6fb8a7; }
.sidebar_version > span:last-child { margin-left: auto; }
.workspace { margin-left: var(--sidebar-width); min-width: 0; }
.topbar { height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-6); background: var(--color-surface); padding: 0 var(--space-8); border-bottom: 1px solid var(--color-border); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-sm); color: var(--color-muted); min-width: 0; }
.breadcrumb strong { color: var(--color-text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb .icon { --icon-size: 13px; }
.global_search { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; width: 255px; color: var(--color-muted); }
.global_search input { min-width: 0; width: 100%; border: 0; background: none; font-size: var(--font-sm); padding: var(--space-2) 0; }
.global_search kbd { border: 1px solid var(--color-border); border-radius: 4px; padding: 0 6px; color: var(--color-subtle); }
.topbar_actions { display: flex; align-items: center; gap: var(--space-5); }
.topbar_separator { width: 1px; height: 29px; background: var(--color-border); }
.profile_menu summary { display: flex; align-items: center; gap: var(--space-3); }
.profile_name strong, .profile_name small { display: block; white-space: nowrap; }
.profile_name strong { font-size: var(--font-sm); }
.profile_name small { font-size: 12px; color: var(--color-muted); }
.profile_menu .icon { --icon-size: 13px; }
.workspace main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8); min-height: calc(100vh - var(--topbar-height)); }
.page_header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 1.7px; color: var(--color-brand); margin-bottom: var(--space-2); }
.page_description { margin-top: var(--space-2); color: var(--color-muted); font-size: 13px; }
.header_actions { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.date_chip { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-sm); padding: 10px var(--space-3); white-space: nowrap; }
.date_chip .icon { --icon-size: 15px; color: var(--color-muted); }
.page_footer { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-muted); font-size: 12px; }
.demo_label { display: flex; align-items: center; gap: 6px; }
.demo_label .status_dot { color: #89aa9e; }
.topbar .mobile_menu, .sidebar_overlay { display: none; }
@media (min-width: 761px) and (max-height: 820px) { .sidebar { padding-top: var(--space-6); } .sidebar_note { display: none; } .sidebar_bottom { padding-top: var(--space-6); } .agency_switch { margin-top: var(--space-6); } }
@media (min-width: 1700px) { main { padding-top: var(--space-10); } }
@media (max-width: 1250px) { .header_actions { flex-direction: column; align-items: flex-end; } .global_search { width: 220px; } .breadcrumb { display: none; } .global_search { margin-left: 0; margin-right: auto; } .page_footer { flex-direction: column; gap: var(--space-2); } }
@media (max-width: 1024px) { :root { --sidebar-width: 210px; } main { padding: var(--space-6); } .topbar { padding: 0 var(--space-6); gap: var(--space-3); } .topbar_actions { gap: var(--space-3); } .profile_name { display: none; } .sidebar_note { display: none; } }
/* Sprint 2 -- tablet (ex.: iPad em pé, 768px) caía no mesmo layout do
   desktop, só com a sidebar 28px mais estreita (acima) -- continuava
   larga demais para a tela. Entre 761px (logo acima do breakpoint de
   celular, que já vira menu hambúrguer) e 900px, a sidebar colapsa para
   só ícones -- cada link já tem o texto como conteúdo acessível por
   leitor de tela, então esconder o <span> visualmente não remove a
   navegação, só o rótulo. */
@media (max-width: 900px) and (min-width: 761px) {
  :root { --sidebar-width: 76px; }
  .sidebar { align-items: center; padding-left: var(--space-2); padding-right: var(--space-2); }
  .brand { justify-content: center; padding: 0; }
  .brand span, .agency_switch span, .agency_switch .icon, .nav_section_label, .nav_item span, .sidebar_bottom { display: none; }
  .agency_switch { justify-content: center; padding: var(--space-2); }
  .nav_item { justify-content: center; padding: 11px; position: relative; }
  .nav_counter { position: absolute; top: 4px; right: 4px; }
}
@media (max-width: 760px) { :root { --topbar-height: 68px; } .workspace { margin-left: 0; } .sidebar { width: 250px; transform: translateX(-100%); transition: transform var(--duration); } .sidebar.is_open { transform: translateX(0); } .sidebar_overlay:not([hidden]) { display: block; position: fixed; inset: 0; background: #0b202980; border: 0; z-index: 35; } .mobile_menu { display: inline-grid !important; flex-shrink: 0; } .topbar { padding: 0 var(--space-4); gap: var(--space-3); } .topbar_separator, .global_search kbd { display: none; } .global_search { width: auto; flex: 1; min-width: 0; } .topbar_actions { gap: var(--space-2); } .profile_menu summary > .icon { display: none; } main { padding: var(--space-5) var(--space-4); } .page_header { align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; } .header_actions { flex-direction: row-reverse; align-items: center; width: 100%; justify-content: flex-end; flex-wrap: wrap; } h1 { font-size: 25px; } .page_description { font-size: var(--font-sm); } .page_footer { margin-top: var(--space-7); font-size: 11px; } body.sidebar_is_open { overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }