/* GranaFoco - rolagem mobile sem indicador lateral e sem deslocamento horizontal.
   Mantem a rolagem vertical por toque, teclado e tecnologias assistivas. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* Grid/flex devem poder reduzir ao espaço real do dispositivo. */
#app, .shell, .main, .main .content, .content,
.ef-page, .ef-sim, .ef-simulator-unified,
.ef-controls, .ef-results, .ef-projection-more,
.ef-projection-body, .smc-shell, .smc-chart-wrap,
.smc-pro-toolbar, .smc-comparison, .page-head,
.admin-shell, .admin-main, .admin-content {
  min-width: 0;
  max-width: 100%;
}
/* Os gráficos não podem aumentar a largura da página; conservam a proporção. */
.ef-plot, .ef-chart, .smc-svg, .smc-chart-wrap,
.ef-projection-more, .ef-projection-body {max-width: 100%;}
.ef-plot svg, .smc-chart-wrap svg, .ef-page canvas,
.smc-shell canvas, .content img, .content video {max-width:100%;}
/* Tabelas amplas rolam somente no próprio bloco, sem arrastar a página inteira. */
.ef-table-scroll, .ef-milestones .ef-table-scroll,
.smc-table-scroll, .table-wrap, .table-scroll,
.data-wrap, .table-responsive {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media(max-width: 900px) {
  /* Oculta somente o desenho da barra; NAO desativa a rolagem vertical. */
  html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  /* Evita que containers aninhados originem uma segunda barra lateral. */
  .shell, .main, .content, .ef-page, .ef-sim-modern,
  .ef-simulator-unified, .ef-results, .ef-projection-more,
  .smc-shell {min-width:0; max-width:100%;}
  .ef-sim-modern .ef-income-header > div:first-child,
  .ef-patrimony-summary > div,
  .ef-projection-more > summary > span,
  .ef-compound-head > div, .smc-chart-title > * {
    min-width: 0;
  }
  .ef-sim-modern .ef-income-header h3,
  .ef-sim-modern .ef-patrimony-summary strong,
  .ef-projection-more strong,
  .ef-page .ef-strong,
  .smc-shell strong, .page-head h1 {
    overflow-wrap: anywhere;
  }
  .ef-page .ef-table-scroll, .smc-table-scroll,
  .table-wrap, .table-scroll, .data-wrap, .table-responsive {
    overscroll-behavior-x: contain;
  }
}
@media(max-width: 480px) {
  .ef-page .ef-hero, .ef-page .ef-sim,
  .ef-page .ef-explain, .ef-page .ef-footer {
    max-width:100%;
  }
  .ef-sim-modern .ef-monthly-strip,
  .ef-sim-modern .ef-compare-grow,
  .ef-patrimony-breakdown,
  .ef-results .ef-three {
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ef-results .ef-three > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .ef-page .ef-tax-values {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ef-income-header .ef-pill {flex-shrink:0;}
  .ef-patrimony-summary, .ef-projection-body,
  .ef-monthly-strip > div, .ef-compare-grow > div {min-width:0;}
  .ef-page .ef-options-open .ef-options-fields > div {min-width:0;}
}


/* QA geral: evitar botões unidos, texto em cima de cards e transbordamento lateral. */
.shell .content,.shell .main,.shell .page-head,.shell .stat-grid,.shell .overview-grid{min-width:0;max-width:100%}
.shell .content .btn{max-width:100%;line-height:1.35;overflow-wrap:anywhere;text-align:center}
.shell .overview-head-actions{display:flex;gap:12px;row-gap:12px;flex-wrap:wrap}
.shell .overview-head-actions .btn{min-width:0;flex:1 1 220px;min-height:48px;white-space:normal}
.shell .expense-shell-actions{display:flex;flex-wrap:wrap;gap:11px;row-gap:11px}
.shell .expense-shell-actions .btn{min-height:43px;white-space:normal;margin:0}
.shell .expense-overview-grid>*{min-width:0;overflow-wrap:anywhere}
.shell .modal-action{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.shell .modal-action .btn{flex:1 1 160px;min-height:45px;white-space:normal}
.shell .page-head-actions{display:flex;gap:12px;flex-wrap:wrap}
.shell .smc-pro-toolbar .smc-modes{max-width:100%}
.shell .smc-pro-toolbar .smc-modes button{white-space:normal;min-width:0}
.shell .smc-summary-pro>div{min-width:0}
.shell .sm-expenses-panel-head{flex-wrap:wrap;gap:12px}
.shell .sm-expenses-panel-actions{display:flex;gap:10px;flex-wrap:wrap}
.shell .sm-expenses-form-actions{gap:11px}
.shell .sm-expenses-form-actions .btn{min-width:0;white-space:normal}
@media(max-width:680px){
 .shell .overview-head-actions{display:grid;grid-template-columns:1fr;gap:12px}
 .shell .overview-head-actions .btn{width:100%;min-width:0}
 .shell .expense-shell-actions{display:grid;grid-template-columns:1fr;gap:10px}
 .shell .expense-shell-actions .btn{width:100%;min-width:0}
 .shell .modal-action .btn{flex:1 1 120px}
}


/* Polimento transversal: impedir sobreposição sem alterar dados ou navegação. */
.shell,.main,.content,.ef-page,.expense-overview-shell,.sm-expenses,.smp-public{min-width:0}
.content :is(.card,.panel,.ef-explain,.ef-sim,.ef-product,.expense-overview-card){min-width:0;max-width:100%}
.content :is(h1,h2,h3,p,small,strong,button){overflow-wrap:break-word}
.content :is(.modal-action,.panel-head,.page-head-actions,.overview-head-actions,.sm-expenses-panel-head){gap:12px}
.content :is(.modal-action,.overview-head-actions)>.btn{min-width:0}
@media(max-width:680px){.content :is(.modal-action,.page-head-actions,.overview-head-actions){gap:9px}.content :is(.ef-page,.sm-expenses){overflow-x:clip}.ef-page .ef-hero-tags{gap:6px}}

/* Evolução financeira: comparação mensal entre economias e gastos. */
.smc-shell .smc-bar-deposit{fill:#55d9a9}
.smc-shell .smc-bar-expense{fill:#e56e77}
.smc-shell .smc-legend-saving,.smc-shell .smc-saving-number{color:#70e4b7}
.smc-shell .smc-legend-expense,.smc-shell .smc-expense-number{color:#f7a4ac}
.smc-shell .smc-chart-key{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.smc-shell .smc-summary-pro strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.smc-shell .smc-tooltip .smc-expense-number,.smc-shell .smc-tooltip .smc-saving-number{display:block;font-size:12px;font-weight:700}
@media(max-width:680px){.smc-shell .smc-modes{width:100%}.smc-shell .smc-modes button{white-space:normal;line-height:1.2;font-size:10.5px}.smc-shell .smc-chart-key{justify-content:flex-start}}


/* Despesas devem aparecer vermelhas em todos os temas: evita que a classe global
   .smc-bar do tema escuro sobrescreva a cor das barras de gastos. */
.smc-shell .smc-svg rect.smc-bar.smc-bar-expense,
:root[data-theme="dark"] .smc-shell .smc-svg rect.smc-bar.smc-bar-expense{fill:#de596b!important}
.smc-shell .smc-svg rect.smc-bar.smc-bar-deposit{fill:#55d9a9!important}