/* ============================================================
   PLATAFORMA FINANCEIRA — casca do produto e componentes de tela
   Reformulação TASK-016 v2: navegação lateral em grafite, barra de
   contexto no topo, conteúdo em painéis de linha fina.
   ============================================================ */

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
[hidden]{display:none !important;}
.muted{color:var(--text-secondary);}

/* ============================================================
   1. Layout: barra lateral + área de trabalho
   ============================================================ */
.app-layout{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100vh;}
.app-main{min-width:0; display:flex; flex-direction:column; background:var(--bg);}

.side{
  background:var(--chrome-bg-1); color:var(--chrome-text); border-right:1px solid var(--chrome-border);
  display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-4) var(--s-3);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side-marca{display:flex; align-items:center; gap:10px; padding:2px var(--s-2) var(--s-4); text-decoration:none; color:var(--chrome-text);}
.side-marca small{display:block; font-size:var(--t-micro); color:var(--chrome-text-dim); letter-spacing:.08em; text-transform:uppercase; margin-top:4px;}

.side-bloco{margin-top:var(--s-4);}
.side-bloco > .rotulo{padding:0 var(--s-2) var(--s-2); color:#7F8FA3;}
.side-empresa{
  width:100%; background:var(--chrome-field-bg); border:1px solid var(--chrome-border); color:var(--chrome-text);
  border-radius:var(--radius-md); padding:9px 30px 9px 11px; font-size:var(--t-corpo); font-weight:600; font-family:inherit;
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--chrome-text-dim) 50%),linear-gradient(135deg,var(--chrome-text-dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat;
}
.side-empresa:hover{border-color:#33455A;}
.side-empresa:focus-visible{outline:none; box-shadow:var(--ring);}
.side-empresa-nome{font-size:var(--t-medio); font-weight:600; padding:2px var(--s-2); display:block;}

.side-nav{display:flex; flex-direction:column; gap:2px;}
.side-link{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--radius-md);
  font-size:var(--t-corpo); font-weight:500; color:var(--chrome-text-dim); text-decoration:none; position:relative;
  transition:background .12s, color .12s;
}
.side-link:hover{background:var(--chrome-pill-bg); color:var(--chrome-text);}
.side-link.active{background:var(--chrome-pill-bg); color:var(--chrome-text); font-weight:600;}
.side-link.active::before{content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--brand);}
.side-link svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none;}
.side-link:focus-visible{outline:none; box-shadow:var(--ring);}
/* Módulo desligado na empresa: só o admin master o vê no menu. */
.side-link.desligado{font-style:italic;}
.side-tag{font-size:var(--t-mini); font-style:normal; font-weight:500; padding:0 6px; margin-left:4px;
  border:1px dashed var(--chrome-border); border-radius:var(--radius-sm); color:var(--chrome-text-dim);}

.side-rodape{margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--chrome-border); display:flex; flex-direction:column; gap:var(--s-2);}
.side-user{display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:1px solid transparent; border-radius:var(--radius-md); padding:8px; cursor:pointer; color:var(--chrome-text); text-align:left;}
.side-user:hover{background:var(--chrome-pill-bg); border-color:var(--chrome-border);}
.side-user:focus-visible{outline:none; box-shadow:var(--ring);}
.avatar{width:28px; height:28px; border-radius:var(--radius-md); background:var(--brand); color:var(--brand-on); display:flex; align-items:center; justify-content:center; font-size:var(--t-mini); font-weight:700; flex:none;}
.side-user-id{min-width:0; line-height:1.25;}
.side-user-id b{display:block; font-size:var(--t-corpo); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;}
.side-user-id small{display:block; font-size:var(--t-micro); color:var(--chrome-text-dim);}

.usermenu{position:relative;}
.usermenu-list{
  position:absolute; left:0; bottom:calc(100% + 6px); min-width:214px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:6px; z-index:90;
}
.usermenu-head{font-family:var(--font-mono); font-size:var(--t-mini); color:var(--text-tertiary); padding:6px 10px 8px; border-bottom:1px solid var(--linha); margin-bottom:4px;}
.usermenu-list a, .usermenu-list button{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:var(--radius-sm); font-size:var(--t-corpo);
  color:var(--text-primary); text-decoration:none; background:none; border:0; cursor:pointer; font-family:inherit;
}
.usermenu-list a:hover, .usermenu-list button:hover, .usermenu-list a:focus-visible, .usermenu-list button:focus-visible{background:var(--surface-2); outline:none;}
.usermenu-list #logout-btn{color:var(--negative);}

/* barra de contexto */
.topbar{
  min-height:var(--topbar); flex:none; display:flex; align-items:center; gap:var(--s-3);
  padding:0 var(--s-5); background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.topbar .trilha{display:flex; align-items:center; gap:8px; font-size:var(--t-corpo); color:var(--text-secondary); min-width:0;}
.topbar .trilha b{color:var(--text-primary); font-weight:600;}
.topbar .trilha .sep{color:var(--text-tertiary);}
.topbar-acoes{margin-left:auto; display:flex; align-items:center; gap:var(--s-2);}
.topbar-estado{
  display:inline-flex; align-items:center; gap:7px; font-size:var(--t-mini); color:var(--text-secondary);
  padding:5px 10px; border-radius:var(--radius-pill); background:var(--surface-2); white-space:nowrap;
}
.topbar-estado::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--positive); flex:none;}
.topbar-estado.alerta::before{background:var(--warning);}

/* Estando tudo em dia, a data da última carga não disputa atenção com os
   números: fica só o ponto, e o texto aparece ao passar o mouse ou ao focar
   pelo teclado. Havendo problema, o texto volta por extenso — aí ele importa. */
.topbar-estado:not(.alerta){padding:5px; background:transparent;}
.topbar-estado:not(.alerta) .te-texto{
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .18s ease, opacity .18s ease;
}
/* `:focus` e não `:focus-visible`: o elemento só recebe foco de propósito,
   e o `:focus-visible` não dispara em foco por script — o que deixaria quem
   navega por teclado sem ver o texto. */
.topbar-estado:not(.alerta):hover .te-texto,
.topbar-estado:not(.alerta):focus .te-texto{max-width:56ch; opacity:1;}
.topbar-estado:not(.alerta):hover, .topbar-estado:not(.alerta):focus{background:var(--surface-2);}
.topbar-estado:focus-visible{outline:none; box-shadow:var(--ring);}

/* ============================================================
   2. Botões, campos e mensagens
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:var(--altura-controle); padding:0 14px;
  border-radius:var(--radius-md); font-size:var(--t-corpo); font-weight:600; cursor:pointer; text-decoration:none;
  border:1px solid transparent; font-family:inherit; white-space:nowrap; transition:background .12s,border-color .12s,color .12s;
}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9;}
.btn-primary{background:var(--brand); color:var(--brand-on);}
.btn-primary:hover:not(:disabled){background:var(--brand-strong);}
.btn-secondary{background:var(--surface); color:var(--text-primary); border-color:var(--border-strong);}
.btn-secondary:hover:not(:disabled){background:var(--surface-2);}
.btn-ghost{background:transparent; color:var(--text-secondary); border-color:transparent;}
.btn-ghost:hover:not(:disabled){color:var(--text-primary); background:var(--surface-2);}
.btn-danger{background:transparent; color:var(--negative); border-color:color-mix(in srgb, var(--negative) 45%, transparent);}
.btn-danger:hover:not(:disabled){background:var(--negative-soft);}
.btn-sm{height:28px; padding:0 10px; font-size:var(--t-mini);}
.btn-block{width:100%;}
.icon-btn{
  width:30px; height:30px; border-radius:var(--radius-md); border:1px solid transparent; background:transparent;
  color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text-primary);}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:var(--s-4);}
.field label{font-size:var(--t-mini); font-weight:600; color:var(--text-secondary);}
.field .help{font-size:var(--t-mini); color:var(--text-tertiary);}
/* Texto de apoio que virou aviso: muda de cor e ganha peso, sem virar um
   bloco de alerta — ele continua sendo a legenda do campo. */
.field .help.alerta{color:var(--warning); font-weight:600;}
.input, .select{
  width:100%; height:var(--altura-controle); padding:0 11px; border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text-primary); font-family:var(--font-body); font-size:var(--t-corpo);
  transition:border-color .12s, box-shadow .12s;
}
.select{appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-tertiary) 50%),linear-gradient(135deg,var(--text-tertiary) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat;}
.input:hover, .select:hover{border-color:var(--text-tertiary);}
.input:focus-visible, .select:focus-visible{outline:none; border-color:var(--brand); box-shadow:var(--ring);}
.input:disabled{opacity:.6;}
.check{display:flex; align-items:center; gap:8px; font-size:var(--t-corpo); color:var(--text-primary); margin:6px 0;}
.check input{width:15px; height:15px; accent-color:var(--brand);}
.linha-form{display:flex; gap:var(--s-2); align-items:flex-end; flex-wrap:wrap;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-3);}
.form-grid .span-2{grid-column:span 2;}

.msg{font-size:var(--t-corpo); border-radius:var(--radius-md); padding:10px 13px; margin-bottom:var(--s-3); line-height:1.5; border:1px solid transparent; border-left-width:3px;}
.msg.error{background:var(--negative-soft); color:var(--negative); border-color:var(--negative);}
.msg.success{background:var(--positive-soft); color:var(--positive-on-soft); border-color:var(--positive);}
.msg.info{background:var(--info-soft); color:var(--text-primary); border-color:var(--info);}
.msg.warn{background:var(--warning-soft); color:var(--text-primary); border-color:var(--warning);}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:var(--t-micro); font-weight:600; padding:3px 8px; border-radius:var(--radius-sm); background:var(--neutral-chip-bg); color:var(--neutral-chip-text); letter-spacing:.02em;}
.badge.pos{background:var(--positive-soft); color:var(--positive-on-soft);}
.badge.neg{background:var(--negative-soft); color:var(--negative);}
.badge.warn{background:var(--warning-soft); color:var(--warning);}
.badge.info{background:var(--info-soft); color:var(--info);}
.badge.brand{background:var(--brand-soft); color:var(--brand-strong);}
/* `ok` e `ruim` são os nomes que o Orçamento já usava para o mesmo par
   positivo/negativo. Sem estas duas linhas o selo "Realizado" do quadro
   mensal saía cinza, como se não tivesse leitura nenhuma. */
.badge.ok{background:var(--positive-soft); color:var(--positive-on-soft);}
.badge.ruim{background:var(--negative-soft); color:var(--negative);}

/* ============================================================
   3. Página: cabeçalho, seções e painéis
   ============================================================ */
.page{max-width:var(--largura-max); width:100%; margin:0 auto; padding:var(--s-6) var(--s-5) var(--s-8); flex:1;}
.page-narrow{max-width:1180px;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5);}
.page-head h1{font-size:var(--t-secao); letter-spacing:-.02em;}
.page-head .sub{font-size:var(--t-corpo); color:var(--text-secondary); margin-top:4px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s-5);}
.painel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);}
.painel-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--linha);}
.painel-head h2, .painel-head h3{font-size:var(--t-titulo);}
.painel-head .hint{font-size:var(--t-mini); color:var(--text-secondary); margin-top:2px;}
.painel-corpo{padding:var(--s-5);}

.toolbar{display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4);}
.toolbar h2{font-size:var(--t-titulo);}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:var(--s-5);}
.tab{
  border:0; background:transparent; color:var(--text-secondary); font:600 var(--t-corpo) var(--font-body);
  padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{color:var(--text-primary);}
.tab.active{color:var(--text-primary); border-bottom-color:var(--brand);}
.tab:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm) var(--radius-sm) 0 0;}

/* ============================================================
   4. Seleção de empresas
   ============================================================ */
.secao-titulo{display:flex; align-items:baseline; gap:10px; margin:var(--s-6) 0 var(--s-3);}
.secao-titulo:first-child{margin-top:0;}
.secao-titulo h2{font-size:var(--t-titulo);}
.secao-titulo span{font-size:var(--t-mini); color:var(--text-tertiary);}
.empresa-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:var(--s-3);}
.card-wrap{position:relative;}
.empresa-card{
  display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--s-4) var(--s-5); text-decoration:none; color:var(--text-primary);
  height:100%; transition:border-color .12s, background .12s;
}
.card-wrap .empresa-card{padding-right:52px;}
.empresa-card:hover{border-color:var(--border-strong); background:var(--surface-2);}
.empresa-card:focus-visible{outline:none; box-shadow:var(--ring);}
.empresa-card h2{font-size:var(--t-titulo);}
.empresa-card .meta{display:flex; gap:6px; flex-wrap:wrap;}
.empresa-card .ir{margin-top:auto; font-size:var(--t-mini); font-weight:600; color:var(--brand);}
.consolidado-card{border-left:2px solid var(--brand);}
.eyebrow.cons{color:var(--brand);}
.chips{display:flex; flex-wrap:wrap; gap:5px;}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-micro); padding:3px 8px; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-secondary); border:1px solid var(--border);}
.chip i{width:5px; height:5px; border-radius:50%; background:var(--brand);}

.head-acoes{position:relative; display:flex; align-items:flex-end; gap:var(--s-2);}
.gear-btn{
  display:inline-flex; align-items:center; gap:8px; height:var(--altura-controle); padding:0 13px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-primary); font:600 var(--t-corpo) var(--font-body); cursor:pointer;
}
.gear-btn svg{width:15px; height:15px; stroke:var(--text-secondary); fill:none; stroke-width:1.8;}
.gear-btn:hover{background:var(--surface-2);}
.gear-btn[aria-expanded="true"]{border-color:var(--brand);}
.gear-menu,.card-menu{position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:6px; z-index:60;}
.gear-menu{right:0; top:calc(var(--altura-controle) + 6px); width:296px;}
.card-menu{top:44px; right:10px; width:286px;}
.gear-menu h6,.card-menu h6{font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary); padding:8px 10px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gear-item{display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; border:0; background:transparent; border-radius:var(--radius-md); padding:8px 10px; cursor:pointer; color:var(--text-primary); text-decoration:none; font-family:inherit;}
.gear-item:hover,.gear-item:focus-visible{background:var(--surface-2); outline:none;}
.gear-item .gi{flex:none; width:28px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--surface-2);}
.gear-item .gi svg{width:15px; height:15px; stroke:var(--text-secondary); fill:none; stroke-width:1.8;}
.gear-item b{display:block; font-size:var(--t-corpo); font-weight:600;}
.gear-item small{display:block; font-size:var(--t-mini); color:var(--text-secondary); margin-top:1px;}
.gear-item.destaque .gi{background:var(--brand-soft);}
.gear-item.destaque .gi svg{stroke:var(--brand-strong);}
.gear-item.perigo b{color:var(--negative);}
.gear-item.perigo .gi svg{stroke:var(--negative);}
.gear-sep{height:1px; background:var(--linha); margin:5px 4px;}
.card-gear{position:absolute; top:12px; right:12px; z-index:5; width:30px; height:30px; border-radius:var(--radius-md); border:1px solid transparent; background:transparent; display:grid; place-items:center; cursor:pointer;}
.card-gear svg{width:15px; height:15px; stroke:var(--text-tertiary); fill:none; stroke-width:1.8;}
.card-gear:hover{background:var(--surface-2);}
.card-gear:hover svg,.card-gear[aria-expanded="true"] svg{stroke:var(--brand);}
.card-gear[aria-expanded="true"]{border-color:var(--border);}

.lista-check{display:flex; flex-direction:column; gap:2px; max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-md); padding:5px;}
.lista-check label{display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--t-corpo);}
.lista-check label:hover{background:var(--surface-2);}
.lista-check small{margin-left:auto; font-size:var(--t-micro); color:var(--text-tertiary);}
.regras{margin-top:var(--s-3); padding:11px 13px; border-radius:var(--radius-md); background:var(--info-soft); font-size:var(--t-mini); line-height:1.55;}
.regras b{display:block; margin-bottom:3px;}
.perfil-opcoes{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2);}
.perfil-op{display:flex; gap:9px; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius-md); padding:11px; cursor:pointer;}
.perfil-op:has(input:checked){border-color:var(--brand); background:var(--brand-soft);}
.perfil-op b{display:block; font-size:var(--t-corpo);}
.perfil-op small{display:block; font-size:var(--t-mini); color:var(--text-secondary); margin-top:2px; line-height:1.4;}
.radio-linha{display:flex; flex-direction:column; gap:7px; margin-top:4px;}
.radio-linha label{display:flex; gap:8px; align-items:center; font-size:var(--t-corpo);}
.pode-lista{margin-top:var(--s-3); padding:11px 13px; border-radius:var(--radius-md); background:var(--surface-2); font-size:var(--t-mini); line-height:1.7;}
.pode-lista b{display:block; margin-bottom:2px;}
.conf-lista{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; margin-top:var(--s-3);}
.conf-lista > div{display:flex; justify-content:space-between; gap:var(--s-3); align-items:center; padding:10px 12px; font-size:var(--t-corpo); border-top:1px solid var(--linha);}
.conf-lista > div:first-child{border-top:0;}
.conf-lista small{font-size:var(--t-mini); color:var(--text-secondary); text-align:right;}
.conf-lista .fonte{display:block; font-size:var(--t-micro); color:var(--text-tertiary);}
.conf-aviso{margin-top:var(--s-3); font-size:var(--t-mini); color:var(--text-secondary); line-height:1.55;}

/* ============================================================
   5. Tabelas de dados (administração, importações)
   ============================================================ */
.data-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);}
.data-table{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-corpo);}
.data-table thead th{
  text-align:left; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-tertiary); white-space:nowrap;
}
.data-table tbody td{padding:11px 14px; border-bottom:1px solid var(--linha); vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:0;}
.data-table tbody tr:hover{background:var(--surface-2);}
.data-table .num{text-align:right;}
.data-table .acoes{text-align:right; white-space:nowrap;}
.data-table .vazio{text-align:center; color:var(--text-tertiary); padding:36px 14px;}
/* --- escolha de empresas por marcação ---
   Caixa com rolagem própria: a lista cresce com a carteira, e o formulário
   inteiro não pode crescer junto. */
.escolha-empresas{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); max-height:210px; overflow-y:auto;
}
.escolha-item{
  display:flex; align-items:center; gap:var(--s-2);
  padding:6px var(--s-3); min-height:38px;
  border-bottom:1px solid var(--linha); font-size:var(--t-corpo);
}
.escolha-item:last-child{border-bottom:0;}
.escolha-item:hover{background:var(--surface-2);}
.escolha-item.marcada{background:var(--brand-soft);}
.escolha-item input[type=checkbox]{width:15px; height:15px; accent-color:var(--brand); flex:none; cursor:pointer;}
/* O nome é o rótulo da caixa: clicar nele marca, que é o alvo maior e mais
   fácil de acertar. O seletor de papel fica fora desse alvo, senão escolher
   um papel tiraria o acesso sem querer. */
.escolha-item .ei-nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;}
.escolha-item .ei-papel{flex:none; width:auto; min-width:150px; max-width:170px;}
.escolha-item:focus-within{box-shadow:inset var(--ring);}

.escolha-acoes{display:flex; gap:var(--s-3); margin:6px 0 var(--s-3);}
.btn-link{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:0;
  font-family:inherit; font-size:var(--t-mini); font-weight:600; color:var(--brand);
}
.btn-link:hover:not(:disabled){text-decoration:underline;}
.btn-link:disabled{color:var(--text-tertiary); cursor:default; font-weight:500;}
.btn-link:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);}
.btn-link[hidden]{display:none;}

.vinculos{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s-2);}
.vinculo{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-mini); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 8px;}
.vinculo button{background:none; border:0; color:var(--text-tertiary); cursor:pointer; font-size:13px; line-height:1;}
.vinculo button:hover{color:var(--negative);}

/* ============================================================
   6. Modais e camadas
   ============================================================ */
.modal-overlay{position:fixed; inset:0; background:rgba(10,15,22,.5); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:56px 16px; overflow-y:auto; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.modal{width:100%; max-width:520px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);}
.modal-largo{max-width:900px !important;}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--linha);}
.modal-head h3{font-size:var(--t-titulo);}
.modal-body{padding:var(--s-5);}
.modal-foot{display:flex; justify-content:flex-end; gap:var(--s-2); padding:var(--s-4) var(--s-5); border-top:1px solid var(--linha); background:var(--surface-2); border-radius:0 0 var(--radius-lg) var(--radius-lg);}
/* Ação destrutiva fica no canto oposto ao Salvar, com o vão inteiro entre as
   duas — distância é o que evita o clique errado. */
.modal-foot .btn-danger{margin-right:auto;}
.secao-modal{margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--linha);}
.secao-modal h4{font-size:var(--t-corpo); margin-bottom:var(--s-2);}

.toast-wrap{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:120;}
.toast{background:var(--chrome-bg-1); color:var(--chrome-text); border:1px solid var(--chrome-border); border-radius:var(--radius-md); padding:11px 14px; font-size:var(--t-corpo); box-shadow:var(--shadow-lg); max-width:360px;}
.toast.error{border-color:var(--negative);}
.toast.warn{border-color:var(--warning);}
.toast.saindo{opacity:0; transition:opacity .3s;}

/* ============================================================
   7. Estados
   ============================================================ */
.carregando{display:flex; align-items:center; justify-content:center; gap:10px; padding:64px 20px; color:var(--text-tertiary); font-size:var(--t-corpo);}
.spinner{width:16px; height:16px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--brand); animation:girar .8s linear infinite;}
@keyframes girar{to{transform:rotate(360deg);}}
.estado-vazio{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:var(--s-8) var(--s-5); color:var(--text-secondary);}
.estado-vazio .ic{width:40px; height:40px; border-radius:var(--radius-md); background:var(--surface-2); display:grid; place-items:center; font-size:17px; color:var(--text-tertiary); margin-bottom:4px;}
.estado-vazio h2{font-size:var(--t-titulo); color:var(--text-primary);}
.estado-vazio p{font-size:var(--t-corpo); max-width:460px;}

/* ============================================================
   8. Marca (logo clara sobre fundo escuro da navegação)
   ============================================================ */
/* O monograma só aparece com a barra recolhida; aberta, quem fala é o
   logotipo escrito. */
.marca-simbolo{display:none;}
.marca-criterio{display:inline-flex; align-items:center; height:20px;}
.marca-criterio img{height:100%; width:auto; display:block;}
.side .marca-criterio .logo-fundo-claro{display:none;}
.side .marca-criterio .logo-fundo-escuro{display:block;}
.marca-criterio .logo-fundo-escuro{display:none;}
.marca-criterio .logo-fundo-claro{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca-criterio .logo-fundo-claro{display:none;}
  :root:not([data-theme="light"]) .marca-criterio .logo-fundo-escuro{display:block;}
}
:root[data-theme="dark"] .marca-criterio .logo-fundo-claro{display:none;}
:root[data-theme="dark"] .marca-criterio .logo-fundo-escuro{display:block;}

/* ============================================================
   9. Autenticação e importações
   ============================================================ */
.page-center{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:var(--bg);}
.auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s-6);}
.auth-card h1{font-size:var(--t-secao); margin:6px 0;}
.auth-card .lead{font-size:var(--t-corpo); color:var(--text-secondary); margin-bottom:var(--s-5);}
.auth-card p{margin-bottom:var(--s-3); line-height:1.5;}
.senha-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--brand); font-size:var(--t-mini); font-weight:600; cursor:pointer; padding:6px 8px; border-radius:var(--radius-sm); font-family:inherit;}
.caps-aviso{font-size:var(--t-mini); color:var(--warning); margin-top:2px;}
.auth-rodape{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--linha); font-size:var(--t-mini); color:var(--text-tertiary); line-height:1.5;}

.upload-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--s-4); align-items:stretch;}
.dropzone{display:flex; flex-direction:column; align-items:center; gap:6px; border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:var(--s-6); cursor:pointer; background:var(--surface-2); text-align:center;}
.dropzone:hover, .dropzone.over{border-color:var(--brand); background:var(--brand-soft);}
.dropzone .ic{font-size:20px; color:var(--text-tertiary);}
.dropzone small{font-size:var(--t-mini); color:var(--text-tertiary);}
.arquivo-escolhido{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; font-size:var(--t-corpo);}
.passos{list-style:none; counter-reset:passo; display:flex; flex-direction:column; gap:10px; margin-top:var(--s-4); font-size:var(--t-mini); color:var(--text-secondary); line-height:1.5;}
.passos li{counter-increment:passo; display:flex; gap:10px;}
.passos li::before{content:counter(passo); flex:none; width:19px; height:19px; border-radius:50%; background:var(--surface-2); color:var(--text-secondary); font-size:var(--t-micro); font-weight:700; display:grid; place-items:center;}
.achados{list-style:none; display:flex; flex-direction:column; gap:8px;}
.achados li{display:flex; gap:9px; font-size:var(--t-mini); line-height:1.5; padding:9px 11px; border-radius:var(--radius-md); background:var(--surface-2);}
.achados .t b{display:block; color:var(--text-primary); font-size:var(--t-corpo);}
.section-title{font-size:var(--t-micro); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary); margin:var(--s-6) 0 var(--s-3); display:flex; align-items:center; gap:var(--s-3);}
.section-title::after{content:''; flex:1; height:1px; background:var(--border);}
.section-toggle{display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 12px; font-size:var(--t-mini); font-weight:600; letter-spacing:0; text-transform:none; color:var(--text-secondary); cursor:pointer; font-family:inherit;}
.section-toggle:hover{color:var(--text-primary); border-color:var(--border-strong);}
.section-toggle:focus-visible{outline:none; box-shadow:var(--ring);}
.section-toggle-ic{display:inline-block; transition:transform .2s;}
[aria-expanded="false"] .section-toggle-ic{transform:rotate(-90deg);}

/* ============================================================
   10. Responsivo
   ============================================================ */
/* Celular e tablet (abaixo de 1100px): a barra lateral sai da grade e vira
   gaveta — ver "BARRA LATERAL EM GAVETA" mais abaixo. */
@media (max-width:1100px){
  .app-layout{grid-template-columns:1fr;}
  .upload-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .page{padding:var(--s-4) var(--s-4) var(--s-7);}
  /* A barra de contexto fica presa no celular: UMA linha de 48px (TASK-077b;
     antes quebrava em até três linhas, 103px no S26). A trilha corta o nome
     da empresa com reticências, nunca o do módulo; o selo de situação em
     alerta fica na mesma linha, cortado, com o texto inteiro na dica. */
  :root{--topbar:48px;}
  .topbar{padding:0 var(--s-4); gap:var(--s-2); flex-wrap:nowrap;}
  .topbar .trilha{font-size:var(--t-mini); flex:1 1 auto; min-width:0; gap:6px; white-space:nowrap;}
  .topbar .trilha > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .topbar .trilha > span:last-child, .topbar .trilha > .sep{flex:none;}
  .topbar-acoes{flex:0 1 auto; min-width:0; max-width:45%;}
  /* Em alerta, o motivo ("atualização pendente") é o que importa: no celular some a data e o
     motivo fica inteiro, quebrando em até três linhas dentro dos 48px. A data segue na dica. */
  .topbar-acoes{max-width:62%;}
  .topbar-estado.alerta{min-width:0; max-width:100%; white-space:normal; line-height:1.1; padding:2px 9px; border-radius:14px;}
  .topbar-estado.alerta .te-texto{overflow:hidden;}
  .topbar-estado.alerta .te-quando, .topbar-estado.alerta .te-sep{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .form-grid .span-2{grid-column:span 1;}
  .perfil-opcoes{grid-template-columns:1fr;}
  .empresa-grid{grid-template-columns:1fr;}
  .gear-menu,.card-menu{width:min(320px, calc(100vw - 32px));}
  /* Abas da Administração: quebram linha em vez de passar da tela. */
  .tabs{flex-wrap:wrap;}
  .tab{white-space:nowrap;}
}
@media print{
  .side, .topbar, .gear-btn, .card-gear{display:none !important;}
  .app-layout{grid-template-columns:1fr;}
  body{background:#fff;}
}

/* ============================================================
   BARRA LATERAL RECOLHIDA — só os ícones
   O estado vem de localStorage e é aplicado antes da pintura
   (theme-init.js), então a página nunca pisca aberta.
   ============================================================ */
.side-topo{display:flex; align-items:center; gap:var(--s-2); padding:2px var(--s-2) 0;}
.side-topo .side-marca{padding:0; flex:1; min-width:0;}
.side-sub{display:block; padding:0 var(--s-2) var(--s-2); color:var(--chrome-text-dim);}

.side-toggle{
  appearance:none; cursor:pointer; flex:none; width:28px; height:28px;
  display:grid; place-items:center; border-radius:var(--radius-sm);
  background:transparent; border:1px solid transparent; color:var(--chrome-text-dim);
}
.side-toggle:hover{background:var(--chrome-pill-bg); color:var(--chrome-text); border-color:var(--chrome-border);}
.side-toggle:focus-visible{outline:none; box-shadow:var(--ring);}
.side-toggle svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

/* Só no desktop: abaixo de 1100px a barra é gaveta e abre sempre inteira.
   `not all and (max-width:1100px)` e não `min-width:1101px`: sem buraco entre
   1100 e 1101px (zoom do navegador produz larguras fracionárias). */
@media not all and (max-width:1100px){
  :root[data-side="recolhida"]{--sidebar:64px;}
  :root[data-side="recolhida"] .side{padding:var(--s-4) var(--s-2); align-items:center;}
  /* Recolhida, a coluna tem 64px e sobram ~48px úteis: monograma e botão não
     cabem lado a lado, então empilham. O logotipo escrito dá lugar ao
     monograma, e a marca continua presente em vez de sumir. */
  :root[data-side="recolhida"] .side-topo{padding:0; flex-direction:column; gap:var(--s-3);}
  :root[data-side="recolhida"] .side-marca{padding:0; flex:none;}
  :root[data-side="recolhida"] .marca-criterio{display:none;}
  :root[data-side="recolhida"] .marca-simbolo{
    display:block; width:32px; height:32px;
    border-radius:10px;
    /* Um anel discreto separa o quadrado escuro do monograma do fundo, que é
       quase da mesma cor — sem ele a peça parece um borrão. */
    box-shadow:0 0 0 1px var(--chrome-border);
  }
  :root[data-side="recolhida"] .side-sub{display:none;}
  :root[data-side="recolhida"] .side-toggle svg{transform:rotate(180deg);}
  :root[data-side="recolhida"] .side-bloco{width:100%;}
  :root[data-side="recolhida"] .side-bloco > .rotulo{display:none;}
  :root[data-side="recolhida"] .side-empresa,
  :root[data-side="recolhida"] .side-empresa-nome{display:none;}  /* a empresa ativa continua na trilha do topo */
  :root[data-side="recolhida"] .side-link{justify-content:center; padding:9px 0;}
  :root[data-side="recolhida"] .side-link span{display:none;}
  :root[data-side="recolhida"] .side-link.active::before{left:-8px;}
  :root[data-side="recolhida"] .side-rodape{align-items:center;}
  :root[data-side="recolhida"] .side-user{justify-content:center; padding:6px;}
  :root[data-side="recolhida"] .side-user-id{display:none;}
  :root[data-side="recolhida"] .usermenu{width:100%; display:flex; justify-content:center;}
  :root[data-side="recolhida"] .usermenu-list{left:calc(100% + 6px); bottom:0;}
}

/* ============================================================
   BARRA LATERAL EM GAVETA — celular e tablet (abaixo de 1100px)
   TASK-074. Antes, a barra virava uma faixa horizontal que rolava de lado
   sem aviso: escondia módulos, Empresas e Administração, e reduzia o
   seletor de empresa à seta. Agora é a mesma barra do desktop (vertical,
   com o nome da empresa no seletor), guardada fora da tela. O botão de
   menu da barra de contexto a abre por cima do conteúdo; o X, o fundo
   escuro e Esc fecham (shell.js, `ligarGaveta`). Fechada, ela fica
   `visibility:hidden`: sai da ordem de tabulação e do leitor de tela.
   ============================================================ */
.topbar-menu, .side-fechar, .side-fundo{display:none;}
@media (max-width:1100px){
  .side{
    position:fixed; top:0; left:0; bottom:auto; z-index:200; height:100vh; height:100dvh;
    width:min(300px, 86vw);
    transform:translateX(-100%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
    box-shadow:var(--shadow-lg); overscroll-behavior:contain;
  }
  :root.side-aberta .side{transform:none; visibility:visible; transition:transform .22s ease;}
  .side-fundo{
    display:block; position:fixed; inset:0; z-index:190; background:rgba(10,15,22,.5);
    opacity:0; pointer-events:none; transition:opacity .22s;
  }
  :root.side-aberta .side-fundo{opacity:1; pointer-events:auto;}
  :root.side-aberta body{overflow:hidden;}
  .side-toggle{display:none;}
  .side-fechar{
    appearance:none; cursor:pointer; flex:none; display:grid; place-items:center;
    width:40px; height:40px; margin-right:-6px; border-radius:var(--radius-md);
    background:transparent; border:1px solid transparent; color:var(--chrome-text-dim);
  }
  .side-fechar:hover{background:var(--chrome-pill-bg); color:var(--chrome-text); border-color:var(--chrome-border);}
  .side-fechar:focus-visible{outline:none; box-shadow:var(--ring);}
  .side-fechar svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
  .topbar-menu{
    appearance:none; cursor:pointer; flex:none; display:inline-grid; place-items:center;
    width:40px; height:40px; margin-left:-8px; border-radius:var(--radius-md);
    background:transparent; border:1px solid transparent; color:var(--text-primary);
  }
  .topbar-menu:hover{background:var(--surface-2); border-color:var(--border);}
  .topbar-menu:focus-visible{outline:none; box-shadow:var(--ring);}
  .topbar-menu svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
}
@media (max-width:1100px) and (prefers-reduced-motion: reduce){
  .side, :root.side-aberta .side, .side-fundo{transition:none;}
}

/* ============================================================
   BARRAS DE ROLAGEM
   A barra nativa vinha do color-scheme da página: cinza-claro sobre o
   grafite da navegação. Aqui ela passa a seguir o sistema visual —
   fina, sem trilho, e escura dentro da barra lateral nos dois temas.
   ============================================================ */
html{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background-color:var(--border-strong);
  border-radius:var(--radius-pill);
  border:2px solid transparent;   /* afina o polegar sem encostar na borda */
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--text-tertiary);}
::-webkit-scrollbar-corner{background:transparent;}

/* A navegação é grafite nos dois temas, então a barra dela também é. */
.side{color-scheme:dark; scrollbar-width:thin; scrollbar-color:var(--chrome-scroll) transparent;}
.side::-webkit-scrollbar{width:8px;}
.side::-webkit-scrollbar-thumb{background-color:var(--chrome-scroll); border-width:2px;}
.side::-webkit-scrollbar-thumb:hover{background-color:var(--chrome-scroll-hover);}

/* Recolhida são 64px: a barra precisa ocupar o mínimo possível. */
:root[data-side="recolhida"] .side::-webkit-scrollbar{width:5px;}
:root[data-side="recolhida"] .side::-webkit-scrollbar-thumb{border-width:1px;}

/* Painéis que rolam dentro de uma superfície clara ficam com o polegar
   ainda mais discreto, para não competir com o conteúdo. */
.table-scroll::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.dd-scroll::-webkit-scrollbar,
.composicao-legenda::-webkit-scrollbar,
.categoria-legend::-webkit-scrollbar,
.daystrip::-webkit-scrollbar{width:8px; height:8px;}

/* botão de fechar do aviso de erro (o de sucesso some sozinho) */
.toast{display:flex; align-items:flex-start; gap:var(--s-3);}
.toast-fechar{
  appearance:none; cursor:pointer; flex:none; margin-left:auto;
  background:transparent; border:0; color:var(--chrome-text-dim);
  font-size:13px; line-height:1; padding:2px 4px; border-radius:var(--radius-sm);
}
.toast-fechar:hover{color:var(--chrome-text); background:var(--chrome-pill-bg);}
.toast-fechar:focus-visible{outline:none; box-shadow:var(--ring);}


/* --- seletor de empresa: busca e filtro ---
   Uma linha só, acima dos cartões: campo de busca com a lupa dentro, o filtro
   de tipo e a contagem do recorte. Fica calado quando nada está filtrado. */
.seletor-filtros{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4);}
.busca-campo{position:relative; flex:1 1 280px; max-width:420px;}
.busca-campo svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; fill:none; stroke:var(--text-tertiary); stroke-width:1.8; stroke-linecap:round;
}
.busca-campo .input{width:100%; padding-left:34px; padding-right:34px;}
.busca-campo .input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
.busca-atalho{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:var(--t-micro); color:var(--text-tertiary);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:1px 5px; background:var(--surface-2);
}
.busca-campo .input:focus ~ .busca-atalho, .busca-campo .input:not(:placeholder-shown) ~ .busca-atalho{opacity:0;}
@media (max-width:640px){
  .busca-atalho{display:none;}
  .seletor-filtros{gap:var(--s-2);}
}

/* ============================================================
   CELULAR — TELA DE TOQUE (TASK-074)
   Em tela de toque (`pointer:coarse`) todo alvo fica com pelo menos 40px
   de altura — 44px nos botões e campos, o tamanho que as diretrizes de
   iOS e Android recomendam. Com mouse nada muda: o desktop segue com os
   controles compactos. No fim de app.css de propósito: vence as regras de
   components.css (carregado antes) e das páginas que usam as mesmas classes.
   ============================================================ */
@media (pointer:coarse){
  :root{--altura-controle:44px;}
  .segmentado button, .camada{height:auto; min-height:40px;}
  .segmentado-mini button{height:40px;}
  .btn-sm{height:40px; padding:0 12px;}
  .btn-link{min-height:40px; display:inline-flex; align-items:center;}
  .icon-btn, .drawer-close, .pp-seta, .toast-fechar{min-width:44px; min-height:44px;}
  .side-toggle{width:44px; height:44px;}  /* recolher a barra (tablet deitado, acima de 1100px) */
  .card-gear{width:44px; height:44px; top:6px; right:6px;}
  .card-wrap .empresa-card{padding-right:60px;}
  .pp-item{min-height:44px;}
  .side-link, .side-empresa, .side-user{min-height:44px;}
  .side-marca{min-height:44px; align-items:center;}
  .usermenu-list a, .usermenu-list button{min-height:44px; display:flex; align-items:center;}
  .comp-item, .var-item, .ranking-item{min-height:44px;}
  .dd-nivel{min-height:40px; display:inline-flex; align-items:center;}
  .chip-x{min-height:40px;}
  /* Chips do recorte ativo: o ✕ tinha 17px e o "Limpar tudo" 20px (TASK-075, M2). */
  .achip{padding-top:0; padding-bottom:0;}
  .achip button{min-width:40px; min-height:40px; font-size:12px; display:inline-flex; align-items:center; justify-content:center;}
  .achip-limpar{min-height:40px;}
  .segmentado-mini button{min-width:40px;}  /* "Dia" e "Mês" do Agrupar por tinham 35px de largura */
  .check{min-height:44px;}
  .check input{width:20px; height:20px;}
  .escolha-item{min-height:44px;}
  .escolha-item input[type=checkbox]{width:20px; height:20px;}
  .senha-toggle{min-height:44px; min-width:44px;}
  details > summary{min-height:44px; display:flex; align-items:center;}
  .tab{min-height:44px;}
  /* Interruptor de tema: a caixa de toque cresce para 44px, o desenho do
     trilho continua com 24px (pintado por ::before). */
  .theme-switch{height:44px; background:transparent; border-color:transparent;}
  .theme-switch::before{
    content:''; position:absolute; left:-1px; right:-1px; top:9px; height:24px;
    border-radius:var(--radius-pill); background:var(--chrome-field-bg); border:1px solid var(--chrome-border);
  }
  .ts-track-icon{position:relative;}
  .ts-thumb{top:12px;}
  /* No recorte do arquivo exportado o interruptor tem outras cores
     (components.css, `.recorte-acoes .theme-switch`): elas vão para o trilho. */
  .recorte-acoes .theme-switch{background:transparent; border-color:transparent;}
  .recorte-acoes .theme-switch::before{background:var(--surface-2); border-color:var(--border-strong);}
  /* Células e linhas que abrem detalhe (planilha do Orçamento, categorias da DRE). */
  table.orc-planilha td.cmp{height:40px;}
  .btn{min-width:44px;}
  .lista-check label{min-height:44px;}
  .lista-check input{width:20px; height:20px;}
  .auth-rodape a, .auth-rodape button{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 6px;}
}
/* Texto: no celular e no tablet, nada abaixo de 12px (os tokens de 10,5 e
   11,5px eram a menor leitura do desktop e ficavam pequenos no aparelho). */
@media (max-width:640px), (pointer:coarse){
  :root{--t-micro:12px; --t-mini:12.5px;}
}
@media (max-width:640px){
  /* Cabeçalho de painel com ferramentas (planilha do Orçamento): o título
     fica numa linha e as ferramentas descem, em vez de espremer o título. */
  .painel-head{flex-wrap:wrap;}
  /* Menus de engrenagem ("Configurações" da página inicial, "Exportar" do
     Orçamento): no celular o botão fica no começo da linha, então o menu
     abre para a direita a partir dele, nunca mais largo que a tela. O de
     Configurações se ancora na faixa de botões (senão saía pela esquerda). */
  .head-acoes > div{position:static !important;}
  .gear-menu{left:0; right:auto; max-width:calc(100vw - 32px);}
  .card-menu{max-width:calc(100vw - 32px);}
  /* F2-15: engrenagem do cartão com alvo de 40px (no toque já era 44px). */
  .card-gear{width:40px; height:40px; top:8px; right:8px;}
  .card-wrap .empresa-card{padding-right:56px;}
}

/* Celular deitado: a barra de contexto também com 48px (TASK-077b). */
@media (max-height:500px) and (pointer:coarse){
  :root{--topbar:48px;}
}

/* Região principal e salto de teclado (TASK-080, F2-11). O <main> criado pela
   casca não muda o layout; o link só aparece quando recebe foco. */
.conteudo-principal{display:contents;}
#conteudo:focus{outline:none;}   /* recebe o foco só do link "Pular para o conteúdo" */
.pular-conteudo{position:fixed; left:var(--s-2); top:-64px; z-index:1000; padding:10px 14px; border-radius:var(--radius-md);
  background:var(--surface); color:var(--text-primary); border:2px solid var(--brand); font-weight:600; text-decoration:none;}
.pular-conteudo:focus{top:var(--s-2);}