/* === RESPONSIVE — All @media queries (tablet, mobile, small phone, touch, safe area, landscape) === */

/* Grid breakpoints (base) */
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.grid-2-1,.grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.header{padding:0 .6rem;height:50px}.header-title{font-size:.85rem}.header-subtitle{display:none}.header-logo{width:28px;height:28px;font-size:.65rem;border-radius:7px}.header-brand{gap:.5rem}.hdr-icon-btn{padding:5px}.hdr-avatar{width:30px;height:30px;font-size:.68rem}.hdr-user-name{display:none}.hdr-avatar-area{gap:3px;padding:2px;border-radius:10px}.main{padding:.85rem .85rem 80px}.grid-4{grid-template-columns:1fr 1fr;gap:.6rem}.kpi-value{font-size:1.45rem}.greeting h1{font-size:1.2rem}.chart-wrap{height:210px}.nav-tab{padding:.7rem .75rem;font-size:.72rem}.sheet{max-height:92vh}.nav-tabs-wrap{display:none!important}.nav-scroll-btn{display:none}#filialBar{top:50px}}

/* ══════════════════════════════════════════════════════════ */
/* RESPONSIVE — Tablet (768px)                                */
/* ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .main{padding:.7rem .7rem 80px}
  .top-bar{gap:.5rem}
  .top-bar button{font-size:.65rem;padding:7px 10px;white-space:nowrap}
  .greeting h1{font-size:1.2rem}
  .greeting p{font-size:.72rem}
  .panel{padding:.85rem}
  .panel-title{font-size:.8rem}
  .kpi-card{padding:.85rem}
  .kpi-value{font-size:1.4rem}
  .kpi-label{font-size:.62rem}
  .chart-wrap{height:200px}
  .grid-2{gap:.7rem}
  .grid-4{gap:.6rem}
  .ficha-modal{max-width:95vw!important;height:90vh!important;max-height:90vh!important;margin:.5rem!important}
  .he-modal{max-width:95vw!important;width:95%!important}
  .prod-modal{max-width:95vw!important}
  .table-wrap{font-size:.72rem}
  .table-wrap th,.table-wrap td{padding:.4rem .5rem}
  .team-card-top{flex-wrap:wrap}
  .team-item-meta{font-size:.62rem}
  #pontoTable table{font-size:.62rem}
  #pontoTable input[type=time]{width:60px!important;font-size:.62rem!important;padding:2px!important}
}

/* ══════════════════════════════════════════════════════════ */
/* RESPONSIVE — Mobile (600px) — Enhancements                */
/* ══════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Layout */
  .main{padding:.6rem .6rem 80px}
  .grid-2,.grid-3,.grid-2-1{grid-template-columns:1fr!important;gap:.6rem}
  .grid-4{grid-template-columns:1fr 1fr!important;gap:.5rem}

  /* KPIs mais compactos */
  .kpi-card{padding:.7rem}
  .kpi-value{font-size:1.3rem}
  .kpi-change{font-size:.6rem}
  .kpi-icon{width:30px;height:30px}
  .tap-hint{display:none}

  /* Top bar empilha */
  .top-bar{flex-direction:column;align-items:flex-start;gap:.4rem}
  .top-bar button{width:100%;text-align:center}

  /* Panel */
  .panel{padding:.7rem;border-radius:10px}
  .panel-header{flex-wrap:wrap;gap:.4rem}

  /* Nav tabs — hidden on mobile (bottom nav replaces) */
  .nav-tabs-wrap{display:none!important}

  /* Team cards */
  .team-card-top{padding:.5rem;gap:.4rem;flex-wrap:wrap}
  .prod-item-avatar{width:32px;height:32px;min-width:32px;font-size:.6rem}
  .prod-item-name{font-size:.75rem}
  .team-item-meta{font-size:.58rem;line-height:1.4}
  .team-launch-btn{font-size:.62rem;padding:6px}
  .prod-item-btn{min-width:32px;min-height:32px;font-size:.7rem}
  .team-kpi-strip{flex-wrap:wrap;gap:.3rem}
  .team-kpi-item{flex:1;min-width:45%}
  .team-kpi-num{font-size:1rem}
  .team-kpi-lbl{font-size:.55rem}
  .team-search{width:100%!important;margin-top:.3rem}
  .team-search-skills{width:100%!important}

  /* Filtros de status equipe */
  #sec-team .op-filter-btn{font-size:.58rem!important;padding:4px 6px!important}

  /* Modals full-width */
  .prod-modal{max-width:100vw!important;border-radius:14px 14px 0 0!important;margin:0!important}
  .prod-modal-overlay{padding:0!important;align-items:flex-end!important}
  .prod-modal-body{padding:.7rem!important}
  .ficha-modal{max-width:100vw!important;width:100vw!important;height:100vh!important;max-height:100vh!important;margin:0!important;border-radius:0!important;padding-top:env(safe-area-inset-top,28px)}
  .ficha-container{max-width:100%!important;width:100%!important}
  .he-modal{max-width:100vw!important;width:100%!important;border-radius:14px!important}

  /* Ficha tabs */
  .ficha-tab{padding:.5rem .55rem;font-size:.6rem;min-height:40px}
  .ficha-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Sheet (bottom sheet) */
  .sheet{border-radius:16px 16px 0 0}
  .sheet-body{padding:.7rem}
  .sheet-kpi-row{flex-wrap:wrap}
  .sheet-kpi-mini{flex:1;min-width:45%}
  .sheet-list-item{flex-wrap:wrap;gap:.2rem}

  /* Tables horizontal scroll */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Funnel */
  .funnel-label{min-width:60px;font-size:.65rem}
  .funnel-val{font-size:.65rem;min-width:32px}

  /* Charts */
  .chart-wrap{height:180px}
  .ninebox{grid-template-columns:repeat(3,1fr)!important;gap:4px}
  .ninebox-cell{padding:.4rem}
  .ninebox-count{font-size:1.1rem}
  .ninebox-label{font-size:.5rem}

  /* Heatmap */
  .heatmap-cell{font-size:.5rem;padding:2px}
  .heatmap-header{font-size:.48rem}

  /* Span of control */
  .span-item{gap:.4rem}
  .span-avatar{width:28px;height:28px;font-size:.6rem}
  .span-name{font-size:.68rem}
  .span-ratio{font-size:.72rem}

  /* Risk items */
  .risk-item{flex-wrap:wrap;gap:.3rem}

  /* Alerts */
  .alert-text{font-size:.65rem}

  /* Banco horas / operacoes filter */
  .op-filter-btn{font-size:.6rem;padding:4px 8px;min-height:32px}

  /* Ponto table */
  #pontoTable{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #pontoTable table{min-width:550px}
  #pontoTable input[type=time]{width:55px!important;font-size:.58rem!important;padding:1px!important}

  /* Recrutamento */
  #recVagasList select{font-size:.6rem}

  /* Auth / Login */
  #authScreen{padding:16px;align-items:center}
  #authScreen .auth-card{width:100%;min-width:auto;max-width:100%;border-radius:12px;margin:0 auto}
  #authScreen .auth-header{padding:20px 16px}
  #authScreen .auth-logo{width:48px;height:48px;font-size:1.1rem}
  #authScreen .auth-title{font-size:1.2rem}
  #authScreen .auth-body{padding:16px}

  /* Various overlays - ensure padding */
  [style*="position:fixed"][style*="inset:0"]{padding:6px!important}

  /* Emprestimo / overlay modals — universal fix for all JS-generated overlays */
  #empOverlay>div,#compOverlay>div,#examOverlay>div,#valeOverlay>div,#ponteOverlay>div,
  #ponteRelOverlay>div,#testeOverlay>div,#testeEstenderOv>div,#testeDocsOverlay>div,
  #heOverlay>div,#nboxOverlay>div,#pulseNovaOverlay>div,#pulseRespOverlay>div,
  #pulseResultOverlay>div,#pulseHistOverlay>div,#auditOverlay>div,#pdfOverlay>div,
  #opReciboOverlay>div,#opDocOverlay>div,#calAnoOverlay>div,#relOverlay>div,
  #empDetalheOverlay>div{
    max-width:100%!important;width:100%!important;max-height:92vh!important;border-radius:14px!important
  }

  /* Calendar */
  #calGrid{font-size:.58rem}

  /* eSocial */
  .esocial-event{font-size:.62rem}

  /* Relatorios IA */
  .ia-ctypes{grid-template-columns:1fr!important}
  .ia-quick-grid{grid-template-columns:1fr!important}
  .ia-result-content{padding:.6rem!important;font-size:.72rem}

  /* Portal */
  #ptSelectColab{font-size:.72rem}

  /* Scrollbar touch */
  *{-webkit-overflow-scrolling:touch}
  *::-webkit-scrollbar{width:3px;height:3px}
}

/* ══════════════════════════════════════════════════════════ */
/* RESPONSIVE — Small Phone (400px)                           */
/* ══════════════════════════════════════════════════════════ */
@media(max-width:400px){
  .main{padding:.4rem}
  .grid-4{grid-template-columns:1fr!important}
  .kpi-card{padding:.6rem}
  .kpi-value{font-size:1.2rem}
  .kpi-label{font-size:.58rem;letter-spacing:.4px}
  .greeting h1{font-size:1rem}
  .greeting p{font-size:.65rem}
  .panel{padding:.55rem}
  .panel-title{font-size:.75rem}
  .chart-wrap{height:160px}
  .nav-tab{padding:.5rem .5rem;font-size:.62rem}
  .header-title{font-size:.8rem}
  .prod-item-name{font-size:.7rem}
  .team-item-meta{font-size:.55rem}
  .team-card-top{padding:.4rem}
  .prod-item-avatar{width:28px;height:28px;min-width:28px;font-size:.55rem}
  .funnel-label{min-width:50px;font-size:.6rem}
  .funnel-bar{height:20px;font-size:.6rem;padding:0 .4rem}
  .sheet-list-item{font-size:.65rem}
  .sheet-kpi-mini{min-width:100%}
  .ficha-tab{padding:.4rem .45rem;font-size:.55rem}
  .team-kpi-item{min-width:42%}
  .team-kpi-num{font-size:.9rem}
  #pontoTable table{min-width:500px;font-size:.56rem}
  #pontoTable input[type=time]{width:48px!important;font-size:.55rem!important}
  .op-filter-btn{font-size:.55rem;padding:3px 6px}
  #sec-team .op-filter-btn{font-size:.52rem!important;padding:3px 5px!important}
  .top-bar button{font-size:.6rem;padding:6px 8px}
  .prod-modal-body{padding:.5rem!important}
  .team-form-row{gap:.4rem}
  .team-form-row label{font-size:.6rem}
  .team-form-row input,.team-form-row select{font-size:.7rem;padding:7px}
}

/* ══════════════════════════════════════════════════════════ */
/* TOUCH — Minimum tap targets (all devices)                  */
/* ══════════════════════════════════════════════════════════ */
@media(pointer:coarse){
  button,select,.nav-tab,.kpi-card,.op-filter-btn,.prod-item-btn,.team-launch-btn,.ficha-tab{
    min-height:40px
  }
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=time],select,textarea{
    min-height:40px;font-size:max(.75rem,16px)
  }
  .prod-item-btn{min-width:36px;min-height:36px}
  .sheet-close{width:36px;height:36px}
  .hdr-icon-btn{min-width:40px;min-height:40px}
}

/* ══════════════════════════════════════════════════════════ */
/* SAFE AREA — iPhone notch / gesture bar                     */
/* ══════════════════════════════════════════════════════════ */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .header{padding-top:env(safe-area-inset-top)}
  .main{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .sheet{padding-bottom:env(safe-area-inset-bottom)}
  .prod-modal{padding-bottom:env(safe-area-inset-bottom)}
  #authScreen{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}

/* ══════════════════════════════════════════════════════════ */
/* LANDSCAPE MOBILE                                           */
/* ══════════════════════════════════════════════════════════ */
@media(max-height:500px) and (orientation:landscape){
  .ficha-modal{height:100vh!important;max-height:100vh!important;padding-top:env(safe-area-inset-top,28px)}
  .sheet{max-height:95vh}
  .prod-modal{max-height:95vh}
  .kpi-card{padding:.5rem}
  .kpi-value{font-size:1.1rem}
  .grid-4{grid-template-columns:repeat(4,1fr)!important}
  .grid-2{grid-template-columns:1fr 1fr!important}
}

/* Inline styles from line 803 */
.portal-mode .filialBar,.portal-mode .nav-tabs-wrap{display:none!important}
@keyframes sstDots{0%,80%,100%{opacity:.3}40%{opacity:1}}.sst-ia-dots::after{content:"...";animation:sstDots 1.4s infinite}

/* ══════════════════════════════════════════════════════════ */
/* GLOBAL DEFENSIVE FIXES (auditoria mobile 2026-04-29)       */
/* Adicionado depois pra nao mexer em regras existentes —     */
/* tudo dentro de @media so afeta mobile, desktop intacto.    */
/* ══════════════════════════════════════════════════════════ */

@media(max-width:768px){
  /* TRAVA HARD: nada pode causar scroll horizontal no body em mobile.
     Resolve "layout cortado pra esquerda" causado por elementos com
     width:100vw + padding ou min-width grande dentro de containers.
     html+body com overflow:hidden, max-width fixo no viewport. */
  html,body{
    overflow-x:hidden!important;
    max-width:100vw!important;
    width:100%
  }
  /* Defensivo extra: containers principais respeitam o viewport. */
  .header,.main,.section,#filialBar{
    max-width:100vw!important;
    box-sizing:border-box
  }

  /* Botao 'Tour' flutuante — diminuir e mover pra cima do bottom nav
     em mobile pra nao sobrepor conteudo principal da tela. */
  #tourRefazerLink{
    bottom:90px!important;
    left:12px!important;
    padding:6px 12px!important;
    font-size:.65rem!important;
    box-shadow:0 4px 12px rgba(8,145,178,.3)!important
  }

  /* Override antigo (#aiFab{bottom:90px}) removido em 2026-05-16:
     foi feito pra ficar acima do bottom nav antigo, mas hoje o nav mobile
     e' um drawer lateral (#ndDrawerOv) sem bottom bar. O 'bottom:90px'
     desalinhava o Chat IA do FAB Tour (#aiAssFab) que usa bottom:24px.
     Agora aiFab volta a usar a regra do ia-chat.js
     (calc(24px + env(safe-area-inset-bottom))), alinhada com o Tour. */
}

/* Landscape em telas curtas (typical mobile rotacionado): esconder
   FABs flutuantes pra liberar espaço vertical do conteudo principal.
   Tour pode ser reaberto via janela window.nodusTourIniciar() ou
   pelo proprio botao apos rotacao. */
@media(max-height:500px) and (orientation:landscape){
  #tourRefazerLink{display:none!important}
}

/* Touchscreen ou viewport <1200px: forçar layout a ocupar toda a
   largura. .main tem max-width:1400px no desktop, mas em telas
   grandes de celular em landscape (S25 Ultra ~1640px) sobra margem
   cinza inutil nas laterais. Cobertura tripla pra garantir:
   1) pointer:coarse (touchscreen)
   2) max-width <= 1200px (laptops pequenos, tablets, celulares)
   3) landscape com altura <=900px (celulares e tablets rotacionados) */
/* Layout fluido: desktop com viewport pequeno (laptop, zoom alto) tambem
   se beneficia de .main 100% pra evitar margens cinza desnecessarias. */
@media(max-width:1024px),(pointer:coarse) and (max-width:1700px){
  .main{
    max-width:100%!important;
    padding-left:.85rem!important;
    padding-right:.85rem!important
  }
  body{
    max-width:100vw!important;
    width:100%!important
  }
}

/* Estilos da barra de nav so se aplicam em mobile/tablet (caso a nav
   desktop nao esteja escondida — fallback se a media query principal
   nao pegar). */
@media (hover:none) and (pointer:coarse), (pointer:coarse) and (max-width:1024px){
  .nav-tabs-wrap{overflow:visible!important}
  .nav-tabs{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    flex-wrap:nowrap!important;
    scrollbar-width:none
  }
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tabs-grouped{
    flex-wrap:nowrap!important;
    overflow:visible!important;
    width:max-content;
    min-width:100%
  }
  .nav-tabs-grouped .nav-tab{
    padding:6px 8px!important;
    font-size:.66rem!important;
    flex-shrink:0
  }
  .nav-tabs-grouped .nav-tab .nav-chev{
    font-size:.5rem!important;
    margin-left:1px
  }
}

@media(max-width:600px){
  /* Forms multi-coluna viram 1 coluna em mobile.
     Cobertura: forms de funcionario, ficha, relatorios, assinaturas.
     Sem !important nas regras existentes pra nao bagunçar a herança. */
  .ficha-form-row,
  .team-form-row,
  .rel-summary,
  .rel-assinaturas,
  .form-row-2col,
  .form-row-3col{
    grid-template-columns:1fr!important;
    gap:.5rem!important
  }

  /* Containers com inline grid-template-columns: 1fr 1fr (3+ ocorrencias
     em telas que nao usam classes acima) — fallback pra eles tambem. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr!important
  }
}

@media(max-width:768px){
  /* Tabelas em geral ganham scroll horizontal automatico se nao
     estiverem dentro de .table-wrap. Evita conteudo cortado.
     Aplica apenas em tabelas dentro de .panel ou .sheet (areas de
     conteudo principal) — nao mexe em <table> de modais ou layouts
     ja customizados. */
  .panel>table,
  .panel table:not(.table-wrap table),
  .sheet-body table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    white-space:nowrap
  }
}