/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
════════════════════════════════════════════ */

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
  .main-content { padding: var(--sp-5) var(--sp-4); }

  .vinculo-body {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .total-cotas-num { font-size: var(--text-2xl); }

  .modal-box { max-width: 100%; }

  .admin-grid { grid-template-columns: 1fr; }

  .section-header { flex-direction: column; gap: var(--sp-3); }
  .section-header > div:last-child { width: 100%; }
  .search-input { width: 100%; }
}

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {
  /* Gov bar */
  .gov-bar { display: none; }

  /* Topbar */
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); height: 54px; }
  .topbar-brand-text { display: none; }
  .topbar-brand-logo { width: 32px; height: 32px; font-size: 17px; }

  /* Login */
  .login-wrap { padding: var(--sp-5) var(--sp-3); justify-content: flex-start; padding-top: var(--sp-10); }
  .login-brand { margin-bottom: var(--sp-6); gap: var(--sp-3); }
  .login-logo { width: 52px; height: 52px; font-size: 30px; }
  .login-brand-title { font-size: var(--text-lg); }
  .login-card { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-md); }
  .login-card-title { font-size: var(--text-base); }

  /* Campos de data */
  .date-inputs input { min-height: 48px; font-size: var(--text-md); }
  .date-sep { font-size: var(--text-lg); }

  /* Vínculos */
  .vinculo-body { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4); }
  .vinculo-header { padding: var(--sp-3) var(--sp-4); }
  .vinculo-matricula-num { font-size: var(--text-lg); }
  .vinculo-periodos { padding: var(--sp-3) var(--sp-4); }
  .periodo-row { flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-2) 0; }
  .periodo-horas { margin-left: 0; }

  /* Grade mensal em mobile — fonte menor, sem total lateral */
  .grade-ano-row { grid-template-columns: 38px 1fr; grid-template-rows: auto auto; }
  .grade-ano-total { grid-column: 2; flex-direction: row; align-items: center; gap: 6px; justify-content: flex-start; min-width: unset; margin-top: 2px; }
  .mes-nome { font-size: 9px; }
  .mes-badge { font-size: 8px; padding: 1px 3px; }
  .grade-total-num { font-size: 13px; }
  .grade-total-txt { font-size: 10px; }
  /* Em telas estreitas a grade de 12 meses rola na horizontal em vez de encolher
     as células a ponto de ficarem ilegíveis (mantém o rótulo do mês e o badge). */
  .grade-meses { min-width: 380px; }
  .grade-wrapper { overflow-x: auto; }

  /* Total cotas */
  .total-cotas-box { flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); }
  .total-cotas-num { font-size: var(--text-2xl); }

  /* Botões de ação */
  .contestar-row { flex-direction: column; gap: var(--sp-3); }
  .acao-col { min-width: 0; }

  /* Painel título */
  .painel-titulo { font-size: var(--text-xs); padding: var(--sp-2) var(--sp-3); }

  /* Modais */
  .modal-overlay { padding: var(--sp-3) var(--sp-2); align-items: flex-end; }
  .modal-box {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    animation: modal-in-mobile .2s ease;
  }
  @keyframes modal-in-mobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .modal-header { padding: var(--sp-4) var(--sp-4); }
  .modal-body   { padding: var(--sp-4) var(--sp-4); }
  .modal-footer { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column-reverse; gap: var(--sp-2); }
  .modal-footer .btn { width: 100%; }
  .modal-campos { grid-template-columns: 1fr; }
  .modal-box-lg { max-width: 100%; }

  /* Admin */
  .admin-grid { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; gap: var(--sp-3); }
  .section-header > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .search-input { width: 100%; }

  /* Tabela — scroll horizontal */
  .table-wrap { border-radius: var(--r-sm); }
  .hist-table th,
  .hist-table td { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }

  /* Footer */
  .gov-footer { padding: var(--sp-4) var(--sp-3); margin-top: var(--sp-8); }

  /* Botão sair menor */
  .btn-sair { font-size: 11px; padding: 0 var(--sp-2); }
}

/* ── Badges de carga horária ── */
.badge-carga {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.badge-20h {
  background: var(--c-20h-bg);
  color: var(--c-20h-fg);
}
.badge-gst {
  background: var(--c-gst-bg);
  color: var(--c-gst-fg);
}

/* ── Total de cotas — destaque no rodapé do vínculo ── */
.vinculo-total-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-brand);
  color: var(--c-white);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
}
.vinculo-total-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .9;
}
.vinculo-total-num {
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
}

/* ── Modal largo (ciência + dados bancários) ── */
.modal-box-lg { max-width: 680px; }

/* Checkbox ciência */
.ciencia-check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: border-color .15s, background .15s;
}
.ciencia-check-label:hover { border-color: var(--c-brand-lt); background: rgba(23,69,141,.04); }
.ciencia-check-label span { font-size: var(--text-sm); color: var(--c-text); line-height: 1.6; }

/* ── Muito pequeno (≤ 380px — telas antigas) ── */
@media (max-width: 380px) {
  .login-card { padding: var(--sp-4) var(--sp-3); }
  .date-inputs { gap: var(--sp-1); }
  .date-sep { font-size: var(--text-base); }
  .vinculo-cotas-num { font-size: var(--text-lg); }
  .total-cotas-num { font-size: var(--text-xl); }
}