/* ============================================================================
of-base.css — Sistema de layout responsivo único · Operação no Foco
Grupo Habib's (TRGM). Mobile-first. UMA fonte de verdade para TODO painel.
Como usar num painel novo (1 linha no , depois do viewport):
E o conteúdo dentro de
...
Tabelas:
(scroll+coluna fixa, padrão)
class extra "of-table--cards" -> vira cartão no celular (cadastros)
class extra "of-table--hybrid" -> 2-3 colunas + acordeão (10+ colunas)
Filtros mobile: botão [data-of-sheet="idDoSheet"] abre a gaveta inferior.
NADA aqui usa seletor de elemento agressivo: tudo é .of-* (opt-in) +
um punhado de salvaguardas de specificity ZERO via :where() (fácil de sobrepor).
============================================================================ */
/* ---------- 0. Fonte oficial (Bib'sans). Carrega 1x; se o módulo já tiver, não duplica visualmente ---------- */
@font-face{font-family:'Bibsans';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/Bib_sans-Regular.otf') format('opentype')}
@font-face{font-family:'Bibsans';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/Bib_sans-Medium.otf') format('opentype')}
@font-face{font-family:'Bibsans';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/Bib_sans-Semibold.otf') format('opentype')}
@font-face{font-family:'Bibsans';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/Bib_sans-Bold.otf') format('opentype')}
@font-face{font-family:'Bibsans';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/Bib_sans-Extrabold.otf') format('opentype')}
/* ---------- 1. TOKENS (prefixo --of- para nunca colidir com tokens do módulo) ---------- */
:root{
/* marca */
--of-accent:#B42F2E; /* vermelho Habib's — ponto único da marca */
--brand:var(--of-accent,#B42F2E); /* alias usado pelos módulos; troque --of-accent p/ mudar tudo */
--of-ink:#1f2733; --of-muted:#5a6573; --of-faint:#9aa0a6;
--of-line:#e2e5e9; --of-line-2:#eef1f3; --of-surface:#fff; --of-bg:#eef1f4;
--of-gray:#3a4047; /* acento cinza do filtro-padrão */
/* semáforo */
--of-ok:#1e8e3e; --of-ok-bg:#e7f4ea;
--of-warn:#e07b1a; --of-warn-bg:#fdeedd;
--of-bad:#dc2626; --of-bad-bg:#fde8e7; /* crítico: vermelho aceso, distinto do vermelho da marca (#B42F2E) p/ alarme saltar */
--of-neu:#5a6573; --of-neu-bg:#eef1f4;
/* raio / sombra */
--of-r:10px; --of-r-sm:7px; --of-r-lg:16px;
--of-shadow:0 8px 24px rgba(16,30,45,.12);
--of-shadow-lg:0 16px 44px rgba(16,30,45,.22);
/* gutter/spacing fluido (px fixo morre aqui) */
--of-gut:clamp(12px,3.2vw,22px);
--of-maxw:1320px; /* largura da área de conteúdo (padrão = Avaliações Delivery) */
--of-gap:clamp(10px,2.4vw,16px);
--of-pad:clamp(10px,2.6vw,16px);
/* tipografia fluida */
--of-fs:clamp(13px,1.1vw + 11px,15px);
--of-fs-sm:clamp(11px,.6vw + 10px,12.5px);
--of-fs-xs:clamp(9.5px,.4vw + 9px,11px);
--of-h1:clamp(17px,2.2vw + 12px,24px);
--of-h2:clamp(15px,1.4vw + 11px,19px);
/* safe-area do iPhone (notch / barra inferior) */
--of-safe-t:env(safe-area-inset-top,0px);
--of-safe-b:env(safe-area-inset-bottom,0px);
--of-safe-l:env(safe-area-inset-left,0px);
--of-safe-r:env(safe-area-inset-right,0px);
/* breakpoints (documentação; sem zona morta — limites contíguos)
mobile <= 639 | tablet 640–1024 | desktop >= 1025 */
}
/* ---------- 2. SALVAGUARDAS UNIVERSAIS (specificity 0 — qualquer módulo sobrepõe fácil) ---------- */
:where(*){box-sizing:border-box}
:where(img,video,canvas){max-width:100%;height:auto}
/* backstop: nunca rolar a PÁGINA pro lado. Conteúdo largo (tabela) rola DENTRO do seu wrapper. */
:where(html,body){overflow-x:clip;max-width:100%}
:where(body){-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* respeita quem pediu menos animação */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ---------- 3. CONTAINER + GRADE (a base que todo painel consome) ---------- */
.of-scope{font-family:'Bibsans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--of-ink);font-size:var(--of-fs)}
.of-wrap{width:100%;max-width:var(--of-maxw);margin-inline:auto;
padding-top:16px;
padding-inline:max(var(--of-gut),var(--of-safe-l));
padding-bottom:calc(44px + var(--of-safe-b))}
.of-grid{display:grid;gap:var(--of-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.of-grid-2{display:grid;gap:var(--of-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.of-grid-3{display:grid;gap:var(--of-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.of-grid-4{display:grid;gap:var(--of-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.of-row{display:flex;gap:var(--of-gap);flex-wrap:wrap;align-items:center}
.of-card{background:var(--of-surface);border:1px solid var(--of-line);border-radius:var(--of-r);box-shadow:var(--of-shadow)}
.of-card-pad{padding:var(--of-pad)}
.of-hide-mobile{}@media (max-width:639px){.of-hide-mobile{display:none!important}}
.of-only-mobile{display:none}@media (max-width:639px){.of-only-mobile{display:initial}}
/* ---------- 4. TIPOGRAFIA / utilitários ---------- */
.of-h1{font-size:var(--of-h1);font-weight:800;letter-spacing:.3px;line-height:1.15}
.of-h2{font-size:var(--of-h2);font-weight:800;line-height:1.2}
.of-muted{color:var(--of-muted)}.of-faint{color:var(--of-faint)}
.of-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* ---------- 5. ALVOS DE TOQUE ---------- */
.of-tap,.of-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
font-family:inherit;cursor:pointer;border-radius:var(--of-r-sm);border:1px solid var(--of-line);
background:var(--of-surface);color:var(--of-ink);font-size:var(--of-fs-sm);font-weight:700;padding:9px 14px;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.of-btn--accent{background:var(--of-accent);border-color:var(--of-accent);color:#fff}
.of-btn--ghost{background:transparent}
.of-btn:active{transform:translateY(1px)}
/* ---------- 6. SEMÁFORO (pílulas) ---------- */
.of-pill{display:inline-block;border-radius:6px;padding:2px 8px;font-weight:800;font-size:var(--of-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.of-pos{color:var(--of-ok);background:var(--of-ok-bg)}
.of-mid{color:var(--of-warn);background:var(--of-warn-bg)}
.of-neg{color:var(--of-bad);background:var(--of-bad-bg)}
.of-neu{color:var(--of-neu);background:var(--of-neu-bg)}
/* ============================================================================
7. TABELAS — sistema único, 3 comportamentos. PADRÃO = scroll + 1ª coluna fixa.
of-base.js envolve toda
em .of-tblwrap (se já não estiver) e preenche
data-label nas células a partir do , então cards/híbrido "só funcionam".
============================================================================ */
.of-tblwrap{position:relative;width:100%;border:1px solid var(--of-line);border-radius:var(--of-r);background:var(--of-surface);overflow:hidden}
.of-tblscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* indicador de "tem mais pro lado" */
.of-tblwrap::after{content:"";position:absolute;top:0;right:0;width:24px;height:100%;pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));opacity:0;transition:opacity .15s}
.of-tblwrap[data-of-more="1"]::after{opacity:1}
.of-swipe{display:none;font-size:var(--of-fs-xs);color:var(--of-muted);text-align:right;padding:5px 6px 0}
.of-tblwrap[data-of-more="1"] + .of-swipe{display:block}
.of-swipe span{background:var(--of-neu-bg);border-radius:999px;padding:2px 9px}
table.of-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--of-fs-sm);font-variant-numeric:tabular-nums}
table.of-table th,table.of-table td{padding:9px 11px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--of-line-2)}
table.of-table thead th{position:sticky;top:0;z-index:2;background:#f3f4f6;color:var(--of-muted);
font-size:var(--of-fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
table.of-table tbody tr:last-child td{border-bottom:none}
/* 1ª coluna fixa (texto, ex.: loja) — marque com .of-sticky OU é aplicada à 1ª col por of-base.js */
/* o expansor do híbrido só existe no celular (no desktop a tabela mostra tudo) */
table.of-table--hybrid td.of-exp{display:none}
table.of-table .of-sticky{position:sticky;left:0;z-index:1;text-align:left;font-weight:700;background:var(--of-surface);
box-shadow:1px 0 0 var(--of-line);min-width:128px;max-width:160px;overflow:hidden;text-overflow:ellipsis}
table.of-table thead .of-sticky{z-index:3;background:#f3f4f6}
table.of-table tbody tr:nth-child(even) td{background:#fafbfc}
table.of-table tbody tr:nth-child(even) .of-sticky{background:#fafbfc}
/* ---- 7B. LINHA -> CARTÃO (cadastros). Ativa só no celular. ---- */
@media (max-width:639px){
/* quando o cartão está dentro do wrapper de scroll, o wrapper vira contêiner neutro */
.of-tblwrap:has(.of-table--cards),.of-tblwrap:has(.of-table--hybrid){border:none;background:transparent;border-radius:0}
.of-tblwrap:has(.of-table--cards) .of-tblscroll,.of-tblwrap:has(.of-table--hybrid) .of-tblscroll{overflow:visible}
table.of-table--cards,
table.of-table--cards thead,
table.of-table--cards tbody,
table.of-table--cards tr,
table.of-table--cards td{display:block;width:100%}
table.of-table--cards thead{position:absolute;left:-9999px}
table.of-table--cards{min-width:0!important}
table.of-table--cards tr{border:1px solid var(--of-line);border-radius:var(--of-r);margin-bottom:var(--of-gap);overflow:hidden;background:var(--of-surface)}
table.of-table--cards td{display:flex;justify-content:space-between;gap:12px;text-align:right;
padding:8px 12px;border-bottom:1px solid var(--of-line-2);white-space:normal;min-width:0;max-width:none}
table.of-table--cards td::before{content:attr(data-label);text-align:left;color:var(--of-faint);
font-size:var(--of-fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.3px;flex:0 0 42%}
table.of-table--cards td.of-sticky{position:static;box-shadow:none;background:#fafbfc;font-size:var(--of-fs);font-weight:800;
min-width:0;max-width:none;justify-content:flex-start}
table.of-table--cards td.of-sticky::before{display:none}
table.of-table--cards tr:nth-child(even) td{background:transparent}
}
/* ---- 7C. HÍBRIDO (10+ colunas): de-base.js mostra 2-3 críticas + botão expande ---- */
@media (max-width:639px){
table.of-table--hybrid{min-width:0!important;display:block}
table.of-table--hybrid thead{display:none}
table.of-table--hybrid tbody,table.of-table--hybrid tr,table.of-table--hybrid td{display:block;width:100%}
table.of-table--hybrid tr{border:1px solid var(--of-line);border-radius:var(--of-r);margin-bottom:var(--of-gap);overflow:hidden}
table.of-table--hybrid td{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--of-line-2);white-space:normal}
table.of-table--hybrid td::before{content:attr(data-label);text-align:left;color:var(--of-faint);font-size:var(--of-fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.3px;flex:0 0 42%}
table.of-table--hybrid td.of-prio{background:#fafbfc}
table.of-table--hybrid td.of-collapsed{display:none}
table.of-table--hybrid tr.of-open td.of-collapsed{display:flex}
table.of-table--hybrid td.of-exp{justify-content:center;color:var(--of-accent);font-weight:800;cursor:pointer}
table.of-table--hybrid td.of-exp::before{display:none}
}
/* ============================================================================
8. GAVETA INFERIOR (bottom-sheet) — padrão mobile p/ filtros e ações.
Botão:
Sheet:
...
============================================================================ */
.of-sheet{position:fixed;inset:0;z-index:9000;display:none}
.of-sheet.of-open{display:block}
.of-sheet-backdrop{position:absolute;inset:0;background:rgba(8,11,20,.42);opacity:0;transition:opacity .2s}
.of-sheet.of-open .of-sheet-backdrop{opacity:1}
.of-sheet-card{position:absolute;left:0;right:0;bottom:0;background:var(--of-surface);
border-radius:var(--of-r-lg) var(--of-r-lg) 0 0;box-shadow:var(--of-shadow-lg);
padding:14px 16px calc(16px + var(--of-safe-b));max-height:86vh;overflow:auto;
transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.of-sheet.of-open .of-sheet-card{transform:translateY(0)}
.of-sheet-handle{width:40px;height:4px;border-radius:999px;background:var(--of-line);margin:0 auto 12px}
.of-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.of-sheet-head b{font-size:var(--of-h2);font-weight:800}
.of-sheet-x{border:none;background:var(--of-neu-bg);color:var(--of-muted);width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer}
/* botão flutuante de filtros (mobile) — opcional, herdado */
.of-fbtn{display:none}
@media (max-width:639px){
.of-fbtn{display:inline-flex;position:fixed;right:14px;bottom:calc(14px + var(--of-safe-b));z-index:300;
align-items:center;gap:7px;background:var(--of-accent);color:#fff;border:none;border-radius:999px;
padding:12px 18px;min-height:48px;font-family:inherit;font-weight:800;font-size:var(--of-fs-sm);
box-shadow:var(--of-shadow-lg);cursor:pointer}
}
/* no desktop a gaveta nunca aparece como overlay: o filtro fica inline na barra */
@media (min-width:640px){.of-sheet.of-as-bar{position:static;display:block}
.of-sheet.of-as-bar .of-sheet-backdrop{display:none}
.of-sheet.of-as-bar .of-sheet-card{position:static;transform:none;box-shadow:none;border-radius:0;padding:0;max-height:none;overflow:visible}
.of-sheet.of-as-bar .of-sheet-handle,.of-sheet.of-as-bar .of-sheet-head{display:none}}
/* ===== CABEÇALHO PADRÃO (.ofh) — componente único; todo módulo herda daqui ===== */
.ofh{background:var(--of-surface);border-bottom:1px solid var(--of-line)}
.ofh-main{display:flex;align-items:center;gap:12px;padding:11px var(--of-gut)}
.ofh-mark{width:38px;height:38px;border-radius:9px;overflow:hidden;flex:none}
.ofh-mark img{width:100%;height:100%;display:block;object-fit:cover}
.ofh-id{display:flex;flex-direction:column;min-width:0;gap:1px}
.ofh-ey{font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--of-faint);text-transform:uppercase;line-height:1.1}
.ofh-t{font-size:var(--of-h2);font-weight:800;color:var(--of-ink);line-height:1.12;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofh-sp{flex:1}
.ofh-act{display:flex;align-items:center;gap:8px;flex:none}
.ofh-status{font-size:11px;font-weight:800;margin-top:1px}
.ofh-status.ok{color:var(--of-ok)} .ofh-status.bad{color:var(--of-bad)}
@media (max-width:640px){.ofh-main{gap:9px;padding:9px var(--of-gut)}.ofh-ey{display:none}.ofh-t{font-size:15px}}
/* ===== FILTRO PADRÃO — chip compacto com RÓTULO DENTRO (espelha o Painel Operacional) ===== */
.of-filterbar{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;padding:9px var(--of-gut);border-top:1px solid var(--of-line-2);background:var(--of-surface)}
.fdd{flex:1 1 118px;min-width:0;position:relative}
.fchip{display:flex;justify-content:space-between;align-items:center;gap:4px;width:100%;background:#f3f4f6;border:1px solid var(--of-line);border-radius:7px;padding:6px 9px;cursor:pointer;white-space:nowrap;overflow:hidden;font-family:inherit;font-size:12px;font-weight:700;color:var(--of-ink)}
.fchip .flbl{color:var(--of-faint);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis}
.fchip .fcar{color:#bcc1c7;font-size:8px;flex:0 0 auto}
.fchip:hover{border-color:#c4c9cf}
.fchip.act{border-color:var(--of-gray);background:#eef1f4}
.fchip.act .flbl{color:var(--of-gray);font-weight:800}
.fchip.act .fcar{color:var(--of-gray)}
.fchipn{background:var(--of-gray);color:#fff;border-radius:9px;font-size:8px;font-weight:700;padding:1px 6px;line-height:1.5;flex:0 1 auto;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.fdd{flex:1 1 100%}.fchip{padding:12px 12px;border-radius:10px;font-size:14px}.fchip .flbl{font-size:12px}}
/* ===== FILTRO CLICÁVEL PADRÃO (.fseg) — segmentos/pills que filtram em 1 clique; ativo em tint grafite (mesma família do .fchip.act). Todo módulo herda daqui. ===== */
.fseg-lbl{font-size:9px;font-weight:800;letter-spacing:.7px;color:var(--of-faint);text-transform:uppercase;line-height:1}
.fsegs{display:flex;gap:5px;flex-wrap:wrap}
.fseg{border:1px solid var(--of-line);background:var(--of-surface);border-radius:6px;padding:4px 8px;font-family:inherit;font-size:8.5px;font-weight:700;color:var(--of-muted);cursor:pointer;user-select:none;white-space:nowrap}
.fseg:hover{border-color:#c4c9cf}
.fseg.act{background:#f5f7f9;border-color:#c9d0d7;color:#5a6573;font-weight:700}
.fseg-clear{color:var(--of-gray);font-weight:700}
.fseg-clear:hover{border-color:var(--of-gray);color:var(--of-gray)}
@media (max-width:640px){.fseg{padding:9px 14px;font-size:13px}}
/* selo NIA nos cabeçalhos dos painéis (injetado por of-base.js) — marca em cima, descrição
embaixo, encostado à direita. Discreto: identifica sem competir com o título do painel. */
.of-nia-selo{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.of-nia-selo .nia-mark{height:16px;display:block}
.of-nia-selo .nia-desc{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
font-weight:700;font-size:8px;letter-spacing:.5px;color:#9aa0a6;text-transform:uppercase;white-space:nowrap}
@media(max-width:760px){.of-nia-selo .nia-desc{display:none}}