/* Plataforma Even Parceiros — adaptação para telas pequenas.
   O pacote saiu do Claude Design com todos os estilos embutidos no atributo
   `style`, então as regras abaixo casam pelo próprio texto do estilo autoral
   e usam !important. O runtime dc normaliza o atributo (`display: flex`, com
   espaço depois dos dois-pontos), e é essa forma normalizada que os seletores
   procuram — conferido no DOM, não suposto.

   Duas quebras:
     <= 900px  desmancha as grades largas e tira a barra lateral da esquerda
     <= 640px  tudo em coluna única

   Nada aqui roda acima de 900px: o desktop fica byte a byte como era. */

/* ------------------------------------------------------------------ */
/* 1. Regra de fundo: item de grade/flex pode encolher                  */
/* ------------------------------------------------------------------ */
/* Sem isto, `1fr` = minmax(min-content, 1fr) e as colunas estouram a
   caixa em vez de espremer o conteúdo — é a causa raiz do transbordo. */
@media (max-width: 900px) {
  [style*="display: grid"] > *,
  [style*="display: flex"] > * { min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* 2. Grades                                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* duas colunas assimétricas (herói do site, split do login, painéis do CRM) */
  [style*="1.1fr 0.9fr"],
  [style*="1.05fr 0.95fr"],
  [style*="1.15fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* `repeat(3/2, 1fr)` são cartões de conteúdo (empreendimento, painel):
     precisam da largura toda. */
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* `repeat(4, 1fr)` são sempre ladrilhos de número curto ("23 / Parceiros
     ativos", "46 anos / de mercado"). Dois por linha cabem em 390px e evitam
     uma coluna de oito cartões só de rolagem. */
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ------------------------------------------------------------------ */
/* 3. Cabeçalho do site público                                         */
/* ------------------------------------------------------------------ */
/* <header> é único no markup — dá para mirar direto, sem casar estilo. */
@media (max-width: 900px) {
  header[style*="z-index: 40"] {
    flex-wrap: wrap !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    row-gap: 10px !important;
    gap: 12px !important;
  }
  /* a 2ª coluna do cabeçalho (links + seletor Site/CRM/Parceiro) ganha a
     linha inteira e rola sozinha se ainda não couber */
  header[style*="z-index: 40"] > div:last-child {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px !important;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Barra lateral do CRM e do portal do parceiro                      */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* o esqueleto deixa de ser lado-a-lado */
  div[style*="min-height: 100vh"][style*="align-items: stretch"] {
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* o painel de conteúdo para de rolar por dentro: quem rola é a página */
  div[style*="min-height: 100vh"][style*="align-items: stretch"] > div[style*="overflow: auto"] {
    overflow: visible !important;
  }

  /* a lateral vira uma faixa no topo, com os blocos quebrando em linhas */
  aside[style*="0 0 232px"] {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px;
    padding: 10px 14px;
    border-right: none !important;
    border-bottom: 1px solid var(--sideLine, #EFEEF4) !important;
  }

  /* Arrumação dos blocos da lateral dentro da faixa. Os seletores casam pelo
     style inline JÁ NORMALIZADO pelo runtime (`0` vira `0px`) — conferido no
     DOM ao vivo. Se o pacote for reexportado com outros valores, é aqui que
     quebra primeiro.
       linha 1: marca + seletor Site/CRM/Parceiro
       linha 2: busca
       linha 3: menu (rola de lado)
       linha 4: cobertura + tema/usuário/Sair                                */

  aside[style*="0 0 232px"] > div { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* rótulos de seção ("REDE COMERCIAL", "COBERTURA DA CARTEIRA") só fazem
     sentido empilhados numa coluna; e o espaçador não tem o que espaçar */
  aside[style*="0 0 232px"] > div[style*="text-transform: uppercase"],
  aside[style*="0 0 232px"] > div[style*="flex: 1"] { display: none !important; }

  aside[style*="0 0 232px"] > div[style*="padding: 18px 16px 14px"] {   /* marca */
    flex: 1 1 auto; padding-top: 0 !important; padding-bottom: 0 !important;
  }
  aside[style*="0 0 232px"] > div[style*="border-radius: 9px"] {        /* Site/CRM/Parceiro */
    flex: 0 0 auto;
  }
  aside[style*="0 0 232px"] > div[style*="position: relative"] {        /* busca */
    flex: 1 1 100%; padding-bottom: 0 !important;
  }
  aside[style*="0 0 232px"] > div[style*="border-radius: 10px"] {       /* cobertura */
    flex: 1 1 150px; padding: 10px 12px !important;
  }
  aside[style*="0 0 232px"] > div[style*="padding: 14px 12px"] {        /* tema + usuário + Sair */
    flex: 1 1 150px; padding-top: 0 !important; padding-bottom: 0 !important;
    flex-direction: row !important; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px !important;
  }
  /* a busca ocupa a largura toda da sua linha */
  aside[style*="0 0 232px"] input { width: 100% !important; }

  /* menu: de coluna para faixa que rola de lado */
  aside[style*="0 0 232px"] > nav {
    flex: 1 1 100%;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px !important;
    padding: 2px 0 6px !important;
    scrollbar-width: thin;
  }
  aside[style*="0 0 232px"] > nav > * {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/* 4a. Abas do topo da página /v1                                       */
/* ------------------------------------------------------------------ */
/* Efeito colateral do `min-width: 0` da regra 1: em vez de transbordar, as
   6 abas passaram a ESPREMER — "Dashboard" virou uma caixa de 38px com a
   palavra partida. Aqui elas voltam à largura natural e a faixa rola.
   Conferido: os dois seletores existem uma vez só, e só na /v1. */
@media (max-width: 900px) {
  /* qualquer cabeçalho quebra em linhas em vez de espremer os blocos
     (o da /v1 comprimia "Diretoria Comercial" numa caixa de 29px) */
  header { flex-wrap: wrap !important; row-gap: 10px; }
  header > * { flex-shrink: 1; }

  div[style*="align-items: center"][style*="gap: 28px"] { flex-wrap: wrap !important; }
  nav[style*="align-items: stretch"] {
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav[style*="align-items: stretch"] > * {
    flex: 0 0 auto !important;
    min-width: 0;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/* 4b. Tabelas de dados                                                 */
/* ------------------------------------------------------------------ */
/* Tabela não encolhe abaixo do min-content das colunas: as de Prospecção
   (7 colunas) e Tarefas passavam 729px do viewport. Virando bloco, ela
   rola de lado dentro da própria caixa em vez de empurrar a tela. */
@media (max-width: 900px) {
  table[style*="border-collapse: collapse"] {
    display: block !important;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  table[style*="border-collapse: collapse"] th,
  table[style*="border-collapse: collapse"] td { white-space: nowrap; }
}

/* ------------------------------------------------------------------ */
/* 4c. Painéis laterais de largura fixa dentro das telas                */
/* ------------------------------------------------------------------ */
/* p.ex. o resumo do Mapa Comercial (flex: 0 0 368px), que estourava a 360px.
   Só <aside>: as colunas do quadro do Funil são <div> e devem continuar
   com largura fixa, porque o quadro inteiro é uma faixa que rola. */
@media (max-width: 900px) {
  aside[style*="flex: 0 0"] { max-width: 100% !important; }
}

/* ------------------------------------------------------------------ */
/* 5. Respiro lateral das seções                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  section[style*="max-width: 1180px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Os dois painéis da tela de entrada trazem 56px/48px de recheio lateral,
     medida de desktop. Em 390px sobravam 277px de texto e o título de 40px
     partia "Empreendimen/tos" no meio da palavra. Com 22px sobram 346px e a
     palavra inteira cabe — melhor do que encolher a tipografia. */
  div[style*="padding: 56px 56px 40px"],
  div[style*="padding: 56px 48px 40px"] {
    padding: 40px 22px 32px !important;
  }
}

/* ------------------------------------------------------------------ */
/* 5b. Textos que se recusavam a quebrar                                */
/* ------------------------------------------------------------------ */
/* `white-space: nowrap` declarado no style inline (legendas, chips) fazia
   linhas curtas passarem da borda. As células de tabela e os itens do menu
   também são nowrap, mas por regra deste arquivo — não pelo style — então
   não são atingidos por este seletor. */
@media (max-width: 900px) {
  span[style*="white-space: nowrap"] { white-space: normal !important; }
}

/* Números grandes de painel (37px) não cabem em telas de 360px. */
@media (max-width: 400px) {
  [style*="font-size: 37px"] { font-size: 30px !important; }
}

/* Abaixo de ~380px o título de 40px da tela de entrada ainda pedia 344px com
   315px de linha — aí sim a tipografia cede. `clamp` em vez de degraus fixos
   porque o limite muda com a largura: a 360px dá 30,6px e a 320px, 27,2px,
   e nos dois casos "Empreendimentos." cabe inteiro. Medido palavra a palavra
   com uma sonda `white-space: nowrap`, não no olho. */
@media (max-width: 640px) {
  [style*="font-size: 40px"] { font-size: clamp(26px, 8.5vw, 40px) !important; }
}

/* ------------------------------------------------------------------ */
/* 6. Rede de segurança                                                 */
/* ------------------------------------------------------------------ */
/* Se sobrar algum bloco teimoso, ele rola dentro de si em vez de
   empurrar a página inteira para o lado. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, canvas, video { max-width: 100%; height: auto; }

  /* palavra sem espaço (a URL de divulgação do empreendimento) quebra em vez
     de furar a caixa. `break-word` só age em quem transbordaria, e não mexe
     na largura mínima intrínseca — por isso não desmancha nenhuma grade. */
  body { overflow-wrap: break-word; }
}