/* ══ RESPONSIVIDADE GLOBAL — Fase 3 ══ */
/* Carregado por último para sobrepor onde necessário, sem alterar regras existentes que já funcionam. */

/* Tablets e telas médias */
@media (max-width: 768px){
  .page{ padding-left:12px; padding-right:12px; }
}

/* Celulares grandes/médios (≤480px) */
@media (max-width: 480px){
  .modal{ padding:20px 14px 34px; }
  .result-card .rc-value{ font-size:20px; }
  .breakdown-row{ font-size:12px; }
  .pf-btn{ font-size:11px; padding:6px 12px; }
  /* Linhas de campos lado-a-lado podem apertar: garante respiro */
  .field-label{ font-size:12px; }
}

/* Celulares pequenos (≤360px) */
@media (max-width: 360px){
  .page{ padding-left:10px; padding-right:10px; }
  .modal{ padding:18px 12px 32px; }
  .result-card .rc-value{ font-size:18px; }
  .rc-label{ font-size:11px; }
  .bnav-btn span{ font-size:8px; }
  .bnav-btn svg{ width:18px; height:18px; }
  .breakdown-row{ font-size:11px; }
  .hi-pill{ font-size:10px; padding:2px 7px; }
}

/* Celulares muito pequenos (≤320px) */
@media (max-width: 320px){
  .page{ padding-left:8px; padding-right:8px; }
  .result-card .rc-value{ font-size:16px; }
  .bnav-btn span{ font-size:7px; }
  .pf-btn{ font-size:10px; padding:6px 10px; }
  /* Evita que linhas de 2 campos estourem */
  .modal input, .modal select{ font-size:13px; }
}

/* Garante que linhas flex de campos quebrem se faltar espaço (sem afetar desktop) */
@media (max-width: 360px){
  .modal > div[style*="display:flex"][style*="gap"]{ flex-wrap:wrap; }
}