/* ════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE — MELHORIAS PROFISSIONAIS
   
   Autor: análise de arquitetura — Pacote Níveis 1+2
   Versão: v4.37.62
   
   FILOSOFIA:
   • NÃO sobrescreve estilos quando o sistema já funciona bem
   • USA seletores específicos pra evitar efeitos colaterais
   • Mobile-first nas regras novas (defaults pra mobile, overrides pra desktop)
   
   BREAKPOINTS PADRONIZADOS:
   • Mobile pequeno:  até 480px  (iPhone SE, Galaxy S22)
   • Mobile grande:   481-767px  (iPhone Pro, Galaxy Note)
   • Tablet:          768-1023px (iPad portrait)
   • Desktop:         1024px+    (laptops, monitores)
   ════════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 1 — QUICK WINS (UX mobile sem dor)                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── 1.1: Áreas de toque mínimas em mobile ─────────────────────── */
@media (max-width: 768px) {
  /* Botões principais: mínimo 44x44 (Apple HIG) */
  .btn,
  .btn-p,
  .btn-s,
  .btn-r,
  button[onclick]:not(.btn-sm):not(.modal-x):not(.tab):not(.sub-tab) {
    min-height: 44px;
    /* Padding generoso pra clique fácil */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Tabs e sub-tabs ficam menores (são "linhas" de navegação, ok 36px) */
  .tab,
  .sub-tab {
    min-height: 36px;
  }

  /* Inputs e selects: 44px mínimo + font 16px (evita zoom auto iOS) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important; /* CRITICAL: <16px causa zoom no iOS Safari */
  }

  /* Checkboxes e radios maiores pra clique fácil */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  /* Links em listas viram blocos clicáveis */
  .lead-item a,
  .cont-card a,
  .cli-card a {
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
  }
}

/* ─── 1.2: Inputs sempre full-width em mobile pequeno ──────────── */
@media (max-width: 480px) {
  /* Força inputs a ocuparem largura total, ignorando width inline */
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .modal select,
  .modal textarea,
  .fld input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .fld select,
  .fld textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Inputs lado-a-lado viram em coluna */
  .fld-row,
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ─── 1.3: Scroll horizontal — proteção global ─────────────────── */
@media (max-width: 768px) {
  /* Body nunca deve ter scroll horizontal */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Containers principais respeitam viewport */
  .view,
  .modal,
  .dash-card,
  .cont-card,
  .cli-card,
  .lead-card,
  .fat-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Imagens fluidas */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Long words quebram (URLs, e-mails) */
  .modal,
  .cli-card,
  .cont-card,
  .lead-card {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ─── 1.4: Placeholders longos ficam legíveis ─────────────────── */
@media (max-width: 480px) {
  input::placeholder,
  textarea::placeholder {
    font-size: 13px;
    opacity: 0.7;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 2 — TABELAS RESPONSIVAS                                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  /* Containers de tabela com overflow horizontal SUAVE */
  table.dt,
  .dt-wrap table,
  div[style*="overflow-x:auto"] table,
  div[style*="overflow-x: auto"] table {
    font-size: 12px;
  }

  /* Indica visualmente que dá pra rolar (sombra de scroll) */
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    background:
      linear-gradient(to right, var(--sf, #13091f), transparent 30%),
      linear-gradient(to left, var(--sf, #13091f), transparent 30%);
    background-attachment: local, local;
    -webkit-overflow-scrolling: touch;
  }

  /* Cabeçalhos de tabela sempre visíveis */
  table.dt thead th {
    position: sticky;
    top: 0;
    background: var(--s2);
    z-index: 1;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 3 — BREAKPOINTS UNIFICADOS                                  ║
   ║                                                                    ║
   ║ Estes são os 4 breakpoints OFICIAIS pra novos componentes.        ║
   ║ Os antigos continuam funcionando, mas novos arquivos devem usar:  ║
   ║                                                                    ║
   ║   --bp-mobile-small:  480px                                       ║
   ║   --bp-mobile:        768px                                       ║
   ║   --bp-tablet:       1024px                                       ║
   ║   --bp-desktop:      1280px                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  --bp-mobile-small: 480px;
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;

  /* Tamanhos seguros pra toque em mobile */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* Fontes mínimas legíveis */
  --font-min-mobile: 14px;
  --font-min-input: 16px; /* Crítico pra evitar zoom iOS */
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 4 — FONTES LEGÍVEIS EM MOBILE                               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 480px) {
  /* Texto base nunca menor que 13px */
  body,
  .modal,
  .cli-card,
  .cont-card,
  .lead-card {
    font-size: 14px;
  }

  /* Labels de campos: mínimo 12px */
  .fld label,
  label {
    font-size: 12px !important;
  }

  /* "Microcopy" — datas, badges, metadados */
  .badge,
  .bdg,
  .meta,
  .timestamp {
    font-size: 11px !important;
    /* Aceita 11px nesses contextos especiais */
  }

  /* Modais: padding interno responsivo */
  .modal {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .modal-h {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  .modal-t {
    font-size: 16px !important;
    line-height: 1.3;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 5 — POSITIONING SAFETY (iOS Safari)                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  /* Fixed bottom elements respeitam safe-area do iPhone */
  .botao-flutuante,
  .fab,
  .footer-fixed {
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Modais centralizados respeitam o teclado virtual */
  .modal-bg {
    align-items: flex-start;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  /* Toasts não cobrem botões fixos */
  .toast,
  .tst {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 6 — DESKTOP REFINEMENTS                                     ║
   ║                                                                    ║
   ║ Em telas grandes, melhorar o uso do espaço                        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

@media (min-width: 1280px) {
  /* Modais não esticam exageradamente em telas grandes */
  .modal {
    max-width: 720px;
  }

  /* Modais grandes (relatórios) usam mais espaço */
  .modal.modal-lg {
    max-width: 1024px;
  }
}

@media (min-width: 1600px) {
  /* Em monitores ultra-wide, conteúdo principal não fica esticado */
  .view {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 7 — ACCESSIBILITY (a11y)                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Reduz animações pra usuários com preferência configurada */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Foco visível pra navegação por teclado */
@media (min-width: 769px) {
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--ac, #a78bfa);
    outline-offset: 2px;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ETAPA 8 — UTILITIES PRA NOVOS COMPONENTES                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Esconde em mobile, mostra em desktop */
.cp-only-desktop {
  display: none;
}
@media (min-width: 769px) {
  .cp-only-desktop {
    display: initial;
  }
}

/* Esconde em desktop, mostra em mobile */
.cp-only-mobile {
  display: initial;
}
@media (min-width: 769px) {
  .cp-only-mobile {
    display: none;
  }
}

/* Layout flex que vira coluna em mobile */
.cp-flex-responsive {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .cp-flex-responsive {
    flex-direction: column;
  }
}