/* ============================================================================
   ROC · roc-theme.css — IDENTIDADE VISUAL ÚNICA DO SISTEMA
   v2 · 10/08/2026 — VERDE + PRATA, casca escura. Decisões do Gorin nesta sessão.

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

   ⚠️ 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 MATRIZ e FILIAL têm cor fixa no portal inteiro
      (--roc-g-matriz / --roc-g-filial). Ninguém deve ler legenda duas vezes.

   ⛔ 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 */
  /* 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 */
  /* status */
  --roc-ok:var(--roc-accent); --roc-ok-soft:var(--roc-accent-soft);
  --roc-warn:#8a6800; --roc-warn-soft:#fff6d9;
  --roc-at:#f2b705;                        /* amarelo CHAMATIVO: borda, ponto, barra */
  --roc-danger:#b3261e; --roc-danger-soft:#fcecea;
  /* GRÁFICO — sequência fixa, sempre nesta ordem */
  --roc-g-matriz:#0c6049;                  /* unidade Matriz — cor FIXA no portal */
  --roc-g-filial:#5fbf9b;                  /* unidade Filial — cor FIXA no portal */
  /* ⚠️ 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 da Filial 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-filial-ink:#2b7a5f;              /* Filial, quando é letra */
  --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;
  /* forma */
  --roc-radius:12px; --roc-radius-sm:8px;
  --roc-shadow:0 1px 2px rgba(23,38,44,.05),0 8px 24px rgba(23,38,44,.07);
}

/* base ----------------------------------------------------------------- */
.roc *{box-sizing:border-box}
.roc{font-family:var(--roc-sans);color:var(--roc-ink);background:var(--roc-bg);font-size:14px;line-height:1.5;-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) ================================================
   .roc-shell é o par cabeçalho+menu que TODO módulo usa. O que muda de um
   módulo para outro é o nome ao lado do ladrilho e os itens do menu — a
   estética, não. */
.roc-header{background:var(--roc-bg-deep);color:#fff;padding:0 18px;height:60px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:120}
/* o ladrilho verde do canto superior esquerdo: é o botão que volta para a home */
.roc-tile{width:42px;height:42px;border-radius:11px;background:var(--roc-accent);
  display:grid;place-items:center;flex:0 0 auto;transition:background 150ms,transform 150ms}
.roc-tile svg{height:24px;width:24px;color:#fff;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)}
/* 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:13px;color:rgba(255,255,255,.72);
  border-left:1px solid rgba(255,255,255,.18);padding-left:14px;
  min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- 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 150ms,transform 150ms}
.roc-header .roc-marca:hover{color:#fff;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:12px}
/* 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}
  .roc-header .roc-dir{gap:7px}
  .roc-header .roc-mod{padding-left:10px}
}
.roc-hbtn{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);background:transparent;
  border:1px solid rgba(255,255,255,.24);padding:7px 13px;border-radius:var(--roc-radius-sm);
  cursor:pointer;text-decoration:none;transition:all 150ms;white-space:nowrap}
.roc-hbtn:hover{border-color:var(--roc-accent-med);color:#fff;background:rgba(255,255,255,.06)}

/* nav / abas (escuro, com submenu) -------------------------------------- */
.roc-tabs{background:var(--roc-bg-nav);padding:0 18px;display:flex;gap:1px;overflow:visible;
  position:sticky;top:60px;z-index:110}
.roc-tab{font-size:13.5px;font-weight:500;padding:11px 13px;cursor:pointer;color:rgba(255,255,255,.68);
  border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px;
  text-decoration:none;transition:all 150ms}
.roc-tab:hover{color:#fff;background:rgba(255,255,255,.07)}
.roc-tab.active{color:#fff;border-bottom-color:var(--roc-accent-med);background:rgba(255,255,255,.07)}
.roc-tab .num{font-family:var(--roc-mono);font-size:10.5px;color:rgba(255,255,255,.42)}
.roc-tab .cnt{font-family:var(--roc-mono);font-size:10px;font-weight:600;background:var(--roc-danger);
  color:#fff;border-radius:999px;padding:1px 6px}
.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:11px;color:var(--roc-ink-mute);margin-top:1px}

/* mesa de trabalho (clara) ---------------------------------------------- */
.roc-wrap{max-width:1400px;margin:0 auto;padding:26px 22px 70px}
.roc-card{background:var(--roc-bg-elev);border:1px solid var(--roc-line);border-radius:var(--roc-radius);padding:16px 18px}
.roc-card--flush{padding:0;overflow:hidden}
.roc-h1{font-size:25px;font-weight:600;letter-spacing:-.02em}
.roc-h1 em{font-style:normal;color:var(--roc-accent)}
.roc-h2{font-size:17px;font-weight:600;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:400}
.roc-sub-t{color:var(--roc-ink-mute);font-size:13px;margin:3px 0 20px}

.roc-table{width:100%;border-collapse:collapse;font-size:13px}
.roc-table th{text-align:left;font-family:var(--roc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--roc-ink-mute);font-weight:400;padding:8px 9px;border-bottom:1px solid var(--roc-line)}
.roc-table td{padding:7px 9px;border-bottom:1px solid var(--roc-p-02)}
.roc-table td.num,.roc-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.roc-table tbody tr:hover td{background:var(--roc-accent-soft)}

/* badges / pills / avisos ----------------------------------------------- */
.roc-badge{display:inline-block;font-family:var(--roc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--roc-p-02);color:var(--roc-p-07)}
.roc-badge.ok{background:var(--roc-accent-soft);color:var(--roc-accent-deep)}
.roc-badge.warn{background:var(--roc-warn-soft);color:var(--roc-warn)}
.roc-badge.danger{background:var(--roc-danger-soft);color:var(--roc-danger)}
.roc-pill{font-family:var(--roc-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--roc-p-02);color:var(--roc-p-07);white-space:nowrap}
.roc-nota{background:var(--roc-accent-soft);border-left:3px solid var(--roc-accent);
  padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;margin:14px 0}
.roc-aviso{background:var(--roc-warn-soft);border-left:3px solid var(--roc-at);
  padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;margin:14px 0}
.roc-erro{background:var(--roc-danger-soft);border-left:3px solid var(--roc-danger);
  padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;margin:14px 0}

/* botões / inputs ------------------------------------------------------- */
.roc-btn{font:inherit;font-size:13px;font-weight:500;border:1px solid var(--roc-line-2);
  border-radius:var(--roc-radius-sm);background:var(--roc-bg-elev);color:var(--roc-ink-soft);
  padding:7px 14px;cursor:pointer;transition:all 150ms;white-space:nowrap;text-decoration:none;display:inline-block}
.roc-btn:hover{border-color:var(--roc-accent);color:var(--roc-accent)}
.roc-btn--p{background:var(--roc-accent);border-color:var(--roc-accent);color:#fff}
.roc-btn--p:hover{background:var(--roc-accent-deep);border-color:var(--roc-accent-deep);color:#fff}
.roc-btn--ghost{background:transparent}
.roc-btn--danger{background:var(--roc-danger);border-color:var(--roc-danger);color:#fff}
.roc-input{width:100%;font:inherit;font-size:14px;border:1px solid var(--roc-line-2);
  border-radius:var(--roc-radius-sm);padding:10px 13px;background:var(--roc-bg-elev);color:var(--roc-ink);outline:none}
.roc-input:focus{border-color:var(--roc-accent);box-shadow:0 0 0 3px var(--roc-accent-soft)}

/* 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:18px;
  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:#fff}
.roc-gate-card h1{color:#fff;font-size:19px;font-weight:600;margin-top:20px}
.roc-gate-card p{color:rgba(255,255,255,.6);font-size:13px;margin:4px 0 22px}
.roc-gate-tag{font-family:var(--roc-mono);font-size:10px;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:#fff;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) ------------------------------
   O ladrilho da esquerda volta para a home; a direita é QUEM ESTÁ LOGADO. Os dois
   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:10px;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:0 10px 28px rgba(0,0,0,.20);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:13px;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)}