/* ═══════════════════════════════════════════════════════════════════════════
   Responsivo: o kit de tela estreita (DESIGN_SYSTEM.md §4.5).

   Uma tela ADOTA o kit com `{% block corpo_classe %}rsp{% endblock %}`. Tudo
   aqui vale só em quem carrega `.rsp` (o <body> da tela, as raízes da casca
   em topbar.html, um modal em tela cheia): página que não adotou não muda.

   Três combinados, e são eles que mantêm isto fácil de ajustar:

   1. **Os números moram no bloco de tokens abaixo, e só nele.** A tela que
      precisa de outro valor redeclara o token na própria raiz
      (`.gp-central-shell { --rsp-faixa-col: 82%; }`), nunca a regra.
   2. **Os cortes são os quatro da §4.5.1** (575.98 / 767.98 / 991.98 / 1199.98)
      e não viram token: custom property não vale dentro de `@media`. Quem
      cobra é o check RSP-02.
   3. **O kit não disputa com a folha do módulo.** Receita que INVERTE regra do
      módulo (página que passa a rolar, campo com 16px) é escrita no bloco
      "Responsivo" da folha dele, com o seletor dele e os tokens daqui. E o que
      o kit governa em tela estreita (tamanho de diálogo, geometria de gaveta),
      o módulo declara só de 768px para cima.

   O sufixo da classe diz até que faixa a receita vale: `-sm` até 767.98px,
   `-md` até 991.98px. Esconder ou mostrar por largura continua sendo o
   `d-none d-md-*` do Bootstrap.
   ═══════════════════════════════════════════════════════════════════════════ */

.rsp {
  --rsp-toque: 44px;                      /* linha ou ícone que o dedo aciona */
  --rsp-toque-texto: 40px;                /* botão de texto e campo */
  --rsp-margem: 16px;                     /* respiro lateral da página */
  --rsp-campo-fonte: 16px;                /* abaixo disso o iOS dá zoom ao focar */
  /* Painel de uma faixa com encaixe (coluna do quadro). Em % do contêiner, e não
     em vw: é a fresta do painel seguinte que avisa que há mais para o lado. */
  --rsp-faixa-col: min(86%, 340px);
  --rsp-gaveta-larg: min(86vw, 320px);
  --rsp-modal-alt: 100vh;
  --rsp-veu: rgba(15, 23, 42, .45);
  /* Sonda: a faixa que o CSS enxerga. O harness confere que `Responsivo.faixa()` diz o mesmo. */
  --rsp-faixa: "xl";
}
/* `100vh` no celular conta a barra de endereço, e o rodapé do modal some atrás dela. */
@supports (height: 100dvh) {
  .rsp { --rsp-modal-alt: 100dvh; }
}
@media (max-width: 1199.98px) { .rsp { --rsp-faixa: "lg"; } }
@media (max-width: 991.98px) { .rsp { --rsp-faixa: "md"; } }
@media (max-width: 767.98px) { .rsp { --rsp-faixa: "sm"; } }
@media (max-width: 575.98px) { .rsp { --rsp-faixa: "xs"; --rsp-margem: 12px; } }

/* ── Margem da página ─────────────────────────────────────────────────────
   O `base.html` abre um `.container-fluid` e quase toda tela abre outro por
   dentro, cada um com 1.5rem por lado: no celular isso come 96px da largura. */
@media (max-width: 575.98px) {
  .rsp #content > .container-fluid { padding-left: var(--rsp-margem); padding-right: var(--rsp-margem); }
  .rsp #content > .container-fluid > .container-fluid { padding-left: 0; padding-right: 0; }
}

/* ── Faixa: uma linha que rola de lado ────────────────────────────────────
   Para barra de controles e abas: em vez de empilhar em quatro linhas, fica
   numa só, que desliza. O filho cortado na borda é o aviso de que há mais. */
@media (max-width: 767.98px) {
  .rsp .rsp-faixa-sm {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .rsp .rsp-faixa-sm::-webkit-scrollbar { display: none; }
  .rsp .rsp-faixa-sm > * { flex-shrink: 0; }

  /* Encaixe: coleção de painéis (as colunas de um quadro), um por vez. A
     largura do painel é `--rsp-faixa-col`: sobra uma fresta do próximo. */
  .rsp .rsp-encaixe-sm { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .rsp .rsp-encaixe-sm > * {
    flex: 0 0 var(--rsp-faixa-col);
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
  }
}

/* ── Gaveta: painel lateral que passa a abrir por cima ────────────────────
   Contexto (lista, filtro, resumo) não pode subir para o topo da página no
   celular, que é o lugar mais caro da tela (§4.5.4). Fica fora, e um botão o
   traz. Quem abre e fecha é `Responsivo.gaveta()`; a cor de fundo é do módulo. */
@media (max-width: 991.98px) {
  .rsp .rsp-gaveta-md {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    width: var(--rsp-gaveta-larg);
    max-width: none;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 40px rgba(15, 23, 42, .28);
    transform: translateX(-100%);
    /* `visibility` junto do `transform`: fechada, não recebe foco nem leitor de tela. */
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .rsp .rsp-gaveta-md.rsp-gaveta-aberta {
    transform: none;
    visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }
}
.rsp .rsp-veu {
  position: fixed;
  inset: 0;
  z-index: 1044;
  background: var(--rsp-veu);
}

/* ── Modal em tela cheia ──────────────────────────────────────────────────
   Para o modal principal da tela: `class="modal fade rsp rsp-modal-cheio-sm"`.
   O `rsp` vai no próprio modal porque uma parcial de modal é incluída por mais
   de uma tela, e nem toda tela adotou o kit. Diálogo pequeno, de confirmação,
   continua sendo o cartão centrado do Bootstrap.
   ⚠️ A folha do módulo declara o tamanho do diálogo só de 768px para cima:
   regra com `#id` ganharia daqui e o modal voltaria a ter margem. */
@media (max-width: 767.98px) {
  .rsp-modal-cheio-sm .modal-dialog {
    width: 100%;
    max-width: none;
    height: var(--rsp-modal-alt);
    margin: 0;
  }
  .rsp-modal-cheio-sm .modal-content {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .rsp-modal-cheio-sm .modal-body { flex: 1 1 auto; min-height: 0; }
  /* Ação principal por último e ocupando a sobra (§4.5.7). */
  .rsp-modal-cheio-sm .modal-footer { flex-wrap: wrap; gap: 8px; padding: 10px var(--rsp-margem); }
  .rsp-modal-cheio-sm .modal-footer > * { margin: 0; }
}

/* ── Dedo não é ponteiro fino (§4.5.6) ────────────────────────────────────
   A consulta é de capacidade do ponteiro, não de largura: não muda o desktop,
   e vale para o tablet deitado. Botão e ícone desenhados pelo módulo entram no
   bloco "Responsivo" da folha dele, com os mesmos tokens. */
@media (pointer: coarse) {
  .rsp .form-control,
  .rsp .custom-select { min-height: var(--rsp-toque-texto); }
  .rsp .rsp-toque { min-width: var(--rsp-toque); min-height: var(--rsp-toque); }
}

/* ── Campo que a pessoa digita no celular ─────────────────────────────────
   Campo com fonte declarada por `#id` na folha do módulo precisa da mesma
   linha lá: daqui ele não é alcançado. */
@media (max-width: 767.98px) {
  .rsp .form-control,
  .rsp .custom-select { font-size: var(--rsp-campo-fonte); }
}

@media (prefers-reduced-motion: reduce) {
  .rsp .rsp-gaveta-md,
  .rsp .rsp-gaveta-md.rsp-gaveta-aberta { transition: none; }
}