/* ============================================================
   Contador One — Casca canônica (Tabler puro)
   Par de assets/theme/c1-shell.js.

   REGRA: paleta e tokens são do Tabler. A única troca é o
   primary — o laranja da Contador One (#fa6400) no lugar do
   laranja do Tabler. Cinzas, bordas, sombras, raios, estados e
   tipografia de UI: Tabler padrão. Nenhum átomo próprio além
   dos componentes que o Tabler não traz (supermenu de apps).
   ============================================================ */

/* laranja da marca como primary do Tabler */
:root,[data-bs-theme]{--tblr-primary:#fa6400;--tblr-primary-rgb:250,100,0;--tblr-primary-fg:#fff;
  --tblr-link-color:#fa6400;--tblr-link-hover-color:#d65500}
.btn-primary{--tblr-btn-bg:#fa6400;--tblr-btn-border-color:#fa6400;--tblr-btn-hover-bg:#d65500;--tblr-btn-hover-border-color:#d65500;--tblr-btn-active-bg:#a84300;--tblr-btn-active-border-color:#a84300}
.text-primary{color:#fa6400!important}
.bg-primary{background-color:#fa6400!important}
.bg-primary-lt{background:rgba(250,100,0,.12)!important;color:#a84300!important}
.nav-item.active>.nav-link,.nav-link.active{color:#fa6400}
.navbar-nav .nav-item.active>.nav-link::after,.navbar-nav .nav-link.active::after{background:#fa6400}
a{color:var(--tblr-link-color)}a:hover{color:var(--tblr-link-hover-color)}

/* Ubuntu, a tipografia da marca, nos tokens de fonte do Tabler */
:root{--tblr-font-sans-serif:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --tblr-body-font-family:var(--tblr-font-sans-serif);
  --tblr-font-monospace:"Ubuntu Mono",ui-monospace,SFMono-Regular,monospace}
h1,h2,.page-title{letter-spacing:-.02em}

/* o container-fluid do Tabler tem gutter 1rem; as rows g-4/g-5 usam 12/16px
   de margem negativa e estouram — igualamos ao maior */
.container-fluid{--tblr-gutter-x:2rem}
/* em telas cheias o brand encolhia a zero: é item fixo da navbar */
.navbar-brand{flex:none}
/* o ribbon é a parte elástica da navbar: encolhe e rola, para que o bloco
   de ações (tema, avisos, ferramentas, usuário) nunca saia da tela.
   Sem min-width:0 o flex não encolhe abaixo do min-content dos itens. */
header.navbar>.container-fluid{flex-wrap:nowrap}
/* basis 0: o ribbon fica com a SOBRA entre logo e ações, nunca com a
   largura do próprio conteúdo (era o que fazia os itens passarem por baixo
   dos ícones da direita). overflow:hidden garante que nada vaze. */
/* overflow-x:clip (não hidden) permite que os dropdowns do menu apareçam
   verticalmente sem que os itens vazem na horizontal. */
header.navbar>.container-fluid>.navbar-collapse{min-width:0;flex:1 1 0%;overflow-x:clip;overflow-y:visible}
@media(min-width:768px){
  /* nada de rolagem escondida: o excedente vira o dropdown "Mais" (c1-shell.js) */
  header.navbar .navbar-collapse>.navbar-nav{flex-wrap:nowrap;overflow:visible}
  header.navbar .navbar-nav>.nav-item{flex:none}
  header.navbar>.container-fluid>.navbar-nav.order-md-last{flex:none;margin-left:auto}
}
.navbar-brand img{height:26px;width:auto;max-width:none;flex:none}
.ti{font-size:20px;line-height:1;vertical-align:middle}

/* ---------- supermenu de ferramentas (o Tabler não traz) ---------- */
.dropdown-menu.apps{width:min(760px,92vw);padding:0}
.app-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--tblr-primary);color:#fff;flex:none}
.app-ic .ti{font-size:17px}
.app-li{display:flex;gap:12px;padding:9px 11px;border-radius:var(--tblr-border-radius);text-decoration:none;color:inherit}
.app-li:hover{background:var(--tblr-bg-surface-secondary);color:inherit}
.app-li b{display:block;font-size:13.5px;font-weight:500}
.app-li small{display:block;font-size:11.5px;color:var(--tblr-secondary);line-height:1.35;margin-top:1px}
.apps-2col{display:grid;grid-template-columns:216px 1fr;min-height:340px}
.apps-2col .rail{border-right:1px solid var(--tblr-border-color);background:var(--tblr-bg-surface-secondary);padding:8px;overflow-y:auto;max-height:min(70vh,460px)}
.apps-2col .rail button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--tblr-secondary);text-align:left;padding:9px 11px;border-radius:8px;cursor:pointer}
.apps-2col .rail button:hover{background:var(--tblr-bg-surface);color:var(--tblr-body-color)}
.apps-2col .rail button[aria-selected="true"]{background:var(--tblr-primary);color:#fff;font-weight:600}
.apps-2col .rail .ti{font-size:18px;flex:none}
.apps-2col .pane{padding:12px 14px;overflow-y:auto;max-height:min(70vh,460px)}

/* mega de largura total (Segmentos) */
.navbar .container-fluid{position:relative}
.navbar .nav-item.nav-item-wide{position:static}
.navbar .dropdown-menu.mega{position:absolute;left:0;right:0;width:auto;max-width:none;margin-top:0}
.mega .apps-2col{grid-template-columns:248px 1fr;min-height:262px}
.mega .apps-2col .rail,.mega .apps-2col .pane{max-height:none}
.mega .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:13px 20px;border-top:1px solid var(--tblr-border-color);background:var(--tblr-bg-surface-secondary)}

/* ---------- rodapé institucional ---------- */
.c1-foot{background:#404040;padding:56px 0 40px;margin-top:auto;
  --tblr-body-bg:#404040;--tblr-bg-surface:#404040;--tblr-border-color:rgba(255,255,255,.14)}
.c1-foot .c1-flogo{height:30px;width:auto}
/* o laranja da marca dá 3,4:1 sobre o marrom do rodapé; nestes rótulos de
   11px usamos o tom claro do laranja (4,9:1) em vez de perder a cor */
.c1-foot h4.c1-fh,.c1-foot h6.c1-fh{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#ff9a4d;margin:0 0 12px}
/* o CSS das páginas antigas estiliza `p` diretamente (#404040) e vence a
   herança do rodapé: as cores precisam alcançar os descendentes */
.c1-foot p,.c1-foot li,.c1-foot span,.c1-foot div{color:rgba(255,255,255,.82)}
.c1-foot .text-secondary,.c1-foot small{color:rgba(255,255,255,.62)!important}
.c1-foot a.link-secondary{color:rgba(255,255,255,.82)!important;font-size:13.5px;text-decoration:none}
.c1-foot a.link-secondary:hover{color:#fff}
.c1-foot p a,.c1-foot .c1-yb{color:#ff9a4d}
.c1-foot .c1-yb-n{border-color:#ff9a4d;color:#ff9a4d}
.c1-birds{display:flex;gap:10px}
.c1-birds img{height:22px;width:auto;opacity:.5;transition:opacity .2s}
.c1-birds img:hover{opacity:1}
.c1-yb{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.c1-yb-n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--tblr-primary);color:var(--tblr-primary);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.c1-yb b{display:block;font-size:14px;color:#fff;line-height:1.25}
.c1-yb small{display:block;font-size:12px;color:rgba(255,255,255,.5)}

/* rodapé sempre no fim, mesmo em página curta */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body>.page,body>.page-wrapper{flex:1 0 auto}

/* ---------- celular ---------- */
@media(max-width:767.98px){
  .navbar.py-2 .container-fluid{flex-wrap:wrap;row-gap:8px}
  .navbar.py-2 .container-fluid>*{min-width:0;flex:1 1 100%;max-width:none;margin-left:0!important}
  .navbar.py-2 .container-fluid>*>div,.navbar.py-2 .form-select{width:100%!important;max-width:100%}
  .navbar.py-2 .nav-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .navbar.py-2 .nav-pills .nav-link{padding-left:9px;padding-right:9px}
  .navbar.py-2 .nav-pills .badge{display:none}
  /* .dropdown-menu[data-bs-popper]{top:100%} do Bootstrap jogaria o painel
     para 100% da viewport quando fixed — fora da tela */
  .dropdown-menu.apps{position:fixed!important;top:62px!important;left:8px!important;right:8px!important;bottom:auto!important;width:auto;max-width:none;margin:0!important;transform:none!important}
  .apps-2col,.mega .apps-2col{grid-template-columns:1fr;min-height:0}
  .apps-2col .rail{border-right:0;border-bottom:1px solid var(--tblr-border-color);max-height:none;display:flex;gap:6px;overflow-x:auto}
  .apps-2col .rail button{white-space:nowrap;width:auto}
  .apps-2col .pane{max-height:calc(100dvh - 250px)}
  .navbar .dropdown-menu.mega{position:static;width:100%;box-shadow:none;border:0;background:transparent}
  .mega .foot{flex-direction:column;align-items:flex-start;padding:12px 4px;background:transparent}
}

/* a navegação da ferramenta passou para a navbar única: a sidebar .side
   vira apenas a fonte de dados do ribbon e sai da tela */
body.c1-ribbon-on .side{display:none!important}
body.c1-ribbon-on .shell{grid-template-columns:1fr!important;display:block!important}
body.c1-ribbon-on .main,body.c1-ribbon-on .content{margin-left:0!important;width:auto!important}
/* gavetas off-canvas das ferramentas ficam à direita da viewport e criavam
   rolagem lateral quando a sidebar saiu do fluxo */
body.c1-ribbon-on{overflow-x:clip}
html:has(body.c1-ribbon-on){overflow-x:clip}
body.c1-ribbon-on header.navbar{overflow:visible}

/* ---------- porteiro: tela de gate, sem casca própria ----------
   O porteiro montava um shell completo (rail .pt-side + cabeçalho) que
   cobria a navbar canônica. Ele passa a ser só conteúdo: o rail sai (o
   supermenu de ferramentas já faz esse papel) e o console desce para
   abaixo da navbar. */
/* #porteiroGate é um overlay fixed z-2000 que cobria a navbar inteira:
   passa a começar abaixo dela e a ficar sob a casca, para as ferramentas e
   o site continuarem acessíveis enquanto o usuário não entra */
#porteiroGate{top:56px!important;z-index:1000!important}
.pt-side{display:none!important}
/* o porteiro monta depois e se insere antes da navbar no DOM; como o body
   é flex-column, a ordem visual é fixada aqui em vez de na ordem do DOM */
body>header.navbar{order:-2}
body>.navbar.py-2{order:-1}
body>.c1-foot{order:99}
.pt-root{padding-left:0!important;margin-left:0!important}
.pt-main{margin-left:0!important;width:auto!important}
.pt-head{padding-left:0!important}