/* ══════════════════════════════════════════════════════════════════════════
   Pinha CRM — styles.css (folha modular, moderna, acessível)
   Camadas (ordem de prioridade crescente):
   tokens → base → layout → forms → components → page → utilities → anim → themes → responsive → print
   Princípios: contraste alto (AA), largura total, formulários/dropdowns polidos,
   estados completos (hover/focus/active/disabled/erro/sucesso), dark mode legível.
   ══════════════════════════════════════════════════════════════════════════ */
@layer tokens, base, layout, forms, components, page, utilities, anim, themes, responsive, print;

/* ═══════════════════════════ TOKENS ═══════════════════════════ */
@layer tokens{
  :root{
    /* —— marca Pinha —— */
    --musgo:#43521f; --musgo-2:#33401a; --musgo-3:#2a3614;
    --caramelo:#a96f37; --caramelo-2:#8f5d2c; --areia:#F4EFE4; --verde:#15893f; --verde-2:#0f6d31;
    /* —— cor de destaque (personalizável pelo cliente) —— */
    --accent:#43521f; --accent-2:#33401a; --accent-3:#2a3614; --accent-soft:#eef2e3; --accent-ink:#fff;
    /* —— texto (contraste AA sobre --bg/--surface) —— */
    --ink:#1f2714; --ink-2:#4a5340; --ink-3:#697159; --muted:#737c64; --muted-2:#9aa389;
    /* —— superfícies / linhas —— */
    --bg:#f3f5ec; --bg-2:#eef1e4; --surface:#ffffff; --surface-2:#fafbf6; --surface-3:#f4f6ee;
    --line:#e0e3d4; --line-2:#ebeee0; --line-strong:#c9cdb7;
    /* —— feedback (alto contraste) —— */
    --ok:#15803d; --ok-bg:#e6f6ec; --ok-line:#bfe6cc;
    --warn:#9a6320; --warn-bg:#fbf1e2; --warn-line:#eed9bc;
    --err:#b3261e; --err-bg:#fdecea; --err-line:#f2c7c3;
    --info:#286a48; --info-bg:#e8f3ec; --info-line:#c8e2d2;
    /* —— escala Fibonacci (espaço/raio) —— */
    --s0:2px; --s1:3px; --s2:5px; --s3:8px; --s4:13px; --s5:21px; --s6:34px; --s7:55px; --s8:89px;
    --r1:6px; --r2:10px; --r3:14px; --r4:22px; --r-pill:999px;
    /* —— tipografia —— */
    --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-mono:'SFMono-Regular',ui-monospace,'JetBrains Mono','Courier New',monospace;
    --root-font:15px; --lh:1.55;
    --fs-xs:.72rem; --fs-sm:.82rem; --fs-md:.92rem; --fs-base:1rem; --fs-lg:1.15rem; --fs-xl:1.35rem; --fs-2xl:1.7rem; --fs-3xl:2rem;
    /* —— sombras / efeitos —— */
    --shadow-xs:0 1px 2px rgba(31,39,20,.05);
    --shadow:0 1px 2px rgba(31,39,20,.05),0 8px 24px -10px rgba(31,39,20,.12);
    --shadow-md:0 4px 12px -2px rgba(31,39,20,.10),0 12px 32px -10px rgba(31,39,20,.14);
    --shadow-lg:0 18px 50px -14px rgba(31,39,20,.26);
    --ring:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
    --ring-err:0 0 0 3px color-mix(in srgb,var(--err) 28%,transparent);
    /* —— transições —— */
    --t-fast:.12s ease; --t:.2s cubic-bezier(.4,0,.2,1); --t-slow:.32s cubic-bezier(.4,0,.2,1);
    /* —— layout —— */
    --sidebar-w:250px; --topbar-h:64px; --maxw:none;
    /* —— form controls —— */
    --field-h:42px; --field-h-sm:34px; --field-bg:var(--surface); --field-line:var(--line-strong);
    /* —— SVG da seta do select (cor segue currentColor via mask seria ideal; usamos data-uri) —— */
    --chevron: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='%23697159' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  /* densidade */
  :root[data-density="compact"]{ --s3:6px; --s4:9px; --s5:14px; --s6:22px; --root-font:14px; --field-h:36px; --field-h-sm:30px; }
  :root[data-density="cozy"]{ --s4:15px; --s5:24px; --s6:42px; --field-h:46px; }
}

/* ═══════════════════════════ BASE ═══════════════════════════ */
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0;padding:0}
  html{font-size:var(--root-font);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  html,body{height:100%}
  body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:var(--fs-base);line-height:var(--lh);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
  h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
  p{margin:0}
  a{color:var(--accent);text-decoration:none;transition:color var(--t-fast)}
  a:hover{color:var(--accent-2);text-decoration:underline}
  strong,b{font-weight:700;color:inherit}
  small{font-size:var(--fs-sm)}
  code,kbd,pre{font-family:var(--font-mono)}
  button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;line-height:1.2}
  button:disabled{cursor:not-allowed;opacity:.55}
  input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
  img,svg{display:block;max-width:100%}
  hr{border:none;border-top:1px solid var(--line);margin:var(--s5) 0}
  ul,ol{padding-left:var(--s5)}
  :focus{outline:none}
  :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r1)}
  ::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--ink)}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line-strong) 80%,var(--ink-3));border-radius:8px;border:2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
  *{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  ::placeholder{color:var(--muted-2);opacity:1}
  [hidden]{display:none!important}
  :root[data-anim="off"] *,:root[data-anim="off"] *::before,:root[data-anim="off"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  @media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }
}

/* ═══════════════════════════ LAYOUT ═══════════════════════════ */
@layer layout{
  .app{display:none;min-height:100vh}
  /* quando visível, o app é flex e o main DEVE crescer p/ preencher a largura toda */
  .app[style*="flex"],.app[style*="block"]{width:100%}
  /* —— sidebar —— */
  .sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:var(--s5) var(--s4);z-index:60;transition:transform var(--t)}
  .sidebar .logo{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3) var(--s5);margin-bottom:var(--s4);border-bottom:1px solid var(--line-2)}
  .sidebar .logo img{height:34px;width:auto}
  .nav{display:flex;flex-direction:column;gap:var(--s1);overflow-y:auto;flex:1;margin:0 calc(var(--s2) * -1);padding:0 var(--s2)}
  .nav-item{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r2);color:var(--ink-2);
    font-weight:600;font-size:var(--fs-md);transition:background var(--t-fast),color var(--t-fast);text-align:left;width:100%;position:relative}
  .nav-item i{font-size:1rem;width:20px;text-align:center;flex-shrink:0;color:var(--muted);transition:color var(--t-fast)}
  .nav-item:hover{background:var(--accent-soft);color:var(--ink)}
  .nav-item:hover i{color:var(--accent)}
  .nav-item.active{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-xs);font-weight:700}
  .nav-item.active i{color:var(--accent-ink)}
  .nav-item .nav-badge{margin-left:auto;background:var(--accent-soft);color:var(--accent);font-size:var(--fs-xs);font-weight:700;padding:1px 7px;border-radius:var(--r-pill)}
  .nav-item.active .nav-badge{background:rgba(255,255,255,.22);color:#fff}
  .nav-sep{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
    padding:var(--s5) var(--s4) var(--s2);display:flex;align-items:center;gap:var(--s2);justify-content:space-between;cursor:pointer;user-select:none;transition:color var(--t-fast)}
  .nav-sep:hover{color:var(--ink-2)} .nav-sep i{transition:transform var(--t)}
  .nav-adv{display:flex;flex-direction:column;gap:var(--s1)}
  .nav-adv.collapsed{display:none}
  .sidebar .ver{font-size:var(--fs-xs);color:var(--muted-2);text-align:center;padding-top:var(--s4);border-top:1px solid var(--line-2);margin-top:var(--s3)}
  /* —— main / topbar / content (LARGURA TOTAL) —— */
  /* main: cresce p/ preencher TODA a largura restante (flex-item de .app).
     flex:1 cobre .app flex; width:auto cobre .app block — full-width em qualquer caso. */
  .main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;width:auto}
  .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);padding:var(--s4) var(--s6);
    display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--topbar-h)}
  .topbar h1{font-size:var(--fs-xl);font-weight:800;color:var(--ink)}
  .topbar .sub{font-size:var(--fs-sm);color:var(--muted);font-weight:500;margin-top:2px}
  .topbar .acts{display:flex;align-items:center;gap:var(--s3)}
  .content{padding:var(--s6);flex:1 1 auto;width:100%;max-width:var(--maxw);margin:0}
  .content > *{max-width:100%}
  .menu-toggle{display:none}
  .backdrop{position:fixed;inset:0;background:rgba(15,20,8,.42);z-index:55;backdrop-filter:blur(2px)}
}

/* ═══════════════════════════ FORMS (inputs + dropdowns) ═══════════════════════════ */
@layer forms{
  .fld{margin-bottom:var(--s4)}
  .fld > label,.field-label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:var(--s2)}
  .fld .desc,.field-help{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.45}
  .req::after{content:'*';color:var(--err);margin-left:3px;font-weight:700}

  /* base de todos os controles — casa QUALQUER input (com ou sem atributo type),
     textarea e select; exclui controles especiais (checkbox/radio/color/range/file/botões/switch). */
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.switch input),
  textarea,
  select{
    width:100%;min-height:var(--field-h);padding:var(--s3) var(--s4);background:var(--field-bg);color:var(--ink);
    border:1.5px solid var(--field-line);border-radius:var(--r2);font-size:var(--fs-md);line-height:1.4;
    transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
    appearance:none;-webkit-appearance:none}
  textarea{min-height:104px;resize:vertical;line-height:1.55}
  .fld input:hover,.fld textarea:hover,.fld select:hover,
  input:hover:not(:disabled),textarea:hover:not(:disabled),select:hover:not(:disabled){border-color:var(--ink-3)}
  .fld input:focus,.fld textarea:focus,.fld select:focus,
  input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring);background:var(--surface)}
  input:disabled,textarea:disabled,select:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed;border-color:var(--line)}
  input::placeholder,textarea::placeholder{color:var(--muted-2)}
  input:read-only:not([type=color]){background:var(--surface-3)}

  /* tamanhos */
  .input-sm,select.input-sm,.fld input.input-sm{min-height:var(--field-h-sm);padding:var(--s2) var(--s3);font-size:var(--fs-sm);border-radius:var(--r1)}
  .input-lg{min-height:52px;font-size:var(--fs-lg);padding:var(--s4) var(--s5)}

  /* DROPDOWN (select custom com seta) */
  select,.fld select{
    background-image:var(--chevron);background-repeat:no-repeat;background-position:right var(--s4) center;background-size:14px;
    padding-right:calc(var(--s4) * 2 + 14px);cursor:pointer;text-overflow:ellipsis}
  select:focus{background-image:var(--chevron)}
  select::-ms-expand{display:none}
  select option{background:var(--surface);color:var(--ink);padding:var(--s3)}
  select optgroup{font-weight:700;color:var(--ink-2)}
  select[multiple]{background-image:none;padding-right:var(--s4);min-height:auto}

  /* search input com ícone */
  .input-search{position:relative}
  .input-search input{padding-left:calc(var(--s4) * 2 + 6px)}
  .input-search::before{content:'\f002';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem;pointer-events:none}

  /* input group / addons */
  .input-group{display:flex;align-items:stretch}
  .input-group > *{border-radius:0}
  .input-group > :first-child{border-top-left-radius:var(--r2);border-bottom-left-radius:var(--r2)}
  .input-group > :last-child{border-top-right-radius:var(--r2);border-bottom-right-radius:var(--r2)}
  .input-group > * + *{margin-left:-1.5px}
  .input-group .addon{display:inline-flex;align-items:center;padding:0 var(--s4);background:var(--surface-3);border:1.5px solid var(--field-line);color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
  .input-group input:focus,.input-group select:focus{position:relative;z-index:1}

  /* estados de validação */
  .fld.is-error input,.fld.is-error select,.fld.is-error textarea,input.is-error,select.is-error{border-color:var(--err)}
  .fld.is-error input:focus,input.is-error:focus{box-shadow:var(--ring-err)}
  .fld.is-success input,input.is-success{border-color:var(--ok)}
  .field-error{color:var(--err);font-size:var(--fs-xs);margin-top:4px;display:flex;align-items:center;gap:5px}

  /* color picker */
  input[type=color]{min-height:42px;height:42px;width:54px;padding:3px;cursor:pointer;border-radius:var(--r2);border:1.5px solid var(--field-line);background:var(--surface)}
  input[type=color]::-webkit-color-swatch-wrapper{padding:0}
  input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}

  /* checkbox / radio custom */
  input[type=checkbox]:not(.switch input),input[type=radio]{
    appearance:none;-webkit-appearance:none;width:19px;height:19px;min-height:19px;border:2px solid var(--line-strong);
    background:var(--surface);cursor:pointer;flex-shrink:0;transition:var(--t-fast);position:relative;display:inline-grid;place-content:center;padding:0}
  input[type=checkbox]:not(.switch input){border-radius:6px}
  input[type=radio]{border-radius:50%}
  input[type=checkbox]:not(.switch input):hover,input[type=radio]:hover{border-color:var(--accent)}
  input[type=checkbox]:not(.switch input):checked,input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}
  input[type=checkbox]:not(.switch input):checked::after{content:'';width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
  input[type=radio]:checked::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}
  input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{box-shadow:var(--ring)}
  .check-row{display:flex;align-items:center;gap:var(--s3);cursor:pointer;padding:var(--s2) 0}
  .check-row span{font-size:var(--fs-md);color:var(--ink-2)}

  /* switch (toggle) */
  .switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
  .switch input{display:none}
  .switch .sl{position:absolute;inset:0;background:var(--line-strong);border-radius:var(--r-pill);transition:background var(--t)}
  .switch .sl::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--t);box-shadow:0 1px 3px rgba(0,0,0,.28)}
  .switch input:checked + .sl{background:var(--verde)}
  .switch input:checked + .sl::before{transform:translateX(20px)}
  .switch input:focus-visible + .sl{box-shadow:var(--ring)}
  .switch.sm{width:38px;height:22px} .switch.sm .sl::before{width:16px;height:16px} .switch.sm input:checked + .sl::before{transform:translateX(16px)}

  /* linha de configuração (label + controle) */
  .fld-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line-2)}
  .fld-row:last-child{border-bottom:none}
  .fld-row .info{flex:1;min-width:0}
  .fld-row .info b{font-size:var(--fs-md);color:var(--ink);font-weight:600}
  .fld-row .info .desc{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
  .fld-row .ctl{flex-shrink:0;display:flex;align-items:center;gap:var(--s3)}
  .fld-row .ctl input:not([type=checkbox]):not([type=color]),.fld-row .ctl select{width:auto;min-width:150px}
  .fld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
  fieldset{border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);margin-bottom:var(--s5)}
  legend{font-weight:700;font-size:var(--fs-md);padding:0 var(--s3);color:var(--ink)}

  /* paleta de variáveis */
  .var-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s4)}
  .var-chip{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--r-pill);
    padding:4px var(--s3);font-size:var(--fs-xs);color:var(--accent);font-weight:600;cursor:pointer;font-family:var(--font-mono);transition:var(--t-fast)}
  .var-chip:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
}

/* ═══════════════════════════ COMPONENTS ═══════════════════════════ */
@layer components{
  /* —— botões —— */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3) var(--s5);border-radius:var(--r2);
    font-weight:600;font-size:var(--fs-md);line-height:1.2;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
    border:1.5px solid transparent;white-space:nowrap;user-select:none;text-decoration:none}
  .btn:hover{text-decoration:none}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn:disabled,.btn.is-disabled{opacity:.55;cursor:not-allowed;transform:none}
  .btn i{font-size:.9em}
  .btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-xs)} .btn-primary:hover{background:var(--accent-2)}
  .btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink-2)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
  .btn-soft{background:var(--accent-soft);color:var(--accent)} .btn-soft:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
  .btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)} .btn-outline:hover{background:var(--accent);color:#fff}
  .btn-danger{background:var(--err-bg);color:var(--err);border-color:var(--err-line)} .btn-danger:hover{background:var(--err);color:#fff;border-color:var(--err)}
  .btn-success{background:var(--verde);color:#fff} .btn-success:hover{background:var(--verde-2)}
  .btn-link{background:none;color:var(--accent);padding-left:0;padding-right:0} .btn-link:hover{text-decoration:underline}
  .btn-sm{padding:var(--s2) var(--s4);font-size:var(--fs-sm);border-radius:var(--r1)}
  .btn-lg{padding:var(--s4) var(--s6);font-size:var(--fs-lg)}
  .btn-icon{padding:var(--s3);width:var(--field-h);height:var(--field-h);border-radius:var(--r2)}
  .btn-icon.btn-sm{width:var(--field-h-sm);height:var(--field-h-sm);padding:0}
  .btn-block{width:100%}
  .btn.loading{color:transparent!important;pointer-events:none;position:relative}
  .btn.loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sp .6s linear infinite;color:#fff}
  .btn-group{display:inline-flex}
  .btn-group .btn{border-radius:0;border-right-width:0}
  .btn-group .btn:first-child{border-top-left-radius:var(--r2);border-bottom-left-radius:var(--r2)}
  .btn-group .btn:last-child{border-top-right-radius:var(--r2);border-bottom-right-radius:var(--r2);border-right-width:1.5px}

  /* —— cards —— */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow)}
  .card-pad{padding:var(--s5)}
  .card-hover{transition:transform var(--t),box-shadow var(--t)} .card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .card-head{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
  .card-head h3{font-size:var(--fs-lg)}
  .card-body{padding:var(--s5)} .card-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line-2);background:var(--surface-2);border-radius:0 0 var(--r3) var(--r3)}
  .card.accent-left{position:relative;overflow:hidden} .card.accent-left::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}

  /* —— grids —— */
  .grid{display:grid;gap:var(--s5)}
  .grid-kpi{grid-template-columns:repeat(auto-fit,minmax(234px,1fr))}
  .grid-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

  /* —— KPI —— */
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
  .kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .kpi::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
  .kpi.green::before{background:var(--verde)} .kpi.caramel::before{background:var(--caramelo)} .kpi.sand::before{background:#c5b48b} .kpi.err::before{background:var(--err)}
  .kpi .lbl{font-size:var(--fs-xs);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:var(--s2)}
  .kpi .lbl i{color:var(--accent)}
  .kpi .val{font-size:var(--fs-2xl);font-weight:800;color:var(--ink);margin-top:var(--s2);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .kpi .hint{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s2)}
  .kpi .trend{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;margin-top:var(--s2)}
  .kpi .trend.up{color:var(--ok)} .kpi .trend.down{color:var(--err)}

  /* —— section title —— */
  .sec-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:var(--s6) 0 var(--s4);display:flex;align-items:center;gap:var(--s3)}
  .sec-title:first-child{margin-top:0}
  .sec-title i{color:var(--accent)}
  .sec-title .sub{font-weight:400;font-size:var(--fs-sm);color:var(--muted)}

  /* —— badges / chips —— */
  .badge{display:inline-flex;align-items:center;gap:4px;padding:3px var(--s3);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;line-height:1.3;white-space:nowrap}
  .badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.warn{background:var(--warn-bg);color:var(--warn)}
  .badge.err{background:var(--err-bg);color:var(--err)} .badge.info{background:var(--info-bg);color:var(--info)}
  .badge.muted{background:var(--surface-3);color:var(--muted);border:1px solid var(--line)}
  .badge.email{background:#e3edfa;color:#1b4fb0} .badge.whatsapp{background:#dff4e7;color:#13702f}
  .badge.solid{background:var(--accent);color:#fff}
  .badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:5px var(--s3);border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
  .chip .x{cursor:pointer;color:var(--muted)} .chip .x:hover{color:var(--err)}
  .chips{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

  /* —— tabelas —— */
  .table-wrap{overflow:auto;border-radius:var(--r3);width:100%}
  table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
  thead th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;
    padding:var(--s3) var(--s4);border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1;white-space:nowrap}
  tbody td{padding:var(--s4);border-bottom:1px solid var(--line-2);color:var(--ink);vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr{transition:background var(--t-fast)}
  tbody tr:hover{background:var(--accent-soft)}
  :root[data-stripe="on"] tbody tr:nth-child(even){background:var(--surface-2)}
  :root[data-stripe="on"] tbody tr:nth-child(even):hover{background:var(--accent-soft)}
  table.compact td,table.compact th{padding:var(--s2) var(--s3)}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  .table-empty td{text-align:center;color:var(--muted);padding:var(--s7)}

  /* —— help banner —— */
  .help{display:flex;gap:var(--s4);align-items:flex-start;background:var(--info-bg);border:1px solid var(--info-line);
    border-radius:var(--r3);padding:var(--s4) var(--s5);margin-bottom:var(--s5);color:var(--info);font-size:var(--fs-md);line-height:1.55}
  .help i.lead{color:var(--caramelo);font-size:1.1rem;margin-top:2px;flex-shrink:0}
  .help b{color:color-mix(in srgb,var(--info) 70%,var(--ink))}
  .help .x{margin-left:auto;color:var(--info);opacity:.6;cursor:pointer;flex-shrink:0;padding:2px 6px;border-radius:var(--r1)} .help .x:hover{opacity:1;background:rgba(0,0,0,.05)}

  /* —— alert —— */
  .alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border-radius:var(--r2);border:1px solid;font-size:var(--fs-md);margin-bottom:var(--s4)}
  .alert i{margin-top:2px} .alert.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
  .alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
  .alert.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
  .alert.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}

  /* —— empty / loading —— */
  .empty{text-align:center;padding:var(--s7) var(--s5);color:var(--muted)}
  .empty .em-ico{font-size:2.4rem;margin-bottom:var(--s3);color:color-mix(in srgb,var(--accent) 45%,var(--muted))}
  .empty .em-t{font-weight:700;color:var(--ink-2);margin-bottom:var(--s2);font-size:var(--fs-lg)}
  .spin{display:inline-block;width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
  .loading{display:flex;justify-content:center;padding:var(--s7)}
  .skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--line-2) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--r1)}
  .skeleton.line{height:13px;margin-bottom:8px} .skeleton.line.short{width:60%}

  /* —— modal —— */
  .modal-bg{position:fixed;inset:0;background:rgba(20,26,12,.52);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--s5);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .18s ease}
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r4);width:min(720px,96vw);max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:pop .22s cubic-bezier(.2,1.1,.4,1)}
  .modal.wide{width:min(960px,96vw)} .modal.narrow{width:min(440px,96vw)}
  .modal-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
  .modal-h h3{font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--s2)}
  .modal-b{padding:var(--s5)}
  .modal-f{padding:var(--s4) var(--s5);border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:var(--s3);position:sticky;bottom:0;background:var(--surface)}
  .modal-x{font-size:1.3rem;color:var(--muted);line-height:1;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r2);transition:var(--t-fast);flex-shrink:0}
  .modal-x:hover{background:var(--surface-3);color:var(--ink)}

  /* —— tabs —— */
  .tabs{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s5);border-bottom:1px solid var(--line)}
  .tab{padding:var(--s3) var(--s4);font-weight:600;font-size:var(--fs-sm);color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:var(--s2);
    border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color var(--t-fast),border-color var(--t-fast);white-space:nowrap}
  .tab:hover{color:var(--ink)} .tab i{font-size:.9em}
  .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
  .tabpane{display:none} .tabpane.active{display:block;animation:fadeUp .25s ease}
  .pill-tabs{display:inline-flex;gap:3px;background:var(--surface-3);padding:4px;border-radius:var(--r-pill);border:1px solid var(--line)}
  .pill-tabs .tab{border:none;border-radius:var(--r-pill);padding:var(--s2) var(--s4);margin:0}
  .pill-tabs .tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-xs)}

  /* —— dropdown menu (custom) —— */
  .dropdown{position:relative;display:inline-block}
  .dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r2);box-shadow:var(--shadow-md);padding:var(--s2);z-index:80;opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--t)}
  .dropdown.open .dropdown-menu,.dropdown-menu.open{opacity:1;visibility:visible;transform:none}
  .dropdown-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3);border-radius:var(--r1);font-size:var(--fs-md);color:var(--ink-2);cursor:pointer;transition:var(--t-fast)}
  .dropdown-item:hover{background:var(--accent-soft);color:var(--ink)} .dropdown-item i{width:18px;text-align:center;color:var(--muted)}
  .dropdown-item:hover i{color:var(--accent)}
  .dropdown-sep{height:1px;background:var(--line-2);margin:var(--s2) 0}

  /* —— tooltip —— */
  [data-tip]{position:relative}
  [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(4px);
    background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:600;padding:5px var(--s3);border-radius:var(--r1);white-space:nowrap;
    opacity:0;visibility:hidden;transition:var(--t);z-index:90;pointer-events:none;box-shadow:var(--shadow)}
  [data-tip]:hover::after{opacity:1;visibility:visible;transform:translateX(-50%)}

  /* —— avatar —— */
  .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
    background:linear-gradient(135deg,var(--verde),var(--accent));flex-shrink:0;font-size:.95rem}
  .avatar.sm{width:30px;height:30px;font-size:.78rem} .avatar.lg{width:56px;height:56px;font-size:1.2rem}

  /* —— progress —— */
  .progress{height:8px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
  .progress > i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width var(--t-slow)}

  /* —— toast —— */
  #toasts{position:fixed;bottom:var(--s5);right:var(--s5);z-index:999;display:flex;flex-direction:column;gap:var(--s3);max-width:min(380px,92vw)}
  .toast{padding:var(--s4) var(--s5);border-radius:var(--r2);color:#fff;font-weight:600;font-size:var(--fs-sm);box-shadow:var(--shadow-lg);
    display:flex;align-items:center;gap:var(--s3);animation:toastIn .32s cubic-bezier(.2,1.1,.4,1)}
  .toast i{font-size:1.05rem;flex-shrink:0}
  .toast.success{background:var(--verde)} .toast.error{background:var(--err)} .toast.info{background:var(--accent)} .toast.warning{background:var(--caramelo)}

  /* —— status dot / divider —— */
  .status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
  .status-dot.ok{background:var(--ok)} .status-dot.warn{background:var(--warn)} .status-dot.err{background:var(--err)} .status-dot.pulse{animation:pulse 1.6s ease infinite}
  .divider{height:1px;background:var(--line);margin:var(--s5) 0;border:none}
  .divider.text{display:flex;align-items:center;gap:var(--s4);background:none;color:var(--muted);font-size:var(--fs-sm)}
  .divider.text::before,.divider.text::after{content:'';flex:1;height:1px;background:var(--line)}
}

/* ═══════════════════════════ PAGE-SPECIFIC ═══════════════════════════ */
@layer page{
  /* automação card */
  .auto-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:var(--s3);transition:transform var(--t),box-shadow var(--t),opacity var(--t)}
  .auto-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .auto-card.off{opacity:.62}
  .auto-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
  .auto-name{font-weight:700;font-size:var(--fs-md);color:var(--ink)}
  .auto-when{font-size:var(--fs-sm);color:var(--caramelo);font-weight:600;margin-top:3px;display:flex;align-items:center;gap:6px}
  .auto-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}

  /* conversas */
  .conv-item{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2);cursor:pointer;transition:background var(--t-fast)}
  .conv-item:hover{background:var(--accent-soft)}
  .conv-av{width:46px;height:46px;border-radius:50%;flex-shrink:0;object-fit:cover;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--verde),var(--accent));font-size:1rem}
  .conv-mid{flex:1;min-width:0}
  .conv-name{font-weight:700;color:var(--ink);font-size:var(--fs-md)}
  .conv-prev{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .conv-right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .conv-time{font-size:var(--fs-xs);color:var(--muted)}

  /* mensagens (bolhas) */
  .msg-bubble{max-width:84%;padding:var(--s3) var(--s4);border-radius:var(--r3);margin-bottom:var(--s3);font-size:var(--fs-md);line-height:1.55;white-space:pre-wrap;word-break:break-word;border:1px solid}
  .msg-email{background:#eef3fb;border-color:#d4e2f5;color:var(--ink)}
  .msg-whatsapp{background:#e9f8ef;border-color:#cdeed8;color:var(--ink)}
  .msg-meta{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s2);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}

  /* QR */
  .qr-box{display:inline-block;padding:var(--s4);background:#fff;border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow)}
  .qr-box img{width:260px;height:260px}
  .pairing-code{font-size:1.2rem;letter-spacing:3px;font-weight:800;font-family:var(--font-mono);color:var(--accent)}
}

/* ═══════════════════════════ UTILITIES ═══════════════════════════ */
@layer utilities{
  .row{display:flex;align-items:center;gap:var(--s3)}
  .col{display:flex;flex-direction:column;gap:var(--s3)}
  .between{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
  .center{text-align:center} .center-x{display:flex;justify-content:center} .center-y{display:flex;align-items:center}
  .wrap{flex-wrap:wrap} .nowrap{white-space:nowrap} .grow{flex:1} .shrink-0{flex-shrink:0}
  .gap-2{gap:var(--s2)} .gap-3{gap:var(--s3)} .gap-4{gap:var(--s4)} .gap-5{gap:var(--s5)}
  .mt{margin-top:var(--s4)} .mt2{margin-top:var(--s5)} .mt3{margin-top:var(--s6)}
  .mb{margin-bottom:var(--s4)} .mb2{margin-bottom:var(--s5)} .mb0{margin-bottom:0}
  .mx-auto{margin-left:auto;margin-right:auto} .ml-auto{margin-left:auto}
  .p-0{padding:0} .full{width:100%}
  .muted{color:var(--muted)} .ink-2{color:var(--ink-2)} .accent{color:var(--accent)}
  .small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)} .big{font-size:var(--fs-lg)}
  .bold{font-weight:700} .semibold{font-weight:600} .upper{text-transform:uppercase;letter-spacing:.5px}
  .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mono{font-family:var(--font-mono)} .tnum{font-variant-numeric:tabular-nums}
  .hidden{display:none!important} .invisible{visibility:hidden}
  .rounded{border-radius:var(--r2)} .rounded-lg{border-radius:var(--r3)} .pill{border-radius:var(--r-pill)}
  .border{border:1px solid var(--line)} .border-t{border-top:1px solid var(--line-2)}
  .bg-surface{background:var(--surface)} .bg-soft{background:var(--surface-3)} .bg-accent-soft{background:var(--accent-soft)}
  .shadow{box-shadow:var(--shadow)} .shadow-md{box-shadow:var(--shadow-md)} .no-shadow{box-shadow:none}
  .clickable{cursor:pointer} .clickable:hover{opacity:.85}
  .scroll-y{overflow-y:auto} .scroll-x{overflow-x:auto}
}

/* ═══════════════════════════ ANIM ═══════════════════════════ */
@layer anim{
  @keyframes sp{to{transform:rotate(360deg)}}
  @keyframes pop{from{transform:scale(.95);opacity:0}}
  @keyframes fadeIn{from{opacity:0}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}}
  @keyframes toastIn{from{transform:translateX(48px);opacity:0}}
  @keyframes shimmer{to{background-position:-135% 0}}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}70%{box-shadow:0 0 0 6px transparent}}
  .anim-fade{animation:fadeIn .3s ease} .anim-up{animation:fadeUp .3s ease}
}

/* ═══════════════════════════ THEMES (dark mode — contraste cuidado) ═══════════════════════════ */
@layer themes{
  :root[data-theme="dark"]{
    --ink:#edf1e3; --ink-2:#c3ccb1; --ink-3:#9aa489; --muted:#919b7d; --muted-2:#737d62;
    --bg:#14180e; --bg-2:#11150b; --surface:#1e2415; --surface-2:#191e10; --surface-3:#222818;
    --line:#36402510; --line:#363f26; --line-2:#2a3119; --line-strong:#48533550; --line-strong:#4a5535;
    --areia:#2a3219; --accent-soft:#2a3318; --accent-ink:#fff;
    --ok:#4ade80; --ok-bg:#16321f; --ok-line:#27502f;
    --warn:#e0a35c; --warn-bg:#33260f; --warn-line:#5a4520;
    --err:#f08a82; --err-bg:#3a1c18; --err-line:#5e2a25;
    --info:#7fd0a4; --info-bg:#16291e; --info-line:#264636;
    --field-bg:#222818; --field-line:#46512f;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6);
    --shadow-md:0 4px 12px -2px rgba(0,0,0,.5),0 12px 32px -10px rgba(0,0,0,.7);
    --shadow-lg:0 18px 50px -14px rgba(0,0,0,.8);
    --chevron: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='%23919b7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .badge.email{background:#1a2a48;color:#a9c8f7} .badge.whatsapp,:root[data-theme="dark"] .badge.whatsapp{}
  :root[data-theme="dark"] .badge.whatsapp{background:#16331f;color:#94e3ad}
  :root[data-theme="dark"] .msg-email{background:#1a2740;border-color:#2b3b5b;color:var(--ink)}
  :root[data-theme="dark"] .msg-whatsapp{background:#163020;border-color:#274a32;color:var(--ink)}
  :root[data-theme="dark"] .topbar{background:color-mix(in srgb,var(--bg) 82%,transparent)}
  :root[data-theme="dark"] .qr-box{background:#fff}
  :root[data-theme="dark"] img.conv-av,:root[data-theme="dark"] .avatar{}
  :root[data-theme="dark"] ::selection{background:color-mix(in srgb,var(--accent) 45%,transparent);color:#fff}
}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@layer responsive{
  @media (max-width:1024px){ .grid-kpi{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
  @media (max-width:768px){
    .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg);z-index:60}
    .sidebar.open{transform:none}
    .main{margin-left:0}
    .menu-toggle{display:inline-flex}
    .content{padding:var(--s5) var(--s4)}
    .topbar{padding:var(--s4)} .topbar h1{font-size:var(--fs-lg)}
    .topbar .acts .btn span{display:none}
    .modal{width:96vw} .grid-2{grid-template-columns:1fr}
    .fld-row{flex-wrap:wrap}
  }
  @media (max-width:480px){
    .grid-kpi{grid-template-columns:1fr 1fr}
    .kpi .val{font-size:var(--fs-xl)}
    .fld-row{flex-direction:column;align-items:stretch}
    .fld-row .ctl{justify-content:flex-end} .fld-row .ctl input:not([type=checkbox]),.fld-row .ctl select{width:100%}
    .tabs{overflow-x:auto;flex-wrap:nowrap} .tab{flex-shrink:0}
    .table-wrap{font-size:var(--fs-sm)}
  }
  @media (max-width:360px){ .grid-kpi{grid-template-columns:1fr} }
}

/* ═══════════════════════════ PRINT ═══════════════════════════ */
@layer print{
  @media print{
    .sidebar,.topbar,.menu-toggle,#toasts,.modal-bg,.btn{display:none!important}
    .main{margin:0} .content{padding:0}
    .card,.kpi{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
    body{background:#fff;color:#000;font-size:12px}
    a{color:#000;text-decoration:underline}
    .card-pad{padding:0}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXTRAS — sistema de utilitários completo + componentes adicionais
   Formatação legível (uma regra por linha) para manutenção fácil.
   Tudo consome os tokens (Fibonacci/cores/sombras) — zero valor cru novo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── UTILITÁRIOS DE ESPAÇAMENTO ───────────────────────── */
@layer utilities{
  /* margin — todas as direções na escala Fibonacci */
  .m-0{margin:0}
  .m-1{margin:var(--s1)}
  .m-2{margin:var(--s2)}
  .m-3{margin:var(--s3)}
  .m-4{margin:var(--s4)}
  .m-5{margin:var(--s5)}
  .m-6{margin:var(--s6)}
  .m-auto{margin:auto}

  .mt-0{margin-top:0}
  .mt-1{margin-top:var(--s1)}
  .mt-2{margin-top:var(--s2)}
  .mt-3{margin-top:var(--s3)}
  .mt-4{margin-top:var(--s4)}
  .mt-5{margin-top:var(--s5)}
  .mt-6{margin-top:var(--s6)}

  .mb-0{margin-bottom:0}
  .mb-1{margin-bottom:var(--s1)}
  .mb-2{margin-bottom:var(--s2)}
  .mb-3{margin-bottom:var(--s3)}
  .mb-4{margin-bottom:var(--s4)}
  .mb-5{margin-bottom:var(--s5)}
  .mb-6{margin-bottom:var(--s6)}

  .ml-0{margin-left:0}
  .ml-1{margin-left:var(--s1)}
  .ml-2{margin-left:var(--s2)}
  .ml-3{margin-left:var(--s3)}
  .ml-4{margin-left:var(--s4)}
  .ml-5{margin-left:var(--s5)}

  .mr-0{margin-right:0}
  .mr-1{margin-right:var(--s1)}
  .mr-2{margin-right:var(--s2)}
  .mr-3{margin-right:var(--s3)}
  .mr-4{margin-right:var(--s4)}
  .mr-5{margin-right:var(--s5)}

  .mx-2{margin-left:var(--s2);margin-right:var(--s2)}
  .mx-3{margin-left:var(--s3);margin-right:var(--s3)}
  .mx-4{margin-left:var(--s4);margin-right:var(--s4)}
  .my-2{margin-top:var(--s2);margin-bottom:var(--s2)}
  .my-3{margin-top:var(--s3);margin-bottom:var(--s3)}
  .my-4{margin-top:var(--s4);margin-bottom:var(--s4)}
  .my-5{margin-top:var(--s5);margin-bottom:var(--s5)}

  /* padding — todas as direções */
  .p-0{padding:0}
  .p-1{padding:var(--s1)}
  .p-2{padding:var(--s2)}
  .p-3{padding:var(--s3)}
  .p-4{padding:var(--s4)}
  .p-5{padding:var(--s5)}
  .p-6{padding:var(--s6)}

  .pt-2{padding-top:var(--s2)}
  .pt-3{padding-top:var(--s3)}
  .pt-4{padding-top:var(--s4)}
  .pt-5{padding-top:var(--s5)}
  .pb-2{padding-bottom:var(--s2)}
  .pb-3{padding-bottom:var(--s3)}
  .pb-4{padding-bottom:var(--s4)}
  .pb-5{padding-bottom:var(--s5)}
  .pl-3{padding-left:var(--s3)}
  .pl-4{padding-left:var(--s4)}
  .pr-3{padding-right:var(--s3)}
  .pr-4{padding-right:var(--s4)}

  .px-3{padding-left:var(--s3);padding-right:var(--s3)}
  .px-4{padding-left:var(--s4);padding-right:var(--s4)}
  .px-5{padding-left:var(--s5);padding-right:var(--s5)}
  .py-2{padding-top:var(--s2);padding-bottom:var(--s2)}
  .py-3{padding-top:var(--s3);padding-bottom:var(--s3)}
  .py-4{padding-top:var(--s4);padding-bottom:var(--s4)}
  .py-5{padding-top:var(--s5);padding-bottom:var(--s5)}

  /* gap dedicado */
  .gap-0{gap:0}
  .gap-1{gap:var(--s1)}
  .gap-2{gap:var(--s2)}
  .gap-3{gap:var(--s3)}
  .gap-4{gap:var(--s4)}
  .gap-5{gap:var(--s5)}
  .gap-6{gap:var(--s6)}
}

/* ───────────────────────── UTILITÁRIOS DE DISPLAY / FLEX / GRID ───────────────────────── */
@layer utilities{
  .d-none{display:none}
  .d-block{display:block}
  .d-inline{display:inline}
  .d-inline-block{display:inline-block}
  .d-flex{display:flex}
  .d-inline-flex{display:inline-flex}
  .d-grid{display:grid}

  .flex-row{flex-direction:row}
  .flex-col{flex-direction:column}
  .flex-wrap{flex-wrap:wrap}
  .flex-nowrap{flex-wrap:nowrap}
  .flex-1{flex:1 1 0%}
  .flex-auto{flex:1 1 auto}
  .flex-none{flex:none}

  .items-start{align-items:flex-start}
  .items-center{align-items:center}
  .items-end{align-items:flex-end}
  .items-stretch{align-items:stretch}
  .items-baseline{align-items:baseline}

  .justify-start{justify-content:flex-start}
  .justify-center{justify-content:center}
  .justify-end{justify-content:flex-end}
  .justify-between{justify-content:space-between}
  .justify-around{justify-content:space-around}
  .justify-evenly{justify-content:space-evenly}

  .self-start{align-self:flex-start}
  .self-center{align-self:center}
  .self-end{align-self:flex-end}

  .grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .col-span-2{grid-column:span 2}
  .col-span-full{grid-column:1/-1}

  .order-first{order:-1}
  .order-last{order:99}
}

/* ───────────────────────── UTILITÁRIOS DE TAMANHO / POSIÇÃO ───────────────────────── */
@layer utilities{
  .w-full{width:100%}
  .w-auto{width:auto}
  .w-half{width:50%}
  .w-fit{width:fit-content}
  .w-min{width:min-content}
  .max-w-xs{max-width:320px}
  .max-w-sm{max-width:440px}
  .max-w-md{max-width:640px}
  .max-w-lg{max-width:880px}
  .max-w-none{max-width:none}
  .min-w-0{min-width:0}

  .h-full{height:100%}
  .h-auto{height:auto}
  .min-h-screen{min-height:100vh}
  .max-h-half{max-height:50vh;overflow:auto}

  .relative{position:relative}
  .absolute{position:absolute}
  .fixed{position:fixed}
  .sticky{position:sticky}
  .static{position:static}
  .inset-0{inset:0}
  .top-0{top:0}
  .right-0{right:0}
  .bottom-0{bottom:0}
  .left-0{left:0}

  .z-0{z-index:0}
  .z-10{z-index:10}
  .z-50{z-index:50}
  .z-100{z-index:100}

  .overflow-hidden{overflow:hidden}
  .overflow-auto{overflow:auto}
  .overflow-x-auto{overflow-x:auto}
  .overflow-y-auto{overflow-y:auto}
}

/* ───────────────────────── UTILITÁRIOS DE TIPOGRAFIA ───────────────────────── */
@layer utilities{
  .text-xs{font-size:var(--fs-xs)}
  .text-sm{font-size:var(--fs-sm)}
  .text-md{font-size:var(--fs-md)}
  .text-base{font-size:var(--fs-base)}
  .text-lg{font-size:var(--fs-lg)}
  .text-xl{font-size:var(--fs-xl)}
  .text-2xl{font-size:var(--fs-2xl)}
  .text-3xl{font-size:var(--fs-3xl)}

  .font-normal{font-weight:400}
  .font-medium{font-weight:500}
  .font-semibold{font-weight:600}
  .font-bold{font-weight:700}
  .font-extrabold{font-weight:800}

  .text-left{text-align:left}
  .text-center{text-align:center}
  .text-right{text-align:right}

  .leading-tight{line-height:1.25}
  .leading-normal{line-height:1.55}
  .leading-loose{line-height:1.8}
  .tracking-wide{letter-spacing:.04em}
  .uppercase{text-transform:uppercase}
  .capitalize{text-transform:capitalize}
  .lowercase{text-transform:lowercase}
  .italic{font-style:italic}
  .underline{text-decoration:underline}
  .no-underline{text-decoration:none}
  .line-through{text-decoration:line-through}

  .break-words{overflow-wrap:break-word;word-break:break-word}
  .break-all{word-break:break-all}
  .whitespace-nowrap{white-space:nowrap}
  .whitespace-pre{white-space:pre-wrap}

  .clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ───────────────────────── UTILITÁRIOS DE COR / FUNDO / BORDA ───────────────────────── */
@layer utilities{
  .text-ink{color:var(--ink)}
  .text-ink-2{color:var(--ink-2)}
  .text-muted{color:var(--muted)}
  .text-accent{color:var(--accent)}
  .text-ok{color:var(--ok)}
  .text-warn{color:var(--warn)}
  .text-err{color:var(--err)}
  .text-white{color:#fff}

  .bg-transparent{background:transparent}
  .bg-bg{background:var(--bg)}
  .bg-white{background:var(--surface)}
  .bg-soft-2{background:var(--surface-2)}
  .bg-soft-3{background:var(--surface-3)}
  .bg-accent{background:var(--accent);color:var(--accent-ink)}
  .bg-ok{background:var(--ok-bg);color:var(--ok)}
  .bg-warn{background:var(--warn-bg);color:var(--warn)}
  .bg-err{background:var(--err-bg);color:var(--err)}
  .bg-info{background:var(--info-bg);color:var(--info)}

  .border-0{border:0}
  .border-1{border:1px solid var(--line)}
  .border-2{border:2px solid var(--line)}
  .border-strong{border:1px solid var(--line-strong)}
  .border-accent{border:1.5px solid var(--accent)}
  .border-l-accent{border-left:3px solid var(--accent)}
  .border-top{border-top:1px solid var(--line)}
  .border-bottom{border-bottom:1px solid var(--line)}

  .rounded-0{border-radius:0}
  .rounded-1{border-radius:var(--r1)}
  .rounded-2{border-radius:var(--r2)}
  .rounded-3{border-radius:var(--r3)}
  .rounded-4{border-radius:var(--r4)}
  .rounded-full{border-radius:var(--r-pill)}

  .shadow-xs{box-shadow:var(--shadow-xs)}
  .shadow-1{box-shadow:var(--shadow)}
  .shadow-2{box-shadow:var(--shadow-md)}
  .shadow-3{box-shadow:var(--shadow-lg)}

  .opacity-0{opacity:0}
  .opacity-50{opacity:.5}
  .opacity-75{opacity:.75}
  .opacity-100{opacity:1}

  .cursor-pointer{cursor:pointer}
  .cursor-default{cursor:default}
  .cursor-not-allowed{cursor:not-allowed}
  .select-none{user-select:none}
  .pointer-none{pointer-events:none}
  .transition{transition:var(--t)}
}

/* ───────────────────────── ACESSIBILIDADE ───────────────────────── */
@layer utilities{
  /* texto só para leitores 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;
  }
  .not-sr-only{
    position:static;
    width:auto;height:auto;
    margin:0;overflow:visible;
    clip:auto;white-space:normal;
  }
  /* skip link (pular para o conteúdo) */
  .skip-link{
    position:absolute;
    left:var(--s4);top:-60px;
    background:var(--accent);
    color:#fff;
    padding:var(--s3) var(--s5);
    border-radius:var(--r2);
    z-index:1000;
    font-weight:700;
    transition:top var(--t);
  }
  .skip-link:focus{top:var(--s4)}
  /* alvo de toque mínimo (44px) em telas touch */
  @media (pointer:coarse){
    .btn,.nav-item,.tab,.modal-x,.dropdown-item{min-height:44px}
  }
}

/* ───────────────────────── COMPONENTES ADICIONAIS ───────────────────────── */
@layer components{
  /* —— segmented control (alternador) —— */
  .segmented{
    display:inline-flex;
    background:var(--surface-3);
    border:1px solid var(--line);
    border-radius:var(--r2);
    padding:3px;
    gap:2px;
  }
  .segmented button{
    padding:var(--s2) var(--s4);
    border-radius:var(--r1);
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--muted);
    transition:var(--t-fast);
  }
  .segmented button:hover{color:var(--ink)}
  .segmented button.active{
    background:var(--surface);
    color:var(--accent);
    box-shadow:var(--shadow-xs);
  }

  /* —— stepper (passos numerados) —— */
  .stepper{
    display:flex;
    align-items:center;
    gap:var(--s2);
    flex-wrap:wrap;
  }
  .step{
    display:flex;
    align-items:center;
    gap:var(--s3);
    color:var(--muted);
    font-size:var(--fs-sm);
    font-weight:600;
  }
  .step .num{
    width:28px;height:28px;
    border-radius:50%;
    border:2px solid var(--line-strong);
    display:grid;place-content:center;
    font-size:var(--fs-sm);
    background:var(--surface);
    flex-shrink:0;
  }
  .step.done .num{
    background:var(--verde);
    border-color:var(--verde);
    color:#fff;
  }
  .step.active{color:var(--accent)}
  .step.active .num{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:var(--ring);
  }
  .step + .step::before{
    content:'';
    width:24px;height:2px;
    background:var(--line);
    margin-right:var(--s2);
  }

  /* —— timeline (histórico/atividade) —— */
  .timeline{
    position:relative;
    padding-left:var(--s6);
  }
  .timeline::before{
    content:'';
    position:absolute;
    left:9px;top:6px;bottom:6px;
    width:2px;
    background:var(--line);
  }
  .timeline-item{
    position:relative;
    padding-bottom:var(--s5);
  }
  .timeline-item::before{
    content:'';
    position:absolute;
    left:calc(var(--s6) * -1 + 4px);
    top:4px;
    width:12px;height:12px;
    border-radius:50%;
    background:var(--surface);
    border:2.5px solid var(--accent);
  }
  .timeline-item.ok::before{border-color:var(--ok)}
  .timeline-item.err::before{border-color:var(--err)}
  .timeline-item .tl-time{
    font-size:var(--fs-xs);
    color:var(--muted);
  }
  .timeline-item .tl-body{
    font-size:var(--fs-md);
    color:var(--ink);
    margin-top:2px;
  }

  /* —— rating (estrelas) —— */
  .rating{
    display:inline-flex;
    gap:2px;
    color:var(--caramelo);
    font-size:1rem;
  }
  .rating .off{color:var(--line-strong)}

  /* —— kbd (tecla) —— */
  kbd,.kbd{
    display:inline-block;
    padding:2px var(--s2);
    font-family:var(--font-mono);
    font-size:var(--fs-xs);
    line-height:1.5;
    color:var(--ink-2);
    background:var(--surface-3);
    border:1px solid var(--line-strong);
    border-bottom-width:2px;
    border-radius:var(--r1);
  }

  /* —— code block —— */
  pre.code{
    background:var(--surface-3);
    border:1px solid var(--line);
    border-radius:var(--r2);
    padding:var(--s4);
    overflow-x:auto;
    font-size:var(--fs-sm);
    line-height:1.6;
    color:var(--ink-2);
  }
  code.inline{
    background:var(--surface-3);
    border:1px solid var(--line);
    border-radius:var(--r1);
    padding:1px 6px;
    font-size:.88em;
    color:var(--caramelo-2);
  }

  /* —— tag removível —— */
  .tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px var(--s3);
    background:var(--accent-soft);
    color:var(--accent);
    border-radius:var(--r1);
    font-size:var(--fs-xs);
    font-weight:600;
  }

  /* —— notification dot (badge sobre ícone) —— */
  .has-dot{position:relative}
  .has-dot::after{
    content:'';
    position:absolute;
    top:-2px;right:-2px;
    width:9px;height:9px;
    background:var(--err);
    border:2px solid var(--surface);
    border-radius:50%;
  }
  .has-count{position:relative}
  .has-count[data-count]::after{
    content:attr(data-count);
    position:absolute;
    top:-7px;right:-9px;
    min-width:18px;height:18px;
    padding:0 4px;
    background:var(--err);
    color:#fff;
    font-size:10px;
    font-weight:700;
    border-radius:var(--r-pill);
    display:grid;place-content:center;
    border:2px solid var(--surface);
  }

  /* —— meter / barra de uso —— */
  .meter{
    height:10px;
    background:var(--surface-3);
    border-radius:var(--r-pill);
    overflow:hidden;
    display:flex;
  }
  .meter > span{
    display:block;
    height:100%;
    background:var(--accent);
    transition:width var(--t-slow);
  }
  .meter.ok > span{background:var(--ok)}
  .meter.warn > span{background:var(--warn)}
  .meter.err > span{background:var(--err)}

  /* —— stat inline (rótulo + valor) —— */
  .stat{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .stat .stat-lbl{
    font-size:var(--fs-xs);
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:700;
  }
  .stat .stat-val{
    font-size:var(--fs-lg);
    font-weight:800;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }

  /* —— accordion —— */
  .accordion{
    border:1px solid var(--line);
    border-radius:var(--r2);
    overflow:hidden;
    background:var(--surface);
  }
  .accordion + .accordion{margin-top:var(--s3)}
  .accordion summary{
    list-style:none;
    cursor:pointer;
    padding:var(--s4) var(--s5);
    font-weight:600;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s3);
    transition:background var(--t-fast);
  }
  .accordion summary::-webkit-details-marker{display:none}
  .accordion summary:hover{background:var(--surface-2)}
  .accordion summary::after{
    content:'\f078';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:.8rem;
    color:var(--muted);
    transition:transform var(--t);
  }
  .accordion[open] summary::after{transform:rotate(180deg)}
  .accordion .acc-body{
    padding:0 var(--s5) var(--s5);
    color:var(--ink-2);
    font-size:var(--fs-md);
    line-height:1.6;
  }

  /* —— banner de destaque (call-out) —— */
  .callout{
    display:flex;
    gap:var(--s4);
    padding:var(--s5);
    border-radius:var(--r3);
    background:linear-gradient(135deg,var(--accent-soft),var(--surface));
    border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  }
  .callout .ico{
    width:42px;height:42px;
    border-radius:var(--r2);
    background:var(--accent);
    color:#fff;
    display:grid;place-content:center;
    font-size:1.15rem;
    flex-shrink:0;
  }
  .callout .ct{font-weight:700;color:var(--ink)}
  .callout .cd{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}

  /* —— lista de definição (chave/valor) —— */
  .dl{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:var(--s3) var(--s5);
    align-items:baseline;
  }
  .dl dt{
    font-size:var(--fs-sm);
    color:var(--muted);
    font-weight:600;
  }
  .dl dd{
    font-size:var(--fs-md);
    color:var(--ink);
    font-weight:600;
  }

  /* —— overlay de carregamento —— */
  .loading-overlay{
    position:absolute;
    inset:0;
    background:color-mix(in srgb,var(--surface) 70%,transparent);
    backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    border-radius:inherit;
  }
}

/* ───────────────────────── BIBLIOTECA DE ANIMAÇÕES ───────────────────────── */
@layer anim{
  @keyframes slideInLeft{from{transform:translateX(-24px);opacity:0}}
  @keyframes slideInRight{from{transform:translateX(24px);opacity:0}}
  @keyframes slideInUp{from{transform:translateY(20px);opacity:0}}
  @keyframes scaleIn{from{transform:scale(.92);opacity:0}}
  @keyframes bounceIn{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1)}}
  @keyframes blink{50%{opacity:.35}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

  .anim-slide-left{animation:slideInLeft .3s ease}
  .anim-slide-right{animation:slideInRight .3s ease}
  .anim-slide-up{animation:slideInUp .3s ease}
  .anim-scale{animation:scaleIn .25s ease}
  .anim-bounce{animation:bounceIn .4s ease}
  .anim-blink{animation:blink 1.4s ease infinite}
  .anim-float{animation:float 3s ease-in-out infinite}
  .anim-spin{animation:sp .8s linear infinite}

  /* stagger por índice (definir --i no elemento) */
  .stagger > *{animation:slideInUp .35s ease backwards;animation-delay:calc(var(--i,0) * .05s)}
}

/* ───────────────────────── RESPONSIVO ESTENDIDO ───────────────────────── */
@layer responsive{
  @media (max-width:768px){
    .md-hidden{display:none!important}
    .md-block{display:block!important}
    .md-col{flex-direction:column!important}
    .md-full{width:100%!important}
    .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
    .dl{grid-template-columns:1fr;gap:var(--s1) 0}
    .dl dt{margin-top:var(--s2)}
  }
  @media (max-width:480px){
    .sm-hidden{display:none!important}
    .sm-center{text-align:center!important}
    .stepper{font-size:var(--fs-xs)}
    .step + .step::before{width:14px}
    .modal-h,.modal-b,.modal-f{padding:var(--s4)}
    .callout{flex-direction:column}
  }
  /* mostrar apenas em telas grandes */
  @media (min-width:769px){
    .only-mobile{display:none!important}
  }
}