/* ============================================================
   TAI · PADRÃO VISUAL "APPLE-STYLE" — tai-apple.css v1.1
   Acento aplicado: BRASS #a6792f (versão Hub TAI)
   Aprovado em 24/Jun/2026 · atualizado Hub 18/Jul/2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- 1. TOKENS ---------- */
:root {
  --tai-bg:#f5f5f7; --tai-bg2:#fbfbfd; --tai-card:#ffffff;
  --tai-ink:#1d1d1f; --tai-ink2:#6e6e73; --tai-ink3:#86868b; --tai-ink4:#aeaeb2;

  /* ACENTO BRASS (marca TAI) */
  --tai-accent:#a6792f; --tai-accent2:#c69a4a;
  --tai-accent-tint:rgba(166,121,47,.14);

  --tai-line:rgba(0,0,0,.08); --tai-line-strong:rgba(0,0,0,.12);
  --tai-fill:#f0f0f3; --tai-fill2:#f5f5f7;

  --tai-red:#ff3b30;  --tai-red-ink:#d70015;  --tai-red-bg:#fff0ef;
  --tai-amber:#ff9500;--tai-amber-ink:#9a5b00;--tai-amber-bg:#fff5e8;
  --tai-green:#34c759;--tai-green-ink:#1a7f37;--tai-green-bg:#e9f9ee;

  --tai-r-lg:30px; --tai-r-md:22px; --tai-r-sm:14px;
  --tai-sh-1:0 1px 2px rgba(0,0,0,.05);
  --tai-sh-2:0 6px 24px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.04);
  --tai-sh-3:0 20px 50px -16px rgba(0,0,0,.18);
  --tai-ease:cubic-bezier(.32,.72,0,1);
  --tai-font:"Albert Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
}

/* ---------- 2. BASE ---------- */
.tai,.tai *{box-sizing:border-box}
.tai{
  font-family:var(--tai-font); color:var(--tai-ink); background:var(--tai-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.47; letter-spacing:-.011em;
}
.tai ::selection{background:var(--tai-accent-tint)}
.tai ::-webkit-scrollbar{width:11px;height:11px}
.tai ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:20px;border:3px solid var(--tai-bg)}
.tai ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28)}
.tai-wrap{max-width:1340px;margin:0 auto;padding:0 28px 100px}

@keyframes tai-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tai-reveal{animation:tai-rise .7s var(--tai-ease) both}

/* ---------- 3. TIPOGRAFIA ---------- */
.tai-kicker{font-size:13px;font-weight:600;color:var(--tai-accent);display:inline-flex;align-items:center;gap:8px}
.tai-h2{font-weight:700;font-size:28px;letter-spacing:-.03em;margin:0}
.tai-label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--tai-ink3)}
.tai-count{font-size:12.5px;font-weight:600;color:var(--tai-ink3);background:var(--tai-fill);padding:4px 12px;border-radius:980px}

/* ---------- 4. CARTÃO ---------- */
.tai-card{background:var(--tai-card);border-radius:var(--tai-r-md);padding:26px 28px;box-shadow:var(--tai-sh-2);border:.5px solid var(--tai-line)}

/* ---------- 5. BOTÕES ---------- */
.tai-btn{font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;border:.5px solid var(--tai-line);
  background:var(--tai-card);color:var(--tai-ink);padding:8px 16px;border-radius:980px;
  transition:transform .22s var(--tai-ease),background .18s,box-shadow .18s;box-shadow:var(--tai-sh-1);
  display:inline-flex;align-items:center;gap:6px;letter-spacing:-.01em}
.tai-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.09)}
.tai-btn:active{transform:scale(.96)}
.tai-btn--primary{background:var(--tai-accent);color:#fff;border-color:transparent;box-shadow:0 3px 12px var(--tai-accent-tint)}
.tai-btn--primary:hover{filter:brightness(1.06)}
.tai-btn--ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--tai-ink2)}
.tai-btn--ghost:hover{background:var(--tai-fill);transform:none;box-shadow:none}
.tai-btn--danger{color:var(--tai-red-ink);background:transparent;border-color:transparent;box-shadow:none}
.tai-btn--danger:hover{background:var(--tai-red-bg);transform:none;box-shadow:none}

/* barra vidro fosco */
.tai-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:sticky;top:12px;z-index:30;
  background:rgba(255,255,255,.76);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:.5px solid var(--tai-line);border-radius:18px;padding:10px 14px;box-shadow:0 8px 30px -10px rgba(0,0,0,.14)}

/* ---------- 6. CAMPOS ---------- */
.tai-input{width:100%;font-family:inherit;font-size:16px;color:var(--tai-ink);background:var(--tai-fill2);
  border:1.5px solid transparent;border-radius:14px;padding:13px 15px;height:50px;letter-spacing:-.012em;
  transition:.18s var(--tai-ease)}
.tai-input:focus{outline:none;border-color:var(--tai-accent);background:#fff;box-shadow:0 0 0 4px var(--tai-accent-tint)}
.tai-input::placeholder{color:var(--tai-ink4)}

/* controle segmentado */
.tai-seg{display:inline-flex;background:var(--tai-fill);padding:4px;border-radius:12px;gap:4px}
.tai-seg button{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;
  color:var(--tai-ink2);padding:7px 14px;border-radius:9px;transition:.2s var(--tai-ease)}
.tai-seg button:hover{background:rgba(0,0,0,.04)}
.tai-seg button.on{background:#fff;box-shadow:var(--tai-sh-1);color:var(--tai-ink)}

/* ---------- 7. TABELA compacta ---------- */
.tai-table{width:100%;border-collapse:collapse;font-family:inherit}
.tai-table thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--tai-ink3);padding:14px 14px 10px;border-bottom:.5px solid var(--tai-line);white-space:nowrap}
.tai-table tbody td{vertical-align:top;padding:13px 14px;border-bottom:.5px solid var(--tai-line);font-size:13.5px}
.tai-table tbody tr:last-child td{border-bottom:none}

/* ---------- 8. PILLS ---------- */
.tai-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border:.5px solid transparent;
  border-radius:10px;padding:5px 10px;letter-spacing:-.01em;white-space:nowrap}
.tai-pill--red{color:var(--tai-red-ink);background:var(--tai-red-bg);border-color:rgba(255,59,48,.16)}
.tai-pill--amber{color:var(--tai-amber-ink);background:var(--tai-amber-bg);border-color:rgba(255,149,0,.16)}
.tai-pill--green{color:var(--tai-green-ink);background:var(--tai-green-bg);border-color:rgba(52,199,89,.18)}
.tai-pill--brass{color:var(--tai-accent);background:var(--tai-accent-tint);border-color:rgba(166,121,47,.2)}

/* ---------- 9. MODAL ---------- */
.tai-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:7vh 20px 40px;background:rgba(20,20,22,.36);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--tai-ease),visibility .3s var(--tai-ease)}
.tai-overlay.open{opacity:1;visibility:visible}
.tai-modal{width:min(620px,100%);max-height:86vh;overflow-y:auto;background:var(--tai-card);
  border-radius:26px;border:.5px solid var(--tai-line);box-shadow:var(--tai-sh-3);
  transform:translateY(22px) scale(.98);transition:transform .35s var(--tai-ease)}
.tai-overlay.open .tai-modal{transform:none}
.tai-modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:22px 26px 14px;background:linear-gradient(180deg,var(--tai-card) 78%,transparent);border-bottom:.5px solid var(--tai-line)}
.tai-modal-x{width:30px;height:30px;border:none;border-radius:50%;background:var(--tai-fill);color:var(--tai-ink2);
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s var(--tai-ease);flex:none}
.tai-modal-x:hover{background:#e8e8ec;transform:scale(1.06)}

/* ---------- 10. ACESSIBILIDADE / IMPRESSÃO ---------- */
@media(prefers-reduced-motion:reduce){.tai-reveal{animation:none}}
@media print{
  .tai{background:#fff}
  .tai-toolbar,.tai-no-print{display:none!important}
  .tai-card{box-shadow:none;border:.5px solid #e3e3e8}
  .tai-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}