/* =====================================================================
   AIPFN · responsive.css — ajustes para telas pequenas (mobile/tablet).
   Carregado POR ÚLTIMO (depois de todos os CSS) para poder sobrepor. As
   correções de "texto que não quebra" (grids minmax(0,1fr), overflow-wrap)
   vivem no próprio componente; aqui ficam os empilhamentos por breakpoint.
   ===================================================================== */

/* ---- tablet (≤ 900px) ---- */
@media (max-width: 900px) {
  .app-view { padding: 14px; }
  .charts-sec .cgrid { grid-template-columns: 1fr; }
}

/* ---- celular (≤ 600px) ---- */
@media (max-width: 600px) {
  .app-view { padding: 12px; }

  /* header compacto e que quebra linha */
  .app-header { gap: 8px; padding: 9px 11px; }
  .app-brand { font-size: 14px; }
  .app-brand small { font-size: 10px; }
  .app-acct { gap: 8px; padding: 5px 9px; }
  .app-ctx { gap: 8px; width: 100%; order: 3; }
  .app-ctx-item select { width: 100%; }

  /* títulos e seções */
  .ini-h { font-size: 19px; }

  /* toolbar: busca ocupa a linha, selects quebram embaixo */
  .toolbar { gap: 8px; }
  .toolbar input[type=text] { flex: 1 1 100%; min-width: 0; }
  .toolbar select { flex: 1 1 auto; }
  .toolbar .count { margin-left: 0; }

  /* KPIs: no máximo 2 por linha, sem estourar */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi .val { font-size: 22px; }

  /* modal compartilhado: uma coluna, mais largo */
  .modal-bg { padding: 10px; align-items: flex-start; }
  .modal { max-height: 94dvh; }
  .modal-bd { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .fld.full { grid-column: auto; }
  .modal-hd, .modal-ft { padding-left: 16px; padding-right: 16px; }

  /* ficha / cartões-overlay viram tela cheia */
  .ficha-bg { padding: 0; align-items: stretch; }
  .ficha { max-width: 100%; max-height: 100dvh; border-radius: 0; }
  .ficha-hd { padding: 14px 16px; font-size: 15px; }
  .ficha-bd { padding: 14px 16px; }
  .ficha-top { flex-wrap: wrap; }
  .aval-card { max-width: 100%; }

  /* progresso por unidade (Resumo): não estourar a largura */
  .db-urow { gap: 9px; }
  .db-un { width: 92px; font-size: 12px; }
  .db-uct { min-width: auto; }

  /* qualificação MOC/DES/IAC/PAS: deixa os 4 selects fluírem */
  .stages-edit .stg { flex: 1 1 calc(50% - 8px); }
  .stages-edit .stg select { width: 100%; }
}

/* ---- celular pequeno (≤ 380px) ---- */
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr; }
  .db-un { width: 100%; }
  .db-urow { flex-wrap: wrap; }
  .db-uct { width: 100%; text-align: left; }
}