/* ============================================================================
   AgendaHelp — Design Tokens OFICIAIS (redesign Cobalto 2026-07-06)
   Single source of truth para cor, tipo, spacing, shadow, radius.
   Importar com: <link rel="stylesheet" href="/design/tokens.css">

   PALETAS via html[data-palette]: "cobalto" (PADRÃO), "grafite", "verde".
   Fonte: pacote claude.ai/design arquivado em 99-ARQUIVO/design-cobalto-2026-07-06.

   Os NOMES legados (--sky-*, --gray-*, --ice, --accent…) são PRESERVADOS e
   remapeados por paleta, para os painéis herdarem sem quebrar var().
   Semântica: --brand/--sky-* = ação primária · --accent = realce positivo.
   Cores de terceiros (WhatsApp #25D366, Telegram) e categóricas de dados
   NUNCA passam por estes tokens — ficam fixas nas telas.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* ====================================================================
   PALETA COBALTO — PADRÃO OFICIAL (cara da marca)
   Azul #1B3FE8 + verde #1F9D57 + branco-quente #FAFAF7.
   ==================================================================== */
:root,
html[data-palette="cobalto"] {
  /* ---------- Nomes do design ---------- */
  --bg:            #FAFAF7;
  --bg-elev:       #FFFFFF;
  --bg-sunk:       #F2F1EA;
  --bg-inverse:    #0A0E1A;
  --fg:            #0A0E1A;
  --fg-muted:      #5B6172;
  --fg-soft:       #8A8F9E;
  --border:        #E8E6DD;
  --border-strong: #CFCCBE;
  --brand:         #1B3FE8;   /* cobalto canônico do design system */
  --brand-deep:    #0A1F8A;
  --brand-soft:    #E7EAFC;
  --accent:        #25D366;   /* verde WhatsApp canônico — accent do design */
  --accent-deep:   #128C7E;
  --accent-soft:   #DCF7E6;
  /* ---------- Tokens do claude.ai/design (perfil clínico, timeline, tags) — OFICIAIS ---------- */
  --bg-sunken:     #FAFAF7;   /* fundo de wells/dots do perfil (= bg) */
  --brand-softer:  #F1F3FD;   /* tint cobalto mais claro */
  --good:          #128C5E;   /* verde clínico (melhorou/dentro) */
  --good-soft:     #DCF2E5;
  --warn-soft:     #FBEBD8;   /* fundo de atenção */
  --danger-soft:   #FAE6E3;   /* fundo crítico */
  --radius-sm:     7px;
  --radius:        12px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --shadow-tint:   10,14,26;

  /* ---------- BACKGROUNDS (legado) ---------- */
  --ice: #FAFAF7;          /* fundo da página */
  --ice-soft: #F2F1EA;     /* alternância de seção / well */
  --white: #FFFFFF;        /* surfaces, cards */
  --sky-mist: #E7EAFC;     /* glow, hero radial, badges (= brand-soft) */
  --sky-soft: #D7DDF9;     /* highlights */

  /* ---------- NEUTROS FRIOS (tinta azul-noite) ---------- */
  --gray-900: #0A0E1A;     /* tinta / texto primário */
  --gray-800: #1D2333;
  --gray-700: #39415A;
  --gray-500: #5B6172;     /* texto secundário (fg-muted) */
  --gray-400: #8A8F9E;     /* meta, terciário (fg-soft) */
  --gray-300: #CFCCBE;     /* bordas de destaque (border-strong) */
  --gray-200: #E8E6DD;     /* bordas (border) */
  --gray-100: #F2F1EA;     /* divisórias / bg-sunk */

  /* ---------- AZUL COBALTO (AÇÃO PRIMÁRIA) ---------- */
  --sky-200: #E7EAFC;
  --sky-300: #A9B9F2;
  --sky-400: #4E6BE8;      /* focus ring, bordas ativas */
  --sky-500: #1B3FE8;      /* PRIMARY — botões, links (= brand cobalto canônico) */
  --sky-600: #0A1F8A;      /* hover de botões (= brand-deep) */
  --sky-700: #0A1F8A;      /* texto azul sobre claro */

  /* ---------- SEMÂNTICAS ---------- */
  --ok: #2D6A4F;           /* sucesso, "online" — verde murado */
  --ok-light: #E8F5EE;
  --warn: #7A5A0E;         /* atenção — âmbar murado */
  --amber-light: #FEF6E4;
  --danger: #8B2020;       /* erro, urgente — oxblood */
  --purple: #6E6088;       /* destaque secundário (fila de espera) */
  --purple-light: #EDEBF3;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(10,14,26,0.05);
  --shadow-md: 0 1px 3px rgba(10,14,26,0.05), 0 8px 24px rgba(10,14,26,0.05);
  --shadow-lg: 0 4px 12px rgba(10,14,26,0.07), 0 16px 40px rgba(10,14,26,0.08);
  --shadow-sky: 0 0 0 1px var(--sky-400), 0 16px 40px -12px rgba(27,63,232,0.35);
}

/* ====================================================================
   PALETA GRAFITE PREMIUM (opção — tema editorial do sistema)
   Tinta #131210 + laranja #C8551F + linho #F4F1EB.
   ==================================================================== */
html[data-palette="grafite"] {
  --bg:            #F4F1EB;
  --bg-elev:       #FFFFFF;
  --bg-sunk:       #EDE9E0;
  --bg-inverse:    #131210;
  --fg:            #131210;
  --fg-muted:      #5D5A52;
  --fg-soft:       #8D897E;
  --border:        #E3DED2;
  --border-strong: #C7C0AE;
  --brand:         #131210;
  --brand-deep:    #000000;
  --brand-soft:    #EDE7D7;
  --accent:        #C8551F;
  --accent-deep:   #A8441A;
  --accent-soft:   #F6E7DC;
  --shadow-tint:   19,18,16;

  --ice: #F4F1EB;
  --ice-soft: #EDE9E0;
  --white: #FFFFFF;
  --sky-mist: #F6E7DC;
  --sky-soft: #F0D9C9;

  --gray-900: #131210;
  --gray-800: #252019;
  --gray-700: #3A352B;
  --gray-500: #5D5A52;
  --gray-400: #8D897E;
  --gray-300: #C7C0AE;
  --gray-200: #E3DED2;
  --gray-100: #EDE9E0;

  --sky-200: #F6E7DC;
  --sky-300: #E3A37E;
  --sky-400: #D2693A;
  --sky-500: #C8551F;
  --sky-600: #A8441A;
  --sky-700: #8C3917;

  --ok: #2D6A4F;
  --ok-light: #E8F5EE;
  --warn: #7A5A0E;
  --amber-light: #FEF6E4;
  --danger: #8B2020;
  --purple: #6E6088;
  --purple-light: #EDE9E0;

  --shadow-sm: 0 1px 2px rgba(19,18,16,0.05);
  --shadow-md: 0 1px 3px rgba(19,18,16,0.05), 0 8px 24px rgba(19,18,16,0.05);
  --shadow-lg: 0 4px 12px rgba(19,18,16,0.07), 0 16px 40px rgba(19,18,16,0.08);
  --shadow-sky: 0 0 0 1px var(--sky-400), 0 20px 60px -20px rgba(200,85,31,0.40);
}

/* ====================================================================
   PALETA VERDE (opção — eco-healthcare)
   ==================================================================== */
html[data-palette="verde"] {
  --bg:            #F4F7F4;
  --bg-elev:       #FFFFFF;
  --bg-sunk:       #E9EFE9;
  --bg-inverse:    #0A1F1A;
  --fg:            #0A1F1A;
  --fg-muted:      #4A5A52;
  --fg-soft:       #7C8B82;
  --border:        #DCE5DC;
  --border-strong: #B8C5B8;
  --brand:         #117A52;
  --brand-deep:    #075E3D;
  --brand-soft:    #DCF2E5;
  --accent:        #1F9D57;
  --accent-deep:   #157A43;
  --accent-soft:   #DCF2E5;
  --shadow-tint:   10,31,26;

  --ice: #F4F7F4;
  --ice-soft: #E9EFE9;
  --white: #FFFFFF;
  --sky-mist: #DCF2E5;
  --sky-soft: #C4E8D4;

  --gray-900: #0A1F1A;
  --gray-800: #1B2F28;
  --gray-700: #33473F;
  --gray-500: #4A5A52;
  --gray-400: #7C8B82;
  --gray-300: #B8C5B8;
  --gray-200: #DCE5DC;
  --gray-100: #E9EFE9;

  --sky-200: #DCF2E5;
  --sky-300: #8FCDAB;
  --sky-400: #3FA672;
  --sky-500: #117A52;
  --sky-600: #075E3D;
  --sky-700: #064B31;

  --ok: #2D6A4F;
  --ok-light: #E8F5EE;
  --warn: #7A5A0E;
  --amber-light: #FEF6E4;
  --danger: #8B2020;
  --purple: #6E6088;
  --purple-light: #E9EFE9;

  --shadow-sm: 0 1px 2px rgba(10,31,26,0.05);
  --shadow-md: 0 1px 3px rgba(10,31,26,0.05), 0 8px 24px rgba(10,31,26,0.05);
  --shadow-lg: 0 4px 12px rgba(10,31,26,0.07), 0 16px 40px rgba(10,31,26,0.08);
  --shadow-sky: 0 0 0 1px var(--sky-400), 0 20px 60px -20px rgba(17,122,82,0.40);
}

/* ====================================================================
   TOKENS COMPARTILHADOS (independem de paleta)
   ==================================================================== */
:root {
  /* ---------- TIPOGRAFIA ---------- */
  --font-sans: 'Geist', 'Geist Fallback', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-display: 'Instrument Serif', 'Times New Roman', serif; /* alias design */
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* ---------- SCALES ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius: 12px;          /* nome usado pelo CSS do design */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---------- TRANSIÇÕES ---------- */
  --tx-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tx-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --tx-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- DOCTOR CODING (categóricas — iguais em todas as paletas) ----
     pastel, memorável, harmônico (mesma luminância, matiz varia) */
  --doc-a: oklch(0.62 0.115 248);   /* Cardiologia · azul */
  --doc-b: oklch(0.62 0.105 158);   /* Clínica Geral · verde */
  --doc-c: oklch(0.62 0.115 312);   /* Ortopedia · violeta */
  --doc-d: oklch(0.68 0.110 58);    /* Dermatologia · âmbar */

  /* ---------- STATUS (design) — quietos, semânticos ---------- */
  --st-ok:    oklch(0.56 0.085 150);
  --st-wait:  oklch(0.62 0.11 65);
  --st-live:  var(--brand);
  --st-done:  var(--fg-soft);
  --st-cancel:oklch(0.58 0.10 25);

  /* densidade vertical (tweaks do design) */
  --density: 1;
}

/* ============================================================================
   RESETS E DEFAULTS
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--gray-900);
  background: var(--ice);
  font-feature-settings: 'ss01','cv11';
}

/* ============================================================================
   UTILITÁRIOS — Buttons
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  transition: all var(--tx-base);
  text-decoration: none;
}
.btn-primary {
  background: var(--sky-500);
  color: var(--white);
}
.btn-primary:hover { background: var(--sky-600); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.btn-ghost:hover { background: var(--ice-soft); border-color: var(--sky-400); color: var(--sky-700); }

/* ============================================================================
   UTILITÁRIOS — Cards
   ============================================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--tx-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card-flat {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* ============================================================================
   UTILITÁRIOS — Pills/Badges
   ============================================================================ */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pill-sky { background: var(--sky-mist); color: var(--sky-700); }
.pill-ok { background: #E7F9EE; color: #0E7A43; }
.pill-warn { background: #FEF3C7; color: #92400E; }
.pill-danger { background: #FEF2F2; color: #B91C1C; }

/* ============================================================================
   FOCUS A11Y
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--sky-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================================
   ANIMAÇÕES BASE
   ============================================================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 600ms cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse { animation: pulse-dot 2s ease-in-out infinite; }

/* ============================================================================
   ACESSIBILIDADE — texto só para leitor de tela
   ============================================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   PREFERS-REDUCED-MOTION — desativa animações não essenciais
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .pulse { animation: none !important; }
}

/* ============================================================================
   DARK MODE — html.agm-dark  (padrão = cobalto noite)
   Azul-noite profundo + azul periwinkle p/ ações. Sem branco estourado.
   Ativado via: document.documentElement.classList.toggle('agm-dark', dark)
   Persiste em: localStorage key 'agm-theme'
   ============================================================================ */
html.agm-dark {
  color-scheme: dark;

  /* ── Backgrounds — azul-noite ────────────────────────────────────────── */
  --ice:       #0B0F1C;
  --ice-soft:  #111625;
  --white:     #161C2E;    /* cards, superfícies */
  --sky-mist:  #1B2440;    /* badges, glow (brand-tinted) */
  --sky-soft:  #223055;

  --bg: #0B0F1C; --bg-elev: #161C2E; --bg-sunk: #111625; --bg-inverse: #E8EAF2;
  --fg: #E8EAF2; --fg-muted: #8A91A6; --fg-soft: #646B80;
  --border: #272E42; --border-strong: #333B52;

  /* ── Escala de neutros → claro frio ──────────────────────────────────── */
  --gray-900:  #E8EAF2;
  --gray-800:  #D3D7E4;
  --gray-700:  #B6BCCF;
  --gray-500:  #8A91A6;
  --gray-400:  #646B80;
  --gray-300:  #333B52;
  --gray-200:  #272E42;
  --gray-100:  #1C2235;

  /* ── Azul cobalto p/ dark (mais luminoso p/ contraste) ───────────────── */
  --sky-200:   #1B2440;
  --sky-300:   #6E86EC;
  --sky-400:   #7E96F0;
  --sky-500:   #8CA2F2;    /* botões primários — azul claro */
  --sky-600:   #A5B6F5;    /* hover */
  --sky-700:   #C3CEF9;    /* texto sobre fundo escuro */

  --brand:      #8CA2F2;
  --brand-deep: #C3CEF9;
  --brand-soft: #1B2440;
  --accent:     #3DD97A;   /* verde WhatsApp claro p/ dark (canônico #25D366) */
  --accent-deep:#6FE8A5;
  --accent-soft:#12301F;
  --shadow-tint: 0,0,0;

  /* ── Semânticas — muradas ────────────────────────────────────────────── */
  --ok:          #7FC7A3;
  --ok-light:    #12271B;
  --warn:        #E6C078;
  --amber-light: #272010;
  --danger:      #E89A8A;
  --purple:      #9BA3D0;
  --purple-light:#1E2135;

  /* ── Sombras (mais densas no dark) ──────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.3);
  --shadow-sky: 0 0 0 1px var(--sky-400), 0 20px 60px -20px rgba(140,162,242,.35);
}

/* ── DARK GRAFITE — quando a paleta grafite está ativa ───────────────────── */
html.agm-dark[data-palette="grafite"] {
  --ice:       #1A1612;
  --ice-soft:  #211C16;
  --white:     #252019;
  --sky-mist:  #2E241C;
  --sky-soft:  #3A2C20;

  --bg: #1A1612; --bg-elev: #252019; --bg-sunk: #211C16; --bg-inverse: #ECE7DD;
  --fg: #ECE7DD; --fg-muted: #9A9384; --fg-soft: #6E695E;
  --border: #2E2920; --border-strong: #3A352B;

  --gray-900:  #ECE7DD;
  --gray-800:  #DAD4C7;
  --gray-700:  #C2BBAB;
  --gray-500:  #9A9384;
  --gray-400:  #6E695E;
  --gray-300:  #3A352B;
  --gray-200:  #2E2920;
  --gray-100:  #252019;

  --sky-200:   #3A2C20;
  --sky-300:   #C77A4A;
  --sky-400:   #D2693A;
  --sky-500:   #E07B45;
  --sky-600:   #E89466;
  --sky-700:   #F2B48C;

  --brand:      #ECE7DD;
  --brand-deep: #FFFFFF;
  --brand-soft: #2E2920;
  --accent:     #E07B45;
  --accent-deep:#F2B48C;
  --accent-soft:#2E241C;

  --ok:          #7FB89A;
  --ok-light:    #16251C;
  --warn:        #E6C078;
  --amber-light: #2A2110;
  --danger:      #E89A8A;
  --purple:      #9B8FB0;
  --purple-light:#241E2E;

  --shadow-sky: 0 0 0 1px var(--sky-400), 0 20px 60px -20px rgba(224,123,69,.35);
}

html.agm-dark body {
  background: var(--ice);
  color: var(--gray-900);
}

/* ── Componentes base do tokens.css ──────────────────────────────────────── */
html.agm-dark .card,
html.agm-dark .card-flat {
  background: var(--white);
  border-color: var(--gray-200);
  color: var(--gray-900);
}

html.agm-dark .btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-300);
}
html.agm-dark .btn-ghost:hover {
  background: var(--gray-100);
  border-color: var(--sky-500);
  color: var(--sky-500);
}
html.agm-dark .btn-primary {
  background: var(--sky-500);
  color: var(--ice);
}
html.agm-dark .btn-primary:hover { background: var(--sky-600); }

html.agm-dark .pill-sky    { background: var(--sky-200); color: var(--sky-500); }
html.agm-dark .pill-ok     { background: var(--ok-light); color: var(--ok); }
html.agm-dark .pill-warn   { background: var(--amber-light); color: var(--warn); }
html.agm-dark .pill-danger { background: #3A1010; color: var(--danger); }

/* ── Botão toggle de tema ────────────────────────────────────────────────── */
/* Posicionado no header de cada painel; tokens.css só define o estilo base   */
.agm-theme-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-elev, #161C2E); color: var(--fg, #E8EAF2);
  border: 1px solid var(--border-strong, #333B52);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: all 150ms ease;
  min-height: 30px;
}
.agm-theme-toggle:hover { border-color: var(--sky-500); color: var(--sky-500); }

/* No modo claro: fundo discreto */
html:not(.agm-dark) .agm-theme-toggle {
  background: var(--ice-soft); color: var(--gray-700); border-color: var(--gray-300);
}
html:not(.agm-dark) .agm-theme-toggle:hover { border-color: var(--sky-500); color: var(--sky-500); }

/* G3.1 start ═══════════════════════════════════════════════════════════════
   MOBILE-RESPONSIVE PATTERNS — G3.1
   Adicionado em 2026-05-20 para suportar ondas G2 (painéis principais)
   e G3 (secundários + bottom nav).
   Padrão: mobile-first, breakpoints 768px (tablet) e 480px (phone).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Breakpoints como custom properties (acessível via JS via getPropertyValue) */
  --bp-mobile: 768px;
  --bp-phone:  480px;

  /* Touch target mínimo WCAG 2.5.5 */
  --touch-min: 44px;

  /* Spacer para conteúdo não ser escondido pelo bottom nav fixo (G3.4) */
  --bottom-nav-h: 64px;
}

/* Utility classes — funcionam em qualquer painel sem precisar reescrever */

/* Stack vertical em mobile (substitui flex/grid horizontal) */
@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .mobile-stack > * { width: 100% !important; }

  /* Hide em mobile */
  .mobile-hidden { display: none !important; }
}

/* Hide em desktop (>=769px) */
@media (min-width: 769px) {
  .desktop-hidden { display: none !important; }
}

/* Touch target garantido — botões/links interativos */
.touch-target,
.touch-target * {
  min-height: var(--touch-min, 44px);
  min-width: var(--touch-min, 44px);
}

/* Spacer no final do scroll para não ficar atrás do bottom nav */
.bottom-nav-spacer {
  height: var(--bottom-nav-h, 64px);
}

/* Mobile-only — exibe apenas em phone (<480px) */
@media (max-width: 480px) {
  .phone-only { display: block; }
  .phone-hidden { display: none !important; }
}
@media (min-width: 481px) {
  .phone-only { display: none !important; }
}

/* Scrollable horizontal genérico (chips, tabs em mobile) */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  gap: 8px;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* Suporte safe-area iOS (notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
}

/* Dark mode — herdam de html.agm-dark já existente */
html.agm-dark .scroll-x { background: transparent; }
/* G3.1 end ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile #1 (auditoria responsividade 2026-07-18) — ANTI-ZOOM iOS.
   No iPhone, tocar num campo com fonte < 16px faz a tela dar zoom sozinha e
   desalinhar. Forçar >= 16px nos campos SÓ no celular resolve. Seletor de baixa
   especificidade → qualquer regra .classe com fonte própria continua vencendo.
   Não altera o desktop (só dentro do @media mobile).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px;
  }
}