/* =====================================================================
   sv-responsive.css — Camada global de responsividade (safety net)
   ---------------------------------------------------------------------
   Objetivo: aplicar técnicas modernas de fluid/adaptive UI a TODAS as
   páginas sem quebrar layouts já existentes.

   Princípios:
   - Mobile-first defaults com fallback.
   - Especificidade baixa (regras vencem se a página tiver algo melhor).
   - Unidades dinâmicas (dvh/svh) e safe-area-inset para iOS/Android.
   - Mídia (img, svg, video, iframe) fluida por padrão.
   - Tipografia auto-escalada (clamp) em texto base.
   - Tabelas, formulários e modais com fallback de scroll.
   - Targets de toque mínimos 44px (WCAG 2.5.5).
   - Honra prefers-reduced-motion e prefers-color-scheme (parcial).
   ===================================================================== */

/* ---------- 1. Box model + viewport baseline ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Alturas dinâmicas (resolve barra do Chrome mobile sumindo) */
@supports (height: 100dvh) {
  .sv-full-h { min-height: 100dvh; }
  .sv-screen { height: 100svh; }
}
@supports not (height: 100dvh) {
  .sv-full-h { min-height: 100vh; }
  .sv-screen { height: 100vh; }
}

body {
  margin: 0;
  /* Reserva espaço para notch/home indicator em iOS sem afetar layout */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Quando um drawer/modal abre, trava o scroll do body */
body.sv-no-scroll { overflow: hidden; touch-action: none; }

/* ---------- 2. Mídia fluida ---------- */
img, svg, video, canvas, picture, iframe, embed, object {
  max-width: 100%;
}
img, svg, video, canvas, picture {
  height: auto;
}
img { -webkit-user-drag: none; }

/* ---------- 3. Texto: quebra inteligente ---------- */
/* Apenas em containers de texto longo. NÃO aplicar em inline (strong, span,
   a, em) — quebrava palavras curtas como "Recursos" no meio em cards. */
:where(p, li, dd, blockquote, td, th, figcaption) {
  overflow-wrap: break-word;
  word-break: normal;
}
:where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  text-wrap: balance; /* moderno, ignorado onde não suportado */
}

/* Tipografia base fluida (não impõe ao seletor html para não brigar com
   estilos que já definem font-size). Aplica só ao body como hint. */
@media (max-width: 1200px) {
  body { font-size: clamp(15px, 1vw + 13px, 18px); }
}

/* ---------- 4. Formulários ---------- */
input, select, textarea, button {
  font: inherit;
  max-width: 100%;
}
input, select, textarea {
  /* Evita zoom automatico do iOS Safari (<16px dispara zoom) */
  font-size: max(16px, 1em);
}
textarea { resize: vertical; }

/* ---------- 5. Tabelas — wrapper utilitário ----------
   Páginas podem envolver uma <table> em .sv-table-wrap para ganhar
   scroll horizontal sem perder o layout de mesa. */
.sv-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sv-table-wrap > table { min-width: 100%; }

/* ---------- 6. Container utilitário fluido ---------- */
.sv-container {
  width: 100%;
  max-width: min(1280px, 100% - 32px);
  margin-inline: auto;
}
.sv-container-narrow {
  width: 100%;
  max-width: min(720px, 100% - 24px);
  margin-inline: auto;
}

/* ---------- 7. Touch targets ---------- */
@media (pointer: coarse) {
  a.btn, button, .btn, .btn-primary, .btn-secondary, .btn-outline,
  .nav-toggle, .ac-nav-item, .btn-logout {
    min-height: 44px;
  }
  /* Reduz raio máximo para elementos minúsculos sem alterar visualmente */
}

/* ---------- 8. Foco acessível ---------- */
:focus-visible {
  outline: 2px solid var(--primary, #2f8a53);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 9. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 10. Safe-area para barras fixas comuns do projeto ---------- */
.navbar, .ac-sidebar, .desp-sidebar, .adm-sidebar {
  padding-left: max(var(--sv-pad-l, 0px), env(safe-area-inset-left));
  padding-right: max(var(--sv-pad-r, 0px), env(safe-area-inset-right));
}

/* ---------- 11. Modais — limites em telas pequenas ---------- */
@media (max-width: 600px) {
  .modal-card, .sv-modal, .modal-content {
    width: min(100%, 100vw - 16px) !important;
    max-width: min(100%, 100vw - 16px) !important;
    max-height: calc(100dvh - 24px);
    margin: 8px;
  }
  .modal-body { max-height: calc(100dvh - 160px); overflow-y: auto; }
}

/* ---------- 12. Grids responsivos auto-fit (utilitários) ----------
   Use .sv-grid-auto para cards que devem ajustar colunas conforme
   espaço disponível. Sem media queries — colapsa naturalmente. */
.sv-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.sv-grid-auto-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

/* ---------- 13. Sidebar mobile — body lock universal ----------
   Páginas que abrem aside.ac-sidebar.open, .desp-sidebar.open etc
   ganham trava de scroll do body via classe .sv-no-scroll. Cabe ao
   JS adicionar/remover a classe — fornecemos a regra. */

/* ---------- 14. Anti-overflow horizontal ----------
   Causa #1 de "tem um espaço branco rolando lateral" em mobile. */
html, body {
  overflow-x: clip; /* moderno; sem efeito no fixed positioning interno */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* ---------- 15. Print sane defaults ---------- */
@media print {
  .navbar, .ac-sidebar, .desp-sidebar, .adm-sidebar,
  .nav-toggle, .btn-logout, .ticker { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
  .ac-main-content, .desp-main, .adm-main { margin: 0 !important; padding: 0 !important; }
}

/* ---------- 16. Áreas longas de texto: largura legível ---------- */
.sv-prose { max-width: 70ch; line-height: 1.6; }

/* ---------- 17. Espaçamento fluido utilitário ---------- */
:root {
  --sv-space-1: clamp(4px, 0.5vw, 6px);
  --sv-space-2: clamp(8px, 1vw, 12px);
  --sv-space-3: clamp(12px, 1.5vw, 18px);
  --sv-space-4: clamp(16px, 2vw, 24px);
  --sv-space-5: clamp(20px, 2.5vw, 32px);
  --sv-space-6: clamp(24px, 3vw, 40px);
  --sv-radius-sm: 8px;
  --sv-radius-md: 12px;
  --sv-radius-lg: 18px;
}

/* ---------- 18. Visually hidden (acessibilidade) ---------- */
.sv-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}