/* ==========================================================================
   responsive.css  —  CAMADA RESPONSIVA ÚNICA do Command Center Melgrim
   --------------------------------------------------------------------------
   Carregado DEPOIS de styles.css. Toda regra responsiva NOVA vive aqui.
   Não altera lógica de negócio, endpoints, permissões nem o comportamento
   do Gerente — só apresentação/layout/interação por viewport.

   Breakpoints canônicos (sem sobreposição — 768.00 cai só em `md`):
     xs   @media (max-width: 389.98px)                       mobile pequeno
     sm   @media (max-width: 767.98px)                        celular
     md   @media (min-width: 768px) and (max-width: 1023.98px) tablet
     lg   @media (min-width: 1024px)                          desktop (intocado)

   As media queries antigas de styles.css continuam existindo; esta camada
   normaliza conflitos e recebe toda regra nova. Consolidação é progressiva.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --bp-xs: 389.98px;
  --bp-sm: 767.98px;
  --bp-md: 1023.98px;

  /* safe-area (notch / home indicator / bordas curvas) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* alvo de largura de coluna para .r-grid */
  --r-col: 240px;

  /* altura real do header mobile (sticky) — usada por telas full-height */
  --mob-header-h: 52px;

  /* alvo mínimo de toque */
  --touch: 44px;
}

/* ==========================================================================
   2. GUARDAS GLOBAIS DE OVERFLOW
   Nenhuma tela pode gerar scroll horizontal no documento inteiro.
   Critério objetivo: documentElement.scrollWidth <= innerWidth + 1
   ========================================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.workspace,
.content-area,
.panel-body,
.modal-body {
  min-width: 0;
}

.content-area {
  overflow-x: hidden;
}

/* mídia e blocos rígidos nunca ultrapassam o container */
img,
svg,
video,
canvas,
iframe,
table {
  max-width: 100%;
}

/* filhos de grid/flex encolhem em vez de forçar o pai a crescer */
.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.kpi-row > *,
.kpi-row-4 > *,
.dash-kpi-row > *,
.r-grid > *,
.r-cluster > * {
  min-width: 0;
}

/* inputs/selects têm largura intrínseca (~150px) que impede o track do grid
   de encolher — deixa encolher (o container decide a largura). */
input,
select,
textarea,
.field input,
.field select {
  min-width: 0;
}

/* um elemento que declara scroll horizontal NUNCA pode ele mesmo transbordar:
   ele contém o scroll, não o propaga. Cobre os `style="overflow-x:auto"` ad-hoc. */
[style*="overflow-x:auto"],
[style*="overflow-x: auto"],
[style*="overflow-x:scroll"],
[style*="overflow:auto"],
[style*="overflow: auto"] {
  max-width: 100%;
}

/* quebra de texto longo (URLs, IDs, tokens) sem estourar layout */
.hero-desc,
.panel-body,
.kpi-sub,
.audit-text,
.chat-bubble,
.gv-msg,
[data-longtext] {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ==========================================================================
   3. PRIMITIVAS REUTILIZÁVEIS
   Aplicadas amplamente ao shell/grids/tipografia nesta fase; a fiação
   por-componente (tabelas, modais, filtros, charts) acontece nas fases 2-3.
   ========================================================================== */

/* 3.1 — scroll horizontal ISOLADO (tabela / gráfico / faixa densa).
   O container rola; o body nunca. */
.u-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.u-scroll-x::-webkit-scrollbar { height: 6px; }
.u-scroll-x::-webkit-scrollbar-track { background: transparent; }
.u-scroll-x::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 4px; }

/* 3.2 — wrapper de TABELA larga. Estratégia A do brief: nenhuma coluna some,
   só a tabela rola. Sticky opcional para 1ª coluna e header. */
.u-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.u-table-wrap > table { min-width: max-content; }
.u-table-wrap--sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--s1);
}
.u-table-wrap--sticky-col :is(td, th):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--s1);
}
.u-table-wrap--sticky-col thead th:first-child { z-index: 3; }

/* 3.3 — grid de cards que colapsa sozinho, sem media query por tela.
   --r-col controla o alvo de largura da coluna. */
.r-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: var(--r-grid-gap, 14px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--r-col, 240px)), 1fr));
}

/* 3.4 — clusters/stacks que quebram abaixo de sm */
.r-cluster { display: flex; flex-wrap: wrap; gap: var(--r-cluster-gap, 10px); }
.r-stack   { display: flex; flex-direction: column; gap: var(--r-stack-gap, 10px); }

/* 3.4b — .r-grid forçado a 1 coluna abaixo de --r-stack-at (default sm).
   Para grids de KPI/stat onde 2 colunas achatam o número. */
@media (max-width: 389.98px) {
  .r-grid[data-stack~="xs"] { grid-template-columns: minmax(0, 1fr); }
}

/* 3.4c — raiz de página: max-width central + padding que respira por viewport.
   Substitui o padrão inline `padding:28px 32px;max-width:NNNN;margin:0 auto`. */
.page-wrap {
  max-width: var(--page-max, 1180px);
  margin-inline: auto;
  padding: 28px 32px;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-wrap { padding: 22px 24px; }
}
@media (max-width: 767.98px) {
  .page-wrap {
    padding: 4px 0 22px;
    max-width: 100%;
  }
}

/* 3.5 — tabs roláveis (Tabs continuam TODAS existindo; quando não cabem, rolam) */
.r-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.r-tabs::-webkit-scrollbar { display: none; }
.r-tabs > * { flex: 0 0 auto; white-space: nowrap; }

/* 3.6a — MODAL SEMPRE ROLÁVEL quando não cabe na altura.
   Bug pré-existente (aparece no desktop também): modais longos como
   "Novo cliente" (~1130px) estouram a viewport sem forma de rolar até
   o botão Salvar. Correção mínima, sem redesign: o overlay rola; o
   `margin: auto` centraliza quando cabe e degrada pra topo+scroll quando não. */
.modal-overlay,
#modalOverlay,
#subModalOverlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: flex-start;
}
.modal-overlay > *,
#modalOverlay > *,
#subModalOverlay > * {
  margin-top: auto;
  margin-bottom: auto;
}
@media (max-width: 767.98px) {
  .modal-overlay,
  #modalOverlay,
  #subModalOverlay {
    padding: max(12px, var(--safe-t)) 12px max(12px, var(--safe-b));
  }
}

/* 3.6 — modal → full-screen sheet no mobile (fiação por-modal opcional).
   Header e footer fixos, corpo rola, backdrop não rola, respeita safe-area. */
@media (max-width: 767.98px) {
  .modal-overlay.modal--sheet {
    padding: 0;
    align-items: stretch;
  }
  .modal-overlay.modal--sheet .modal {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    transform: none;
  }
  .modal-overlay.modal--sheet .modal-head {
    position: sticky;
    top: 0;
    padding-top: calc(16px + var(--safe-t));
    background: var(--s1);
    z-index: 2;
  }
  .modal-overlay.modal--sheet .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-overlay.modal--sheet .modal-foot {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(16px + var(--safe-b));
    background: var(--s1);
    z-index: 2;
  }
}

/* 3.7 — drawer lateral de FILTROS no mobile (fiação por-tela na FASE 2).
   No desktop os filtros seguem inline; .filters-drawer só age em sm. */
@media (max-width: 767.98px) {
  .filters-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 88vw);
    max-width: 100%;
    background: var(--s1);
    border-left: 1px solid var(--border-md);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    z-index: 460;
    display: flex;
    flex-direction: column;
    padding-top: var(--safe-t);
    padding-bottom: var(--safe-b);
  }
  .filters-drawer.open { transform: translateX(0); }
  .filters-drawer-body { flex: 1; min-height: 0; overflow-y: auto; }
}

/* ==========================================================================
   4. SHELL / VIEWPORT
   ========================================================================== */

/* 4.1 — Fix de 100dvh: telas full-height usam dvh (barra de endereço do
   navegador mobile encolhe/expande). Onde styles.css usa 100vh puro,
   preferimos dvh. */
@supports (height: 100dvh) {
  .app-shell { height: 100dvh; }
}

/* 4.2 — sm: shell colado nas bordas, header sticky de verdade */
@media (max-width: 767.98px) {
  .app-shell {
    gap: 0 !important;
    padding: 0 !important;
    height: 100dvh;
  }

  .workspace {
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
  }

  /* header mobile: sticky, largura total, hamburger à esquerda */
  .topbar {
    position: sticky !important;
    top: 0;
    right: auto;
    left: 0;
    width: 100% !important;
    height: auto !important;
    min-height: var(--mob-header-h);
    z-index: 120;
    display: grid !important;
    grid-template-columns: var(--touch) 1fr auto;
    align-items: center;
    gap: 10px;
    padding:
      calc(var(--safe-t) + 6px)
      calc(var(--safe-r) + 12px)
      6px
      calc(var(--safe-l) + 8px) !important;
    background: rgba(6, 14, 30, .96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
  :root.light-mode .topbar {
    background: rgba(237, 239, 235, .96) !important;
    border-bottom-color: rgba(24, 28, 34, .12) !important;
  }
  .topbar::before { display: none; }
  .topbar-brand {
    display: block !important;
    text-align: center;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions { justify-self: end; gap: 6px !important; }
  .search-box { display: none !important; }

  .mob-menu-btn {
    width: var(--touch) !important;
    height: var(--touch) !important;
    display: inline-grid !important;
    place-items: center;
    justify-self: start;
  }

  /* conteúdo abaixo do header sticky, com safe-area lateral/inferior */
  .content-area {
    height: auto !important;
    flex: 1;
    min-height: 0;
    padding:
      14px
      calc(var(--safe-r) + 14px)
      calc(var(--safe-b) + 28px)
      calc(var(--safe-l) + 14px) !important;
  }
  .content-area.full-bleed {
    padding: 0 !important;
  }
}

/* 4.3 — xs: respiro lateral menor, ações mais compactas */
@media (max-width: 389.98px) {
  .content-area {
    padding-left: calc(var(--safe-l) + 10px) !important;
    padding-right: calc(var(--safe-r) + 10px) !important;
  }
  .topbar-actions { gap: 4px !important; }
}

/* ==========================================================================
   5. NAVEGAÇÃO MOBILE (drawer)
   Mesmo renderNav(): nenhum destino some. Só muda a apresentação.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* o drawer usa a coluna esquerda flutuante; largura confortável */
  .rail {
    width: min(86vw, 320px) !important;
    max-width: 100%;
    padding-top: var(--safe-t);
    padding-bottom: var(--safe-b);
    overscroll-behavior: contain;
  }

  /* iOS/WebKit: um `overflow:auto` dentro de um `position:fixed` que TEM
     `transform` não recebe scroll por toque. `transform: none` quando aberto
     remove o transform (a transição translateX(-100%) → none ainda anima)
     e destrava a rolagem por gesto. */
  .rail.expanded { transform: none; }

  /* a área dos links rola verticalmente; header (.rail-top) e bloco de
     usuário/logout (.rail-bottom) já ficam fixos nas pontas via flex-shrink:0
     do styles.css — só .rail-nav rola. */
  .rail-nav {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Mesmo bug de scroll iOS no outro painel deslizante por CSS: o detalhe
     de cliente/lead (.panel-drawer). O #cold-script-panel usa transform
     inline via JS (já ajustado pra 'none' quando aberto). */
  .card-panel.open .panel-drawer { transform: none !important; }
  #panelContent, #cold-script-body, .fin-drawer-body, .msg-chat-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* botão de fechar (X) — só existe/aparece no mobile */
  .rail-close-btn {
    display: inline-grid !important;
    place-items: center;
    width: var(--touch);
    height: var(--touch);
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: var(--ink-2);
    flex-shrink: 0;
  }
  .rail-close-btn:hover { color: var(--ink); }

  .rail-backdrop { z-index: 190; }

  /* alvos de toque na navegação */
  .rail-link,
  .nav-subitem,
  .rail-logout-btn,
  .rail-user-profile {
    min-height: var(--touch);
  }
}

/* X escondido em qualquer viewport >= md */
.rail-close-btn { display: none; }

/* ==========================================================================
   6. GRIDS — normalização para os 4 breakpoints
   Helpers genéricos + lista curada de grids bespoke levados a coluna única
   em sm. Polimento fino por tela = FASE 2/3.
   ========================================================================== */

/* md (tablet): 3-4 colunas viram 2 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
  .col-2 { grid-column: span 2; }
}

/* sm (celular): tudo em 1 coluna, KPIs em 2 quando couber */
@media (max-width: 767.98px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid,
  .client-admin-grid,
  .cc-main-grid,
  .cc-tab-grid,
  .cc-top-grid,
  .fin-grid-main,
  .fin-top-grid,
  .prosp-top-grid,
  .prosp-goals-grid,
  .cal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .col-2 { grid-column: span 1 !important; }

  .kpi-row,
  .kpi-row-4,
  .dash-kpi-row,
  .finkpi-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* xs: KPIs em coluna única (evita achatar número) */
@media (max-width: 389.98px) {
  .kpi-row,
  .kpi-row-4,
  .dash-kpi-row,
  .finkpi-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   7. TIPOGRAFIA FLUIDA
   Preserva hierarquia; não resolve mobile encolhendo tudo.
   ========================================================================== */
/* tablet: o hero pode quebrar a linha das ações em vez de estourar */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-hero { flex-wrap: wrap; }
  .page-hero .hero-actions { flex-shrink: 1; min-width: 0; flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
  .page-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-hero h2 { font-size: clamp(22px, 6.2vw, 30px) !important; }
  .hero-desc { max-width: 100%; }
  .hero-actions { width: 100%; flex-wrap: wrap; }

  /* inputs: >=16px evita zoom automático do iOS ao focar.
     `!important` porque o codebase estiliza inputs por `style="font-size:…"` inline
     (ex.: #gvChatInput do chat do Gerente = 12.5px). */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input:not([type]),
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   8. CORREÇÃO DE OFFENSORES DE OVERFLOW CONHECIDOS (mínima, FASE 1)
   Polimento completo destas telas = FASE 2/3.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* painel de script do Cold Call: 100vw -> 100% do container */
  #cold-script-panel {
    width: 100% !important;
    max-width: 100%;
    border-left: 0 !important;
  }

  /* SVG "montanha" do dashboard tinha min-width fixo */
  .mountain-svg,
  .dash-v3-mountain-wrap svg {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* faixas densas: rolam dentro de si, nunca o body */
  .dash-v3-metric-grid {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* kanban de Quadros: colunas rolam horizontalmente dentro do board */
  .board-list-cards,
  .kanban-cards {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   8b. TELAS COMPLEXAS — reflow dos offenders (FASE 2)
   As camadas "reference-UI-pass" de styles.css redefinem seletores SEM media
   query depois dos blocos responsivos originais, matando-os. responsive.css
   carrega por último e re-afirma o comportamento por viewport.
   ========================================================================== */

/* ---- Prospecção Ativa (kanban) ---- */
.kanban-board { max-width: 100%; min-width: 0; }
.prospec-page .kanban-board,
.kanban-page .kanban-board { overflow-x: auto; overscroll-behavior-x: contain; }

/* a faixa de topo (goals + 5 KPIs) tem min-content ~930px — abaixo disso
   vira grid auto-fit em vez de estourar */
@media (max-width: 1279.98px) {
  .prosp-top-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)) !important;
    grid-auto-rows: 1fr;
  }
}
/* toolbar + hero: quebram a linha em vez de estourar (tablet inclusive) */
@media (max-width: 1023.98px) {
  .prospec-page .prosp-hero,
  .prospec-page .prosp-toolbar,
  .prospec-page .prosp-left-tools,
  .prospec-page .prosp-right-tools { flex-wrap: wrap; }
  .prosp-segmented {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 1;
  }
  .prosp-segmented::-webkit-scrollbar { display: none; }
  .prosp-segmented button { flex: 0 0 auto; }
}
@media (max-width: 767.98px) {
  .kanban-page.prospec-page { height: auto; min-height: 0; padding: 0; gap: 12px; }
  .prospec-page .prosp-hero,
  .prospec-page .prosp-toolbar,
  .prospec-page .prosp-left-tools,
  .prospec-page .prosp-right-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .prosp-top-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .prosp-goals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .prosp-bottom-summary { grid-template-columns: minmax(0, 1fr) !important; }
  /* o board mantém natureza horizontal — rola dentro de si, com altura própria */
  .prospec-page .kanban-board { min-height: 60dvh; }
  .prospec-page .view-toggle { align-self: flex-start; }
  /* segmented control de período: rola em vez de estourar */
  .prosp-segmented {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 1;
  }
  .prosp-segmented::-webkit-scrollbar { display: none; }
  .prosp-segmented button { flex: 0 0 auto; }
}

/* ---- Cold Call ---- */
/* .cc-queue é flex-row sem wrap com filhos de min-width fixo (div 250 +
   botão + 2 articles 145) — estoura a 3ª coluna já no desktop. */
.cc-queue { flex-wrap: wrap; }
.cc-queue > div { min-width: min(250px, 100%); flex: 1 1 auto; }
.cc-queue > article { min-width: 0; }
.cc-goal { min-width: 0; }
.cc-queue > div > div { flex-wrap: wrap; }

@media (max-width: 1023.98px) {
  .coldcall-page .cc-top-grid,
  .coldcall-page .cc-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
  }
  .cc-import { grid-row: auto !important; }
  .cc-queue { grid-column: auto !important; }
  .cc-queue > div,
  .cc-queue > div > div { min-width: 0 !important; }
  .cc-queue article { flex: 1 1 140px; }
}
/* a "tabela" de contatos (div-grid de 10 colunas, ~1100px) rola na horizontal
   como bloco — head+body juntos. Vale em TODO viewport: no desktop o card
   também é mais estreito que a tabela (bug pré-existente: colunas clipadas). */
.cc-table-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.cc-table-scroll .cc-table-head { flex-shrink: 0; }
.cc-table-scroll .cc-table-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: visible; }
@media (max-width: 767.98px) {
  .coldcall-page .cc-table-card > header { flex-wrap: wrap; }
}

/* ---- Financeiro (stripe) + KPIs & MRR (fin-kpis) ---- */
.finkpi-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  .fin-drawers { flex-wrap: wrap; }
  .fin-drawer-btn { flex: 1 1 46%; min-width: 0; }
  .finkpi-table { min-width: 520px; }
  /* raiz da tela tinha padding:28px 32px próprio — dobrava o padding do content-area */
  .finkpi-page { padding: 4px 0 20px !important; gap: 18px; max-width: 100%; }
  .finkpi-page > * { min-width: 0; }
  .finkpi-section { padding: 16px 14px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .finkpi-page { padding: 20px 22px !important; }
}

/* ---- Configurações / listas .trow ---- */
@media (max-width: 1023.98px) {
  /* .trow (grid 2fr 1.5fr 1fr auto): a 3ª coluna e a ação descem pra
     baixo — nada é escondido, só reflui. */
  .trow {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }
  .trow > span:nth-child(3):not(.trow-action) { grid-column: 1 / -1; color: var(--ink-3); font-size: 11.5px; }
  .trow-header { display: none; }
}
@media (max-width: 767.98px) {
  .field input, .field select, .field textarea { width: 100%; max-width: 100%; }
}

/* ==========================================================================
   9. TOUCH — nada depende só de :hover
   (fiação de tooltips acionáveis por tap = FASE 2)
   ========================================================================== */
@media (hover: none) {
  /* botões-ícone que só apareciam no hover ficam sempre visíveis no touch */
  .panel-head .icon-btn-xs,
  .card-hover-action {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   10. ORIENTAÇÃO — landscape de celular não pode quebrar telas altas
   ========================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  .chat-page,
  .prospec-page,
  .kanban-page {
    height: 100dvh;
  }
  /* modais/sheets em landscape: header/footer continuam acessíveis */
  .modal-overlay.modal--sheet .modal-body { max-height: none; }
}

/* ==========================================================================
   11. LOGIN / SET-PASSWORD (shell do estado deslogado)
   `#loginOverlay` é position:fixed;inset:0. O card não pode ser clipado
   quando não cabe na altura (landscape / telas curtas) — precisa rolar.
   ========================================================================== */
#loginOverlay,
#setPasswordOverlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.lv2-wrap { min-height: 100%; height: auto; }
/* o card centraliza quando sobra espaço, mas encosta no topo quando falta */
.lv2-right { align-items: safe center; }

@media (max-width: 767.98px) {
  .lv2-right { padding: 28px 16px; }
  .lv2-card { padding: 32px 22px; border-radius: 16px; max-width: 460px; }
  .lv2-card-logo img { height: 72px !important; }
}
@media (max-width: 389.98px) {
  .lv2-right { padding: 20px 12px; }
  .lv2-card { padding: 26px 18px; }
}
/* qualquer viewport curto (landscape de phone) */
@media (max-height: 560px) {
  .lv2-right { align-items: flex-start; padding-top: 20px; padding-bottom: 20px; }
  .lv2-card { padding-top: 28px; padding-bottom: 28px; }
}