/* ==========================================================================
* HAONchat — FOUNDATION styles (web/styles.css) [owner: Fundação]
* --------------------------------------------------------------------------
* Base global + RESET + design tokens (:root, herdados do landing-draft) +
* dark mode ([data-theme="dark"]) + utilitários REUSÁVEIS por TODAS as telas
* (.btn / .card / .field / .grid / .toast / .modal / .chip / .empty-state /
* .spinner) + helpers de a11y (.skip-link, :focus-visible) + responsivo base.
*
* Regras do CONTRATO respeitadas:
* - Zero cor hardcoded fora do :root — telas usam só as CSS vars.
* - Ergonomia 54: CTA laranja único min-height 54px; botões >=48px; label
* negrito ACIMA do input; input min-height 42-48px, font 16px, borda 1px.
* - Dark via [data-theme="dark"] no (persistido em localStorage.haon_theme).
* - Fontes Inter + Space Grotesk (Integração carrega o Google).
* - prefers-reduced-motion respeitado (transições/animações desligadas).
* - Zero dependência externa além das fontes.
*
* Cada tela (onboarding.css / builder.css / pool.css) ACRESCENTA por cima;
* NÃO redeclara estes tokens nem estas utilities.
* ========================================================================== */
/* ==========================================================================
* 1. DESIGN TOKENS (copiados EXATOS do web-ref/landing-draft.html)
* ========================================================================== */
:root{
/* --- azul: info / secundário --- */
--blue-950:#071325; --blue-900:#0b1d36; --blue-850:#102a49; --blue-800:#12345a;
--blue-700:#1f5f99; --blue-600:#2f7fbd; --blue-500:#4a9bd6;
--blue-100:#eaf4ff; --blue-050:#f7fbff;
/* --- verde: whatsapp / sucesso / conectado / enviado --- */
--green-900:#0d2b20; --green-800:#123d2d; --green-700:#1f6a4a; --green-600:#2f8f62;
--green-500:#3fa875; --green-100:#eaf6ef; --green-050:#f5fbf7;
/* --- laranja: AÇÃO que o usuário quer (conectar / ligar / assinar) --- */
--orange-750:#933f0e; --orange-700:#b65318; --orange-600:#d76b21;
--orange-500:#f28a32; --orange-100:#fff1e5;
/* --- amarelo: atenção / foco --- */
--yellow-600:#d7a800; --yellow-500:#ffc933; --yellow-100:#fff8d9;
/* --- vermelho: erro / perigo / remover --- */
--red-700:#a32820; --red-600:#c0392b; --red-500:#e0584a; --red-100:#fdecec;
/* --- texto / superfícies / linhas --- */
--ink:#142033; --soft:#536477; --muted:#6f7a89;
--line:#dfe7e1; --line-strong:#cbd9e6;
--bg:#f3f6f1; --card:#ffffff;
/* --- forma / toque / sombra --- */
--radius:18px; --radius-sm:12px; --radius-pill:999px; --touch:48px;
--shadow-sm:0 1px 2px rgba(16,42,73,.06), 0 4px 12px rgba(16,42,73,.05);
--shadow-md:0 8px 28px rgba(16,42,73,.10);
--shadow-lg:0 22px 60px rgba(16,42,73,.16);
--maxw:1180px;
/* --- fontes (Integração carrega o Google) --- */
--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
--font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
}
/* --- DARK MODE --- */
[data-theme="dark"]{
--ink:#eaf6ef; --soft:#8ba096; --muted:#708a7e;
--line:#223c32; --line-strong:#2f5245;
--bg:#050d0a; --card:#0c1813;
--blue-050:#08121d; --blue-100:#0f2237;
--green-050:#0a1812; --green-100:#10241b;
--orange-100:#2a1809;
--yellow-100:#2a2208;
--red-100:#2a1010;
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow-md:0 10px 30px rgba(0,0,0,.5);
--shadow-lg:0 24px 60px rgba(0,0,0,.6);
}
/* ==========================================================================
* 2. RESET + BASE GLOBAL
* ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* nada estoura a largura da viewport (anti overflow-x horizontal no mobile).
* overflow-x:clip NÃO cria contexto de scroll -> position:sticky (header da
* landing, app-topbar e preview do builder) continua funcionando.
* 'hidden' fica como fallback p/ navegadores sem suporte a 'clip'. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
body{
font-family:var(--font-body);
background:var(--bg); color:var(--ink); line-height:1.55;
min-height:100vh; min-height:100dvh;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
/* imagens nunca empurram o layout além da coluna (SVG mantém height explícito dos ícones) */
img,video{max-width:100%;height:auto}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.15}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:100%;color:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--green-500) 40%,transparent)}
/* scrollbar discreta, tema-aware */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}
/* container central reutilizável */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ==========================================================================
* 3. ACESSIBILIDADE (a11y helpers)
* ========================================================================== */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:600;
background:var(--blue-800);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
font-weight:700;font-size:14px;
}
.skip-link:focus{left:0}
/* foco visível consistente (amarelo 3px, ergonomia 54) */
:focus-visible{outline:3px solid var(--yellow-500);outline-offset:3px;border-radius:6px}
/* mouse não mostra anel; teclado sim */
:focus:not(:focus-visible){outline:none}
.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;
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ==========================================================================
* 4. BOTÕES (.btn + variações .primary/.orange/.ghost/.danger/.full/.lg/.sm)
* Ergonomia 54: base >=48px; .lg (CTA principal) >=54px, font 16px.
* ========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:var(--touch);padding:0 22px;border-radius:13px;
border:1.5px solid var(--line);background:var(--card);color:var(--ink);
font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1;
cursor:pointer;white-space:nowrap;text-align:center;-webkit-appearance:none;appearance:none;
transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"],.btn.is-loading{
opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;
}
.btn svg{width:19px;height:19px;flex:0 0 auto}
/* laranja = ação principal que o usuário quer */
.btn.orange{
background:linear-gradient(135deg,var(--orange-600),var(--orange-500));
color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(215,107,33,.32);
}
.btn.orange:hover{box-shadow:0 10px 26px rgba(215,107,33,.42)}
/* azul = ação secundária / confirmar neutro */
.btn.primary{
background:linear-gradient(135deg,var(--blue-850),var(--blue-600));
color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(31,95,153,.30);
}
.btn.primary:hover{box-shadow:0 10px 26px rgba(31,95,153,.40)}
/* verde = sucesso / whatsapp / conectar */
.btn.green{
background:linear-gradient(135deg,var(--green-700),var(--green-500));
color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(31,106,74,.30);
}
.btn.green:hover{box-shadow:0 10px 26px rgba(31,106,74,.40)}
/* ghost = terço terciário, claramente secundário */
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--blue-100);border-color:var(--blue-500)}
/* danger = remover / desconectar (confirmação antes) */
.btn.danger{background:var(--card);color:var(--red-600);border-color:color-mix(in srgb,var(--red-600) 45%,transparent)}
.btn.danger:hover{background:var(--red-100)}
.btn.lg{min-height:54px;font-size:16px;padding:0 28px;border-radius:14px}
.btn.sm{min-height:38px;font-size:13px;padding:0 14px;border-radius:10px;gap:6px}
.btn.sm svg{width:16px;height:16px}
.btn.full{width:100%}
/* spinner inline dentro do botão enquanto carrega */
.btn.is-loading{pointer-events:none}
.btn.is-loading::before{
content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
border:2px solid currentColor;border-right-color:transparent;
animation:haon-spin .7s linear infinite;
}
/* ==========================================================================
* 5. CARTÕES (.card + .card-head/.card-body)
* ========================================================================== */
.card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);
}
.card.pad{padding:clamp(18px,3vw,26px)}
.card.hover{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card.hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-500)}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.card-head h3,.card-head strong{font-family:var(--font-display);font-size:16px;font-weight:700}
.card-body{padding:18px}
/* ==========================================================================
* 6. CAMPOS DE FORMULÁRIO (.field — label NEGRITO acima, input >=42px font 16px)
* ========================================================================== */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:2px}
.field > label,.field-label{
font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;
}
.field .hint{font-size:13px;color:var(--soft);line-height:1.4;margin-top:-2px}
.field input,.field select,.field textarea{
width:100%;min-height:42px;
border:1px solid var(--line-strong);background:var(--card);color:var(--ink);
border-radius:11px;padding:9px 14px;
font-family:var(--font-body);font-size:16px;line-height:1.4;
-webkit-appearance:none;appearance:none;
transition:border-color .15s ease, box-shadow .15s ease;
}
/* CTA-grande dos campos de auth/wizard fica no toque cheio */
.field input.lg,.field.lg input,.field.lg select{min-height:var(--touch)}
.field textarea{min-height:84px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--blue-500);
box-shadow:0 0 0 4px color-mix(in srgb,var(--blue-500) 16%,transparent);
}
.field input:disabled,.field select:disabled,.field textarea:disabled{
opacity:.6;cursor:not-allowed;background:color-mix(in srgb,var(--line) 35%,var(--card));
}
/* estado de erro do campo */
.field.has-error input,.field.has-error select,.field.has-error textarea{
border-color:var(--red-500);
box-shadow:0 0 0 4px color-mix(in srgb,var(--red-500) 14%,transparent);
}
.field .err-msg{font-size:13px;font-weight:600;color:var(--red-600);line-height:1.4}
.field select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f7a89' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer;
}
/* grade de 2 campos lado a lado (empilha no mobile, ver §13) */
.field-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* checkbox em linha (manter conectado / aceito termos) */
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--soft);cursor:pointer;line-height:1.45}
.checkline input[type="checkbox"],.checkline input[type="radio"]{
width:20px;height:20px;margin-top:1px;flex:0 0 auto;accent-color:var(--green-600);cursor:pointer;
}
/* ==========================================================================
* 7. GRID (.grid utilitário responsivo)
* ========================================================================== */
.grid{display:grid;gap:18px}
.grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* auto-fit: cartões que se acomodam sozinhos (mín. 240px) */
.grid.g-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.tight{gap:11px}
/* ==========================================================================
* 8. CHIPS / PILLS / BADGES (.chip + estados de cor com significado)
* Cores espelham o cockpit de Pool (queued/abordado/conversando/cold/dnc).
* ========================================================================== */
.chip{
display:inline-flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:700;line-height:1;
padding:6px 12px;border-radius:var(--radius-pill);
border:1px solid var(--line);background:var(--card);color:var(--soft);
white-space:nowrap;
}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:currentColor}
.chip b{font-weight:800;color:var(--ink)}
/* significado consistente */
.chip.info{color:var(--blue-700);background:var(--blue-100);border-color:color-mix(in srgb,var(--blue-500) 40%,transparent)}
.chip.ok,.chip.green,.chip.connected{color:var(--green-700);background:var(--green-100);border-color:color-mix(in srgb,var(--green-500) 45%,transparent)}
.chip.warn{color:var(--yellow-600);background:var(--yellow-100);border-color:color-mix(in srgb,var(--yellow-500) 55%,transparent)}
.chip.danger,.chip.dnc{color:var(--red-600);background:var(--red-100);border-color:color-mix(in srgb,var(--red-500) 45%,transparent)}
.chip.muted{color:var(--muted);background:color-mix(in srgb,var(--line) 35%,transparent);border-color:var(--line)}
.chip.orange{color:var(--orange-700);background:var(--orange-100);border-color:color-mix(in srgb,var(--orange-500) 50%,transparent)}
/* badge "destaque" pra plano do meio / etiqueta */
.badge{
display:inline-block;font-size:12px;font-weight:700;line-height:1;
padding:6px 14px;border-radius:var(--radius-pill);color:#fff;
background:linear-gradient(135deg,var(--orange-600),var(--orange-500));
box-shadow:0 6px 16px rgba(215,107,33,.35);
}
/* ==========================================================================
* 9. TOAST (feedback humano, 3–3.5s — usado pelo app.js global)
* Markup esperado:
* ========================================================================== */
.toast{
position:fixed;left:50%;bottom:26px;z-index:500;
transform:translateX(-50%) translateY(140%);
background:var(--ink);color:var(--bg);
padding:14px 20px;border-radius:13px;box-shadow:var(--shadow-lg);
max-width:min(92vw,460px);
display:flex;align-items:flex-start;gap:11px;
transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast strong{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.toast span{display:block;font-size:13.5px;opacity:.85;line-height:1.4}
.toast .toast-ico{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--green-500)}
/* variantes: erro (vermelho) e atenção (amarelo) — borda interna colorida */
.toast.err{box-shadow:var(--shadow-lg),inset 0 0 0 1.5px var(--red-500)}
.toast.err .toast-ico{color:var(--red-500)}
.toast.warn{box-shadow:var(--shadow-lg),inset 0 0 0 1.5px var(--yellow-500)}
.toast.warn .toast-ico{color:var(--yellow-500)}
/* ==========================================================================
* 10. MODAL (.modal-backdrop + .modal — confirmações / formulários flutuantes)
* Ergonomia 54: ações em 2 botões grandes (Cancelar / Confirmar).
* ========================================================================== */
.modal-backdrop{
position:fixed;inset:0;z-index:450;display:grid;place-items:center;padding:22px;
background:rgba(8,14,30,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;transition:opacity .18s ease, visibility .18s ease;
}
.modal-backdrop.show{opacity:1;visibility:visible;animation:haon-fade .16s ease}
.modal{
position:relative;width:min(480px,100%);max-height:88vh;overflow-y:auto;
background:var(--card);color:var(--ink);border:1px solid var(--line);
border-radius:22px;padding:24px;box-shadow:var(--shadow-lg);
transform:translateY(8px) scale(.98);transition:transform .2s cubic-bezier(.2,.9,.3,1.2);
}
.modal.wide{width:min(720px,100%)}
.modal-backdrop.show .modal{transform:none}
.modal-x{
position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:9px;
display:grid;place-items:center;font-size:22px;line-height:1;color:var(--muted);
background:transparent;transition:background .14s, color .14s;
}
.modal-x:hover{background:var(--line);color:var(--ink)}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.modal-ic{
width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,var(--blue-800),var(--green-600));box-shadow:var(--shadow-sm);
}
.modal-ic svg{width:22px;height:22px}
.modal-head h3,.modal-head b{display:block;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.2}
.modal-head .modal-sub{display:block;font-size:13px;color:var(--soft);margin-top:2px}
.modal-body{font-size:15px;color:var(--soft);line-height:1.55}
.modal-foot{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.modal-foot .btn{flex:1 1 auto;min-width:130px}
/* ==========================================================================
* 11. SPINNER (.spinner — carregamento; SEMPRE com teto/retry no JS)
* ========================================================================== */
.spinner{
display:inline-block;width:28px;height:28px;flex:0 0 auto;border-radius:50%;
border:3px solid color-mix(in srgb,var(--blue-500) 28%,transparent);
border-top-color:var(--blue-600);
animation:haon-spin .8s linear infinite;
}
.spinner.sm{width:18px;height:18px;border-width:2px}
.spinner.lg{width:42px;height:42px;border-width:4px}
.spinner.on-orange{border-color:rgba(255,255,255,.4);border-top-color:#fff}
/* bloco de carregamento centralizado com texto */
.loading-block{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 18px;text-align:center;color:var(--soft)}
.loading-block p{font-size:14.5px;max-width:36ch}
/* ==========================================================================
* 12. ESTADOS VAZIO / ERRO / OFFLINE (.empty-state — sempre desenhados)
* Ergonomia 54: ícone grande + título + frase humana + 1 ação clara.
* ========================================================================== */
.empty-state{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;padding:clamp(28px,6vw,56px) 22px;text-align:center;color:var(--soft);
}
.empty-state .es-ico{
width:64px;height:64px;flex:0 0 auto;border-radius:18px;display:grid;place-items:center;
background:var(--blue-100);color:var(--blue-700);
}
.empty-state .es-ico svg{width:32px;height:32px}
.empty-state h3,.empty-state .es-title{
font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);line-height:1.25;
}
.empty-state p,.empty-state .es-text{font-size:15px;color:var(--soft);max-width:42ch;line-height:1.55;margin:0}
.empty-state .btn{margin-top:6px}
/* variantes de cor por tom (erro / offline) */
.empty-state.err .es-ico{background:var(--red-100);color:var(--red-600)}
.empty-state.offline .es-ico{background:var(--yellow-100);color:var(--yellow-600)}
.empty-state.ok .es-ico{background:var(--green-100);color:var(--green-700)}
/* ==========================================================================
* 13. ANIMAÇÕES (keyframes globais reusáveis)
* ========================================================================== */
@keyframes haon-spin{to{transform:rotate(360deg)}}
@keyframes haon-fade{from{opacity:0}to{opacity:1}}
@keyframes haon-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes haon-pulse-dot{
0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green-500) 55%,transparent)}
100%{box-shadow:0 0 0 9px rgba(63,168,117,0)}
}
.rise-in{animation:haon-rise .26s ease both}
/* ponto verde "ao vivo / conectado" reutilizável */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green-500);animation:haon-pulse-dot 1.7s ease-out infinite}
/* ==========================================================================
* 14. SELETOR DE IDIOMA (switcher montado pelo i18n.js — .haon-lang-switch)
* ========================================================================== */
.haon-lang-switch{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.haon-lang-opt{
min-height:34px;padding:0 11px;border-radius:8px;border:none;background:transparent;
font-size:13px;font-weight:700;color:var(--soft);cursor:pointer;
transition:background .14s, color .14s;
}
.haon-lang-opt:hover{background:var(--blue-100);color:var(--ink)}
.haon-lang-opt.is-active{background:var(--blue-800);color:#fff}
/* ==========================================================================
* 15. HELPERS UTILITÁRIOS curtos (tipografia / espaçamento / texto)
* ========================================================================== */
.text-soft{color:var(--soft)}
.text-muted{color:var(--muted)}
.text-center{text-align:center}
.text-ok{color:var(--green-700)}
.text-warn{color:var(--yellow-600)}
.text-err{color:var(--red-600)}
.fw-700{font-weight:700}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.gap-1{gap:8px}.gap-2{gap:11px}.gap-3{gap:16px}
.flex{display:flex}.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.hidden{display:none!important}
.full-w{width:100%}
.divider{height:1px;background:var(--line);border:0;margin:18px 0}
/* aviso / nota informativa em bloco (ex.: dica do wizard) */
.note{
font-size:13.5px;line-height:1.5;color:var(--green-700);
background:var(--green-050);border:1px solid color-mix(in srgb,var(--green-500) 30%,transparent);
border-radius:12px;padding:11px 14px;
}
.note.warn{color:var(--yellow-600);background:var(--yellow-100);border-color:color-mix(in srgb,var(--yellow-500) 45%,transparent)}
.note.info{color:var(--blue-700);background:var(--blue-100);border-color:color-mix(in srgb,var(--blue-500) 35%,transparent)}
/* ==========================================================================
* 16. RESPONSIVO BASE (mobile-first overrides comuns a todas as telas)
* Ergonomia 54: no mobile botões e campos empilham 100%.
* ========================================================================== */
@media (max-width:880px){
.grid.g-2,.grid.g-3,.grid.g-4{grid-template-columns:1fr}
/* botões secundários menores ainda respeitam o toque cheio no mobile */
.btn.sm{min-height:42px}
}
@media (max-width:520px){
.field-row2{grid-template-columns:1fr}
/* botões agrupados viram pilha 100% — nunca dois colados <80px */
.btn-stack-sm{display:flex;flex-direction:column;gap:10px}
.btn-stack-sm > .btn{width:100%}
/* toque cheio: nenhum alvo principal abaixo de 48px no celular */
.btn{min-height:var(--touch)}
.modal{padding:20px}
.modal-foot{flex-direction:column-reverse}
.modal-foot .btn{width:100%}
.toast{left:14px;right:14px;bottom:16px;transform:translateY(160%);max-width:none}
.toast.show{transform:translateY(0)}
}
/* ==========================================================================
* 17. PREFERS-REDUCED-MOTION (desliga toda animação/transição)
* ========================================================================== */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
}