/* ============================================================
   Cadastro Social — estilos mobile-first
   Namespace: .cs-* para não colidir com o app.js principal
============================================================ */

/* ── overlay / modal principal ── */
#cs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
#cs-overlay.cs-open {
  display: flex;
  pointer-events: auto;
}

/* mobile: bottom-sheet slim */
#cs-modal {
  background: #fff;
  position: relative;
  width: 100%;
  max-width: 420px;
  /* altura fixa para o flex funcionar corretamente com scroll interno */
  height: 88vh;
  height: 88svh;
  max-height: 88vh;
  max-height: 88svh;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,.25);
  pointer-events: auto;
}

/* desktop: centralizado e flutuante */
@media (min-width: 540px) {
  #cs-overlay { align-items: center; }
  #cs-modal {
    border-radius: 14px;
    max-height: 90vh;
    max-height: 90svh;
  }
}

/* ── handles de resize (desktop: cursor de seta; mobile: invisíveis, usa pinça) ── */
.cs-rh {
  position: absolute;
  z-index: 30;
  background: transparent;
}
/* bordas */
.cs-rh-n  { top: 0;    left: 14px; right: 14px; height: 5px; cursor: n-resize; }
.cs-rh-s  { bottom: 0; left: 14px; right: 14px; height: 5px; cursor: s-resize; }
.cs-rh-e  { right: 0;  top: 14px;  bottom: 14px; width: 5px; cursor: e-resize; }
.cs-rh-w  { left: 0;   top: 14px;  bottom: 14px; width: 5px; cursor: w-resize; }
/* cantos */
.cs-rh-ne { top: 0;    right: 0;  width: 14px; height: 14px; cursor: ne-resize; }
.cs-rh-nw { top: 0;    left: 0;   width: 14px; height: 14px; cursor: nw-resize; }
.cs-rh-se { bottom: 0; right: 0;  width: 14px; height: 14px; cursor: se-resize; }
.cs-rh-sw { bottom: 0; left: 0;   width: 14px; height: 14px; cursor: sw-resize; }

/* ── cabeçalho (arrastável) ── */
.cs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  background: #1a6b3a;
  color: #fff;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cs-header:active { cursor: grabbing; }
.cs-drag-hint {
  font-size: 1rem;
  opacity: .6;
  flex-shrink: 0;
}
.cs-header h2 {
  flex: 1;
}
.cs-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-header h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.cs-header-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.cs-header-close:hover { background: rgba(255,255,255,.18); }

/* botão enviar ao servidor fixado no header */
.cs-btn-send-header {
  background: #27ae60;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.cs-btn-send-header:hover   { background: #219a52; }
.cs-btn-send-header:disabled { opacity: .6; cursor: not-allowed; }

/* botão sincronizar pendentes */
.cs-sync-btn {
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-sync-btn:hover { background: rgba(255,255,255,.32); }
.cs-sync-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── botão e dropdown de fotos ── */
.cs-foto-wrap { position: relative; flex-shrink: 0; }
.cs-foto-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  flex-direction: column;
  min-width: 140px;
  z-index: 9999;
  overflow: hidden;
}
.cs-foto-dropdown button {
  background: none;
  border: none;
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
  font-size: .9rem;
  color: #1a3a1a;
  width: 100%;
}
.cs-foto-dropdown button:hover { background: #f0f7f0; }

/* ── faixa de thumbnails de fotos ── */
.cs-fotos-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 12px;
  background: #f5faf5;
  border-bottom: 1px solid #d0e8d0;
}
.cs-foto-thumb {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid #b0d8b0;
}
.cs-foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-foto-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: .75rem;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.cs-foto-remove:hover { background: rgba(200,0,0,.8); }

/* ── banner "pick lote" ── */
#cs-pick-banner {
  display: none;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: #1a6b3a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  gap: 16px;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  white-space: nowrap;
}
#cs-pick-banner button {
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
#cs-pick-banner button:hover { background: rgba(255,255,255,.35); }

/* ── card lote / edificações ── */
.cs-lote-card {
  background: #f0f7f3;
  border-bottom: 1.5px solid #c8e6c9;
  padding: 8px 14px;
  flex-shrink: 0;
}
.cs-lote-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.cs-lote-label {
  color: #1a6b3a;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cs-lote-card-row strong {
  color: #1a6b3a;
  font-size: 0.9rem;
}
.cs-lote-fid {
  color: #888;
  font-size: 0.72rem;
  font-family: monospace;
}
.cs-edif-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cs-edif-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1.5px solid #4caf50;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.78rem;
  color: #1a6b3a;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.cs-edif-chip:hover:not(.cs-edif-chip-active) { background: #e8f5e9; }
.cs-edif-chip b  { font-weight: 700; }
.cs-edif-chip em { font-style: normal; color: #888; font-size: .72rem; margin-left: 4px; }
.cs-edif-chip-active { background: rgba(76,175,80,.18); color: #1a6b3a; border-color: #4caf50; font-weight: 700; cursor: default; }
.cs-edif-chip-active em { color: #555; }
.cs-edif-none   { font-size: 0.78rem; color: #999; font-style: italic; }
.cs-edif-union-sel {
  align-self: center;
  background: #f5fdf7;
  border: 1.5px solid #4caf50;
  border-radius: 20px;
  color: #1a6b3a;
  font-size: 0.68rem;
  font-family: inherit;
  padding: 2px 6px;
  cursor: pointer;
  outline: none;
}
.cs-edif-union-sel:focus { border-color: #1a6b3a; }

#cs-btn-unificar {
  display: block;
  margin-top: 6px;
  background: #fff8e1;
  border: 1.5px solid #f9a825;
  color: #e65100;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
#cs-btn-unificar:hover   { background: #ffecb3; }
#cs-btn-unificar:disabled { opacity: .6; cursor: not-allowed; }

/* ── botão Gerenciar Grupos CS ── */
#cs-btn-grupos {
  display: block;
  margin-top: 4px;
  background: #e8f4ff;
  border: 1.5px solid #1565c0;
  color: #0d47a1;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
#cs-btn-grupos:hover { background: #bbdefb; }

/* ── overlay Gerenciar Grupos CS ── */
.cs-grupos-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-grupos-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  padding: 0;
  min-width: 320px;
  max-width: 480px;
  width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
}
.cs-grupos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.95rem;
}
.cs-grupos-close {
  background: none; border: none;
  font-size: 1.3rem; cursor: pointer; color: #888; line-height: 1;
}
.cs-grupos-desc {
  font-size: 0.76rem; color: #666;
  padding: 8px 16px 4px; margin: 0;
}
.cs-grupos-list { padding: 6px 16px; }
.cs-grupos-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cs-grupos-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
  transition: background .2s;
}
.cs-grupos-edif { font-size: 0.82rem; min-width: 70px; }
.cs-grupos-area { font-size: 0.75rem; color: #555; min-width: 60px; }
.cs-grupos-pav  { font-size: 0.75rem; color: #888; flex: 1; }
.cs-grupos-sel  {
  font-size: 0.78rem; padding: 2px 6px;
  border: 1px solid #bbb; border-radius: 6px;
  background: #fafafa; cursor: pointer;
}
.cs-grupos-footer {
  display: flex; gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid #e0e0e0;
}
.cs-grupos-loading, .cs-grupos-empty {
  padding: 24px 16px; text-align: center; color: #888; font-size: 0.85rem;
}

/* ── campos em conflito ── */
.cs-field.cs-conflict {
  border: 2px solid #e53935;
  border-radius: 8px;
  padding: 6px !important;
  background: #fff5f5;
}
.cs-conflict-alt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.73rem;
  color: #c62828;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cs-conflict-alt span { flex: 1; min-width: 0; }
.cs-conflict-use {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-conflict-use:hover { background: #c62828; }

/* ── seletor de edificação (diálogo intermediário) ── */
#cs-edif-selector-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3100;
  background: #fff;
  border-radius: 14px;
  width: min(360px, 92vw);
  min-height: 150px;
  max-height: 80dvh;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-edif-sel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 10px;
  background: #1a6b3a;
  cursor: grab;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
  user-select: none;
}
.cs-edif-sel-header:active { cursor: grabbing; }
.cs-edif-sel-title {
  flex: 1;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
.cs-edif-sel-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}
.cs-edif-sel-body p {
  margin: 0;
  font-size: .85rem;
  color: #555;
}
.cs-edif-sel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-edif-sel-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: #f5fdf7;
  border: 1.5px solid #4caf50;
  border-radius: 10px;
  cursor: pointer;
  font-size: .88rem;
  color: #1a6b3a;
  text-align: left;
  transition: background .15s;
}
.cs-edif-sel-btn:hover { background: #e0f5e9; }
.cs-edif-sel-btn b  { font-size: .92rem; }
.cs-edif-sel-btn em { font-style: normal; color: #4caf50; font-size: .78rem; }
.cs-edif-sel-btn small { color: #999; font-size: .72rem; }
.cs-edif-sel-skip {
  margin-top: 4px;
  background: none;
  border: none;
  color: #999;
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
  align-self: center;
}

/* ── barra de progresso de seções ── */
.cs-progress-bar {
  display: flex;
  background: #d4edda;
  height: 5px;
  flex-shrink: 0;
}
.cs-progress-fill {
  background: #1a6b3a;
  height: 100%;
  transition: width .3s ease;
}

/* ── navegação de seções (pílulas) ── */
.cs-steps {
  display: flex;
  gap: 6px;
  padding: 10px 16px 6px;
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid #e5e5e5;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cs-steps:active { cursor: grabbing; }
.cs-steps::-webkit-scrollbar { display: none; }
.cs-step-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1.5px solid #bbb;
  border-radius: 20px;
  background: #f7f7f7;
  color: #555;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.cs-step-btn.cs-active {
  border-color: #1a6b3a;
  background: #1a6b3a;
  color: #fff;
  font-weight: 600;
}
.cs-step-btn.cs-done {
  border-color: #4caf50;
  background: #e8f5e9;
  color: #256029;
}

/* ── form: flex column que ocupa o espaço restante no modal ── */
#cs-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* ── corpo scrollável ── */
.cs-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 16px 18px 200px; /* 200px garante que sempre há conteúdo scrollável */
  overscroll-behavior: contain;
}

/* ── seções ── */
.cs-section {
  display: none;
}
.cs-section.cs-section-active {
  display: block;
}
.cs-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a6b3a;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d4edda;
}

/* ── campos ── */
.cs-field {
  margin-bottom: 14px;
}
.cs-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.cs-field label .cs-required {
  color: #c0392b;
  margin-left: 2px;
}
.cs-field input,
.cs-field select,
.cs-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: 0.93rem;
  color: #222;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.cs-field input:focus,
.cs-field select:focus,
.cs-field textarea:focus {
  outline: none;
  border-color: #1a6b3a;
  box-shadow: 0 0 0 3px rgba(26,107,58,.12);
}
.cs-field.cs-error input,
.cs-field.cs-error select {
  border-color: #c0392b;
}
.cs-field .cs-error-msg {
  display: none;
  color: #c0392b;
  font-size: 0.76rem;
  margin-top: 3px;
}
.cs-field.cs-error .cs-error-msg {
  display: block;
}
.cs-field textarea {
  resize: vertical;
  min-height: 72px;
}

/* ── campo com botão de cópia inline ── */
.cs-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cs-field-row input {
  flex: 1;
  min-width: 0;
}
.cs-copy-resp {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 5px 9px;
  border: 1px solid #1a6b3a;
  background: #f0faf4;
  color: #1a6b3a;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.cs-copy-resp:hover { background: #d4f0e0; }

/* ── grade de 2 colunas ── */
.cs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .cs-row { grid-template-columns: 1fr; }
}

/* ── checkboxes / toggles ── */
.cs-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .cs-toggle-group { grid-template-columns: 1fr; }
}
.cs-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #333;
  transition: all .15s;
  user-select: none;
}
.cs-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1a6b3a;
  flex-shrink: 0;
}
.cs-toggle-label:has(input:checked) {
  border-color: #1a6b3a;
  background: #e8f5e9;
  color: #1a6b3a;
  font-weight: 600;
}

/* ── Toggle (Sim/Nao) + botao N/A ao lado ─────────────────────── */
/* cs-toggle-row dentro de cs-toggle-group OCUPA A LINHA INTEIRA
   (span nas 2 colunas do grid) para nao espremer o texto. */
.cs-toggle-group > .cs-toggle-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-toggle-row .cs-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
}
.cs-na-btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: #fafafa;
  border: 1px dashed #ccc;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.cs-na-btn:hover { background: #eee; }
.cs-na-btn.is-active {
  background: #ddd;
  border-style: solid;
  border-color: #999;
  color: #333;
}
.cs-toggle-row:has(.cs-na-btn.is-active) .cs-toggle-label {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Numero + botao N/A ───────────────────────────────────────── */
.cs-numNA {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-numNA > input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
}
.cs-numNA:has(.cs-na-btn.is-active) > input[type="number"] {
  background: #f5f5f5;
  color: #aaa;
  cursor: not-allowed;
}

/* Campo desabilitado (ex: tipo_trabalho quando responsavel_trabalha="Não trabalha") */
.cs-field.cs-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cs-field.cs-disabled label { color: #999; }

/* ── rodapé com botões de navegação ── */
.cs-footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  /* espaço extra para home indicator do iPhone e barra de navegação Android */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
}
.cs-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.cs-btn-secondary {
  background: #f0f0f0;
  color: #444;
}
.cs-btn-secondary:hover { background: #e0e0e0; }
.cs-btn-primary {
  background: #1a6b3a;
  color: #fff;
}
.cs-btn-primary:hover { background: #155c30; }
.cs-btn-primary:disabled { background: #a5c8b0; cursor: not-allowed; }

/* botão salvar no dispositivo (offline) */
.cs-btn-offline {
  flex: 0 0 44px;
  background: #fff3cd;
  color: #856404;
  border: 1.5px solid #ffc107;
  font-size: 1.1rem;
  padding: 10px 0;
}
.cs-btn-offline:hover { background: #ffe69c; }

/* ── toast de status ── */
.cs-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.88rem;
  z-index: 3000;
  pointer-events: none;
  transition: transform .3s ease;
  white-space: nowrap;
}
.cs-toast.cs-toast-show { transform: translateX(-50%) translateY(0); }
.cs-toast.cs-toast-ok   { background: #1a6b3a; }
.cs-toast.cs-toast-err  { background: #c0392b; }
.cs-toast.cs-toast-info { background: #1565c0; }

/* ── painel de monitoramento ── */
#cs-monitor-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  /* Sem backdrop escuro: user precisa ver/clicar no mapa por baixo
     (botoes No mapa / Editar nao fecham mais o monitor). */
  background: transparent;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}
#cs-monitor-overlay.cs-open { display: flex; }
/* O modal interno recebe cliques normalmente. */
#cs-monitor-overlay > #cs-monitor-modal { pointer-events: all; }

#cs-monitor-modal {
  position: relative;
  background: #fff;
  width: min(700px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}

.cs-monitor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #0d4726;
  color: #fff;
  cursor: grab;
  user-select: none;
}
.cs-monitor-header h2 { margin: 0; font-size: 1rem; }

.cs-monitor-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.cs-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cs-stat-card {
  background: #f4f9f6;
  border: 1px solid #c8e6c9;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  transition: background .15s, border-color .15s, transform .1s;
}
.cs-stat-card[data-filter-field] {
  cursor: pointer;
}
.cs-stat-card[data-filter-field]:hover {
  background: #e0f2e9;
  border-color: #4caf50;
}
.cs-stat-card.cs-stat-card-active {
  background: #1a6b3a;
  border-color: #1a6b3a;
  transform: scale(1.04);
}
.cs-stat-card.cs-stat-card-active .cs-stat-value,
.cs-stat-card.cs-stat-card-active .cs-stat-label {
  color: #fff;
}
.cs-stat-card .cs-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a6b3a;
}
.cs-stat-card .cs-stat-label {
  font-size: 0.74rem;
  color: #555;
  margin-top: 2px;
}

.cs-monitor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.cs-monitor-table th,
.cs-monitor-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.cs-monitor-table th {
  background: #f0f4f1;
  font-weight: 700;
  color: #1a6b3a;
}
.cs-monitor-table tr:last-child td { border-bottom: none; }
.cs-mon-fid  { font-family: monospace; font-size: .78rem; color: #2e7d32; }
.cs-mon-sem  { color: #bbb; font-style: italic; }

.cs-filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cs-filter-row input {
  flex: 1;
  min-width: 130px;
  padding: 8px 12px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: 0.86rem;
}
.cs-filter-row button {
  padding: 8px 16px;
  background: #1a6b3a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── selects do monitor ── */
.cs-mon-select {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: 0.86rem;
  background: #fff;
}

/* ── painel de resultados da busca CS na sidebar ── */
#cs-search-results {
  background: #fff;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 6px;
  font-size: 0.82rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.cs-sr-item {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.cs-sr-item:last-child { border-bottom: none; }
.cs-sr-item:hover { background: #f0f7f3; }
.cs-sr-bairro { color: #555; }
.cs-sr-data   { color: #888; font-size: .76rem; }
.cs-sr-pin    { margin-left: auto; }
.cs-sr-empty  { padding: 10px 12px; color: #888; font-style: italic; }

/* botão apagar no formulário (admin, registro existente no servidor) */
.cs-btn-delete {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.cs-btn-delete:hover    { background: #a93226; }
.cs-btn-delete:disabled { opacity: .5; cursor: not-allowed; }

/* botão apagar (somente admin) */
.cs-btn-danger {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cs-btn-danger:hover    { background: #a93226; }
.cs-btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* botão editar (somente admin) */
.cs-btn-edit {
  background: #2980b9;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 4px;
}
.cs-btn-edit:hover    { background: #1f6391; }
.cs-btn-edit:disabled { opacity: .5; cursor: not-allowed; }

/* botão no mapa (somente admin) */
.cs-btn-map {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}
.cs-btn-map:hover    { background: #1e8449; }
.cs-btn-map:disabled { opacity: .5; cursor: not-allowed; }

/* botão clipe de papel */
.cs-btn-fotos {
  background: transparent;
  border: 1.5px solid #bbb;
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  font-size: .95rem;
  margin-left: 4px;
  position: relative;
  color: #888;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.cs-btn-fotos:hover { border-color: #1a6b3a; color: #1a6b3a; background: #f0faf4; }
.cs-btn-fotos.cs-has-fotos {
  border-color: #1a6b3a;
  color: #1a6b3a;
  background: #eaf7ee;
}
.cs-fotos-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #1a6b3a;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  border-radius: 8px;
  line-height: 14px;
  text-align: center;
  padding: 0 3px;
}

/* modal de fotos/arquivos */
#cs-fotos-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3200;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
}
#cs-fotos-overlay.cs-open { display: flex; }
#cs-fotos-modal {
  background: #fff;
  border-radius: 14px;
  width: min(680px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 36px rgba(0,0,0,.28);
  overflow: hidden;
}
.cs-fotos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a6b3a;
  color: #fff;
  padding: 14px 18px;
  flex-shrink: 0;
}
.cs-fotos-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.cs-fotos-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.cs-fotos-empty {
  text-align: center;
  color: #aaa;
  padding: 24px 0;
  font-size: .88rem;
}
.cs-fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cs-fotos-item {
  border: 1.5px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  transition: box-shadow .15s;
}
.cs-fotos-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.13); }
.cs-fotos-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  display: block;
}
.cs-fotos-file-icon {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  background: #f0f4f1;
  cursor: pointer;
}
.cs-fotos-item-actions {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: #f7faf8;
  border-top: 1px solid #eee;
  justify-content: center;
}
.cs-fotos-dl-btn {
  flex: 1;
  padding: 4px 0;
  background: #2980b9;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: .73rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
}
.cs-fotos-dl-btn:hover { background: #1f6391; }
.cs-fotos-del-btn {
  padding: 4px 8px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: .73rem;
  cursor: pointer;
}
.cs-fotos-del-btn:hover { background: #a93226; }
.cs-fotos-upload-area {
  border-top: 1.5px dashed #c8e6c9;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-fotos-upload-label {
  display: inline-block;
  padding: 8px 18px;
  background: #1a6b3a;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  transition: background .15s;
}
.cs-fotos-upload-label:hover { background: #155230; }
.cs-fotos-upload-label.cs-uploading {
  background: #888;
  cursor: default;
}
#cs-fotos-status {
  font-size: .82rem;
  color: #555;
}

/* dropdown autocomplete do campo de busca de registros */
.cs-reg-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.cs-reg-dd-item {
  padding: 6px 10px;
  font-size: .82rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-reg-dd-item:hover { background: #e8f5e9; color: #1a6b3a; }

/* ── painel de registros pendentes (offline) ── */
#cs-pending-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0,0,0,.5);
  align-items: center;
  justify-content: center;
}
#cs-pending-overlay.cs-open { display: flex; }

#cs-pending-panel {
  background: #fff;
  border-radius: 14px;
  width: min(480px, 95vw);
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  overflow: hidden;
}

.cs-pending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #0d4726;
  color: #fff;
}
.cs-pending-header h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.cs-pending-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

#cs-pending-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.cs-pending-empty {
  text-align: center;
  color: #aaa;
  padding: 24px;
  font-style: italic;
  margin: 0;
}

.cs-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
}
.cs-pending-item:last-child { border-bottom: none; }

.cs-pending-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cs-pending-info strong {
  font-size: .9rem;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-pending-info span {
  font-size: .76rem;
  color: #555;
}
.cs-pending-ts {
  font-size: .72rem !important;
  color: #999 !important;
}

.cs-pending-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cs-pending-btn-open,
.cs-pending-btn-send {
  padding: 5px 11px;
  border: none;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.cs-pending-btn-open {
  background: #1a6b3a;
  color: #fff;
}
.cs-pending-btn-open:hover { background: #155730; }

.cs-pending-btn-send {
  background: #e8f5e9;
  color: #1a6b3a;
  border: 1.5px solid #a5d6a7;
}
.cs-pending-btn-send:hover { background: #c8e6c9; }
.cs-pending-btn-send:disabled { opacity: .5; cursor: not-allowed; }

.cs-pending-btn-del {
  background: none;
  border: none;
  color: #c0392b;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 6px;
}
.cs-pending-btn-del:hover { background: #fdecea; }

.cs-pending-footer {
  padding: 12px 18px;
  border-top: 1px solid #eee;
  text-align: center;
}
#cs-pending-sync-all {
  padding: 9px 24px;
  background: #1a6b3a;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
#cs-pending-sync-all:hover { background: #155730; }

/* ── badge "↓ role para ver mais" ── */
.cs-sr-more {
  display: block;
  padding: 6px 12px;
  font-size: .74rem;
  color: #1a6b3a;
  text-align: center;
  font-style: italic;
}

/* =====================================================================
   AJUSTES TABLET / CELULAR — Cadastro Social (cadastro em campo)
   Bloco isolado no fim do arquivo para fácil manutenção/reversão.
   Cobre: zoom automático do iOS, modal mais útil no tablet e alvos
   de toque maiores. Só afeta telas pequenas / dispositivos de toque.
   ===================================================================== */

/* 1. iOS Safari dá zoom automático ao focar input com fonte < 16px.
      Em telas até 768px forçamos 16px nos campos para evitar isso.
      (font-size só vale no mobile; no desktop continua 0.93rem.) */
@media (max-width: 768px) {
  .cs-field input,
  .cs-field select,
  .cs-field textarea {
    font-size: 16px;
  }
}

/* 2. Tablet (retrato/paisagem): aproveita melhor a tela.
      No desktop o modal é centralizado e pequeno (420px); no tablet
      damos mais largura e altura para caber mais campos por vez. */
@media (min-width: 540px) and (max-width: 1024px) {
  #cs-modal {
    max-width: 640px;
    width: 92%;
    height: 92vh;
    height: 92svh;
    max-height: 92vh;
    max-height: 92svh;
  }
}

/* 3. Dispositivos de toque: alvos maiores (dedo > mouse).
      Vale para qualquer celular/tablet independente da largura. */
@media (pointer: coarse) {
  /* campos com mais altura para tocar com o dedo */
  .cs-field input,
  .cs-field select,
  .cs-field textarea {
    padding: 12px 14px;
  }
  /* pílulas de navegação de seção maiores e mais fáceis de acertar */
  .cs-step-btn {
    padding: 9px 16px;
    font-size: 0.86rem;
  }
  /* toggles/checkboxes com mais área de toque */
  .cs-toggle-label {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
  /* botões do rodapé (Salvar / Voltar / Avançar) mais altos */
  .cs-btn {
    padding: 14px 8px;
    font-size: 0.95rem;
  }
  .cs-btn-offline {
    flex-basis: 52px;
    font-size: 1.25rem;
  }
  /* botão de copiar dados do responsável não fica minúsculo */
  .cs-copy-resp {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}