/* ═══════════════════════════════════════════════════════════════════
   CAMADA RESPONSIVA ÚNICA — CSS (nasceu no fim do dashboard_v8.html em 09/09/2026;
   virou arquivo em 21/09/2026, Issue #34, pra valer também nas páginas de área).
   Entra no FIM do <body> de toda página, depois de todo CSS inline — a ordem
   importa: esta camada ganha os empates. Par: responsivo.js.

   Faixas (atributo data-tela no <html>, escrito pelo responsivo.js):
     p   celular              (≤ 639)
     t   tablet retrato       (640 – 1023)
     tl  tablet paisagem      (1024 – 1199)
     d   computador           (≥ 1200)
   data-deitado="1" quando a tela é baixa e deitada (celular na horizontal).
   O menu lateral vira gaveta até 1199 — cobre iPad retrato E paisagem.
   ═══════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------
   1. MEDIDAS FLUIDAS — o respiro e a fonte acompanham a tela
   --------------------------------------------------------------- */
:root{
  --resp-respiro: clamp(10px, 2.6vw, 26px);
  --resp-gap: clamp(8px, 1.6vw, 16px);
}

/* ---------------------------------------------------------------
   2. GAVETA LATERAL ATÉ 1199 (antes era só até 980)
   Cobre iPad retrato (820/1024) e iPad paisagem (1180).
   --------------------------------------------------------------- */
@media (max-width: 1199px){
  html, body{ overflow-x: hidden !important; max-width: 100vw }
  .app{ width: 100vw !important; max-width: 100vw !important; overflow-x: hidden !important }
  .main{ width: 100% !important; max-width: 100vw !important; flex: 1 1 auto !important }
  .content{ padding: var(--resp-respiro) !important; max-width: 100vw !important }

  .sidebar{
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 280px !important; max-width: 85vw !important; flex: 0 0 280px !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.22,1,.36,1) !important;
    z-index: 9990 !important;
    box-shadow: none;
  }
  .sidebar.open{
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,.5) !important;
  }
  .sidebar-edge{ display: none !important }
  .sidebar-toggle{ display: none !important }

  #mobileMenuFab{
    display: flex !important;
    position: fixed;
    top: max(12px, calc(env(safe-area-inset-top) + 4px)); left: 12px;
    width: 44px; height: 44px;
    background: linear-gradient(135deg,#FF6D06,#FF8C38);
    color: #0B0F1A; border: 0; border-radius: 12px;
    align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900; cursor: pointer;
    box-shadow: 0 6px 24px rgba(255,109,6,.5), 0 2px 8px rgba(0,0,0,.4);
    z-index: 9995;
    transition: transform .2s, opacity .2s;
  }
  #mobileMenuFab:active{ transform: scale(.92) }
  body:has(.sidebar.open) #mobileMenuFab{ opacity: 0; pointer-events: none }

  #mobileBackdrop{
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 9988;
  }
  body.sidebar-mobile-open #mobileBackdrop{ display: block }

  .topbar{
    padding: max(12px, env(safe-area-inset-top)) 14px 12px 68px !important;
    min-height: 60px; height: auto !important; flex-basis: auto !important;
    flex-wrap: wrap !important; gap: 8px !important;
    max-width: 100vw !important;
  }
  .topbar-left, .topbar-right, .filters{ flex-wrap: wrap !important; gap: 6px !important; min-width: 0 }
  .page-title-big{ font-size: clamp(18px, 4.4vw, 30px) !important; line-height: 1.1 }

  /* Abas que trocam a topbar por um cabeçalho próprio: sem a topbar, o
     conteúdo subia pra debaixo do botão do menu. Abre espaço pra ele. */
  body.has-header-pro .content,
  body.gerenciador-active .content,
  body.criativos-active .content,
  body.banco-active .content{ padding-top: 64px !important }
  body.has-header-pro .page-header-pro{ padding-left: 18px }
}

/* ---------------------------------------------------------------
   3. O JOGO DO ESCRITÓRIO — sala inteira à vista, não um pedaço
   O fundo é 1606×979. Dando essa proporção à caixa, o "cover" do
   fitToScreen() para de cortar: aparece a sala toda em qualquer tela.
   --------------------------------------------------------------- */
@media (max-width: 1199px){
  .v2-hero-game, .esc-host,
  #page-dashboard-yohanna .esc-host,
  #page-dashboard-marcos .esc-host{
    min-height: 0 !important;
    aspect-ratio: 1606 / 979;
    height: auto !important;
    width: 100% !important;
  }
  .v2-hero-grid,
  #page-dashboard-yohanna .yh-home-grid,
  #page-dashboard-marcos .yh-home-grid{ grid-template-columns: 1fr !important }
  #esc-root .hud{ padding: 6px 10px !important }
  #esc-root .hud .leg{ display: none }
}
/* Celular deitado: a caixa não pode ser mais alta que a tela */
html[data-deitado="1"] .v2-hero-game,
html[data-deitado="1"] .esc-host{
  aspect-ratio: auto !important;
  height: 74dvh !important; min-height: 0 !important;
}

/* ---------------------------------------------------------------
   4. CELULAR DEITADO — pouca altura, tudo cabe rolando
   --------------------------------------------------------------- */
html[data-deitado="1"] .modal,
html[data-deitado="1"] .rt-modal,
html[data-deitado="1"] .wz-modal,
html[data-deitado="1"] .met-drawer,
html[data-deitado="1"] .cal-drawer,
html[data-deitado="1"] .ms-drawer,
html[data-deitado="1"] .wa-drawer{
  max-height: 100dvh !important;
}
html[data-deitado="1"] .rt-modal-box,
html[data-deitado="1"] .wz-modal,
html[data-deitado="1"] #crModal > div,
html[data-deitado="1"] #crDetail > div{
  max-height: 96dvh !important; overflow-y: auto !important;
}
html[data-deitado="1"] .atend-wrap{ height: 86dvh !important; min-height: 0 !important }
html[data-deitado="1"] canvas:not(.resp-cena){ max-height: 200px !important }

/* ---------------------------------------------------------------
   10. CENA 3D NÃO É GRÁFICO — não pode levar teto de altura
   O limite `canvas{max-height:280px}` (linha ~2863) existe pros gráficos
   do Chart.js. Só que ele pega junto o canvas WebGL do grafo da wiki: o
   renderer desenhava num buffer de 359×745 e o CSS exibia em 359×280,
   esmagando a cena — a esfera do segundo cérebro virava uma elipse achatada.
   --------------------------------------------------------------- */
#wikiGraph canvas,
.wgraph-wrap canvas,
.scene-container canvas,
#esc-root canvas,
canvas.resp-cena{
  max-height: none !important;
  max-width: none !important;
  height: 100% !important;
  width: 100% !important;
}
html[data-deitado="1"] .topbar{ min-height: 48px !important; padding-top: 8px !important; padding-bottom: 8px !important }

/* ---------------------------------------------------------------
   5. ATENDIMENTO — três colunas viram três telas no celular/tablet
   Antes: .atend-right sumia abaixo de 1180 e o contato ficava
   inacessível. Agora a página troca de vista: lista → conversa → contato.
   --------------------------------------------------------------- */
@media (max-width: 1023px){
  .atend-right{ display: block }          /* desfaz o display:none antigo */
  .atend-wrap{
    height: calc(100dvh - 150px) !important; min-height: 0 !important;
    position: relative; overflow: hidden;
  }
  .atend-wrap > .atend-left,
  .atend-wrap > .atend-mid,
  .atend-wrap > .atend-right{
    position: absolute; inset: 0;
    width: 100% !important; flex-basis: auto !important;
    border-left: 0; border-right: 0;
    display: none;
  }
  .atend-wrap[data-vista="lista"]    > .atend-left { display: flex }
  .atend-wrap[data-vista="conversa"] > .atend-mid  { display: flex }
  .atend-wrap[data-vista="contato"]  > .atend-right{ display: block }
  .atend-wrap:not([data-vista]) > .atend-left{ display: flex }
  .resp-voltar{
    flex: 0 0 auto; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14); color: #e9d5ff;
    border-radius: 9px; width: 34px; height: 34px;
    font-size: 17px; font-weight: 900; cursor: pointer; line-height: 1;
  }
  .resp-contato{
    flex: 0 0 auto; background: rgba(168,85,247,.18);
    border: 1px solid rgba(168,85,247,.45); color: #e9d5ff;
    border-radius: 9px; width: 34px; height: 34px;
    font-size: 15px; font-weight: 900; cursor: pointer; line-height: 1;
  }
}
@media (min-width: 1024px){ .resp-voltar, .resp-contato{ display: none } }
/* Entre 1024 e 1180 o painel de contato volta a aparecer lado a lado */
@media (min-width: 1024px) and (max-width: 1180px){
  .atend-right{ display: block !important; width: 280px !important; flex: 0 0 280px !important }
  .atend-left{ width: 260px !important; flex-basis: 260px !important }
}

/* ---------------------------------------------------------------
   6. CONTEÚDO QUE SUMIA — volta a aparecer
   --------------------------------------------------------------- */
@media (max-width: 900px){
  /* Cartões do calendário de conteúdo: sem título e sem status o card
     virava um retângulo mudo. Voltam, menores. */
  .kb-cal-card-title{ display: block !important; font-size: 9.5px !important; line-height: 1.2 }
  .kb-cal-card-status{ display: inline-block !important; font-size: 8px !important; padding: 1px 5px !important }
  .kb-cal-day{ min-height: 76px }
  /* Legenda do grafo da wiki: no tablet cabe, no celular não —
     e a cor já está no próprio nó, então lá ela some mesmo. */
  .wgraph-legend{
    display: flex !important; flex-direction: column; gap: 4px;
    font-size: 10px; padding: 8px 10px !important;
    max-width: calc(100vw - 28px); box-sizing: border-box;
  }
}
@media (max-width: 639px){
  .wgraph-legend{ display: none !important }
}

/* ---------------------------------------------------------------
   7. TOQUE — alvo grande o bastante pro dedo, sem zoom no iOS
   --------------------------------------------------------------- */
@media (max-width: 1023px){
  button, .nav-item, .filter-chip, .export-btn, [role="button"]{ min-height: 40px }
  input, textarea, select{ font-size: 16px !important; max-width: 100%; box-sizing: border-box }
  /* select nasce com min-width:auto — não encolhe, estoura a caixa e o
     card (que tem overflow hidden) corta o campo. Deixando encolher, o
     rótulo trunca com reticências em vez de sumir. */
  select, input, textarea{ min-width: 0 !important }
  .nav-item{ padding-top: 12px !important; padding-bottom: 12px !important }
  /* rótulo de botão não parte palavra ao meio ("Calendári / o").
     Quem quebra é a LINHA, não a palavra — o motor abaixo cuida disso. */
  button, .btn, .btn-mini, .export-btn, .filter-chip{ white-space: nowrap }
  /* o brilho do tilt 3D é maior que o card e sobra pra fora; em tela de
     toque não há mouse pra justificar o efeito */
  .js-tilt-glare, .js-tilt-glare-inner{ display: none !important }
}

/* A dica do kanban ("toque na pílula pra mover") é um `::before` do próprio
   quadro. O quadro é `display:flex` com rolagem horizontal, e a dica tem
   `flex:0 0 100%` — ou seja, ela é a PRIMEIRA COLUNA e ocupa a tela inteira,
   empurrando as colunas de verdade pra fora. Medido em 390px: a primeira
   coluna começava em left:370px, fora da tela.
   Aqui a dica sai de dentro do quadro e vira um aviso antes dele (o motor
   cria o elemento e marca `data-resp-dica` no <html>). */
@media (max-width: 900px){
  html[data-resp-dica="1"] #crKanban::before,
  html[data-resp-dica="1"] #kbBoard::before{
    content: none !important; display: none !important;
  }
}
.resp-dica-kanban{
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.25);
  color: #22D3EE;
  font-size: 12px; font-weight: 700;
  text-align: center; line-height: 1.4;
}
@media (min-width: 901px){ .resp-dica-kanban{ display: none } }

/* ---------------------------------------------------------------
   8. TABELA E ROLAGEM — nada vaza pro lado sem poder rolar
   --------------------------------------------------------------- */
@media (max-width: 1199px){
  .resp-rolagem{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  .card, .kpi-card, .small-card, .premium-card, .exec-card,
  .prd-kpi, .prd-section, .dhv3-card, .met-box, .met-kpi-card{
    max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important;
  }
  .content img, .content video, .content svg{ max-width: 100% }
  /* o jogo do escritório desenha num mundo transformado de tamanho próprio:
     limitar a largura ali zera a imagem de fundo (o pai tem largura 0) */
  #esc-root img, #esc-root video, #esc-root canvas, #esc-root svg{ max-width: none }
}

/* ---------------------------------------------------------------
   9. GAVETAS LATERAIS — no celular ocupam a tela toda
   --------------------------------------------------------------- */
@media (max-width: 767px){
  .met-drawer, .cal-drawer, .ms-drawer, .wa-drawer,
  #esc-root #esc-plano, .crm-op, .crm-pv{
    width: 100vw !important; max-width: 100vw !important; right: 0 !important;
  }
}

/* ---------------------------------------------------------------
   11. TRILHO DE ABAS — fileira que não cabe vira trilho que arrasta
   Pedido do Pedro (28/09/2026, Issue #79): "sempre que a gente fosse ter
   muitas caixas num mobile ou tela menor, a gente transforma numa linha
   que arrasta pro lado" — e hoje a fileira já rolava de lado, só que sem
   NENHUM sinal (a última aba aparecia cortada, sem aviso). O responsivo.js
   marca `.resp-trilho` sozinho em toda fileira de abas que não coube
   (`.fin-abas/.cont-abas/.traf-abas/.crm-abas` e as sub-abas internas) e
   liga `tem-mais-esq`/`tem-mais-dir` conforme sobra conteúdo pra cada lado.
   O esmaecido é por MÁSCARA (`mask-image`), não gradiente de cor — assim
   funciona igual no tema claro e escuro do Financeiro (`[data-fin-theme]`),
   sem precisar saber a cor de fundo de cada área.
   Área nova usa de graça: só precisa que a fileira de abas esteja num dos
   seletores que o JS varre (ver SELETORES_TRILHO em responsivo.js) — ou,
   pra qualquer outra fileira, marcar `data-rola-de-lado` nela à mão.
   --------------------------------------------------------------- */
.resp-trilho{
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* sem barra visível — o sinal de "tem mais" é o esmaecido, não a barra do
     navegador. A maioria das fileiras já escondia a própria (scrollbar-width:
     none no CSS da área); aqui garante pra quem ainda não tinha (.crm-abas). */
  scrollbar-width: none;
}
.resp-trilho::-webkit-scrollbar{ display: none; }
.resp-trilho > *{ scroll-snap-align: start; scroll-snap-stop: normal; }
:root{ --resp-trilho-esmaecido: 28px; }
.resp-trilho.tem-mais-dir{
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--resp-trilho-esmaecido)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--resp-trilho-esmaecido)), transparent 100%);
}
.resp-trilho.tem-mais-esq{
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--resp-trilho-esmaecido)), transparent 100%);
          mask-image: linear-gradient(to left, #000 calc(100% - var(--resp-trilho-esmaecido)), transparent 100%);
}
.resp-trilho.tem-mais-esq.tem-mais-dir{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--resp-trilho-esmaecido), #000 calc(100% - var(--resp-trilho-esmaecido)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--resp-trilho-esmaecido), #000 calc(100% - var(--resp-trilho-esmaecido)), transparent 100%);
}
/* tela deitada e estreita: o esmaecido fica desproporcional — reduz */
@media (max-width: 480px){ :root{ --resp-trilho-esmaecido: 20px; } }