/* Agenda ACS Guamaré: camada responsiva aplicada por cima dos dois módulos.
   Carregada no fim do <head>, depois do CSS de cada agendador, para poder ajustá-lo.
   Alvos testados: MacBook Air (1470 px), iPad 11" (820 e 1180 px),
   iPhone 17 (402 px) e iPhone 17 Pro Max (440 px). */

/* ---------- toque (iPhone e iPad) ---------- */
@media (pointer: coarse), (max-width: 900px) {
  /* Abaixo de 16 px o Safari dá zoom sozinho ao tocar no campo e a página "pula". */
  input, select, textarea { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

  /* Ícones pequenos (ver, baixar, remover) com área de toque de verdade. */
  button.x, .chip .x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .btn, button.btn, select { min-height: 44px; }
  button.link { min-height: 36px; }
}

/* ---------- formulários ---------- */
.grid > *, .row2 > * { min-width: 0; }
.grid input, .grid select, .grid textarea, .row2 input, .row2 select, .row2 textarea { max-width: 100%; }
/* rótulos de tamanhos diferentes não desalinham os campos */
#params .grid { align-items: end; }
@media (min-width: 561px) {
  /* campo de data com espaço para "dd/mm/aaaa" inteiro */
  .grid:has(> div > #cdate) { grid-template-columns: minmax(150px, 170px) minmax(0, 1fr) auto !important; }
}

@media (max-width: 560px) {
  /* parâmetros em duas colunas: vagas lado a lado, início e fim lado a lado */
  #params > .grid, #params details > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  #params > .grid > div:first-child { grid-column: 1 / -1; }

  /* "Datas extras": data e motivo lado a lado, botão embaixo ocupando a linha */
  .grid:has(> div > #cdate) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .grid:has(> div > #cdate) > div:last-child { grid-column: 1 / -1; }
  .grid:has(> div > #cdate) .btn { width: 100%; }

  /* formulário de excluir criança (C&D) em uma coluna */
  .exform .grid { grid-template-columns: 1fr !important; }
  .exform .grid .btn { width: 100%; white-space: normal; }

  .btn { white-space: normal; }
}

/* ---------- tabelas viram cartões no celular ---------- */
@media (max-width: 640px) {
  table[data-acs-cartao] { border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 15px !important; }
  table[data-acs-cartao] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table[data-acs-cartao], table[data-acs-cartao] tbody, table[data-acs-cartao] tr, table[data-acs-cartao] td { display: block; width: 100%; }
  table[data-acs-cartao] tr {
    margin: 0 0 12px; padding: 10px 12px; border-radius: 16px;
    border: 2px solid var(--line, #dbe5f6); background: var(--panel, var(--card, #fff));
  }
  table[data-acs-cartao] td {
    display: block; min-width: 0 !important; padding: 7px 0 !important; border: 0 !important;
    border-top: 1px dashed var(--line, #dbe5f6) !important; background: none !important; text-align: left !important;
    overflow-wrap: anywhere;
  }
  table[data-acs-cartao] td:first-child { border-top: 0 !important; padding-top: 2px !important; font-weight: 800; font-size: 16px; }
  table[data-acs-cartao] td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-weight: 700; font-size: 12.5px; color: var(--muted, #5d6890); }
  table[data-acs-cartao] td[data-label=""]::before, table[data-acs-cartao] td:not([data-label])::before { display: none; }
  table[data-acs-cartao] td:empty { display: none; }
  table[data-acs-cartao] td[data-label="#"]::before { display: inline; content: "#"; font-size: inherit; color: inherit; font-weight: 800; }
  /* o contêiner de rolagem lateral deixa de ser necessário */
  .scroll:has(> table[data-acs-cartao]), .tw:has(> table[data-acs-cartao]) { overflow: visible !important; }
}

/* ---------- abertura do C&D: texto legível sobre a ilustração ---------- */
@media (max-width: 900px) {
  .hero .txt {
    background: color-mix(in srgb, var(--panel, #fff) 84%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: 20px; padding: 14px 16px; max-width: 520px;
  }
}

/* ---------- celulares: respiro nas bordas e títulos ---------- */
@media (max-width: 480px) {
  .card { padding-left: 14px !important; padding-right: 14px !important; }
  canvas, img, svg { max-width: 100%; height: auto; }
}

/* ---------- telas largas (MacBook Air, iPad deitado) ---------- */
@media (min-width: 1300px) {
  .wrap { max-width: 1240px; }
}