/* =========================================================
   MODAL 2 (Desempenho Físico) - MOBILE ONLY
   Arquivo: assets/z_modal2_fix.css

   Escopo:
   - Só afeta o Modal 2 (#modal-2) em telas <= 768px.
   - NÃO altera Login/Home/Tela de opções nem o desktop.
   - Padrão espelhado do Modal-1 (3 dropdowns por linha + botões retangulares + botões circulares).
========================================================= */

@media (max-width: 768px) {

  /* ===== Base do modal (mobile) ===== */
  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-2 {
    position: fixed !important;
    inset: 0 !important;
  }

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

  #modal-2 .modal-content {
    height: calc(100vh - 14px) !important;
    max-height: calc(100vh - 14px) !important;
    overflow: hidden !important;
  }

  #modal-2 .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 12px !important;
  }

  /* ===== Header: título + Sair na mesma linha ===== */
  #modal-2 .modal-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 78px !important;
  }

  #modal-2 .modal-title {
    display: block !important;
  }

  #modal-2 #close-2 {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 30 !important;

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

    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    white-space: nowrap !important;

    padding: 3px 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  /* =========================================================
     DROPDOWNS – 3 por linha (igual Modal-1)
     Requer: wrappers com className:
       - .pp-filters-grid (cada linha)
       - .pp-filter-item (cada dropdown)
  ========================================================= */

  #modal-2 .pp-filters-grid{
    width: 90% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-sizing: border-box !important;

    /* não clipar o menu */
    overflow: visible !important;
  }

  #modal-2 .pp-filter-item{
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

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

  #modal-2 .Select-option{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #modal-2 .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;
  }

  #modal-2 .Select-clear-zone,
  #modal-2 .Select-clear{
    display: none !important;
  }

  #modal-2 .Select-value,
  #modal-2 .Select-placeholder{
    padding-right: 24px !important;
  }

  /* ===== iPhone Safari: impedir auto-zoom sem “fonte gigante” ===== */
  @supports (-webkit-touch-callout: none) {
    #modal-2 .Select-control,
    #modal-2 .Select-placeholder,
    #modal-2 .Select-value-label,
    #modal-2 .Select-input,
    #modal-2 .Select-input input{
      font-size: 16px !important;
      line-height: 20px !important;
    }

    /* Compactar visualmente mantendo 3 por linha */
    #modal-2 .Select{
      transform: scale(0.88);
      transform-origin: left top;
      width: calc(100% / 0.88) !important;
    }
  }

  /* =========================================================
     BOTÕES – padrão Modal-1
     Requer wrappers com className:
       - .pp-action-row
       - .pp-main-actions
       - .pp-round-actions
  ========================================================= */

  #modal-2 .pp-action-row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #modal-2 .pp-action-spacer{
    display: none !important;
  }

  /* Linha 1: 3 botões retangulares */
  #modal-2 .pp-main-actions{
    order: 1 !important;
    width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;
    padding: 0 14px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  #modal-2 #phys-analyze-button,
  #modal-2 #phys-radar-button,
  #modal-2 #phys-scatter-button{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;

    margin-top: 0 !important;
    margin-right: 0 !important;

    height: 36px !important;
    white-space: nowrap !important;
  }

  /* Linha 2: circulares centralizados */
  #modal-2 .pp-round-actions{
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;

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

    gap: 14px !important;
    margin-top: 10px !important;

    margin-right: 0 !important;
  }

  #modal-2 #btn-go-technical,
  #modal-2 #btn-go-search-from-phys{
    margin-top: 0 !important;
    margin-right: 0 !important;
  }

  /* =========================================================
     RESULTADOS – caixas empilhadas e dimensões estáveis
     Requer wrapper com className: .pp-results-row
  ========================================================= */

  #modal-2 .pp-results-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    height: auto !important;
    max-height: none !important;

    margin: 16px 12px !important;
  }

  #modal-2 .pp-results-row > *{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  #modal-2 .pp-results-row > *{
    margin-bottom: 18px !important;
  }

  #modal-2 .pp-results-row > *:last-child{
    margin-bottom: 0 !important;
  }

}

/* =====================================================
   PATCH — Modal-2 (Android): espaçamento vertical entre linhas e botões
   Escopo: mobile e somente NÃO-iOS (Android/Chrome).
===================================================== */
@media (max-width: 768px) {
  @supports not (-webkit-touch-callout: none) {
    #modal-2 .pp-filters-grid{ margin-bottom: 10px !important; }
    #modal-2 .pp-main-actions{ margin-top: 6px !important; }
  }
}

/* =====================================================
   iOS Safari – FIX: 1ª opção “transparente” + sobreposição
   (Modal 2 / Dropdowns)
   Mesma abordagem do Modal-1 (vencedora):
   - elevar o componente inteiro quando abre (.Select.is-open)
   - menu-outer + opções com fundo opaco
   - criar layer no iOS (translate3d) SEM mexer em largura/layout
   Escopo: somente iOS + mobile + Modal-2
===================================================== */
@media (max-width: 768px) {
  @supports (-webkit-touch-callout: none) {

    /* Base de empilhamento previsível */
    #modal-2 .pp-filter-item .Select {
      position: relative !important;
      z-index: 1 !important;
      -webkit-transform: translate3d(0,0,0) !important;
    }

    /* Quando abrir, sobe o componente inteiro (não só o menu) */
    #modal-2 .pp-filter-item .Select.is-open {
      z-index: 2147483640 !important;
    }

    /* Menu acima de tudo e com fundo realmente opaco */
    #modal-2 .pp-filter-item .Select-menu-outer {
      z-index: 2147483641 !important;
      background-color: rgba(20, 20, 20, 0.98) !important;
      opacity: 1 !important;
      -webkit-transform: translate3d(0,0,0) !important;
    }

    /* IMPORTANTÍSSIMO: cada opção precisa ter fundo opaco no iOS */
    #modal-2 .pp-filter-item .Select-option {
      background-color: rgba(20, 20, 20, 0.98) !important;
      opacity: 1 !important;
    }

    /* Estados (hover/focus/selecionado) também com fundo opaco */
    #modal-2 .pp-filter-item .Select-option.is-focused,
    #modal-2 .pp-filter-item .Select-option.is-selected {
      background-color: rgba(35, 35, 35, 0.98) !important;
      opacity: 1 !important;
    }
  }
}

/* =====================================================
   PATCH — Modal-2: ajustar largura/spacing dos DROPDOWNS e distância para botões
   Objetivo:
   - 3 dropdowns por linha, com GAP horizontal/vertical consistente
   - largura “útil” igual ao padrão do Modal-1 (90% centralizado)
   - sem mexer no desktop
===================================================== */
@media (max-width: 768px) {

  /* Duas linhas de filtros: 90% centralizado + espaçamento vertical */
  #modal-2 .pp-filters-grid{
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-wrap: nowrap !important;          /* mantém 3 por linha */
    justify-content: space-between !important;

    gap: 12px !important;                  /* espaçamento horizontal entre dropdowns */
    margin-bottom: 12px !important;        /* espaçamento vertical entre linha 1 e linha 2 */
    padding: 0 !important;                 /* evita “alargar” */
    box-sizing: border-box !important;

    overflow: visible !important;
  }

  /* Cada dropdown como item flex (zera margins inline e evita estourar) */
  #modal-2 .pp-filter-item{
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* O Select ocupa 100% do item */
  #modal-2 .pp-filter-item .Select,
  #modal-2 .pp-filter-item .Select-control{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Botões retangulares: mesma largura útil dos filtros + distância da 2ª linha */
  #modal-2 .pp-main-actions{
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;

    gap: 12px !important;
    padding: 0 !important;
    margin-top: 6px !important;            /* distância após a 2ª linha */
    box-sizing: border-box !important;
  }

  /* Garante que os 3 botões dividam a linha igualmente */
  #modal-2 #phys-analyze-button,
  #modal-2 #phys-radar-button,
  #modal-2 #phys-scatter-button{
    flex: 1 1 0 !important;
    width: auto !important;
    margin-right: 0 !important;
  }

  /* Botões circulares: linha de baixo centralizada, com respiro */
  #modal-2 .pp-round-actions{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 10px !important;
  }
}

/* =====================================================
   Mobile (Modal-2) — FIX: impedir “alargamento” ao renderizar gráficos/tabelas
   - NÃO mexe em dropdowns/menus
   - Sem selector universal (*)
===================================================== */
@media (max-width: 768px) {

  /* Modal não pode ultrapassar viewport */
  #modal-2{
    max-width: 100vw !important;
  }

  #modal-2 .modal-dialog{
    width: 96vw !important;
    max-width: 96vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;  /* não clipa menus */
    box-sizing: border-box !important;
  }

  #modal-2 .modal-content{
    max-width: 96vw !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Sem scroll horizontal no corpo */
  #modal-2 .modal-body{
    overflow-x: hidden !important;
  }

  /* Containers de resultados não podem “forçar” largura */
  #modal-2 .pp-results-row,
  #modal-2 .pp-box{
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Plotly/Dash: respeitar container */
  #modal-2 .dash-graph,
  #modal-2 .dash-graph > div,
  #modal-2 .js-plotly-plot,
  #modal-2 .js-plotly-plot .plot-container,
  #modal-2 .js-plotly-plot .svg-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Tabelas: evitar célula longa estourar viewport */
  #modal-2 table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  #modal-2 td, #modal-2 th{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* =====================================================
   PATCH — Modal-2: estabilizar largura ao abrir resultados (Descritivo/Comparativo/Relacional)
   Mesma lógica do Modal-1 (empilhamento + derrubar larguras fixas de boxes)
===================================================== */
@media (max-width: 768px) {

  /* Linha de resultados deve empilhar SEMPRE no mobile */
  #modal-2 .pp-results-row{
    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;

    /* derruba limites que travam e forçam largura */
    height: auto !important;
    max-height: none !important;

    margin: 16px 12px !important;
    box-sizing: border-box !important;
  }

  /* Cada box ocupa 100% e não pode ter width fixa */
  #modal-2 .pp-results-row > *{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-right: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }

  /* Espaço vertical entre boxes */
  #modal-2 .pp-results-row > *{
    margin-bottom: 18px !important;
  }
  #modal-2 .pp-results-row > *:last-child{
    margin-bottom: 0 !important;
  }
}


/* =====================================================
   MODAL 2 — UNSQUEEZE RESULTS (COMPARATIVO / RELACIONAL)
   Goal: widen ONLY the results area on mobile, without touching
         dropdown sizing/spacing (filters/header untouched).
   Works even if results are built with dbc.Row/dbc.Col (Bootstrap).
===================================================== */

@media (max-width: 768px) {

  /* Target ONLY the dynamic results container */
  #modal-2 .pp-results-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* If results use Bootstrap grid (dbc.Row / dbc.Col), force full-width columns */
  #modal-2 .pp-results-row .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #modal-2 .pp-results-row .col,
  #modal-2 .pp-results-row [class^="col-"],
  #modal-2 .pp-results-row [class*=" col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;

    /* remove large gutters that visually "squeeze" content */
    padding-left: 0 !important;
    padding-right: 0 !important;

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

  /* Make plotly containers truly fill the available width */
  #modal-2 .pp-results-row .js-plotly-plot,
  #modal-2 .pp-results-row .plot-container,
  #modal-2 .pp-results-row .svg-container,
  #modal-2 .pp-results-row .dash-graph {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Tables too */
  #modal-2 .pp-results-row table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
  }
}


/* =====================================================================
   MODAL 2 — FINAL RESPONSIVE OVERRIDES (MOBILE ONLY)
   Scope: ONLY results area inside Modal-2.
   Goals:
   1) Prevent Descritivo overflow (no horizontal growth)
   2) Prevent Comparativo/Relacional "squeezed" look by removing grid gutters
      and forcing full-width columns inside results on mobile
   3) Do NOT change dropdown sizing/spacing, header, or action buttons
===================================================================== */

@media (max-width: 768px) {

  #modal-2 .pp-results-row{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }

  #modal-2 .pp-results-row > *{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #modal-2 .pp-results-row .row{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #modal-2 .pp-results-row .col,
  #modal-2 .pp-results-row [class^="col-"],
  #modal-2 .pp-results-row [class*=" col-"]{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

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

  #modal-2 .pp-results-row .dash-graph,
  #modal-2 .pp-results-row .js-plotly-plot,
  #modal-2 .pp-results-row .plot-container,
  #modal-2 .pp-results-row .svg-container,
  #modal-2 .pp-results-row svg,
  #modal-2 .pp-results-row canvas{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #modal-2 .pp-results-row table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
  }
}


/* =========================================================
   MODAL 2 — TUNING FINAL (MOBILE ONLY)
   Base: keep your current best version.
   Goal: widen results slightly (Descritivo) and remove extra side margins
         on boxes that make Comparativo/Relacional look narrower.
   Scope: results only (does NOT affect dropdowns/menu/header).
========================================================= */

@media (max-width: 768px) {

  /* Slightly wider results area */
  #modal-2 .pp-results-row{
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Comparativo/Relacional boxes often have inline marginRight: 15px.
     Remove side margins on direct children so all three modes match. */
  #modal-2 .pp-results-row > div{
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Safety: prevent any inner element from forcing horizontal growth */
  #modal-2 .pp-results-row,
  #modal-2 .pp-results-row *{
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === MODAL 2: MODAL-1 LOGIC (mobile) — overflow + stacking, scoped === */
@media (max-width: 768px) {

  /* 1) Prevent horizontal growth in Modal-2 body (same idea as Modal-1) */
  #modal-2 .modal-body,
  #modal-2 .modal-dialog .modal-content .modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: normal !important;
  }

  /* 2) Let inner blocks actually occupy width (avoids "squeezed" layouts) */
  #modal-2 .modal-body > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3) Bootstrap/Dash rows may wrap (helps stacking) */
  #modal-2 .modal-body .row,
  #modal-2 .modal-body .dbc-row,
  #modal-2 .modal-body .dash-row {
    flex-wrap: wrap !important;
  }

  /* 4) Graphs/tables must not exceed width */
  #modal-2 .dash-graph,
  #modal-2 .js-plotly-plot,
  #modal-2 .dash-table-container,
  #modal-2 .dash-spreadsheet-container {
    max-width: 100% !important;
  }

  /* 5) If the results wrapper is using the desktop inline margin (40px 60px),
        override it ONLY on mobile (this is what makes comp/rel look too narrow). */
  #modal-2 .modal-body [style*="40px 60px"] {
    margin: 16px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 6) When that wrapper is flex-row on desktop, force column on mobile */
  #modal-2 .modal-body [style*="flex-direction: row"],
  #modal-2 .modal-body [style*="flexDirection: row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}



/* =========================================================
   MODAL 2 — MICRO AJUSTE FINAL DE ALINHAMENTO (MOBILE)
   Remove overflow residual à direita (1–2px)
========================================================= */

@media (max-width: 768px) {

  /* desloca levemente o conjunto para a esquerda */
  #modal-2 .pp-results-row {
    padding-right: calc(12px + 4px) !important;
    padding-left: 2px !important;
  }

}
/* =========================================================
   MODAL 2 — MICRO AJUSTE DE CENTRALIZAÇÃO (MOBILE)
   Objetivo: puxar as caixas levemente para a esquerda
========================================================= */

@media (max-width: 768px) {

  #modal-2 .pp-results-row {
    padding-left:1px !important;   /* era 12px */
    padding-right: 20px !important; /* mantém a folga da direita */
  }

}

/* =========================================================
   MODAL 2 — ALTURA FIXA GRANDE DAS CAIXAS (MOBILE)
   Regra:
   - todas as caixas têm a MESMA altura
   - conteúdo curto deixa espaço vazio
   - conteúdo longo simplesmente ocupa (sem scroll interno)
   - ajuste fino será feito só mudando o número
========================================================= */

@media (max-width: 768px) {

  #modal-2 .pp-results-row > div {
    height: 350px !important;     /* <<< NÚMERO GRANDE INICIAL */
    

    overflow: visible !important; /* <<< SEM SCROLL INTERNO */

    box-sizing: border-box !important;
  }

}





/* =========================================================
   MODAL 2 — KPI (CAIXINHAS INTERNAS) — NÃO ESTICAR + NÃO SUMIR
   Fix:
   - impedir esticamento vertical (align-self / height auto)
   - garantir que todas as caixinhas apareçam (flex-wrap + overflow visível)
   Escopo: somente "linhas KPI" (pp-results-row aninhado dentro de uma caixa)
   NÃO mexe nas 3 caixas principais nem no menu
========================================================= */

@media (max-width: 768px) {

  /* Container das caixinhas KPI (pp-results-row aninhado dentro da caixa) */
  #modal-2 .pp-results-row > div .pp-results-row {
    display: flex !important;
    flex-wrap: wrap !important;          /* <<< garante múltiplas caixinhas/linhas */
    align-items: flex-start !important;  /* <<< não estica */
    align-content: flex-start !important;
    justify-content: flex-start !important; /* evita "space-between" empurrar e cortar */
    gap: 8px !important;
    overflow: visible !important;        /* <<< não corta as próximas */
  }

  /* Cada caixinha KPI */
  #modal-2 .pp-results-row > div .pp-results-row > div {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;

    /* Mantém o layout 3 por linha, mas permite quebrar */
    flex: 0 0 calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px) !important;
    min-width: 60px !important;

    box-sizing: border-box !important;
  }
}

/* =========================================================
   MODAL 2 — KPI: CENTRALIZAR LINHAS (FIX REAL)
   Estrutura:
     (KPI container) .pp-results-row
        > (KPI item) .pp-results-row
            > div (label)
            > div (value)
========================================================= */

@media (max-width: 768px) {

  /* Centraliza label e value dentro de cada KPI item */
  #modal-2 .pp-results-row > div .pp-results-row > .pp-results-row > div {
    text-align: center !important;
    width: 100% !important;
  }

  /* Garante que o KPI item não force alinhamento à esquerda */
  #modal-2 .pp-results-row > div .pp-results-row > .pp-results-row {
    text-align: center !important;
  }
}

/* =========================================================
   MODAL 2 — KPIs (Capacidades): centralizar label quebrando em 2 linhas
   Escopo: apenas o TEXT label dentro dos KPI cards.
   Não mexe em largura/altura das caixas principais nem no menu.
========================================================= */

@media (max-width: 768px) {

  /* Primeiro DIV interno do card = LABEL (normalmente o primeiro filho) */
  #modal-2 .pp-results-row .pp-results-row > div[style*="border"] > div:first-child {
    width: 100% !important;          /* <<< dá área pro center funcionar */
    text-align: center !important;
    line-height: 1.1 !important;

    /* força o texto a poder quebrar entre palavras */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;

    /* evita “colado” na borda */
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }

  /* Valor (segundo DIV interno) também centralizado */
  #modal-2 .pp-results-row .pp-results-row > div[style*="border"] > div:nth-child(2) {
    width: 100% !important;
    text-align: center !important;
  }
}


/* =========================================================
   MODAL 2 — KPI: QUEBRA CONTROLADA + CENTRALIZAÇÃO (MOBILE)
   Requer: create_kpi_item renderizando palavras como .kpi-word
   Escopo: apenas KPIs (kpi-item) dentro do modal-2.
========================================================= */

#modal-2 .kpi-item .kpi-word{
  display: inline;
}

@media (max-width: 768px){
  #modal-2 .kpi-item .kpi-label,
  #modal-2 .kpi-item .kpi-value{
    text-align: center !important;
    width: 100% !important;
  }

  #modal-2 .kpi-item .kpi-word{
    display: block;
    text-align: center !important;
    width: 100% !important;
  }
}

/* =========================================================
   MODAL 2 — KPI (Capacidades): NUDGE HORIZONTAL DO TEXTO
   Objetivo: empurrar label + valor alguns px à direita.
   Ajuste fino: altere o número do translateX.
========================================================= */

@media (max-width: 768px) {

  /* Empurra texto (label e valor) dentro dos cards KPI, sem mexer na caixa toda */
  #modal-2 .pp-results-row .pp-results-row > div {
    transform: translateX(14px);
  }

}

/* =========================================================
   MODAL 2 — MOBILE FIX (Comparativo / Relacional)
   Baseado na estrutura real do callback:
   - Comparativo/Relacional retornam um wrapper com style margin: '40px 60px'
     e display:flex / flexDirection:'row', com 3 caixas filhas:
       1) Dados Demográficos (mais estreita: width 280px)
       2) ... (320px)
       3) ... (320px)
   Correções:
   1) Forçar as 3 caixas filhas a 100% no mobile (remove widths fixas)
   2) Adicionar espaçamento vertical consistente (gap)
   Obs: Não toca no desktop.
========================================================= */

@media (max-width: 768px){

  /* Wrapper de resultados (Comparativo/Relacional) */
  #modal-2 .modal-body [style*="margin': '40px 60px"],
  #modal-2 .modal-body [style*='margin": "40px 60px'],
  #modal-2 .modal-body [style*="margin: 40px 60px"],
  #modal-2 .modal-body [style*="40px 60px"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    /* Espaçamento vertical entre as 3 caixas */
    gap: 14px !important;

    /* mantém o wrapper dentro do viewport */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* As 3 caixas (filhas diretas) — derruba widths fixas (280px/320px) */
  #modal-2 .modal-body [style*="40px 60px"] > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;

    /* se algum patch antigo zerou margin, o gap já resolve; garante que não "cole" */
    margin: 0 !important;
  }

}

@media (max-width: 768px){

  /* Dá respiro lateral às caixas (reduz largura visual) */
  #modal-2 .modal-body [style*="40px 60px"]{
    padding-left: 0px !important;
    padding-right: 24px !important;
  }

}

/* =====================================================
   POPUPS "Visão" e "Opções" (Modal-2) – MOBILE
   Replica a lógica do Modal-1 para os popups do Modal-2.
   Objetivo (mobile):
   - Parágrafos justificados, sem scroll horizontal
   - Quebra agressiva de texto/labels
   - Afastamento das bordas (padding confortável)
   Escopo: SOMENTE nos modais disparados pelos botões
           "Visão"/"Opções" dentro do Modal-2 (prefixo phys-).
   Observação: bloco ADITIVO — não altera o que já está funcionando no Modal-2.
===================================================== */

@media (max-width: 768px) {

  /* 1) Corpo dos modais: sem rolagem horizontal + quebra agressiva */
  #phys-scatter-interpret-modal .modal-body,
  #phys-scatter-options-modal .modal-body,
  #phys-scatter2-interpret-modal .modal-body,
  #phys-scatter2-options-modal .modal-body,
  #phys-glossary-modal .modal-body {
    overflow-x: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;   /* quebra mesmo sem espaço */
    word-break: break-word !important;

    /* Afastamento das bordas (mobile) */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 2) Elementos internos comuns (UL/LI/SPAN/P/DIV) também podem quebrar */
  #phys-scatter-interpret-modal .modal-body *,
  #phys-scatter-options-modal .modal-body *,
  #phys-scatter2-interpret-modal .modal-body *,
  #phys-scatter2-options-modal .modal-body *,
  #phys-glossary-modal .modal-body * {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  /* 3) Justificar parágrafos (Visão/Glossário) */
  #phys-scatter-interpret-modal .modal-body p,
  #phys-scatter2-interpret-modal .modal-body p,
  #phys-glossary-modal .modal-body p {
    text-align: justify !important;
    text-justify: inter-word !important;
  }

  /* 4) Labels de Radio/Checklist (Opções) – permitir múltiplas linhas */
  #phys-scatter-options-modal label,
  #phys-scatter2-options-modal label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 5) Listas: padding suave e sem “empurrar” a largura */
  #phys-scatter-interpret-modal .modal-body ul,
  #phys-scatter-options-modal .modal-body ul,
  #phys-scatter2-interpret-modal .modal-body ul,
  #phys-scatter2-options-modal .modal-body ul,
  #phys-glossary-modal .modal-body ul,
  #phys-scatter-interpret-modal .modal-body ol,
  #phys-scatter-options-modal .modal-body ol,
  #phys-scatter2-interpret-modal .modal-body ol,
  #phys-scatter2-options-modal .modal-body ol,
  #phys-glossary-modal .modal-body ol{
    padding-left: 14px !important;
    margin-left: 0 !important;
  }

  /* 6) Zera margens laterais que forcem “deslocamento” */
  #phys-scatter-interpret-modal .modal-body p,
  #phys-scatter-interpret-modal .modal-body div,
  #phys-scatter-interpret-modal .modal-body span,
  #phys-scatter2-interpret-modal .modal-body p,
  #phys-scatter2-interpret-modal .modal-body div,
  #phys-scatter2-interpret-modal .modal-body span,
  #phys-glossary-modal .modal-body p,
  #phys-glossary-modal .modal-body div,
  #phys-glossary-modal .modal-body span{
    margin-left: 0 !important;
  }
  

}

/* =====================================================
   MODAL 2 — POPUP "Visão" do Descritivo (Glossário): SCROLL (abordagem do Modal-1)
   No Modal-1, o scroll vertical foi resolvido no #glossary-modal .modal-body
   com max-height + overflow-y:auto.
   Aqui aplicamos o mesmo padrão no Modal-2:
   - alvo correto: #phys-glossary-modal (3 parágrafos: Aeróbica/Anaeróbica/Explosiva)
   - mobile only
   - sem mexer em mais nada do Modal-2
===================================================== */

@media (max-width: 768px){

  /* Nunca permitir scroll horizontal */
  #phys-glossary-modal{
    overflow-x: hidden !important;
  }

  /* Corpo rolável (vertical) */
  #phys-glossary-modal .modal-body{
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

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

    /* override do inline padding 20px 40px no mobile */
    padding: 14px 16px !important;
  }

  /* Parágrafos empilhados e (se quebrar) centralizados corretamente */
  #phys-glossary-modal .modal-body p{
    display: block !important;
    margin: 0 0 10px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: justify !important;
    text-justify: inter-word !important;
  }

}