/* Ajustes do sistema novo sobre o CSS original (carregado depois de app.css). */

/* Chat da Adrielly/Claudete/Marta: o painel fica dentro de um contêiner com z-index menor que a película escura
   (que fica fora dele), então a película cobria o chat e qualquer clique o fechava. Contêiner acima da película. */
.adr-float-wrap, .eq-float-wrap { z-index: 211; }
/* ---- Multi-empresa: seletor no topo do menu (no lugar do título "Bino Gestão") ---- */
.empresa-select{font-family:'Fraunces',serif;font-size:15.5px;font-weight:700;color:var(--primary-strong);
  background:transparent;border:1px solid transparent;border-radius:8px;padding:2px 2px;margin-left:-4px;
  max-width:150px;cursor:pointer;text-overflow:ellipsis;appearance:auto}
.empresa-select:hover:not(:disabled),.empresa-select:focus{border-color:var(--border);background:var(--surface-alt);outline:none}
.empresa-select:disabled{opacity:1;cursor:default;appearance:none;-webkit-appearance:none}
.empresa-select option{font-family:'Inter',sans-serif;font-weight:500;color:#0E1B2E}
.sidebar-brand-text .brand-subtitle{color:var(--text-faint)}

/* ---- Menu lateral: botão ? do topo esconde o menu inteiro no computador (mais área de trabalho) ---- */
.sidebar.hidden-full{width:0;border-right:none;visibility:hidden}
@media (min-width:881px){
  .topbar-menu-btn{display:flex}
}

/* botão "Senha" ao lado do "Sair" no selo do usuário */
#loginBadge button{margin-left:2px}

/* ---- Ponto e Jornada: terminal ---- */
.pt-term{max-width:460px;width:100%;text-align:center;padding:26px 22px}
.pt-input{width:100%;font-size:26px;letter-spacing:.2em;text-align:center;padding:8px 10px;border:2px solid var(--border);border-radius:12px;background:var(--surface)}
.pt-input.pt-active{border-color:var(--primary)}
.pt-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px auto 4px;max-width:300px}
.pt-key{font-size:26px;font-weight:600;padding:14px 0;border-radius:14px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text);cursor:pointer}
.pt-key:active{transform:scale(.96);background:var(--primary-soft)}
.pt-video{width:100%;max-width:320px;border-radius:12px;background:#000;margin:6px auto;display:block;transform:scaleX(-1)}
.pt-big{width:100%;max-width:320px;font-size:18px;padding:14px 16px}
@media print{ .sidebar,.topbar,.tabs,.section-tabs,.adr-float-wrap,.eq-float-wrap,.team-tag,button{display:none!important} .wrap{padding:0} }

/* =====================================================================================
   CELULAR (tela <= 880px ou aparelho móvel): mesmo sistema, layout ajustado à tela, sem cortes.
   O menu vira gaveta (botão ☰), a barra do topo é compactada e tudo cabe na largura.
   ===================================================================================== */
html{-webkit-text-size-adjust:100%}
@media (max-width:880px){
  html,body{max-width:100%;overflow-x:hidden}
  .app-shell,.main-col,.wrap{max-width:100%;min-width:0}
  .main-col{padding-left:12px!important;padding-right:12px!important}
  /* barra do topo: tudo numa linha só, o nome do usuário some (Senha/Sair continuam) */
  .topbar{padding:8px 0 8px;gap:6px;margin-bottom:12px;flex-wrap:nowrap}
  .topbar-left{flex:1 1 auto;gap:6px}
  .topbar-menu-btn{width:40px;height:40px;font-size:18px}
  #topbarBreadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .topbar-actions{gap:4px;min-width:0}
  .topbar-search-btn{padding:0 10px;height:40px;min-width:40px;justify-content:center}
  .topbar-search-btn kbd{display:none}
  #connState{display:none}
  #loginBadge{font-size:0!important;padding:2px 3px;gap:2px;display:inline-flex;align-items:center}
  #loginBadge button{font-size:11.5px;margin-left:0;padding:6px 8px}
  .bell{flex:none}
  /* gaveta do menu: ocupa quase a tela e rola */
  .sidebar{width:min(300px,86vw)!important;overflow-y:auto;z-index:30;visibility:visible}
  .sidebar.hidden-full{width:min(300px,86vw)!important;visibility:visible;border-right:1px solid var(--border)}
  .sidebar-item,.sidebar-footer-item{min-height:44px}
  /* abas e seções rolam para o lado em vez de cortar */
  .tabs,.section-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .tabs button,.section-tabs button{flex:none;white-space:nowrap;min-height:40px}
  /* tabelas rolam dentro do próprio quadro; nada estoura a página */
  .tbl-wrap,.scroll-x{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{max-width:none}
  .panel{padding:14px 14px;border-radius:14px}
  .panel h2{font-size:17px}
  .field-row{flex-wrap:wrap}
  .field-row>.field{min-width:0!important;flex:1 1 100%!important}
  input,select,textarea{max-width:100%;font-size:16px} /* 16px evita o zoom automático do iPhone */
  img,video,canvas,svg{max-width:100%}
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .fin-cards-grid{grid-template-columns:1fr}
  /* janelas (modais) cabem na tela e rolam por dentro */
  .modal-overlay{padding:8px}
  .modal-box{margin-top:8px;padding:16px;max-width:100%;max-height:calc(100dvh - 16px);overflow-y:auto}
  /* chat da Adrielly ocupa a tela toda */
  .adr-float-panel,.eq-float-panel{width:100vw!important;height:100dvh;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .pt-term{padding:18px 12px}
  .pt-keys{max-width:100%}
}
@media (max-width:420px){
  .main-col{padding-left:10px!important;padding-right:10px!important}
  .topbar-menu-btn{width:38px;height:38px}
  .cal-grid{gap:3px}
}@media (max-width:880px){
  #topbarBreadcrumb{display:none}
  .topbar-left{flex:0 0 auto}
  .topbar-actions{flex:1;justify-content:flex-end}
  .sidebar{height:100dvh;display:flex;flex-direction:column}
  .sidebar-nav{overflow:visible;flex:none}
  .sidebar-footer{margin-top:auto}
}
/* ---- Usuários e permissões (editor por usuário) ---- */
.usr-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.usr-card{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:var(--surface-alt)}
.usr-card.usr-off{opacity:.65}
.usr-top{display:flex;align-items:center;gap:10px}
.usr-avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.usr-id{flex:1;min-width:0}
.usr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px;align-items:center}
.perm-chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted)}
.perm-chip.lv-editar{background:var(--primary-soft);color:var(--primary-strong);border-color:var(--primary)}
.perm-chip.lv-total{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.usr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.perm-box{max-width:780px;padding:18px}
.perm-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.perm-legend{font-size:12.5px;color:var(--text-muted);background:var(--surface-alt);border-radius:10px;padding:8px 12px;margin:8px 0}
.perm-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.perm-tools select{flex:1 1 200px;min-width:0}
.perm-list{display:flex;flex-direction:column;gap:8px}
.perm-row{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface)}
.perm-row.is-off{background:var(--surface-alt)}
.perm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.perm-name{font-weight:700;font-size:14.5px}
.perm-seg{display:flex;flex-wrap:wrap;gap:4px}
.perm-lv{border:1px solid var(--border);background:var(--surface-alt);color:var(--text-muted);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.perm-lv.on{color:#fff;border-color:transparent;background:var(--text-muted)}
.perm-lv.on.lv-ver{background:#3b82c4}
.perm-lv.on.lv-editar{background:var(--primary)}
.perm-lv.on.lv-total{background:var(--good)}
.perm-sub{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.perm-det{background:none;border:none;color:var(--primary);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0}
.perm-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 12px;margin-top:8px;border-top:1px dashed var(--border);padding-top:8px}
.perm-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.perm-sec select{max-width:140px;font-size:12.5px}
.perm-sec select.is-oculto{color:var(--bad);border-color:var(--bad)}
.perm-sec select.is-ver{color:#3b82c4;border-color:#3b82c4}
.perm-foot{position:sticky;bottom:-18px;display:flex;justify-content:flex-end;gap:8px;padding:12px 0 4px;margin-top:12px;background:var(--surface)}
.ro-banner{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:13px;font-weight:600}
@media (max-width:880px){
  .perm-box{padding:14px}
  .perm-lv{padding:8px 11px}
  .perm-seg{width:100%}
  .perm-lv{flex:1 1 auto;text-align:center}
  .perm-secs{grid-template-columns:1fr}
  .usr-top{flex-wrap:wrap}
}
/* ---- Custos: linhas de etapa/receita quebram em telas estreitas ---- */
.stage-row,.line-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:8px}
.stage-row .field,.line-row .field{flex:1 1 140px;min-width:0}
@media (max-width:880px){
  .stage-row .field,.line-row .field{flex:1 1 100%;width:auto!important}
}
/* editor de permissões: a própria janela rola (com rodinha, toque ou barra) e o rodapé fica visível */
#permModal{align-items:center;overflow:hidden}
.perm-box{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;margin-top:0!important}
.perm-foot{position:sticky;bottom:-18px;z-index:2}
/* ---- Checklists em cartões (tablet) ---- */
div:has(> .tk-card){display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:12px}
.tk-card{background:var(--surface);border:1px solid var(--border);border-left:8px solid var(--text-faint);border-radius:18px;padding:16px 16px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.tk-card.st-em_andamento{border-left-color:#3b82c4;background:linear-gradient(0deg,var(--surface),var(--surface)),var(--surface)}
.tk-card.st-concluida{border-left-color:var(--good);background:var(--good-soft)}
.tk-card.st-aguardando_correcao,.tk-card.st-nao_realizada{border-left-color:var(--bad);background:var(--bad-soft)}
.tk-card.st-nao_aplicavel{border-left-color:var(--border);opacity:.7}
.tk-top{display:flex;gap:12px;align-items:flex-start}
.tk-icon{flex:none;width:54px;height:54px;border-radius:16px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:28px}
.tk-card.st-concluida .tk-icon{background:var(--surface)}
.tk-title{flex:1;min-width:0}
.tk-title h3{margin:0;font-size:18px;line-height:1.25}
.tk-title p{margin:4px 0 0;font-size:14px;color:var(--text-muted);line-height:1.4}
.tk-title p.tk-strong{color:var(--text);font-weight:600}
.tk-state{flex:none;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--surface-alt);border:1px solid var(--border);white-space:nowrap}
.tk-card.st-em_andamento .tk-state{background:#e6f0fb;color:#1f5f9f;border-color:#3b82c4}
.tk-card.st-concluida .tk-state{background:var(--good);color:#fff;border-color:var(--good)}
.tk-card.st-aguardando_correcao .tk-state,.tk-card.st-nao_realizada .tk-state{background:var(--bad);color:#fff;border-color:var(--bad)}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-start{display:flex;flex-direction:column;gap:8px}
.tk-who{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-muted);font-weight:600}
.tk-who select{min-height:50px;font-size:16px;border-radius:12px;padding:0 12px}
.tk-btn{min-height:58px;width:100%;border:none;border-radius:16px;font-size:18px;font-weight:800;cursor:pointer;color:#fff;letter-spacing:.2px}
.tk-btn:active{transform:scale(.98)}
.tk-go{background:var(--primary)}
.tk-done{background:var(--good)}
.tk-fix{background:var(--bad)}
.tk-more{display:flex;gap:8px;justify-content:space-between}
.tk-link{flex:1;min-height:44px;background:none;border:1px dashed var(--border);border-radius:12px;color:var(--text-muted);font-size:13.5px;font-weight:600;cursor:pointer}
.tk-foot{display:flex;gap:8px;flex-wrap:wrap}
.tk-foot .tk-link{flex:none;padding:0 14px}
.tk-alert{background:var(--surface);border:1px solid var(--bad);color:var(--bad);border-radius:12px;padding:10px 12px;font-size:14px}
.tk-photo{max-width:96px;border-radius:10px;margin:4px 6px 0 0}
.tk-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0 4px;padding:14px 16px;background:var(--surface-alt);border-radius:18px}
.tk-ring{--p:0;flex:none;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--good) calc(var(--p)*1%),var(--border) 0);display:flex;align-items:center;justify-content:center;position:relative}
.tk-ring::before{content:'';position:absolute;inset:9px;background:var(--surface-alt);border-radius:50%}
.tk-ring span{position:relative;font-weight:800;font-size:16px}
.tk-hero-txt{display:flex;flex-direction:column;flex:1;min-width:140px}
.tk-hero-txt b{font-size:20px}
.tk-hero-txt span{color:var(--text-muted);font-size:14px}
.tk-filters{display:flex;gap:6px;flex-wrap:wrap}
.tk-chip{min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:15px;font-weight:700;color:var(--text-muted);cursor:pointer}
.tk-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
@media (max-width:640px){ div:has(> .tk-card){grid-template-columns:1fr} }
/* ---- Perdas com valor ---- */
.loss-total{display:flex;flex-direction:column;align-items:flex-end;background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad);border-radius:14px;padding:6px 14px;line-height:1.2}
.loss-total small{font-size:11.5px;font-weight:600}
.loss-total b{font-size:20px}
.loss-calc{background:var(--surface-alt);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin:8px 0 12px}
.loss-calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.loss-calc-grid span{display:block;font-size:12px;color:var(--text-muted)}
.loss-calc-grid b{font-size:15px}
.loss-calc-grid .loss-val b{font-size:22px;color:var(--bad)}
.tk-alldone{grid-column:1/-1;text-align:center;padding:40px 16px;background:var(--good-soft);border:2px dashed var(--good);border-radius:20px;display:flex;flex-direction:column;gap:6px;color:var(--good)}
.tk-alldone div{font-size:56px}.tk-alldone b{font-size:26px}.tk-alldone span{color:var(--text-muted);font-size:15px}
.pt-folha td,.pt-folha th{white-space:nowrap;padding:6px 8px}
.pt-folha td.num{text-align:right;font-variant-numeric:tabular-nums}