/* ============================================================================
   ROC · roc-theme.css — IDENTIDADE VISUAL ÚNICA DO SISTEMA
   v2 · 10/08/2026 — VERDE + PRATA, casca escura. Decisões do Gorin nesta sessão.
   v3 · 05/10/2026 — tokens de escala (espaço, tipo, raio, movimento), tons de status
        completos e tema escuro opcional; os COMPONENTES saíram para a biblioteca.

       <link rel="stylesheet" href="/roc-theme.css">

   📜 O CONTRATO É O /DESIGN.md (raiz do repositório): ele é a fonte da verdade dos
      tokens e este arquivo tem de bater com ele — `npm run lint` reprova se divergir.
      Mudou um valor aqui? Mude lá no mesmo commit (e vice-versa).
   🧱 COMPONENTES (botão, etiqueta, cartão, tabela, campo, abas…) moram na biblioteca
      `design-system/` e saem em /roc-ds.css + /roc-ds.js. Aqui ficam só os TOKENS e a
      CASCA (cabeçalho, menu lateral, menu da pessoa, portaria, avisos, títulos).

   ⚠️ O NOME DO SISTEMA É **ROC** (ou ROC NATAL). "ROC Diamante" é o nome do
      PROGRAMA DE FIDELIDADE — não usar em cabeçalho de outro módulo, confunde com
      o domínio.

   AS TRÊS REGRAS QUE MANDAM AQUI
   1. VERDE E PRATA são as cores da marca. O verde é reservado para MARCA e AÇÃO
      (é o que se clica); o prata faz linha, fundo, rótulo e etiqueta. Verde em tudo
      deixa de ser notado.
   2. CASCA ESCURA, MESA CLARA. Cabeçalho, menu, login e a marca são escuros/verdes.
      O branco fica só na mesa de trabalho — tabela densa, gráfico, formulário longo —
      porque número em fundo escuro cansa e imprime mal.
      ⚖️ E O DESEMPATE, palavra dele (11/08/2026): *"quando o escuro (cinza) for
         duvidoso, você usa o verde. O verde fica bem no escuro."* Ou seja: a dúvida
         nunca se resolve para o BRANCO. Superfície escura em que o cinza
         (--roc-bg-deep / --roc-bg-nav) não convence vira VERDE — não claro.
   3. GRÁFICO tem paleta fixa, e cada UNIDADE tem cor fixa no portal inteiro
      (--roc-g-lagoa / --roc-g-tirol / --roc-g-zona). Ninguém deve ler legenda duas vezes.
      ⛔ Não existe mais "Matriz"/"Filial" na tela (regra dele, 06/out/2026): são
      Lagoa Nova · Tirol · Zona Norte, nesta ordem. Lista única: /_roc_unidades.php.

   ⛔ NÃO EXISTE VINHO/BORDÔ no sistema (o #a8324a foi purgado em 10/08). Vermelho é
      só o --roc-danger.

   Os NOMES das variáveis são estáveis: os módulos já os consomem. Ao mexer aqui,
   você mexe no portal inteiro — é esse o objetivo, e é por isso que dá para errar.
   ========================================================================== */
:root{
  /* PRATA — a segunda cor da identidade (substituiu os cinzas esverdeados) */
  --roc-p-01:#f4f6f7; --roc-p-02:#e9edef; --roc-p-03:#d6dde0;
  --roc-p-04:#b3bfc5; --roc-p-05:#85939b; --roc-p-06:#5b6a72; --roc-p-07:#33424a;

  /* superfícies */
  --roc-bg:var(--roc-p-01); --roc-bg-elev:#ffffff; --roc-bg-deep:#1b2b31;
  --roc-bg-nav:#22343b;                    /* barra de menu: um degrau acima da casca */
  --roc-scrim:#0b1418;                     /* véu atrás de gaveta/paleta (sempre opacity .6) */
  --roc-bg-sunken:var(--roc-p-02);         /* faixa rebaixada: trilha, busca, chip neutro */
  /* tinta */
  --roc-ink:#17262c; --roc-ink-soft:#3b4c54; --roc-ink-mute:var(--roc-p-06);
  /* linhas */
  --roc-line:var(--roc-p-03); --roc-line-2:var(--roc-p-04);
  /* marca (verde clínico) */
  --roc-accent:#0f7a5f; --roc-accent-soft:#e7f2ec; --roc-accent-deep:#0c6049;
  --roc-accent-med:#5fbf9b;                /* verde claro — hover no escuro, 2ª série */
  --roc-accent-ink:var(--roc-accent);      /* verde como LETRA (link) — no escuro vira claro */
  --roc-focus:var(--roc-accent);           /* contorno de foco */
  /* letra sobre o que é escuro/colorido — um papel por linha, mesmo valor de antes */
  --roc-on-accent:#ffffff;                 /* sobre verde, vermelho ou azul cheio */
  --roc-on-dark:#ffffff;                   /* sobre a casca: pleno */
  --roc-on-dark-2:rgba(255,255,255,.82);   /* botão da casca */
  --roc-on-dark-3:rgba(255,255,255,.68);   /* aba ociosa */
  --roc-on-dark-4:rgba(255,255,255,.30);   /* desabilitado */
  --roc-dark-line:rgba(255,255,255,.24);   /* borda de botão no escuro */
  --roc-dark-hover:rgba(255,255,255,.07);  /* fundo de hover/ativo no escuro */
  /* status — cada tom tem 3 papéis: cheio · fundo suave · letra sobre o suave */
  --roc-ok:var(--roc-accent); --roc-ok-soft:var(--roc-accent-soft); --roc-ok-ink:var(--roc-accent-deep);
  --roc-info:var(--roc-g-5); --roc-info-soft:#e8eef5; --roc-info-ink:var(--roc-g-5);
  --roc-warn:#8a6800; --roc-warn-soft:#fff6d9; --roc-warn-ink:var(--roc-warn);
  --roc-at:#f2b705;                        /* amarelo CHAMATIVO: borda, ponto, barra */
  --roc-at-soft:#fdf3cf; --roc-at-ink:var(--roc-g-4-ink);
  --roc-on-at:#17262c;                     /* letra sobre o amarelo: escura nos dois temas */
  --roc-danger:#b3261e; --roc-danger-soft:#fcecea; --roc-danger-ink:var(--roc-danger);
  --roc-danger-deep:#8f1e18;               /* hover do vermelho */
  --roc-hero-delta:#fff1bf;                /* destaque amarelo-claro sobre o verde do herói */
  /* GRÁFICO — sequência fixa, sempre nesta ordem */
  --roc-g-lagoa:#0c6049;                   /* unidade Lagoa Nova — cor FIXA no portal */
  --roc-g-tirol:#5fbf9b;                   /* unidade Tirol — cor FIXA no portal */
  --roc-g-zona:#2d5580;                    /* unidade Zona Norte — cor FIXA (06/out/2026); escura: serve de letra também */
  /* nomes antigos (Matriz/Filial), só como apelido para CSS que ainda os use — não usar em código novo */
  --roc-g-matriz:var(--roc-g-lagoa); --roc-g-filial:var(--roc-g-tirol);
  /* ⚠️ REGRA DAS DUAS VERSÕES (11/08/2026) — a que faltava e custou 5 achados.
     Cor de GRÁFICO é escolhida para PREENCHER (barra, área, pílula, traço sobre o
     escuro). Usada como LETRA em fundo claro ela desaparece: o verde do Tirol deu
     1,90 no selo "FIL" das Parciais e 2,23 no "novo" do Operacional; o amarelo das
     exceções deu 1,61 nos cabeçalhos do Recebíveis. O mínimo legível é 4,5.
     Então cada cor clara tem DUAS versões e o papel decide qual:
       preenchimento -> --roc-g-*        letra sobre fundo claro -> --roc-g-*-ink
     A cor da unidade/categoria NÃO muda; muda o papel. */
  --roc-g-tirol-ink:#2b7a5f;               /* Tirol, quando é letra */
  --roc-g-filial-ink:var(--roc-g-tirol-ink);   /* apelido antigo */
  --roc-g-4-ink:#8a6400;                   /* amarelo (exceções), quando é letra */
  --roc-g-3:#85939b; --roc-g-4:#f2b705; --roc-g-5:#2d5580; --roc-g-6:#7a5ea8;
  /* tipografia — uma família só, a do sistema (sem serifa em lugar nenhum) */
  --roc-sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --roc-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --roc-fs-micro:10px; --roc-fs-caption:11px; --roc-fs-label:12px; --roc-fs-ui:13px;
  --roc-fs-body:14px; --roc-fs-h3:15px; --roc-fs-h2:18px; --roc-fs-h1:25px; --roc-fs-stat:26px;
  --roc-fw-regular:400; --roc-fw-medium:500; --roc-fw-semibold:600; --roc-fw-bold:700;
  --roc-lh-tight:1.1; --roc-lh-snug:1.2; --roc-lh-body:1.5;
  --roc-ls-mono:.09em;                     /* rótulo mono em caixa-alta */
  /* espaço — escala de 4 (componente novo usa só ela) e medidas fixas da casca */
  --roc-space-1:4px; --roc-space-2:8px; --roc-space-3:12px; --roc-space-4:16px;
  --roc-space-5:20px; --roc-space-6:24px; --roc-space-7:30px; --roc-space-8:40px;
  --roc-header-h:60px; --roc-sidebar-w:240px; --roc-sidebar-rail-w:64px;
  --roc-control-sm:28px; --roc-control-md:34px; --roc-control-lg:42px;
  /* forma */
  --roc-radius-xs:4px; --roc-radius:12px; --roc-radius-sm:8px; --roc-radius-lg:18px; --roc-radius-pill:999px;
  --roc-shadow:0 1px 2px rgba(23,38,44,.05),0 8px 24px rgba(23,38,44,.07);
  --roc-shadow-menu:0 10px 28px rgba(0,0,0,.20);
  --roc-hero:linear-gradient(135deg,var(--roc-accent) 0%,var(--roc-accent-deep) 100%);
  /* movimento — curto, sem quique */
  --roc-dur-fast:150ms; --roc-dur:250ms; --roc-ease:cubic-bezier(.4,0,.2,1);
}

/* ---- TEMA ESCURO (opcional) ------------------------------------------------
   ⛔ NÃO É LIGADO EM MÓDULO NENHUM. A regra continua "casca escura, mesa clara" e
      modo escuro automático por módulo é proibido (o Operacional tinha; saiu).
      Existe para a biblioteca (design-system/) e só vale onde alguém escreve
      `data-theme="dark"` de propósito — hoje, a vitrine /design-system/.
   ⚠️ Os APELIDOS (--roc-bg: var(--roc-p-01)…) são REDECLARADOS aqui de propósito:
      variável que aponta para outra é resolvida onde é declarada, e o filho herda o
      valor JÁ RESOLVIDO. Sem redeclarar, --roc-bg continuaria claro dentro do escuro. */
[data-theme="dark"]{
  --roc-p-01:#1b2b31; --roc-p-02:#2b4048; --roc-p-03:#33484f;
  --roc-p-04:#4a6068; --roc-p-05:#7d8f97; --roc-p-06:#9fb0b7; --roc-p-07:#d3dde1;
  --roc-bg:var(--roc-p-01); --roc-bg-elev:var(--roc-bg-nav); --roc-bg-sunken:var(--roc-p-02);
  --roc-ink:#eef3f4; --roc-ink-soft:#c3ced3; --roc-ink-mute:var(--roc-p-06);
  --roc-line:var(--roc-p-03); --roc-line-2:var(--roc-p-04);
  --roc-accent-soft:#2c4a4a; --roc-accent-ink:#8fd9bc; --roc-focus:var(--roc-accent-med);
  --roc-ok-soft:var(--roc-accent-soft); --roc-ok-ink:#8fd9bc;
  --roc-info-soft:#304555; --roc-info-ink:#a9c4e6;
  --roc-warn-soft:#3b4435; --roc-warn-ink:#f0c860;
  --roc-at-soft:#4c4e30; --roc-at-ink:var(--roc-at);
  --roc-danger-soft:#413e42; --roc-danger-ink:#ff9c94;
  --roc-shadow:none;
  --roc-shadow-menu:0 10px 28px rgba(0,0,0,.45);
}

/* base ----------------------------------------------------------------- */
.roc *{box-sizing:border-box}
.roc{font-family:var(--roc-sans);color:var(--roc-ink);background:var(--roc-bg);font-size:var(--roc-fs-body);line-height:var(--roc-lh-body);-webkit-font-smoothing:antialiased}
.roc .mono{font-family:var(--roc-mono)}
.roc .num{font-variant-numeric:tabular-nums}

/* logo ------------------------------------------------------------------
   Dois arquivos, e a escolha entre eles é por TAMANHO:
     /roc-logo.svg    a palavra — de 30 px de altura para cima
     /roc-simbolo.svg só a mira — de 24 px para baixo (favicon, ladrilho, avatar)
   Os dois pintam com currentColor: têm de vir INLINE, ou em <img> saem pretos. */
.roc-logo{height:34px;width:auto;display:block}
.roc-logo--sm{height:24px}
.roc-logo--lg{height:78px}

/* ===== A CASCA (escura) ================================================
   O cabeçalho (.roc-header) e o menu lateral (.roc-lateral) que TODO módulo ganha
   do /roc-casca.js. A marca volta para a home: no topo do menu no computador, no
   cabeçalho no celular. O que muda de um módulo para outro é a TRILHA do cabeçalho
   (grupo / módulo) e o item aceso no menu — a estética, não. */
/* ⚠️ nowrap DITO: o Recebíveis e a Conciliação têm `header{flex-wrap:wrap}` pelado, e a
   faixa quebrava em duas linhas no celular, com os botões por cima da barra de abas. */
.roc-header{background:var(--roc-bg-deep);color:var(--roc-on-dark);padding:0 var(--roc-space-5);height:var(--roc-header-h);
  display:flex;flex-wrap:nowrap;align-items:center;gap:var(--roc-space-4);position:sticky;top:0;z-index:120}
/* o ladrilho verde com a mira: foi a volta para a home até 11/08, quando a marca por
   extenso tomou o canto superior esquerdo. Fica para quem ainda o usar. */
.roc-tile{width:42px;height:42px;border-radius:11px;background:var(--roc-accent);
  display:grid;place-items:center;flex:0 0 auto;transition:background var(--roc-dur-fast),transform var(--roc-dur-fast)}
.roc-tile svg{height:24px;width:24px;color:var(--roc-on-accent);display:block}
a.roc-home{display:flex;align-items:center;text-decoration:none}
a.roc-home:hover .roc-tile{background:var(--roc-accent-med);transform:translateY(-1px)}
/* ---- A MARCA POR EXTENSO NO TOPO (11/08/2026, ordem do Gorin) --------------
   Ela substituiu o ladrilho verde: "no canto superior esquerdo quero ver essa logo".
   VERDE sobre o escuro — preferência declarada dele: fundo escuro/cinza + verde da
   ROC, branco só onde a página pedir. */
.roc-header .roc-marca{display:flex;align-items:center;color:var(--roc-accent-med);
  text-decoration:none;transition:color var(--roc-dur-fast),transform var(--roc-dur-fast)}
.roc-header .roc-marca:hover{color:var(--roc-on-dark);transform:translateY(-1px)}
@media (max-width:420px){ .roc-header .roc-marca svg{height:26px !important;width:60px !important} }
.roc-header .roc-dir{margin-left:auto;display:flex;align-items:center;gap:var(--roc-space-3)}
.roc-hbtn{font-size:12.5px;font-weight:var(--roc-fw-medium);color:var(--roc-on-dark-2);background:transparent;
  border:1px solid var(--roc-dark-line);padding:7px 13px;border-radius:var(--roc-radius-sm);
  cursor:pointer;text-decoration:none;transition:all var(--roc-dur-fast);white-space:nowrap}
.roc-hbtn:hover{border-color:var(--roc-accent-med);color:var(--roc-on-dark);background:rgba(255,255,255,.06)}

/* ===== MENU LATERAL + CABEÇALHO (06/10/2026 — specs/redesign-portal) ==========
   Casca escura em L: o menu (à esquerda) e o cabeçalho (no topo da coluna de
   conteúdo) têm a mesma cor; a barra de abas do módulo, um tom acima, fica presa
   logo abaixo. A mesa (o conteúdo) continua clara.
   --roc-lateral-x é quanto o menu ocupa: 0 (sem menu / celular), 240 ou 64 (trilho). */
html{--roc-lateral-x:0px}
@media (min-width:1024px){
  html.roc-com-lateral{--roc-lateral-x:var(--roc-sidebar-w);padding-left:var(--roc-lateral-x)}
  html.roc-com-lateral.roc-lateral-recolhido{--roc-lateral-x:var(--roc-sidebar-rail-w)}
  html.roc-com-lateral .roc-header__marca{display:none}
  html.roc-com-lateral .roc-header .roc-ir{display:none}
}
.roc-lateral{display:none}
/* box-sizing: a largura do menu É o token (240/64), borda incluída */
html.roc-com-lateral .roc-lateral{position:fixed;top:0;bottom:0;left:0;z-index:130;display:flex;flex-direction:column;
  box-sizing:border-box;width:var(--roc-sidebar-w);background:var(--roc-bg-deep);color:var(--roc-on-dark-3);font-family:var(--roc-sans);
  border-right:1px solid var(--roc-dark-hover);overflow:hidden}
html.roc-com-lateral .roc-lateral__topo{display:flex;align-items:center;justify-content:space-between;flex:none;
  height:var(--roc-header-h);padding:0 var(--roc-space-3) 0 var(--roc-space-5)}
html.roc-com-lateral .roc-lateral__marca{display:flex;align-items:center;color:var(--roc-accent-med);text-decoration:none;
  transition:color var(--roc-dur-fast)}
html.roc-com-lateral .roc-lateral__marca:hover{color:var(--roc-on-dark)}
.roc-lateral__mira{display:none}
html.roc-com-lateral .roc-lateral__fechar{display:none;place-items:center;width:var(--roc-control-md);height:var(--roc-control-md);
  border:0;border-radius:var(--roc-radius-sm);background:transparent;color:var(--roc-on-dark-2);cursor:pointer}
html.roc-com-lateral .roc-lateral__fechar:hover{background:var(--roc-dark-hover);color:var(--roc-on-dark)}
html.roc-com-lateral .roc-lateral__ir{display:flex;align-items:center;gap:var(--roc-space-2);flex:none;
  margin:0 var(--roc-space-3) var(--roc-space-3);height:var(--roc-control-md);padding:0 var(--roc-space-3);
  border:1px solid var(--roc-dark-line);border-radius:var(--roc-radius-sm);background:var(--roc-dark-hover);
  color:var(--roc-on-dark-3);font:inherit;font-size:var(--roc-fs-ui);text-align:left;cursor:pointer;
  transition:color var(--roc-dur-fast),border-color var(--roc-dur-fast)}
html.roc-com-lateral .roc-lateral__ir[hidden]{display:none}
html.roc-com-lateral .roc-lateral__ir:hover{color:var(--roc-on-dark);border-color:var(--roc-accent-med)}
/* fundo transparente DITO: o /roc-normaliza.css pinta `kbd` de prata-claro (piso :where),
   e no menu escuro a dica "Ctrl K" virava letra clara sobre pílula clara */
.roc-kbd{font-family:var(--roc-mono);font-size:var(--roc-fs-micro);letter-spacing:.04em;line-height:1.4;padding:1px var(--roc-space-1);
  border:1px solid var(--roc-dark-line);border-radius:var(--roc-radius-xs);background:transparent;color:var(--roc-on-dark-3);white-space:nowrap}
/* ⚠️ display/fundo/borda DITOS AQUI: a Conciliação tem `nav{background:…;display:flex;
   border-bottom:…}` pelado e o Operacional e o RH têm `section{background:…;border:…;
   padding:…}` — sem isto o menu virava faixa branca deitada e cada grupo, um cartão. */
html.roc-com-lateral .roc-lateral__nav{display:block;flex:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--roc-space-2) var(--roc-space-4);background:transparent;border:0;
  scrollbar-width:thin;scrollbar-color:var(--roc-dark-line) transparent}
html.roc-com-lateral .roc-lateral__item{position:relative;display:flex;align-items:center;gap:var(--roc-space-3);
  min-height:var(--roc-control-md);padding:0 var(--roc-space-3);margin:1px 0;border-radius:var(--roc-radius-sm);
  color:var(--roc-on-dark-3);background:transparent;text-decoration:none;font-size:var(--roc-fs-ui);font-weight:var(--roc-fw-medium);
  transition:color var(--roc-dur-fast),background var(--roc-dur-fast)}
html.roc-com-lateral .roc-lateral__item:hover{color:var(--roc-on-dark);background:var(--roc-dark-hover)}
html.roc-com-lateral .roc-lateral__item.is-ativo{color:var(--roc-on-dark);background:var(--roc-dark-hover);
  box-shadow:inset 3px 0 0 var(--roc-accent-med)} /* ds-ok: 3px = espessura do marcador do item ativo, sem token de traço */
html.roc-com-lateral .roc-lateral__item.is-ativo .roc-ic{color:var(--roc-accent-med)}
html.roc-com-lateral .roc-lateral__rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.roc-com-lateral .roc-lateral__cont{flex:none;min-width:var(--roc-space-5);padding:2px 6px;border-radius:var(--roc-radius-pill); /* ds-ok: 6px = respiro lateral da pílula de 1–3 dígitos (a escala pula de 4 para 8) */
  background:var(--roc-at);color:var(--roc-on-at);font-size:var(--roc-fs-micro);font-weight:var(--roc-fw-bold);line-height:1.3; /* ds-ok: 1.3 = pílula de 10 px sem cortar o dígito (lh-snug 1.2 corta, lh-body 1.5 engorda) */
  text-align:center;font-variant-numeric:tabular-nums}
html.roc-com-lateral .roc-lateral__cont[hidden]{display:none}
html.roc-com-lateral .roc-lateral__grupo{margin:var(--roc-space-3) 0 0;padding:0;background:transparent;border:0;border-radius:0}
html.roc-com-lateral .roc-lateral__gtit{display:flex;align-items:center;gap:var(--roc-space-2);width:100%;
  padding:var(--roc-space-2) var(--roc-space-3);border:0;border-radius:var(--roc-radius-sm);background:transparent;
  color:var(--roc-on-dark-3);font-family:var(--roc-mono);font-size:var(--roc-fs-caption);font-weight:var(--roc-fw-medium);
  letter-spacing:var(--roc-ls-mono);text-transform:uppercase;text-align:left;cursor:pointer}
html.roc-com-lateral .roc-lateral__gtit:hover{color:var(--roc-on-dark);background:transparent}
html.roc-com-lateral .roc-lateral__gtit .roc-ic{transition:transform var(--roc-dur-fast)}
html.roc-com-lateral .roc-lateral__gtit[aria-expanded="false"] .roc-ic{transform:rotate(-90deg)}
html.roc-com-lateral .roc-lateral__lista{list-style:none;margin:0;padding:0}
html.roc-com-lateral .roc-lateral__lista[hidden]{display:none}
html.roc-com-lateral .roc-lateral__vazio{margin:var(--roc-space-3);font-size:var(--roc-fs-label);color:var(--roc-on-dark-3)}
html.roc-com-lateral .roc-lateral__rodape{flex:none;padding:var(--roc-space-2);border-top:1px solid var(--roc-dark-hover)}
html.roc-com-lateral .roc-lateral__recolher{display:flex;align-items:center;gap:var(--roc-space-3);width:100%;
  min-height:var(--roc-control-md);padding:0 var(--roc-space-3);border:0;border-radius:var(--roc-radius-sm);
  background:transparent;color:var(--roc-on-dark-3);font:inherit;font-size:var(--roc-fs-label);text-align:left;cursor:pointer}
html.roc-com-lateral .roc-lateral__recolher:hover{color:var(--roc-on-dark);background:var(--roc-dark-hover)}
html.roc-com-lateral .roc-lateral a:focus-visible, html.roc-com-lateral .roc-lateral button:focus-visible,
.roc-hamb:focus-visible{outline:2px solid var(--roc-accent-med);outline-offset:-2px}
/* trilho: só ícones (o nome vai na dica do `title`) */
@media (min-width:1024px){
  html.roc-lateral-recolhido .roc-lateral{width:var(--roc-sidebar-rail-w)}
  html.roc-lateral-recolhido .roc-lateral__topo{justify-content:center;padding:0}
  /* !important MEDIDO: a palavra traz `display:block` em style inline (contra o svg{width:100%}
     do /bi/dia) e inline vence regra de folha — no trilho ela saía cortada ao lado da mira */
  html.roc-lateral-recolhido .roc-lateral__marca > svg{display:none !important}
  html.roc-lateral-recolhido .roc-lateral__mira{display:block}
  html.roc-lateral-recolhido .roc-lateral__rot, html.roc-lateral-recolhido .roc-lateral .roc-kbd,
  html.roc-lateral-recolhido .roc-lateral__gtit, html.roc-lateral-recolhido .roc-lateral__item > .roc-ic + .roc-lateral__rot + .roc-ic{display:none}
  html.roc-lateral-recolhido .roc-lateral__lista[hidden]{display:block}
  /* "Nenhum módulo liberado…" não cabe em 64 px: no trilho fica só o Início (E8) */
  html.roc-lateral-recolhido .roc-lateral__vazio{display:none}
  html.roc-lateral-recolhido .roc-lateral__grupo{margin-top:var(--roc-space-2);padding-top:var(--roc-space-2);border-top:1px solid var(--roc-dark-hover)}
  html.roc-lateral-recolhido .roc-lateral__item, html.roc-lateral-recolhido .roc-lateral__ir,
  html.roc-lateral-recolhido .roc-lateral__recolher{justify-content:center;padding:0}
  html.roc-lateral-recolhido .roc-lateral__ir{margin:0 var(--roc-space-2) var(--roc-space-3)}
  html.roc-lateral-recolhido .roc-lateral__cont{position:absolute;top:var(--roc-space-1);right:var(--roc-space-2);min-width:0;
    width:var(--roc-space-2);height:var(--roc-space-2);padding:0;font-size:0}
}
/* gaveta: celular e tablet */
@media (max-width:1023.98px){
  html.roc-com-lateral .roc-lateral{z-index:310;width:min(300px,86vw);transform:translateX(-100%);visibility:hidden; /* ds-ok: gaveta = 300 px ou 86% da tela (sobra véu para fechar com o toque) */
    box-shadow:var(--roc-shadow-menu);transition:transform var(--roc-dur) var(--roc-ease),visibility 0s linear var(--roc-dur)}
  html.roc-gaveta-aberta .roc-lateral{transform:none;visibility:visible;transition:transform var(--roc-dur) var(--roc-ease)}
  html.roc-com-lateral .roc-lateral__fechar{display:grid}
  html.roc-com-lateral .roc-lateral__rodape{display:none}
  html.roc-gaveta-aberta, html.roc-gaveta-aberta body{overflow:hidden}
  html.roc-com-lateral .roc-hamb{display:grid}
}
.roc-veu{position:fixed;inset:0;z-index:300;background:var(--roc-scrim);opacity:.6}
.roc-veu[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .roc-lateral, .roc-lateral *{transition:none !important} }
/* pular para o conteúdo: só aparece no foco do teclado */
.roc-pular{position:fixed;left:var(--roc-space-3);top:calc(-1 * var(--roc-header-h));z-index:600;padding:var(--roc-space-2) var(--roc-space-4);
  border-radius:var(--roc-radius-sm);background:var(--roc-accent);color:var(--roc-on-accent);font-size:var(--roc-fs-ui);
  font-weight:var(--roc-fw-semibold);text-decoration:none}
.roc-pular:focus{top:var(--roc-space-3)}

/* cabeçalho: ☰ (só com menu e tela estreita) · marca (sem menu ou celular) · trilha · direita */
.roc-hamb{display:none;place-items:center;flex:none;width:var(--roc-control-md);height:var(--roc-control-md);margin-left:calc(-1 * var(--roc-space-2));
  border:0;border-radius:var(--roc-radius-sm);background:transparent;color:var(--roc-on-dark-2);cursor:pointer}
.roc-hamb:hover{background:var(--roc-dark-hover);color:var(--roc-on-dark)}
/* ⚠️ `.roc-trilha` e `.roc-avatar` SÃO TAMBÉM COMPONENTES DA BIBLIOTECA (Breadcrumb e Avatar,
   /roc-ds.css, que carrega DEPOIS do tema): sem o `.roc-header` na frente, a página que usa a
   biblioteca pintava a trilha do cabeçalho de faixa clara (MEDIDO na vitrine: "Design system"
   branco sobre prata, 1,18) e a regra daqui vazava para o componente. Por isso as duas são
   presas ao cabeçalho e desfazem o que o componente pinta. */
.roc-header .roc-trilha{display:flex;align-items:baseline;gap:var(--roc-space-2);min-width:0;flex:0 1 auto;overflow:hidden;
  min-height:0;padding:0;background:transparent;font-size:inherit;color:inherit}
.roc-trilha__grupo{flex:none;font-size:var(--roc-fs-label);color:var(--roc-on-dark-3);white-space:nowrap}
.roc-trilha__grupo[hidden]{display:none}
.roc-trilha__grupo:not(:last-child)::after{content:'/';margin-left:var(--roc-space-2);color:var(--roc-on-dark-3)}
/* min-width:0 + ellipsis: o nome do módulo é o ÚNICO item que pode encolher — sem
   isto, em módulo de nome longo ("Inteligência Comercial") o lado direito (Imprimir +
   Admin + pessoa) estourava a faixa e alargava a página p/ 425px no celular
   (varredura 11/set). Flex não encolhe abaixo do conteúdo sem ordem expressa. */
.roc-header .roc-mod{font-size:var(--roc-fs-h3);font-weight:var(--roc-fw-semibold);color:var(--roc-on-dark);
  min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roc-header .roc-ir{display:inline-flex;align-items:center;gap:var(--roc-space-2)}
.roc-header .roc-ir[hidden]{display:none}
.roc-header .roc-avatar{display:inline-grid;place-items:center;flex:none;width:var(--roc-space-6);height:var(--roc-space-6);
  border-radius:var(--roc-radius-pill);background:var(--roc-accent);color:var(--roc-on-accent);
  font-size:var(--roc-fs-micro);font-weight:var(--roc-fw-bold);letter-spacing:.02em}
.roc-header .roc-avatar:empty{display:none}
/* faixa compacta no celular — o padding dos botões mora no /roc-componentes.css §7,
   que ganha por especificidade (:root:root); o ajuste deles está lá, no mesmo @media */
@media (max-width:620px){
  .roc-header{padding:0 10px;gap:10px} /* ds-ok: medida herdada do tema v2 (faixa compacta do celular, varredura de 11/set) */
  .roc-header .roc-dir{gap:7px} /* ds-ok: idem */
  .roc-trilha__grupo{display:none}
  /* o nome só sai quando há as iniciais no lugar: anônimo (Ouvidoria, vitrine) continua com
     "Minha conta" — sem isto o botão virava um "▾" solto */
  .roc-header .roc-quem .roc-avatar:not(:empty) + .roc-nome, .roc-header .roc-ir .roc-rot{display:none}
  /* MEDIDO (/recebiveis/, 390 px): com ☰ + marca + lupa + Imprimir + "⚙ Admin" + iniciais, o
     nome do módulo ficava com 18 dos 71 px ("Re…") e o cabeçalho deixava de dizer onde a pessoa
     está (RD-11). Com menu, a lupa sai daqui — a gaveta já abre com "Ir para…" — e a seta
     sai quando as iniciais estão no lugar. A marca fica (D6/RD-12). */
  html.roc-com-lateral .roc-header .roc-ir{display:none}
  .roc-header .roc-quem .roc-avatar:not(:empty) ~ .roc-seta{display:none}
}

/* ---- a faixa "AMBIENTE DE TESTE" (só no site de teste) ---------------------------
   O /roc-ambiente.js (o `deploy.py --homolog` o injeta) põe a faixa ESTÁTICA no topo do
   <body>. Com o menu lateral isso desalinhava a casca: o menu (fixo, top 0) começava
   ~30 px acima do cabeçalho, que a faixa empurrava para baixo; e a home, que se veste
   depois, punha o cabeçalho ACIMA dela. Presa no RODAPÉ ela não briga com nada da casca.
   Só CSS, de propósito: o roc-ambiente.js e o deploy não mudam (o `style` dele dita cor,
   fonte e padding; aqui só se decide ONDE ela fica). z 290: acima do menu (130) e do
   cabeçalho (120), abaixo do véu (300), da gaveta (310) e da paleta (500). */
#roc-homolog-faixa{position:fixed;left:var(--roc-lateral-x,0px);right:0;bottom:0;z-index:290}
/* o fim da página não pode morar embaixo dela. Regra SEPARADA: navegador sem `:has`
   descarta só esta, e a faixa continua no rodapé. Altura MEDIDA (fonte 13 px × 1,4 +
   6+6 px de padding): 1 linha ≈ 30 px; abaixo de ~760 px de largura útil o texto quebra. */
html:has(#roc-homolog-faixa) body{padding-bottom:var(--roc-space-7)}
@media (max-width:1023.98px){
  html:has(#roc-homolog-faixa) body{padding-bottom:calc(2 * var(--roc-space-6))}
}

/* ---- impressão da casca (RD-09) ---------------------------------------------------
   Os módulos levam o /roc-componentes.css (§ 9), que já faz isto e mais. A HOME não: em
   modo porta a casca não o injeta (os `:root:root h1/h2` de lá pintariam o título de
   escuro na home escura), e o Ctrl+P dela saía com o menu lateral e o cabeçalho.
   Aqui mora o mínimo, que vale para toda página. */
@media print{
  .roc-lateral, .roc-veu, .roc-hamb, .roc-pular, .roc-paleta{display:none !important}
  body[data-roc-porta] .roc-header{display:none !important}
  html{padding-left:0 !important}
}

/* menu suspenso de navegação (escuro em cima, mesa clara embaixo) --------
   As ABAS desta faixa (.roc-tabs/.roc-tab) são o componente `Tabs` da biblioteca
   (variante "barra"), em /roc-ds.css. */
.roc-menu{position:relative}
.roc-menu>.roc-sub{position:absolute;top:100%;left:0;min-width:230px;background:var(--roc-bg-elev);
  border:1px solid var(--roc-line);border-radius:0 0 var(--roc-radius) var(--roc-radius);
  box-shadow:var(--roc-shadow);padding:6px;display:none;z-index:130}
.roc-menu:hover>.roc-sub,.roc-menu.open>.roc-sub{display:block}
.roc-sub a{display:block;padding:8px 11px;border-radius:var(--roc-radius-sm);text-decoration:none;
  color:var(--roc-ink);font-size:13.5px}
.roc-sub a:hover{background:var(--roc-accent-soft);color:var(--roc-accent-deep)}
.roc-sub a small{display:block;font-size:var(--roc-fs-caption);color:var(--roc-ink-mute);margin-top:1px}

/* mesa de trabalho (clara) ----------------------------------------------
   Cartão, tabela, etiqueta, botão e campo são componentes da biblioteca
   (`Card`, `DataTable`, `Badge`, `Button`, `TextInput`) e moram em /roc-ds.css. */
.roc-wrap{max-width:1400px;margin:0 auto;padding:26px 22px 70px}
.roc-h1{font-size:var(--roc-fs-h1);font-weight:var(--roc-fw-semibold);letter-spacing:-.02em}
.roc-h1 em{font-style:normal;color:var(--roc-accent)}
.roc-h2{font-size:17px;font-weight:var(--roc-fw-semibold);margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--roc-line)}
.roc-h2 small{font-family:var(--roc-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--roc-ink-mute);margin-left:9px;font-weight:var(--roc-fw-regular)}
.roc-sub-t{color:var(--roc-ink-mute);font-size:var(--roc-fs-ui);margin:3px 0 20px}

/* avisos ---------------------------------------------------------------- */
.roc-nota{background:var(--roc-accent-soft);border-left:3px solid var(--roc-accent);
  padding:11px 14px;border-radius:0 var(--roc-radius-sm) var(--roc-radius-sm) 0;font-size:var(--roc-fs-ui);margin:14px 0}
.roc-aviso{background:var(--roc-warn-soft);border-left:3px solid var(--roc-at);
  padding:11px 14px;border-radius:0 var(--roc-radius-sm) var(--roc-radius-sm) 0;font-size:var(--roc-fs-ui);margin:14px 0}
.roc-erro{background:var(--roc-danger-soft);border-left:3px solid var(--roc-danger);
  padding:11px 14px;border-radius:0 var(--roc-radius-sm) var(--roc-radius-sm) 0;font-size:var(--roc-fs-ui);margin:14px 0}

/* gate / portaria (escuro, com brilho verde) ---------------------------- */
.roc-gate{position:fixed;inset:0;background:var(--roc-bg-deep);display:grid;place-items:center;
  z-index:1000;padding:24px}
.roc-gate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 50% -8%, rgba(15,122,95,.30), transparent 70%)}
.roc-gate-card{position:relative;text-align:center;width:100%;max-width:376px;padding:40px 34px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--roc-radius-lg);
  backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.roc-gate-card .roc-logo{height:78px;margin:0 auto;color:var(--roc-on-dark)}
.roc-gate-card h1{color:var(--roc-on-dark);font-size:19px;font-weight:var(--roc-fw-semibold);margin-top:20px}
.roc-gate-card p{color:rgba(255,255,255,.6);font-size:var(--roc-fs-ui);margin:4px 0 22px}
.roc-gate-tag{font-family:var(--roc-mono);font-size:var(--roc-fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:18px}
.roc-gate .roc-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);
  color:var(--roc-on-dark);margin-bottom:10px;text-align:left}
.roc-gate .roc-input::placeholder{color:rgba(255,255,255,.45)}
.roc-gate .roc-input:focus{border-color:var(--roc-accent-med);background:rgba(255,255,255,.10);box-shadow:none}
.roc-gate .roc-btn{width:100%;margin-top:6px;padding:12px}

/* ---- menu do usuário (canto superior direito) ------------------------------
   A marca da esquerda volta para a home; a direita é QUEM ESTÁ LOGADO. Os dois (a
   esquerda ainda era o ladrilho) levavam ao mesmo lugar, e o Gorin apontou isso. */
.roc-header .roc-dir{position:relative}
.roc-quem{display:inline-flex;align-items:center;gap:7px}
.roc-quem .roc-seta{font-size:var(--roc-fs-micro);opacity:.7}
.roc-menu-usuario{position:absolute;top:calc(100% + 6px);right:0;min-width:186px;
  background:var(--roc-bg-elev);border:1px solid var(--roc-line);border-radius:10px;
  box-shadow:var(--roc-shadow-menu);padding:5px;z-index:400;display:flex;
  flex-direction:column}
.roc-menu-usuario[hidden]{display:none}
.roc-menu-usuario a,.roc-menu-usuario button{display:block;width:100%;text-align:left;
  font:inherit;font-size:var(--roc-fs-ui);color:var(--roc-ink);background:transparent;border:0;
  border-radius:7px;padding:8px 10px;cursor:pointer;text-decoration:none}
.roc-menu-usuario a:hover,.roc-menu-usuario button:hover{background:var(--roc-accent-soft);
  color:var(--roc-accent-deep)}
.roc-menu-usuario .roc-sair{border-top:1px solid var(--roc-line);border-radius:0 0 7px 7px;
  margin-top:3px;padding-top:9px;color:var(--roc-ink-soft)}