/* Tema do painel: escuro (slate), vidro (.glass) e cor por cargo, recriado
   do dashboard sem Tailwind. Sem fontes nem imagens externas (PNL-05). */

:root {
  color-scheme: dark;
  --fundo: #0f172a;
  --texto: #f8fafc;
  --texto-2: #cbd5e1;
  --texto-3: #94a3b8;
  --texto-4: #64748b;
  --borda: rgba(255, 255, 255, 0.1);
  --borda-2: #334155;
  --campo: rgba(15, 23, 42, 0.5);
  --painel: #1e293b;
  --blue: #3b82f6;
  --blue-claro: #60a5fa;
  --emerald: #10b981;
  --emerald-claro: #34d399;
  --amber: #f59e0b;
  --amber-claro: #fbbf24;
  --rose: #f43f5e;
  --rose-claro: #fb7185;
  --indigo: #6366f1;
  --indigo-claro: #818cf8;
  --raio: 16px;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
}

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
input { font: inherit; color: inherit; }

.icone { flex-shrink: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.glass {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borda);
}

.pagina { padding: 16px; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .pagina { padding: 32px; } }

/* Cores por cargo / card: uma variável que os filhos usam. */
.cor-blue { --cor: var(--blue); --cor-clara: var(--blue-claro); }
.cor-emerald { --cor: var(--emerald); --cor-clara: var(--emerald-claro); }
.cor-amber { --cor: var(--amber); --cor-clara: var(--amber-claro); }
.cor-rose { --cor: var(--rose); --cor-clara: var(--rose-claro); }
.cor-indigo { --cor: var(--indigo); --cor-clara: var(--indigo-claro); }
[data-cor="blue"] { --cor: var(--blue); --cor-clara: var(--blue-claro); }
[data-cor="emerald"] { --cor: var(--emerald); --cor-clara: var(--emerald-claro); }
[data-cor="amber"] { --cor: var(--amber); --cor-clara: var(--amber-claro); }

.rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--texto-4); letter-spacing: 0.05em;
}

.secao-titulo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 24px; }
.secao-titulo .icone { color: var(--texto-3); }
.secao-subtitulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--blue-claro); padding: 0 4px; }

/* Botões */
.botao-primario, .botao-perigo, .botao-secundario, .botao-fechar, .botao-verde, .botao-indigo,
.botao-iniciar, .botao-parar, .botao-mini, .botao-pausa, .botao-rebaixar {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px; padding: 8px 16px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  transition: background 0.15s, border-color 0.15s;
}
.botao-primario { background: #2563eb; }
.botao-primario:hover:not(:disabled) { background: var(--blue); }
.botao-perigo { background: rgba(244, 63, 94, 0.2); color: var(--rose-claro); border-color: rgba(244, 63, 94, 0.3); }
.botao-perigo:hover { background: rgba(244, 63, 94, 0.4); }
.botao-secundario, .botao-fechar { background: var(--painel); color: var(--texto-2); border-color: var(--borda-2); }
.botao-secundario:hover, .botao-fechar:hover { background: var(--borda-2); }
.botao-remover:hover { background: #e11d48; }
.botao-verde { background: #059669; }
.botao-verde:hover { background: var(--emerald); }
.botao-indigo { background: #4f46e5; padding: 8px 24px; }
.botao-indigo:hover { background: var(--indigo); }
.botao-rebaixar { background: var(--painel); border-color: var(--borda-2); padding: 4px 10px; }

/* Cabeçalho */
.cabecalho { display: flex; flex-direction: column; gap: 16px; }
.cabecalho-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--raio); background: rgba(30, 41, 59, 0.5); border: 1px solid var(--borda); }
.cabecalho-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.status-api { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rose-claro); }
.status-api.conectado { color: var(--emerald-claro); }
.rotulo-status { color: var(--texto-4); }
.status-geral { font-weight: 700; color: var(--rose-claro); }
.status-geral.conectado { color: var(--emerald-claro); }
.cabecalho-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.botao-mini { background: var(--painel); border-color: var(--borda-2); padding: 6px 12px; border-radius: 8px; }
.botao-mini:hover { background: var(--borda-2); }
.botao-mini.botao-pausa { background: #d97706; border-color: transparent; }
.botao-mini.botao-pausa.pausado { background: #059669; }
.botao-mini.botao-fotos { background: rgba(99, 102, 241, 0.2); color: var(--indigo-claro); border-color: rgba(99, 102, 241, 0.3); }
.botao-mini.botao-verde { background: rgba(16, 185, 129, 0.2); color: var(--emerald-claro); border-color: rgba(16, 185, 129, 0.3); }
.sync { font-size: 10px; color: var(--texto-4); font-family: ui-monospace, monospace; }
/* Abaixo de 768 px os atalhos e o Sync ficam atrás do MENU; a partir de 768 px o
   grupo some do layout (display: contents) e a barra fica como antes (RSP-18..20, RSP-27). */
.cabecalho-menu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .cabecalho-menu { flex-basis: 100%; }
  .cabecalho-menu:not(.aberto) { display: none; }
}
@media (min-width: 768px) {
  .botao-menu { display: none; }
  .cabecalho-menu { display: contents; }
}

/* Stats */
.stats { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* 2 colunas até 1279 px, onde 4 cortavam "Erros / Bloqueios" e "Finalizados"; 4 a partir de 1280 px (RSP-25). */
@media (min-width: 768px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-card { padding: 12px 16px; border-radius: var(--raio); border-left: 4px solid var(--cor); }
.stat-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.stat-icone { padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--cor) 20%, transparent); color: var(--cor-clara); display: flex; }
.stat-rotulo { font-size: 13px; color: var(--texto-3); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-valor { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.stat-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--emerald-claro); }
.ponto-live { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-claro); animation: pulsar 1s infinite; }
.stat-botao { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--cor) 20%, transparent); color: var(--cor-clara); border: 1px solid color-mix(in srgb, var(--cor) 30%, transparent); white-space: nowrap; }
@keyframes pulsar { 50% { opacity: 0.4; } }

/* Cards dos cargos: 1 coluna, 2 no médio e até 6 (--colunas) no grande. */
.painel-cargos-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.painel-cargos-topo .secao-titulo { margin-bottom: 0; }
.painel-cargos-todos:disabled { opacity: 0.5; cursor: not-allowed; }
.grade-cargos { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .grade-cargos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Até --colunas colunas, só as que cabem com card ≥ 300 px (RSP-29, RSP-34); os 0,5 px absorvem arredondamento. */
@media (min-width: 1024px) {
  .grade-cargos { grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - (var(--colunas, 1) - 1) * 24px) / var(--colunas, 1) - 0.5px)), 1fr)); }
}
.cargo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-cargo { padding: 20px; border-radius: var(--raio); border-top: 4px solid var(--cor); display: flex; flex-direction: column; gap: 16px; }
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.card-titulo .icone { color: var(--cor-clara); }
.card-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--painel); color: var(--texto-4); }
.card-status.ativo { background: color-mix(in srgb, var(--cor) 20%, transparent); color: var(--cor-clara); }
.card-ufs-copias { font-size: 10px; color: var(--texto-3); font-weight: 700; }
.card-controles { display: flex; flex-direction: column; gap: 12px; }
.card-linha { display: flex; align-items: flex-end; gap: 8px; }
.card-loop .card-linha { align-items: center; }
.card-instancias { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.card-acao { display: flex; }
.botao-iniciar { background: color-mix(in srgb, var(--cor) 85%, black); padding: 8px 24px; border-radius: 6px; }
.botao-iniciar:hover { background: var(--cor); }
.botao-parar { background: var(--borda-2); padding: 8px 24px; border-radius: 6px; }
.botao-parar:hover { background: #e11d48; }
.card-loop { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(51, 65, 85, 0.5); }
.card-loop label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--texto-2); flex: 1; }
.card-loop input[type="checkbox"] { accent-color: var(--blue); width: 16px; height: 16px; }
.card-selo { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(37, 99, 235, 0.5); }
.card-intervalo { display: flex; flex-direction: column; gap: 8px; }
.card-intervalos { display: flex; gap: 6px; }
.botao-intervalo { flex: 1; font-size: 10px; font-weight: 700; padding: 4px 0; border-radius: 6px; background: var(--painel); border: 1px solid var(--borda-2); color: var(--texto-3); }
.botao-intervalo.selecionado { background: #2563eb; border-color: var(--blue); color: var(--texto); }
.card-copia { display: flex; gap: 8px; }
.card-copia button { flex: 1; border-radius: 6px; }
.card-erro { font-size: 10px; font-weight: 700; color: var(--rose-claro); padding: 8px; border-radius: 6px; background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.2); }
.cargo-console { display: flex; flex-direction: column; }
.cargo-console-titulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0 8px; margin-bottom: 4px; color: var(--cor-clara); }

/* Console e logs */
.console, .log-caixa {
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
}
.console { height: 192px; }
.log-caixa { height: 60vh; }
.log-linha { white-space: pre-wrap; word-break: break-all; color: var(--texto-3); }
.log-erro { color: #f87171; }
.log-salvo { color: #4ade80; }
.log-fila { color: var(--blue-claro); }
.log-vazio { color: var(--texto-4); font-style: italic; }
.log-contagem { font-size: 10px; color: var(--texto-4); }
.log-sincronizar { display: flex; flex-direction: column; gap: 4px; }
.log-sincronizar p { font-size: 10px; color: var(--texto-4); }

/* Fotos */
.selo-executando { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(99, 102, 241, 0.2); color: var(--indigo-claro); border: 1px solid rgba(99, 102, 241, 0.3); }
.fotos-opcoes { display: flex; flex-direction: column; gap: 16px; }
.fotos-cargos { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos-nota { font-size: 10px; color: var(--texto-4); text-align: center; flex: 1; }
.fotos-destinos { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); }

/* Modais */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.modal { position: relative; width: 100%; max-width: 672px; max-height: 90vh; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); }
.modal-log .modal, .modal-erros .modal, .modal-finalizados .modal { max-width: 1024px; }
.modal-fotos .modal { max-width: 832px; }
.modal-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--borda); background: rgba(255, 255, 255, 0.05); }
.modal-titulo { display: flex; align-items: center; gap: 12px; }
.modal-titulo h2 { font-size: 20px; font-weight: 700; }
.modal-icone { padding: 8px; border-radius: 8px; background: rgba(59, 130, 246, 0.2); color: var(--blue-claro); display: flex; }
.modal-subtitulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-4); }
.modal-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.modal-x { background: none; border: 0; padding: 8px; border-radius: 50%; color: var(--texto-3); display: flex; }
.modal-x:hover { background: var(--borda); }
.modal-corpo { flex: 1; overflow-y: auto; padding: 24px; }
.modal-rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--borda); background: rgba(15, 23, 42, 0.8); }
.modal-rodape-texto { flex: 1; }
.modal-rodape-botoes { display: flex; gap: 12px; }
.modal-aviso { font-size: 9px; color: var(--texto-4); }
.aviso-rotulo { color: var(--amber); font-weight: 700; text-transform: uppercase; }
.modal-erro { font-size: 12px; font-weight: 700; color: #f87171; margin-bottom: 4px; }
.modal-carregando, .modal-falha { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 256px; text-align: center; }
.modal-carregando { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--texto-4); }
.modal-falha h3 { font-size: 14px; color: var(--texto-2); }
.modal-falha p { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--texto-4); }
.modal-falha-icone { padding: 12px; border-radius: 50%; background: rgba(244, 63, 94, 0.2); color: var(--rose-claro); display: flex; }
.vazio { padding: 48px 0; text-align: center; color: var(--texto-4); }

/* Modais no celular: tela cheia, e as ações descem para uma linha sob o título (RSP-10, RSP-11) */
@media (max-width: 639px) {
  .modal-overlay { padding: 0; }
  .modal-overlay .modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .modal-cabecalho { flex-wrap: wrap; }
  .modal-titulo { flex: 1; min-width: 0; }
  .modal-acoes { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .modal-acoes:empty { display: none; }
}

/* Formulários */
.campo, .campo-filtro {
  width: 100%; padding: 8px 16px; border-radius: 12px; font-size: 14px;
  background: var(--campo); border: 1px solid rgba(51, 65, 85, 0.5); outline: none;
}
.campo:focus, .campo-filtro:focus { border-color: var(--blue); }
.campo:disabled { opacity: 0.5; }
.campo-filtro { margin-bottom: 16px; }
.abas-turno { display: flex; gap: 8px; margin-bottom: 12px; }
.abas-turno [aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.campo-rps { color: var(--amber-claro); font-weight: 700; }
.card-cargo .campo { padding: 6px 10px; border-radius: 6px; }
.card-cargo .campo:focus { border-color: var(--cor); }
.form-config { display: flex; flex-direction: column; gap: 32px; }
.secao-config, .secao-cargos { display: flex; flex-direction: column; gap: 16px; }
.campo-bloco { display: flex; flex-direction: column; gap: 4px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grupo-firebase { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.grupo-firebase legend { margin-bottom: 4px; }
.opcao { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 14px; background: var(--campo); border: 1px solid rgba(51, 65, 85, 0.5); cursor: pointer; }
.apis-lista { display: flex; flex-direction: column; gap: 8px; }
.api-linha { display: grid; grid-template-columns: 1fr 2fr 1.5fr auto auto auto; gap: 8px; align-items: center; }
.api-aviso { font-size: 12px; color: var(--amber-claro); white-space: nowrap; }
.apis-vazio { font-size: 13px; color: var(--texto-3); margin: 0; }
/* Configuração no celular: campos da API empilhados e Ativa/aviso/Remover numa linha
   abaixo deles; aviso do rodapé numa linha acima dos botões (RSP-06..08) */
@media (max-width: 639px) {
  .api-linha { display: flex; flex-wrap: wrap; }
  .api-linha > .campo { flex-basis: 100%; }
  .api-aviso { flex: 1; white-space: normal; }
  .modal-rodape-texto { flex-basis: 100%; }
  .modal-rodape-botoes { margin-left: auto; }
}
/* Bloco "Envio às APIs" abaixo dos cards de stats (STC-01). */
.envio-api { --cor: var(--blue); --cor-clara: var(--blue-claro); grid-column: 1 / -1; padding: 10px 16px; border-radius: var(--raio); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.envio-api-topo { display: flex; align-items: center; gap: 12px; }
.envio-api-titulo { font-size: 13px; font-weight: 700; color: var(--texto-2); margin: 0; white-space: nowrap; }
.envio-api-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.envio-api-linha { display: flex; align-items: baseline; gap: 8px; color: var(--texto-2); }
/* Nome inteiro, sem quebrar no hífen (RSP-26). */
.envio-api-nome { font-weight: 700; font-family: ui-monospace, monospace; white-space: nowrap; }
.envio-api-linha--aviso { color: var(--amber-claro); }
.envio-api-linha--erro { color: var(--rose-claro); }
.envio-api-linha--inativa { color: var(--texto-4); }
.envio-api-vazio { color: var(--texto-3); }
.grupo-cargo { padding: 16px; border-radius: var(--raio); border: 1px solid rgba(51, 65, 85, 0.3); background: rgba(15, 23, 42, 0.4); display: flex; flex-direction: column; gap: 12px; margin: 0; }
.grupo-cargo legend { padding: 0 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-2); }
.campo-cargo-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.herdar { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--texto-4); }
.campo-erro { margin-top: 4px; font-size: 10px; color: var(--rose-claro); }
.grade-concorrentes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .grade-concorrentes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.concorrente { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border-radius: var(--raio); background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(51, 65, 85, 0.3); color: var(--texto-4); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.concorrente.ligado { background: rgba(37, 99, 235, 0.1); border-color: rgba(59, 130, 246, 0.5); color: var(--blue-claro); }
.concorrente-check { padding: 8px; border-radius: 50%; background: var(--painel); display: flex; }
.concorrente-check .icone { opacity: 0; }
.concorrente.ligado .concorrente-check { background: rgba(59, 130, 246, 0.2); }
.concorrente.ligado .concorrente-check .icone { opacity: 1; }

/* Duplicar */
.grade-ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.uf { padding: 8px; border-radius: 8px; background: var(--campo); border: 1px solid rgba(51, 65, 85, 0.5); font-size: 12px; font-weight: 700; }
.uf label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.uf.ocupada,
.uf.fora-2t { opacity: 0.5; }
.uf-dona { display: block; font-size: 9px; color: var(--texto-4); font-weight: 400; }

/* Erros e finalizados */
.lista-erros, .lista-finalizados { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none; }
.item-erro, .item-finalizado { padding: 12px 16px; border-radius: 12px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(51, 65, 85, 0.5); font-size: 12px; }
.item-finalizado { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.item-erro-topo, .item-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etiqueta, .item-uf { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--painel); color: var(--texto-2); }
.item-data { font-size: 10px; color: var(--texto-4); }
.item-url, .item-nome { font-family: ui-monospace, monospace; word-break: break-all; color: var(--texto-3); }
.item-mensagem { color: var(--rose-claro); word-break: break-word; }
.item-info { min-width: 0; flex: 1; }

/* Alvos de toque e campos no celular: controles com ≥ 32 px de altura, checkboxes
   de 20 px e fonte de 16 px nos campos, abaixo da qual o iOS dá zoom ao focar (RSP-22..24). */
@media (max-width: 767px) {
  button, select, .campo, .campo-filtro { min-height: 32px; }
  input[type="checkbox"], .card-loop input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
  .campo, .campo-filtro, .card-cargo .campo, select { font-size: 16px; }
}