/* =====================================================
   MODAL 3 — RESPONSIVIDADE MOBILE (padrão Modal-1/Modal-2)
   Objetivo:
   - Modal preso ao viewport (sem mostrar tela de fundo / sem cortar à direita)
   - Painel superior reorganizado (Time 1 / Time 2) em 6 linhas + botões + return+slider
   - Sem alterar o layout WEB/desktop

   Escopo: SOMENTE mobile (<=768px) e SOMENTE #modal-3.
===================================================== */

@media (max-width: 768px){

  /* ===== Base igual ao Modal-1 ===== */
  body.modal-open{
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
  }

  body.modal-open #react-entry-point{
    height: 100% !important;
    overflow: hidden !important;
  }

  #modal-3{
    position: fixed !important;
    inset: 0 !important;
  }

  #modal-3 .modal-dialog{
    width: 96vw !important;
    max-width: 96vw !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    height: calc(100vh - 14px) !important;
  }

  #modal-3 .modal-content{
    height: calc(100vh - 14px) !important;
    max-height: calc(100vh - 14px) !important;
    overflow: hidden !important; /* quem rola é o body */
    box-sizing: border-box !important;
  }

  #modal-3 .modal-body{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 12px 10px !important;
    box-sizing: border-box !important;
  }

  /* Header (se existir): reserva espaço pro X e evita sobreposição */
  #modal-3 .modal-header{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 78px !important;
  }
  #modal-3 .modal-header .btn-close,
  #modal-3 .modal-header .close{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 30 !important;
  }

  /* ===== Linhas de filtros Time 1 / Time 2 (grid 3 colunas) =====
     Captura o wrapper que no callback tem width 90% e gap 8px.
  */
  #modal-3 #modal-3-body div[style*="width: 90%"][style*="gap: 8px"],
  #modal-3 #modal-3-body div[style*="width:90%"][style*="gap:8px"]{
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    margin: 0 auto 10px auto !important;
    box-sizing: border-box !important;
    justify-items: stretch !important;
    align-items: start !important;
  }

  /* Ícone 1/2: linha inteira, à ESQUERDA, circular */
  #modal-3 #modal-3-body div[style*="width: 90%"][style*="gap: 8px"] > div:first-child,
  #modal-3 #modal-3-body div[style*="width:90%"][style*="gap:8px"] > div:first-child{
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-left: 6px !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Wrappers dos dropdowns: cada célula */
  #modal-3 #modal-3-body div[style*="width: 90%"][style*="gap: 8px"] > div:nth-child(n+2),
  #modal-3 #modal-3-body div[style*="width:90%"][style*="gap:8px"] > div:nth-child(n+2){
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* React-Select (dcc.Dropdown): impedir alargamento progressivo */
  #modal-3 #modal-3-body .Select,
  #modal-3 #modal-3-body .Select-control{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #modal-3 #modal-3-body .Select-value,
  #modal-3 #modal-3-body .Select-value-label,
  #modal-3 #modal-3-body .Select-placeholder{
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #modal-3 #modal-3-body .Select-menu-outer{
    max-width: 96vw !important;
    box-sizing: border-box !important;
  }

  /* ===== Barra de botões + return + slider (sem :has()) =====
     Alvo: div com style position:relative; width:100%; gap:5px.
  */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"],
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"]{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px auto !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  /* Botões (filho 1): linha 1 inteira; remove margin-left desktop */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div:nth-child(1),
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div:nth-child(1){
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Esconde espaçador (filho 2) */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div:nth-child(2),
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div:nth-child(2){
    display: none !important;
  }

  /* Return (filho 3): linha 2 col 1; remove margin-left 75px */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > button:nth-child(3),
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > button:nth-child(3){
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    margin-left: 0 !important;
  }

  /* Slider (filho 4): linha 2 col 2 */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div:nth-child(4),
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div:nth-child(4){
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    margin-right: 0 !important;
    max-width: 190px !important;
  }

  /* Segurança: resultados nunca estouram largura */
  #modal-3 #comp-results-container,
  #modal-3 #comp-results-container *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}


/* =====================================================
   MODAL 3 — ANTI-OVERFLOW (mobile)
   Sintoma: conteúdo alarga e extrapola o viewport (corta à direita).
   Causa típica: algum filho com width/min-width implícito (flex/grid/plotly),
   ou texto longo no Dropdown. Solução: clamp geral + min-width:0.
   Escopo: somente #modal-3 e somente mobile.
===================================================== */
@media (max-width: 768px){

  /* Dialog e content nunca podem passar do viewport */
  #modal-3 .modal-dialog{
    width: calc(100vw - 12px) !important;   /* margem de segurança */
    max-width: calc(100vw - 12px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #modal-3 .modal-content{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Clamps gerais: nada dentro do modal pode forçar largura */
  #modal-3 .modal-body,
  #modal-3 #modal-3-body,
  #modal-3 #modal-3-body > div,
  #modal-3 #comp-results-container{
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Regra "mata-vazamento": min-width:0 em tudo (resolve flex/grid estourando) */
  #modal-3 *{
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Dropdown value: impede empurrão horizontal por strings longas */
  #modal-3 .Select-value,
  #modal-3 .Select-value-label,
  #modal-3 .Select-placeholder{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Plotly/Dash graphs/tables: travar em 100% */
  #modal-3 .dash-graph,
  #modal-3 .js-plotly-plot,
  #modal-3 .plot-container,
  #modal-3 .svg-container,
  #modal-3 svg,
  #modal-3 canvas{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}


/* =====================================================
   MODAL 3 — UI polish (mobile)
   Fixes:
   1) Centralizar e posicionar o TÍTULO (padrão Modal-1/2)
   2) Botão "Sair"/close menos "grosso" (altura/box)
   3) Garantir visibilidade dos botões Descritivo/Comparativo/Relacional
   Escopo: somente #modal-3 e somente mobile.
===================================================== */
@media (max-width: 768px){

  /* (1) Título: centralizado e um pouco mais abaixo */
  #modal-3 .modal-header .modal-title,
  #modal-3 #modal-3-body h4{
    width: 100% !important;
    text-align: center !important;
    margin: 12px 0 0 0 !important;   /* desce um pouco */
    padding: 0 !important;
  }

  /* remove qualquer empurrão lateral */
  #modal-3 .modal-header{
    justify-content: center !important;
  }

  /* (2) Botão close ("Sair"): padroniza tamanho/altura */
  #modal-3 .modal-header .btn-close,
  #modal-3 .modal-header .close{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 6px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  /* (3) Botões de ação: força aparecerem */
  #modal-3 #comp-btn-descritivo,
  #modal-3 #comp-btn-comparativo,
  #modal-3 #comp-btn-relacional{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 92px !important;
    max-width: 124px !important;
    width: 30vw !important;
  }

  /* Garante que o container dos botões não foi ocultado por engano */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div:nth-child(1),
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div:nth-child(1){
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* =====================================================
   MODAL 3 — PATCH v3 (somente mobile)
   1) Botão "Sair" (header): igual Modal-1/2 (padding 3px 10px; font 11; line-height 1)
   2) Botões Descritivo/Comparativo/Relacional: centralizar bloco e texto interno
   3) Return + Slider: garantir visibilidade e forçar mesma linha abaixo dos botões
   Obs: NÃO altera desktop.
===================================================== */
@media (max-width: 768px){

  /* (1) "Sair" — padroniza dimensões (não mexe na posição) */
  #modal-3 .modal-header .btn-close,
  #modal-3 .modal-header .close,
  #modal-3 .modal-header button{
    padding: 3px 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  /* (2) Bloco dos 3 botões — centraliza (estava “puxando” à direita) */
  #modal-3 #comp-btn-descritivo,
  #modal-3 #comp-btn-comparativo,
  #modal-3 #comp-btn-relacional{
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* (3) Barra de ações: usar FLEX-WRAP (mais robusto que nth-child) */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"],
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"]{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* grupo dos 3 botões ocupa a linha 1 inteira e fica centralizado */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div,
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div{
    box-sizing: border-box !important;
  }

  /* div que contém os 3 botões (única que possui esses ids como descendentes) */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div:has(#comp-btn-descritivo),
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div:has(#comp-btn-descritivo){
    order: 1 !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }

  /* fallback sem :has(): se browser não suporta, ainda centraliza o 1º div */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div:first-child,
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div:first-child{
    order: 1 !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }

  /* return e slider na linha 2 */
  #modal-3 #comp-btn-back-peers{
    order: 2 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* container do slider: fica ao lado do return */
  #modal-3 #modal-3-body div[style*="position: relative"][style*="width: 100%"][style*="gap: 5px"] > div[style*="justify-content: flex-end"],
  #modal-3 #modal-3-body div[style*="position:relative"][style*="width:100%"][style*="gap:5px"] > div[style*="justify-content:flex-end"]{
    order: 2 !important;
    margin-right: 0 !important;
    margin-left: 12px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    max-width: 190px !important;
  }

  /* garante que o slider não esteja escondido */
  #modal-3 #comp-min-minutes-slider{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 190px !important;
  }
}


/* =====================================================
   MODAL 3 — MOBILE: ACTION BAR (FIX DEFINITIVO)
   Return + Slider não desciam porque o seletor do "grupo 3 botões"
   (div center) não estava garantindo 100% da largura.
   Este patch:
   - identifica o buttons_row pelo style do wrapper (width:95% + space-between + margin 0 auto 4px auto)
   - força o grupo central (gap:8px + justify-content:center + display:flex) a ocupar 100% (linha 1)
   - mantém return + slider na linha 2
===================================================== */
@media (max-width: 768px){

  /* Wrapper do action bar (buttons_row) */
  #modal-3 #modal-3-body div[style*="display: flex"][style*="justify-content: space-between"][style*="width: 95%"][style*="margin: 0"],
  #modal-3 #modal-3-body div[style*="display:flex"][style*="justify-content: space-between"][style*="width:95%"][style*="margin: 0"]{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important; /* centraliza linha 1 */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    row-gap: 10px !important;
    column-gap: 10px !important;
    overflow: visible !important;
  }

  /* esconde o spacer flex:0.90 */
  #modal-3 #modal-3-body div[style*="flex: 0.90"],
  #modal-3 #modal-3-body div[style*="flex:0.90"]{
    display: none !important;
  }

  /* Grupo central com 3 botões (linha 1) — NÃO depende de flex:0 */
  #modal-3 #modal-3-body div[style*="display: flex"][style*="justify-content: center"][style*="gap: 8px"],
  #modal-3 #modal-3-body div[style*="display:flex"][style*="justify-content:center"][style*="gap:8px"]{
    order: 1 !important;
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Botões: labels centralizados */
  #modal-3 #comp-btn-descritivo,
  #modal-3 #comp-btn-comparativo,
  #modal-3 #comp-btn-relacional{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  /* Return (linha 2, esquerda) */
  #modal-3 #comp-btn-back-peers{
    order: 2 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  /* Slider wrapper (linha 2, direita) */
  #modal-3 #modal-3-body div[style*="justify-content: flex-end"][style*="margin-right: 23px"],
  #modal-3 #modal-3-body div[style*="justify-content:flex-end"][style*="margin-right:23px"]{
    order: 3 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-right: 0 !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  #modal-3 #comp-min-minutes-slider{
    max-width: 190px !important;
  }
}

/* =====================================================
   MODAL 3 — SLIDER: aumentar precisão no mobile
   (traz de volta um "indicador" tipo barra vertical no handle)
===================================================== */
@media (max-width: 768px){

  /* Garante que o slider seja fácil de “pegar” no touch */
  #modal-3 .rc-slider{
    padding: 10px 0 !important; /* aumenta área clicável sem mexer na UI */
  }

  /* Handle (o "pegador") */
  #modal-3 .rc-slider-handle{
    width: 26px !important;
    height: 26px !important;
    margin-top: -11px !important; /* recentra no trilho */
    border-width: 2px !important;
    opacity: 1 !important;
  }

  /* A "barrinha" vertical dentro do handle (indicador de precisão) */
  #modal-3 .rc-slider-handle::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 5px !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    height: 16px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
  }

  /* Trilho um pouco mais “grosso” para melhorar toque */
  #modal-3 .rc-slider-rail,
  #modal-3 .rc-slider-track{
    height: 6px !important;
  }
}

/* =====================================================
   MODAL 3 — iPhone Safari: impedir auto-zoom no dropdown
   (mesma lógica aplicada nos Modais 1 e 2)
   Motivo: iOS Safari dá zoom automático quando o font-size computado < 16px
   Solução:
     1) Forçar 16px nos elementos do React-Select (computado)
     2) "Compactar visualmente" com scale, sem reduzir o font-size computado
   Escopo: somente MOBILE e somente iOS Safari.
===================================================== */
@media (max-width: 768px){
  @supports (-webkit-touch-callout: none) {

    /* 1) Anti-zoom: manter 16px (regra do Safari) */
    #modal-3 .Select-control,
    #modal-3 .Select-placeholder,
    #modal-3 .Select-value-label,
    #modal-3 .Select-input,
    #modal-3 .Select-input input{
      font-size: 16px !important;
      line-height: 20px !important;
    }

    /* 2) Compactar visualmente (sem baixar o font-size computado) */
    #modal-3 .Select{
      transform: scale(0.88);
      transform-origin: left top;
      width: calc(100% / 0.88) !important;
    }

    /* 3) Ajustes finos opcionais (mantém aparência consistente) */
    #modal-3 .Select-control{
      height: 36px !important;
      min-height: 36px !important;
    }
    #modal-3 .Select-placeholder,
    #modal-3 .Select-value{
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }
  }
}

/* =====================================================
   MODAL 3 — DROPDOWN MENU OPACO (iOS/Android)
   Problema: menu do dropdown (lista) transparente e "vaza" o placeholder de baixo,
             especialmente no TOPO do menu (primeiro item/área superior).
   Solução (mesma lógica aplicada nos Modais 1 e 2):
   - forçar fundo opaco em .Select-menu-outer e .Select-menu
   - garantir z-index alto e borda/sombra
   - garantir que o container NÃO seja clipado por overflow:hidden dos pais
   Escopo: somente #modal-3 (não altera web fora do modal).
===================================================== */
@media (max-width: 768px){

  /* Evita clipping do menu por wrappers */
  #modal-3 .Select,
  #modal-3 .Select-control,
  #modal-3 .Select-menu-outer{
    overflow: visible !important;
  }

  /* Menu acima de tudo + fundo opaco (inclui a "faixa" superior do menu) */
  #modal-3 .Select-menu-outer,
  #modal-3 .Select-menu{
    background-color: rgba(20, 20, 20, 0.98) !important;
    opacity: 1 !important;
    z-index: 2147483000 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45) !important;
  }

  /* Garante que opções não "herdem" transparência em estados */
  #modal-3 .Select-option{
    background-color: transparent !important; /* base */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #modal-3 .Select-option.is-focused,
  #modal-3 .Select-option:hover{
    background-color: rgba(255,255,255,0.06) !important;
  }
  #modal-3 .Select-option.is-selected{
    background-color: rgba(255,255,255,0.10) !important;
  }

  /* Ajuste de largura/posicionamento do menu dentro do viewport */
  #modal-3 .Select-menu-outer{
    min-width: 100% !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  /* iOS: às vezes o menu “fura” por stacking contexts; reforça no estado aberto */
  #modal-3 .Select.is-open{
    z-index: 2147483500 !important;
    position: relative !important;
  }
}

/* =====================================================
   MODAL 3 — RESULTADOS (gráficos/tabelas) EMPILHADOS NO MOBILE
   Objetivo: ao clicar em Descritivo/Comparativo/Relacional, as caixas de resultado
   devem ficar 1 por linha (vertical), sem alargar o viewport.
   Escopo: SOMENTE #modal-3 e SOMENTE mobile (<=768px). Não altera WEB/desktop.
===================================================== */
@media (max-width: 768px){

  /* Wrapper das 4 caixas do Radar (Comparativo) — no callback:
     style={'display':'flex','gap':'10px','flexWrap':'wrap'} */
  #modal-3 #comp-results-container div[style*="display: flex"][style*="gap: 10px"][style*="flexWrap"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="gap:10px"][style*="flexWrap"],
  #modal-3 #comp-results-container div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap"]{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Caixas do Radar: removem widths percentuais/minWidth e viram full-width */
  #modal-3 #comp-results-container div[style*="display: flex"][style*="gap: 10px"][style*="flexWrap"] > div,
  #modal-3 #comp-results-container div[style*="display:flex"][style*="gap:10px"][style*="flexWrap"] > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
  }

  /* Container Relacional (2 caixas) e quaisquer wrappers flex de resultados:
     força coluna + elimina margin "40px 60px" que costuma alargar no mobile */
  #modal-3 #comp-results-container div[style*="display: flex"][style*="flexDirection: row"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="flexDirection:row"],
  #modal-3 #comp-results-container div[style*="display: flex"][style*="justifyContent"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="justifyContent"]{
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Caso exista wrapper com margin 40px 60px (padrão do modal-2), zera no mobile */
  #modal-3 #comp-results-container div[style*="40px 60px"],
  #modal-3 #comp-results-container div[style*="margin: 40px"],
  #modal-3 #comp-results-container div[style*="margin:40px"]{
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Caixas internas gerais (Relacional/Descritivo): remover margens direitas fixas */
  #modal-3 #comp-results-container [style*="marginRight"],
  #modal-3 #comp-results-container [style*="marginRight:"]{
    margin-right: 0 !important;
  }

  /* Segurança: gráficos/tabelas não podem forçar overflow horizontal */
  #modal-3 #comp-results-container .dash-graph,
  #modal-3 #comp-results-container .js-plotly-plot,
  #modal-3 #comp-results-container .plot-container,
  #modal-3 #comp-results-container .svg-container,
  #modal-3 #comp-results-container svg,
  #modal-3 #comp-results-container canvas,
  #modal-3 #comp-results-container table{
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}


/* =====================================================


/* =====================================================
   MODAL 3 — RESULTS (MOBILE): EMPILHAR DESCRITIVO / COMPARATIVO / RELACIONAL
   (substitui patches anteriores que não funcionaram)
   Baseado no callback_comparative_performance.py:
   - Descritivo: boxes_row => display:flex; gap:10px; marginTop:5px; alignItems:flex-start
                filhos com widths 22% / 56% / 22% e height ~348px
   - Comparativo: boxes => display:flex; gap:10px; flexWrap:wrap; filhos width 24% minWidth 230px
   - Relacional: boxes_row => display:flex; flexDirection:row; margin:12px 60px 40px 60px; height:350px
   Objetivo no mobile:
   - stack vertical (coluna)
   - largura real 100% (sem ficar estreito)
   - sem overflow horizontal
===================================================== */
@media (max-width: 768px){

  /* container geral de resultados */
  #modal-3 #comp-results-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* =========================
     1) DESCRITIVO (3 caixas)
     Wrapper: display:flex; gap:10px; marginTop:5px; alignItems:flex-start
  ========================== */
  #modal-3 #comp-results-container div[style*="display: flex"][style*="gap: 10px"][style*="margin-top: 5px"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="gap:10px"][style*="margin-top:5px"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 10px 6px 14px 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    gap: 12px !important;
  }

  /* 3 caixas do descritivo: width 100% e height auto (não aperta) */
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="margin-top: 5px"] > div,
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="margin-top:5px"] > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* =========================
     2) COMPARATIVO (4 caixas radar)
     Wrapper: display:flex; gap:10px; flexWrap:wrap
  ========================== */
  #modal-3 #comp-results-container div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap"],
  #modal-3 #comp-results-container div[style*="display: flex"][style*="gap: 10px"][style*="flexWrap"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="gap:10px"][style*="flexWrap"]{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 10px 6px 14px 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    gap: 12px !important;
  }

  /* 4 caixas: mata width 24% / minWidth 230px */
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="flexWrap"] > div,
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="flexWrap"] > div,
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="flex-wrap"] > div,
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="flex-wrap"] > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* =========================
     3) RELACIONAL (2 caixas)
     Wrapper: flex-direction:row; margin 12px 60px 40px 60px; height 350px
  ========================== */
  #modal-3 #comp-results-container div[style*="flex-direction: row"][style*="12px 60px 40px 60px"],
  #modal-3 #comp-results-container div[style*="flex-direction:row"][style*="12px 60px 40px 60px"],
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"][style*="height:350px"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 10px 6px 14px 6px !important; /* remove 60px laterais */
    padding: 0 !important;
    box-sizing: border-box !important;

    gap: 12px !important;
  }

  /* 2 caixas internas: width 100% e remove marginRight */
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"] > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Plotly / tabelas: nunca podem estourar o container */
  #modal-3 #comp-results-container .dash-graph,
  #modal-3 #comp-results-container .js-plotly-plot,
  #modal-3 #comp-results-container .plot-container,
  #modal-3 #comp-results-container svg,
  #modal-3 #comp-results-container canvas,
  #modal-3 #comp-results-container table{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================
   MODAL 3 — RELACIONAL (MOBILE): FORÇAR EMPILHAMENTO
   (Complemento: Relacional ainda escapou do seletor anterior)
   Cole no FINAL do z_modal3_fix.css
===================================================== */
@media (max-width: 768px){

  /* Wrapper do Relacional normalmente vem com height ~350px e display:flex */
  #modal-3 #comp-results-container div[style*="display: flex"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="display:flex"][style*="height:350px"],
  #modal-3 #comp-results-container div[style*="height: 350px"][style*="flex-direction"],
  #modal-3 #comp-results-container div[style*="height:350px"][style*="flex-direction"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 6px !important;
    margin-right: 6px !important;
    box-sizing: border-box !important;

    gap: 12px !important;
  }

  /* Caixas internas do Relacional: ocupam 100% e sem margem lateral */
  #modal-3 #comp-results-container div[style*="height: 350px"] > div,
  #modal-3 #comp-results-container div[style*="height:350px"] > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================
   MODAL 3 — MICRO AJUSTE: CAIXAS (RESULTADOS) UM POUCO MAIS À ESQUERDA
   Motivo: borda direita não aparecia (estava colando no viewport).
   Escopo: somente mobile e somente resultados do modal-3.
===================================================== */
@media (max-width: 768px){
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="margin-top: 5px"],
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="margin-top:5px"],
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="flexWrap"],
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="flexWrap"],
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"],
  #modal-3 #comp-results-container div[style*="height:350px"]{
    /* um tiquinho mais de espaço na direita e menos na esquerda */
    margin-right: 10px !important;
    margin-left: 4px !important;
  }
}

/* =====================================================
   MODAL 3 — CSS ONLY: (1) LEGENDA DESCRITIVO EM 2 LINHAS + DOT MAIOR
                       (2) RESULTADOS: NÃO ESTOURAR BORDA DIREITA
   Observações:
   - NÃO mexe no Python.
   - Escopo: somente mobile e somente #modal-3.
===================================================== */
@media (max-width: 768px){

  /* ---------- (1) LEGENDA DO DESCRITIVO (barra acima dos gráficos) ---------- */
  #modal-3 #desc-legend-bar{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 18px !important; /* row-gap / col-gap */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cada item da legenda vira inline-flex (para centralizar) */
  #modal-3 #desc-legend-bar > span{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Força quebra de linha antes do 3º item:
     linha 1 = itens 1 e 2 (jogador 1)
     linha 2 = itens 3 e 4 (jogador 2) */
  #modal-3 #desc-legend-bar > span:nth-child(3){
    flex-basis: 100% !important;
  }

  /* Aumenta o "dot" (bolinha) mesmo vindo com width/height inline */
  #modal-3 #desc-legend-bar span[style*="border-radius: 50%"]{
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    box-sizing: border-box !important;
  }

  /* ---------- (2) RESULTADOS: CLAMP NO VIEWPORT (borda direita sempre visível) ---------- */
  #modal-3 #comp-results-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;

    /* “folga” extra à direita para a borda não sumir */
    padding: 0 12px 0 6px !important;
  }

  /* tudo dentro dos resultados deve respeitar box-sizing */
  #modal-3 #comp-results-container *{
    box-sizing: border-box !important;
  }

  /* wrappers principais (descritivo / comparativo / relacional) — trava no viewport */
  #modal-3 #comp-results-container div[style*="gap: 10px"],
  #modal-3 #comp-results-container div[style*="gap:10px"],
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"],
  #modal-3 #comp-results-container div[style*="height:350px"],
  #modal-3 #comp-results-container div[style*="height: 350px"]{
    max-width: calc(100vw - 18px) !important; /* 6px left + 12px right */
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* plotly/graphs/tabelas: nunca podem forçar largura */
  #modal-3 #comp-results-container .dash-graph,
  #modal-3 #comp-results-container .js-plotly-plot,
  #modal-3 #comp-results-container .plot-container,
  #modal-3 #comp-results-container svg,
  #modal-3 #comp-results-container canvas,
  #modal-3 #comp-results-container table{
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

/* =====================================================
   MODAL 3 — AJUSTES FINOS (MOBILE)
   1) Legenda Descritivo: exatamente 2 linhas (2 itens por linha) + dots maiores
   2) Legenda Relacional: 3 linhas (Outros / Jogadores / Médias) + símbolos maiores
   3) Relacional: reduzir altura da 1ª caixa (univar) no mobile
   Obs: patch de override (não precisa apagar patches anteriores).
===================================================== */
@media (max-width: 768px){

  /* ---------- (1) LEGENDA DESCRITIVO (desc-legend-bar): 2 linhas exatas ---------- */
  #modal-3 #desc-legend-bar{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px 14px !important;
  }
  /* 2 itens por linha */
  #modal-3 #desc-legend-bar > span{
    flex: 0 0 calc(50% - 8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-right: 0 !important; /* mata marginRight inline se estiver afetando */
  }
  /* desfaz a quebra “flex-basis:100%” do patch anterior, se existir */
  #modal-3 #desc-legend-bar > span:nth-child(3){
    flex-basis: calc(50% - 8px) !important;
  }
  /* dots maiores */
  #modal-3 #desc-legend-bar span[style*="border-radius: 50%"]{
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  /* ---------- (2) LEGENDA RELACIONAL (comp-rel-legend-bar): 3 linhas ---------- */
  #modal-3 #comp-rel-legend-bar{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px 14px !important;
  }
  /* padrão: 2 por linha */
  #modal-3 #comp-rel-legend-bar > span{
    flex: 0 0 calc(50% - 8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-right: 0 !important;
  }
  /* linha 1: "Outros jogadores" sozinho */
  #modal-3 #comp-rel-legend-bar > span:nth-child(1){
    flex: 0 0 100% !important;
  }
  /* símbolos maiores: bolinhas */
  #modal-3 #comp-rel-legend-bar span[style*="borderRadius: '50%'"],
  #modal-3 #comp-rel-legend-bar span[style*="border-radius: 50%"]{
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  /* símbolos maiores: triângulos (Média 1 / Média 2) */
  #modal-3 #comp-rel-legend-bar span[style*="borderBottom"]{
    /* aumenta triângulo (inline styles usam borderLeft/Right/Bottom) */
    border-left-width: 7px !important;
    border-right-width: 7px !important;
    border-bottom-width: 12px !important;
  }

}

@media (max-width: 768px){

  :root{
    --m3-results-box-height: 350px; /* ajuste aqui */
  }

  /* DESCRITIVO */
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="margin-top: 5px"] > div,
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="margin-top:5px"] > div,

  /* COMPARATIVO */
  #modal-3 #comp-results-container div[style*="gap: 10px"][style*="flexWrap"] > div,
  #modal-3 #comp-results-container div[style*="gap:10px"][style*="flexWrap"] > div,

  /* RELACIONAL (este é o que faltava) */
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"] > div,
  #modal-3 #comp-results-container div[style*="12px 60px 40px 60px"] > div{
    height: var(--m3-results-box-height) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

}

/* =========================================================
   MODAL 3 — RELACIONAL (MOBILE): FAZER O RELACIONAL OBEDECER À ALTURA PADRÃO
   Por que o seu patch não muda o Relacional?
   - No callback, o wrapper do Relacional (boxes_row) já vem com height:'350px'
     e alignItems:'stretch'. Se você só altera as caixas-filhas, o wrapper ainda
     “manda” na altura do bloco.
   Solução CSS-only:
   - Aplicar a altura padrão diretamente NO WRAPPER do Relacional (boxes_row),
     usando o mesmo --m3-results-box-height.
   - Fazer as 2 caixas internas preencherem 100% da altura do wrapper.
   Obs: Não encosta no Descritivo/Comparativo (que já estão ok).
========================================================= */
@media (max-width: 768px){

  /* Wrapper do Relacional (boxes_row): único no modal-3 com height fixo + stretch + space-between */
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items:stretch"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height:350px"],
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items:stretch"][style*="height:350px"]{
    height: var(--m3-results-box-height) !important;  /* <<< mesmo controle do patch que já funciona */
    max-height: var(--m3-results-box-height) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* As 2 caixas do Relacional devem preencher a altura do wrapper */
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height"] > div{
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}


/* =========================================================
   MODAL 3 — RELACIONAL (MOBILE): SEM SCROLL + BOXES COM ALTURA PADRÃO
   Objetivo:
   - manter SEM scroll interno (wrapper height:auto)
   - manter as caixas do Relacional com a altura padrão (--m3-results-box-height)
   - fazer o gráfico do UNIVARIADO (caixa 1) ocupar o espaço vazio do box
     (sem alterar a altura global do box; apenas elimina “vazio” interno)
   Obs: não mexe no Descritivo/Comparativo.
========================================================= */
@media (max-width: 768px){

  /* Wrapper do Relacional (boxes_row): auto para não virar “viewport” com scroll */
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items:stretch"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height:350px"],
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items:stretch"][style*="height:350px"]{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  /* Duas caixas do Relacional: altura padrão */
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height"] > div,
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items:stretch"][style*="height"] > div{
    height: var(--m3-results-box-height) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* CAIXA 1 (Univariado): transforma em coluna flex para o gráfico preencher o vazio */
  #modal-3 #comp-results-container div[style*="justify-content: space-between"][style*="align-items: stretch"][style*="height"] > div:first-child{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Slot do gráfico univariado cresce para ocupar o espaço restante do box */
  #modal-3 #comp-rel-univar-plot-slot{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 6px !important;    /* reduz o “ar” sem quebrar layout */
    padding: 0 !important;
  }

  /* Plotly dentro do slot ocupa 100% do slot (preenche o vazio) */
  #modal-3 #comp-rel-univar-plot-slot .dash-graph,
  #modal-3 #comp-rel-univar-plot-slot .js-plotly-plot,
  #modal-3 #comp-rel-univar-plot-slot .plot-container{
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
}


/* =========================================================
   MODAL 3 — RELACIONAL (MOBILE): ALTURA IGUAL (SELETOR ROBUSTO)
   Problema: no mobile, Relacional mantém altura maior que Descritivo/Comparativo.
   Causa: wrapper do Relacional (inline style) vem com height:350px e align-items:stretch,
   então as caixas esticam verticalmente.
   Correção: no mobile, identificar o wrapper do Relacional por margin 12px 60px 40px 60px
   e derrubar height/stretches; aplicar height padrão nas caixas filhas.
   - Não mexe em Descritivo/Comparativo.
========================================================= */
@media (max-width: 768px){
  /* Wrapper do Relacional (boxes_row do callback) */
  #modal-3 #comp-results-container div[style*="margin: 12px 60px 40px 60px"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="margin:12px 60px 40px 60px"][style*="height: 350px"],
  #modal-3 #comp-results-container div[style*="margin: 12px 60px 40px 60px"][style*="height:350px"],
  #modal-3 #comp-results-container div[style*="margin:12px 60px 40px 60px"][style*="height:350px"]{
    height: auto !important;       /* remove o 350px inline (evita caixa “alta demais”) */
    max-height: none !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;  /* empilha as 2 caixas no mobile */
    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 14px !important;          /* espaçamento vertical */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;  /* sem scroll interno */
  }

  /* As 2 caixas do Relacional (filhas diretas): mesma altura padrão */
  #modal-3 #comp-results-container div[style*="margin: 12px 60px 40px 60px"] > div,
  #modal-3 #comp-results-container div[style*="margin:12px 60px 40px 60px"] > div{
    height: var(--m3-results-box-height) !important;
    max-height: var(--m3-results-box-height) !important;
    min-height: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;     /* derruba flex:1 inline, evita esticar */
    box-sizing: border-box !important;
    overflow: visible !important;  /* sem scroll interno */
  }
}


/* =========================================================
   MODAL 3 — RELACIONAL: IGUALAR ALTURA DAS CAIXAS (MOBILE, CLASSNAME)
   Regras:
   - NÃO mexe no menu de dropdowns (top-panel)
   - Apenas Relacional (resultado): usa className no Python
   - Wrapper não tem altura fixa (evita scroll interno)
   - Caixas obedecem ao mesmo --m3-results-box-height
========================================================= */
@media (max-width: 768px) {

  /* Wrapper do Relacional (somente resultados) */
  #modal-3 #comp-results-container .m3-rel-row {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    /* garante empilhamento + gap sem afetar outros blocos */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* As 2 caixas do Relacional: altura padrão */
  #modal-3 #comp-results-container .m3-rel-row .m3-rel-box {
    height: var(--m3-results-box-height) !important;
    overflow: visible !important; /* sem scroll interno */
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

}

/* =========================================================
   MODAL 3 — RELACIONAL (MOBILE): FIXAR ALTURA DA CAIXA 1 (UNIVAR)
   Pedido: solução simples => número fixo.
   - Não mexe em dropdowns/menu
   - Não mexe no comparativo/descritivo
========================================================= */
@media (max-width: 768px){

  :root{
    --m3-rel-univar-height: 350px; /* <<< MUDE AQUI (ex: 280, 300, 320) */
  }

  /* Só a Caixa 1 do Relacional */
  #modal-3 #comp-results-container .m3-rel-box--univar{
    height: var(--m3-rel-univar-height) !important;
    max-height: var(--m3-rel-univar-height) !important;
    min-height: var(--m3-rel-univar-height) !important;
    overflow: visible !important;  /* sem scroll interno */
    box-sizing: border-box !important;
  }

  /* Faz o gráfico continuar preenchendo o box */
  #modal-3 #comp-results-container .m3-rel-box--univar #comp-rel-univar-plot-slot{
    height: calc(var(--m3-rel-univar-height) - 70px) !important; /* reserva título/botões */
    min-height: 0 !important;
  }

  #modal-3 #comp-results-container .m3-rel-box--univar #comp-rel-univar-plot-slot .dash-graph,
  #modal-3 #comp-results-container .m3-rel-box--univar #comp-rel-univar-plot-slot .js-plotly-plot,
  #modal-3 #comp-results-container .m3-rel-box--univar #comp-rel-univar-plot-slot .plot-container{
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   MODAL 3 — RELACIONAL (MOBILE): FIXAR ALTURA DA CAIXA 2 (BIVAR)
   Mantém o MESMO tamanho da Caixa 1
========================================================= */
@media (max-width: 768px){

  /* Caixa 2 do Relacional */
  #modal-3 #comp-results-container .m3-rel-box--bivar{
    height: var(--m3-rel-univar-height) !important;
    max-height: var(--m3-rel-univar-height) !important;
    min-height: var(--m3-rel-univar-height) !important;
    overflow: visible !important;  /* sem scroll interno */
    box-sizing: border-box !important;
  }

  /* Faz o gráfico da Caixa 2 preencher o box */
  #modal-3 #comp-results-container .m3-rel-box--bivar .dash-graph,
  #modal-3 #comp-results-container .m3-rel-box--bivar .js-plotly-plot,
  #modal-3 #comp-results-container .m3-rel-box--bivar .plot-container{
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================================
   POPUPS "Visão" e "Opções" (Modal-3 – Relacional) – MOBILE
   Objetivo (igual Modal-1/2):
   * Sem scroll horizontal (quebra agressiva de linha)
   * Parágrafos empilhados com espaçamento e texto justificado (Visão)
   * Scroll vertical quando necessário (Visão)
   * Labels de Opções quebrando corretamente
   Escopo: somente popups do Relacional no Modal-3.
===================================================== */
@media (max-width: 768px){

  /* IDs dos popups do Relacional (Univariado + Bivariado) */
  #comp-rel-univar-interpret-modal,
  #comp-rel-univar-options-modal,
  #comp-rel-scatter-interpret-modal,
  #comp-rel-scatter-options-modal{
    overflow-x: hidden !important;
  }

  /* Dialog sempre dentro do viewport (não toca dropdowns/menu do modal) */
  #comp-rel-univar-interpret-modal .modal-dialog,
  #comp-rel-univar-options-modal .modal-dialog,
  #comp-rel-scatter-interpret-modal .modal-dialog,
  #comp-rel-scatter-options-modal .modal-dialog{
    max-width: 96vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ====== VISÃO (Interpret) ====== */
  #comp-rel-univar-interpret-modal .modal-body,
  #comp-rel-scatter-interpret-modal .modal-body{
    /* scroll vertical (o problema do 3º parágrafo sumir) */
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* afastamento das bordas */
    padding: 12px 14px !important;

    /* quebra de linha */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    /* formatação */
    text-align: justify !important;
    text-justify: inter-word !important;
  }

  /* garantir “parágrafos” empilhados com respiro */
  #comp-rel-univar-interpret-modal .modal-body p,
  #comp-rel-scatter-interpret-modal .modal-body p{
    display: block !important;
    margin: 0 0 12px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* tudo dentro do body respeita o viewport */
  #comp-rel-univar-interpret-modal .modal-body *,
  #comp-rel-scatter-interpret-modal .modal-body *{
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* ====== OPÇÕES (Options) ====== */
  #comp-rel-univar-options-modal .modal-body,
  #comp-rel-scatter-options-modal .modal-body{
    overflow-x: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    padding: 12px 14px !important;
  }

  #comp-rel-univar-options-modal .modal-body *,
  #comp-rel-scatter-options-modal .modal-body *{
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* labels de radio/checklist: permitir 2+ linhas */
  #comp-rel-univar-options-modal label,
  #comp-rel-scatter-options-modal label{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}