/* ============================================================================
   PRESTO · DESIGN SYSTEM  (manual de marca + padrões de componentes do app)
   Cores: idênticas ao Manual de Identidade Visual v2.0
   Tema CLARO (padrão, fundo branco) + tema ESCURO via [data-theme="dark"]
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- CONSTANTES DA MARCA (iguais nos dois temas) ---- */
  --navy:#031A29; --navy-mid:#0A3A52; --petrol:#125675; --cyan:#258CA8;
  --teal:#3ABFA0; --turquoise:#72F4D0; --blue-light:#D6EEF5;
  --success:#4ADE80; --danger:#F87171;

  /* ---- TOKENS SEMÂNTICOS DE AÇÃO ----
     (primário padrão = tema claro: petróleo + texto branco; escuro sobrescreve p/ turquesa) */
  --act-primary-bg:#125675; --act-primary-fg:#FFFFFF; --act-primary-hover:#0A3A52;
  --act-success-bg:#4ADE80; --act-success-fg:#031A29;
  --act-danger-bg:#F87171;  --act-danger-fg:#2A0A0A;

  /* ---- ESPAÇAMENTO ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
  /* ---- RAIO ---- */
  --r-sm:.5rem; --r-control:.75rem; --r-card:1.5rem; --r-pill:9999px;
  /* ---- SOMBRAS / TRANSIÇÕES / LAYOUT ---- */
  --sh-sm:0 2px 8px rgba(3,26,41,.12); --sh-md:0 4px 20px rgba(3,26,41,.14); --sh-lg:0 12px 48px rgba(3,26,41,.22);
  --t-fast:all .15s ease; --t-base:all .25s ease; --t-smooth:all .35s cubic-bezier(.4,0,.2,1);
  --container:1140px;

  /* ===== TEMA CLARO (PADRÃO, fundo branco) ===== */
  color-scheme:light;
  --bg:#FFFFFF; --bg-alt:#F4F8FB; --sidebar-bg:#F8FBFD;
  --surface:#FFFFFF; --surface-2:#F1F6FA; --inset-bg:#F2F7FA;
  --field-bg:#FFFFFF; --modal-bg:#FFFFFF;
  --glass-bg:rgba(255,255,255,.65);
  --text-1:#08273B; --text-2:#3C5C70; --text-3:#7491A2;
  --border:rgba(18,86,117,.16); --border-strong:rgba(18,86,117,.30);
  --accent:#125675; --accent-soft:rgba(18,86,117,.10); --accent-border:rgba(18,86,117,.30);
  --act-muted-bg:rgba(18,86,117,.08); --act-muted-fg:#7491A2;
  --danger-soft-bg:rgba(220,38,38,.10); --danger-soft-fg:#DC2626; --danger-soft-bd:rgba(220,38,38,.32);
  --hero-grad:linear-gradient(135deg,#031A29 0%,#0a2d44 50%,#031A29 100%);
  --glow-turq:0 0 40px rgba(18,86,117,.10);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#031A29; --bg-alt:rgba(4,31,49,.55); --sidebar-bg:rgba(3,26,41,.95);
  --surface:rgba(18,86,117,.15); --surface-2:rgba(18,86,117,.28); --inset-bg:rgba(3,26,41,.4);
  --field-bg:rgba(3,26,41,.5); --modal-bg:#06283c;
  --glass-bg:rgba(3,26,41,.75);
  --text-1:#F0F9FF; --text-2:#94B8CC; --text-3:#4A7A94;
  --border:rgba(114,244,208,.12); --border-strong:rgba(114,244,208,.25);
  --accent:#72F4D0; --accent-soft:rgba(114,244,208,.12); --accent-border:rgba(114,244,208,.25);
  --act-muted-bg:rgba(114,244,208,.10); --act-muted-fg:#94B8CC;
  --danger-soft-bg:rgba(248,113,113,.14); --danger-soft-fg:#F87171; --danger-soft-bd:rgba(248,113,113,.4);
  --glow-turq:0 0 40px rgba(114,244,208,.12);
  /* primário no escuro volta ao turquesa (contraste ideal sobre navy) */
  --act-primary-bg:#72F4D0; --act-primary-fg:#031A29; --act-primary-hover:#3ABFA0;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text-1); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; transition: background-color .25s ease, color .25s ease; }
h1,h2,h3,h4 { font-family: 'Sora', sans-serif; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
section[id] { scroll-margin-top: 1.25rem; }

/* ---- RESPONSIVO: proteções globais (sem scroll lateral) ---- */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* conteúdo largo rola DENTRO do bloco */
table.tbl { min-width: 460px; }                                       /* força rolagem contida em vez de espremer */

/* ---- PREVIEW DE CELULAR ---- */
.phone { width: 300px; max-width: 100%; margin: 1.25rem auto 0; border: 9px solid var(--text-1); border-radius: 30px; overflow: hidden; box-shadow: var(--sh-lg); background: var(--bg); }
.phone .notch { height: 16px; background: var(--text-1); }
.phone .scr { height: 480px; overflow-y: auto; overflow-x: hidden; padding: 12px; }
.phone .ptop { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; font-weight: 700; color: var(--text-1); }

/* ── THEME TOGGLE ── */
.theme-toggle { position:fixed; top:14px; right:18px; z-index:1100; display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .9rem; border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2);
  font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; box-shadow:var(--sh-sm); transition:var(--t-fast); }
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); }

/* ── LAYOUT / SIDEBAR ── */
.layout { display:flex; min-height:100vh; }
.sidebar { width:232px; flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--border); padding:2rem 1.25rem; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-logo { display:flex; align-items:center; gap:.55rem; margin-bottom:1.75rem; }
.logo-icon { height:26px; width:35px; flex-shrink:0; }
.logo-word { font-family:'Sora',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.05em; color:var(--text-1); }
.nav-section { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--text-3); margin:1.25rem 0 .4rem; }
.nav-link { display:block; font-size:.8rem; color:var(--text-2); padding:.3rem .5rem; border-radius:6px; text-decoration:none; transition:var(--t-fast); cursor:pointer; }
.nav-link:hover { color:var(--accent); background:var(--accent-soft); }
.nav-link.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.main { flex:1; min-width:0; }

/* ── HERO (sempre banner escuro nos 2 temas) ── */
.hero { background:var(--hero-grad); padding:clamp(3rem,8vw,5.5rem) clamp(1.5rem,6vw,5rem); border-bottom:1px solid var(--border); }
.eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--turquoise); background:rgba(114,244,208,.12); border:1px solid rgba(114,244,208,.25); border-radius:var(--r-pill); padding:.35rem 1rem; display:inline-block; margin-bottom:1.25rem; }
.hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:700; letter-spacing:-.025em; line-height:1.1; margin-bottom:.75rem; color:#F0F9FF; }
.hero h1 span { color:var(--turquoise); }
.hero p { color:#9FC1D4; max-width:600px; font-size:1.05rem; }
.hero-meta { display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.hero-meta-item { font-size:.82rem; color:#5E86A0; }
.hero-meta-item strong { color:#9FC1D4; display:block; font-size:.88rem; }

/* ── SECTIONS ── */
.section { padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,6vw,5rem); border-bottom:1px solid var(--border); max-width:var(--container); }
.section:nth-child(odd) { background:var(--bg-alt); }
.section-eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:var(--r-pill); padding:.3rem .85rem; display:inline-block; margin-bottom:1rem; }
.section h2 { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-.025em; line-height:1.1; margin-bottom:.5rem; }
.section-lead { color:var(--text-2); font-size:1rem; margin-bottom:2.25rem; max-width:640px; }
.block-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-3); margin:2rem 0 1rem; }
.block-title:first-of-type { margin-top:0; }
hr.div { border:none; border-top:1px solid var(--border); margin:2rem 0; }
.tk { font-size:.8rem; color:var(--accent); background:var(--accent-soft); padding:.12rem .4rem; border-radius:5px; }
.note { font-size:.82rem; color:var(--text-3); line-height:1.6; }

.surface { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1.75rem; }
.surface-2 { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem; }

/* ── CORES ── */
.palette-bar { display:flex; height:40px; border-radius:10px; overflow:hidden; margin-bottom:2rem; border:1px solid var(--border); }
.palette-bar div { flex:1; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.875rem; }
.color-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; overflow:hidden; transition:var(--t-base); }
.color-card:hover { transform:translateY(-3px); border-color:var(--border-strong); }
.color-swatch { height:64px; }
.color-info { padding:.875rem; }
.color-name { font-size:.88rem; font-weight:600; color:var(--text-1); margin-bottom:.2rem; }
.color-hex { font-family:monospace; font-size:.8rem; color:var(--accent); }
.color-use { font-size:.76rem; color:var(--text-3); margin-top:.3rem; line-height:1.4; }

/* ── TABELAS DE SPEC ── */
.spec-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.spec-table th { text-align:left; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); padding:.4rem .75rem .75rem; border-bottom:1px solid var(--border); }
.spec-table td { padding:.6rem .75rem; border-bottom:1px solid var(--border); color:var(--text-2); vertical-align:middle; }
.spec-table tr:last-child td { border-bottom:none; }
.spec-table td:first-child { color:var(--text-1); font-weight:500; }
.spec-table td code { font-family:monospace; font-size:.8rem; color:var(--accent); background:var(--accent-soft); padding:.1rem .35rem; border-radius:4px; }
.mini-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; }
.mini-grid .surface-2 .l { font-size:.72rem; color:var(--text-3); margin-bottom:.3rem; }
.space-bar { display:inline-block; height:12px; background:var(--accent-border); border-radius:3px; vertical-align:middle; margin-left:.5rem; }

/* ============================ COMPONENTES ============================ */
.demo { display:flex; flex-wrap:wrap; gap:.875rem; align-items:center; }
.demo.top { align-items:flex-start; }
.label { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:.6rem; }
.anatomy { font-size:.82rem; color:var(--text-2); background:var(--inset-bg); border:1px dashed var(--border-strong); border-radius:1rem; padding:1rem 1.1rem; line-height:1.8; }
.anatomy b { color:var(--text-1); }

/* ---- BOTÃO ---- */
.btn { --bg:var(--act-primary-bg); --fg:var(--act-primary-fg); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.6rem; border-radius:var(--r-pill); border:1px solid var(--bd);
  background:var(--bg); color:var(--fg); font-family:'Inter',sans-serif; font-size:.9rem; font-weight:700; line-height:1;
  cursor:pointer; transition:var(--t-base); white-space:nowrap; }
.btn:hover:not(:disabled) { transform:translateY(-2px); }
.btn:not(.secondary):not(.ghost):not(.success):not(.danger):not(.danger-solid):hover:not(:disabled) { background:var(--act-primary-hover); }
.btn:disabled { cursor:not-allowed; background:var(--act-muted-bg); color:var(--text-3); border-color:transparent; transform:none; }
.btn.secondary { --bg:transparent; --fg:var(--accent); --bd:var(--accent-border); font-weight:600; }
.btn.secondary:hover:not(:disabled) { --bd:var(--accent); background:var(--accent-soft); }
.btn.ghost { --bg:transparent; --fg:var(--text-2); --bd:transparent; font-weight:600; }
.btn.ghost:hover:not(:disabled) { --fg:var(--accent); background:var(--accent-soft); transform:none; }
.btn.success { --bg:var(--act-success-bg); --fg:var(--act-success-fg); }
.btn.success:hover:not(:disabled){ filter:brightness(.94); }
.btn.danger { --bg:var(--danger-soft-bg); --fg:var(--danger-soft-fg); --bd:var(--danger-soft-bd); }
.btn.danger:hover:not(:disabled){ background:var(--danger-soft-bd); }
.btn.danger-solid { --bg:var(--act-danger-bg); --fg:var(--act-danger-fg); }
.btn.danger-solid:hover:not(:disabled){ filter:brightness(.95); }
.btn.sm { padding:.45rem 1rem; font-size:.8rem; gap:.4rem; }
.btn.lg { padding:.9rem 2rem; font-size:1rem; }
.btn.block { width:100%; }
.spinner { width:16px; height:16px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:currentColor; display:inline-block; animation:spin .7s linear infinite; }
.btn.sm .spinner { width:13px; height:13px; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn.is-loading { --bg:var(--act-muted-bg) !important; --fg:var(--text-2) !important; --bd:transparent !important; cursor:progress; }
.btn.is-done { --bg:var(--act-success-bg) !important; --fg:var(--act-success-fg) !important; --bd:transparent !important; }

/* ---- INPUTS / FILTROS ---- */
.field { padding:.6rem .9rem; border-radius:var(--r-control); border:1px solid var(--border); background:var(--field-bg); color:var(--text-1); font-family:inherit; font-size:.88rem; outline:none; transition:var(--t-fast); }
.field::placeholder { color:var(--text-3); }
.field:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
select.field { cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233C5C70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:14px 14px; padding-right:2.4rem; }
:root[data-theme="dark"] select.field {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394B8CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
/* popup nativo de <select> no tema escuro: fundo sólido + destaque na cor de acento */
:root[data-theme="dark"] select option { background-color:#06283c; color:#F0F9FF; }
:root[data-theme="dark"] select option:checked,
:root[data-theme="dark"] select option:hover { background-color:#0c3650; color:#72F4D0; }
.search { display:flex; align-items:center; gap:.5rem; background:var(--field-bg); border:1px solid var(--border); border-radius:var(--r-control); padding:0 .9rem; }
.search input { border:0; outline:0; background:transparent; padding:.6rem 0; font:inherit; font-size:.88rem; color:var(--text-1); flex:1; }
.search input::placeholder { color:var(--text-3); }
.search svg { color:var(--text-3); flex-shrink:0; }
.pill { padding:.5rem 1.1rem; border-radius:var(--r-pill); border:1px solid var(--border); background:transparent; color:var(--text-2); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--t-fast); }
.pill:hover { border-color:var(--border-strong); color:var(--text-1); }
.pill.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.tabs { display:inline-flex; gap:2px; background:var(--field-bg); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; }
.tab { padding:.5rem 1.1rem; border:0; border-radius:var(--r-pill); background:transparent; color:var(--text-2); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:var(--t-fast); }
.tab.active { background:var(--act-primary-bg); color:var(--act-primary-fg); }

/* ---- BARRA DE FILTROS ---- */
.filterbar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.filterbar .ttl { font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:600; color:var(--text-1); }
.filterbar .controls { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-left:auto; }
@media (max-width:760px){ .filterbar .controls{ width:100%; margin-left:0; } .filterbar .controls .search{ flex:1; } }

/* ---- CHIPS / BADGES (cores legíveis nos 2 temas) ---- */
.chip { display:inline-block; padding:.18rem .65rem; border-radius:var(--r-sm); font-size:.7rem; font-weight:700; }
.chip.turq   { background:var(--accent-soft); color:var(--accent); }
.chip.cyan   { background:rgba(37,140,168,.16);  color:#1C7E99; }
.chip.green  { background:rgba(34,197,94,.16);   color:#16A34A; }
.chip.danger { background:rgba(220,38,38,.14);   color:#DC2626; }
.chip.muted  { background:var(--accent-soft);    color:var(--text-2); }
.badge { display:inline-block; border-radius:var(--r-pill); padding:.35rem 1rem; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; border:1px solid; }
.badge.turq { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-border); }
.badge.cyan { background:rgba(37,140,168,.16); color:#1C7E99; border-color:rgba(37,140,168,.3); }

/* ---- CARD / GLASS ---- */
.demo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1.5rem; box-shadow:var(--sh-md); transition:var(--t-base); }
.demo-card:hover { transform:translateY(-4px); border-color:var(--border-strong); }
.demo-card .t { font-family:'Sora',sans-serif; font-size:.95rem; font-weight:600; color:var(--text-1); }
.demo-card p { font-size:.86rem; color:var(--text-2); margin-top:.5rem; }
.glass { background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--border-strong); border-radius:20px; padding:1.5rem; box-shadow:var(--glow-turq); }
.glass .t { font-family:'Sora',sans-serif; font-size:.95rem; font-weight:600; color:var(--text-1); }
.glass p { font-size:.86rem; color:var(--text-2); margin-top:.4rem; }

/* ---- AVATAR / BARRA ---- */
.ava { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--navy); font-weight:700; }
.bar { width:100%; height:6px; background:var(--inset-bg); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:99px; }

/* ---- ALERTAS ---- */
.alert { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:var(--r-control); font-size:.86rem; font-weight:600; }
.alert.ok { background:rgba(34,197,94,.12); color:#16A34A; border:1px solid rgba(34,197,94,.4); }
.alert.err { background:rgba(220,38,38,.10); color:#DC2626; border:1px solid rgba(220,38,38,.4); }

/* ---- TABELA + PAGINAÇÃO ---- */
table.tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
table.tbl th { text-align:left; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); padding:.7rem .8rem; border-bottom:1px solid var(--border); }
table.tbl td { padding:.8rem; border-bottom:1px solid var(--border); color:var(--text-2); }
table.tbl tr:hover td { background:var(--accent-soft); }
.pag { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.78rem; color:var(--text-3); padding:.9rem .8rem; }
.pag .btns { display:flex; gap:.5rem; align-items:center; }
.pag .pg { padding:.4rem .7rem; border:1px solid var(--border); border-radius:var(--r-sm); background:transparent; color:var(--text-2); font:inherit; font-size:.78rem; cursor:pointer; }
.pag .pg:disabled { color:var(--text-3); opacity:.5; cursor:not-allowed; }

/* ---- MODAL ---- */
.modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(2,10,16,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; animation:fade .15s ease; }
.modal { width:100%; max-width:460px; background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:var(--r-card); box-shadow:var(--sh-lg); animation:pop .18s ease; overflow:hidden; }
.modal header { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--border); }
.modal header h3 { font-size:1rem; font-weight:600; color:var(--text-1); }
.modal header .x { border:0; background:transparent; color:var(--text-3); font-size:1.25rem; cursor:pointer; line-height:1; }
.modal header .x:hover { color:var(--accent); }
.modal .body { padding:1.3rem; display:flex; flex-direction:column; gap:1rem; }
.modal .body label { font-size:.78rem; font-weight:600; color:var(--text-2); display:block; margin-bottom:.4rem; }
.modal footer { display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.3rem; border-top:1px solid var(--border); }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none} }

/* ---- CHAT IA ---- */
.chat-wrap { max-width:720px; }
.chat-greet { text-align:center; font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:600; color:var(--text-1); margin-bottom:1.2rem; }
.chat-hint { display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:var(--r-control); background:var(--accent-soft); border:1px solid var(--accent-border); color:var(--text-2); font-size:.82rem; margin-bottom:.8rem; }
.chat-hint .bulb { font-size:1.1rem; flex-shrink:0; }
.chat-hint b { color:var(--accent); }
.chat-hint a { margin-left:auto; color:var(--accent); font-weight:700; text-decoration:none; font-size:.78rem; white-space:nowrap; }
.composer { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1rem 1.1rem .7rem; box-shadow:var(--sh-md); }
.composer textarea { width:100%; border:0; outline:0; background:transparent; resize:none; font:inherit; font-size:1rem; color:var(--text-1); min-height:26px; line-height:1.4; }
.composer textarea::placeholder { color:var(--text-3); }
.composer .bottom { display:flex; align-items:center; gap:.5rem; margin-top:.7rem; }
.composer .bottom .right { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.icon-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:var(--t-fast); flex-shrink:0; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.send-btn { width:36px; height:36px; border-radius:50%; border:0; background:var(--act-primary-bg); color:var(--act-primary-fg); cursor:pointer; font-size:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--t-fast); }
.send-btn:hover { background:var(--act-primary-hover); }
.provider-wrap { position:relative; }
.provider-sel { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:var(--r-pill); border:1px solid var(--border); background:transparent; color:var(--text-2); font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; }
.provider-sel:hover { border-color:var(--accent); color:var(--text-1); }
.provider-sel .ic { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
.provider-menu { position:absolute; bottom:calc(100% + 6px); left:0; background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--sh-lg); padding:6px; display:none; z-index:30; min-width:172px; }
.provider-menu.open { display:block; animation:pop .15s ease; }
.pm-item { display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:8px; cursor:pointer; font-size:.78rem; font-weight:600; color:var(--text-2); }
.pm-item:hover { background:var(--accent-soft); color:var(--text-1); }
.pm-item .ic { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
.agent-zone { display:flex; gap:.8rem; margin-top:.9rem; align-items:center; flex-wrap:nowrap; }
.agent-picker { position:relative; flex:1; min-width:200px; }
.agent-trigger { display:flex; align-items:center; gap:.6rem; width:100%; padding:.65rem .9rem; border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; }
.agent-trigger:hover { border-color:var(--accent); }
.agent-trigger .chev { margin-left:auto; color:var(--text-3); }
.agent-dd { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--sh-lg); z-index:30; overflow:hidden; display:none; }
.agent-dd.open { display:block; animation:pop .15s ease; }
.agent-dd .ddsearch { padding:.6rem; border-bottom:1px solid var(--border); }
.agent-dd .ddsearch input { width:100%; border:1px solid var(--border); border-radius:9px; padding:.5rem .75rem; font:inherit; font-size:.84rem; outline:none; background:var(--field-bg); color:var(--text-1); }
.agent-list { max-height:220px; overflow-y:auto; padding:6px; }
.agent-item { padding:.55rem .6rem; border-radius:9px; cursor:pointer; }
.agent-item:hover { background:var(--accent-soft); }
.agent-item .nm { font-size:.84rem; font-weight:600; color:var(--text-1); }
.agent-item .ds { font-size:.72rem; color:var(--text-3); }
.agent-empty { padding:1rem; text-align:center; font-size:.78rem; color:var(--text-3); }
.recent { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.recent .label { margin-bottom:0; white-space:nowrap; }
.recent #recentList { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.rec-item { display:inline-flex; align-items:center; padding:.45rem .9rem; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:var(--t-fast); }
.rec-item:hover { border-color:var(--accent); color:var(--text-1); }
@media (max-width:760px){ .agent-zone{ flex-wrap:wrap; align-items:flex-start; } .recent{ width:100%; flex-wrap:wrap; } }

/* ---- PILL SELECT (gatilho compacto + popover) ---- */
.pill-select { position:relative; display:inline-block; }
.pill-trigger { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--field-bg); color:var(--text-1); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; max-width:230px; white-space:nowrap; transition:border-color .15s, color .15s; }
.pill-trigger:hover:not(:disabled) { border-color:var(--accent-border); }
.pill-trigger.locked { cursor:default; }
.pill-trigger .pill-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill-trigger .pill-badge { font-size:.7rem; color:var(--text-2); flex-shrink:0; }
.pill-trigger .pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pill-trigger .pill-caret { color:var(--text-3); flex-shrink:0; font-size:.7rem; }
.pill-menu { position:absolute; left:0; min-width:220px; background:var(--modal-bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-md); padding:6px; z-index:40; }
.pill-menu.top { bottom:calc(100% + 6px); } .pill-menu.bottom { top:calc(100% + 6px); }
.pill-option { display:block; width:100%; padding:8px 10px; border-radius:8px; border:none; background:transparent; color:var(--text-1); font:inherit; cursor:pointer; text-align:left; }
.pill-option:hover:not(:disabled):not(.selected) { background:var(--inset-bg); }
.pill-option.selected { background:var(--accent-soft); }
.pill-option:disabled { opacity:.5; cursor:not-allowed; }

/* ---- COMBOBOX (select com busca) ---- */
.combobox { position:relative; }
.combobox.compact { width:200px; max-width:100%; }
.combobox.compact .combo-trigger { padding:.5rem .7rem; font-size:.8rem; }
.combo-trigger { display:flex; align-items:center; gap:.6rem; width:100%; padding:.65rem .9rem; border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface-2); color:var(--text-1); font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; }
.combo-trigger:hover { border-color:var(--accent); }
.combo-trigger .combo-caret { margin-left:auto; color:var(--text-3); flex-shrink:0; }
.combo-dd { position:absolute; left:0; right:0; background:var(--modal-bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-md); z-index:40; overflow:hidden; }
.combo-dd.top { bottom:calc(100% + 6px); } .combo-dd.bottom { top:calc(100% + 6px); }
.combo-search { padding:.6rem; border-bottom:1px solid var(--border); }
.combo-search input { width:100%; border:1px solid var(--border); border-radius:9px; padding:.5rem .75rem; font:inherit; font-size:.84rem; outline:none; background:var(--field-bg); color:var(--text-1); box-sizing:border-box; }
.combo-list { max-height:240px; overflow-y:auto; padding:6px; }
.combo-item { display:block; width:100%; text-align:left; border:none; background:transparent; padding:.55rem .6rem; border-radius:9px; cursor:pointer; font:inherit; color:var(--text-1); }
.combo-item:hover:not(:disabled):not(.selected) { background:var(--inset-bg); }
.combo-item.selected { background:var(--accent-soft); }
.combo-item:disabled { opacity:.5; cursor:not-allowed; }
.combo-empty { padding:1rem; text-align:center; font-size:.78rem; color:var(--text-3); }

/* ---- MENSAGEM DE CHAT (balão + avatar + meta) ---- */
.chatmsg { display:flex; align-items:flex-end; gap:10px; }
.chatmsg.user { flex-direction:row-reverse; }
.chatmsg-ava { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--act-primary-fg); }
.chatmsg.assistant .chatmsg-ava { background:linear-gradient(135deg, var(--cyan), var(--turquoise)); }
.chatmsg.user .chatmsg-ava { background:linear-gradient(135deg, var(--navy), var(--accent)); }
.chatmsg-body { max-width:88%; }
.chatmsg.user .chatmsg-body { max-width:72%; }
.chatmsg-bubble { padding:12px 16px; border-radius:14px; font-size:14px; line-height:1.6; box-shadow:var(--sh-sm); }
.chatmsg.assistant .chatmsg-bubble { background:var(--surface); color:var(--text-1); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chatmsg.user .chatmsg-bubble { background:linear-gradient(135deg, var(--accent), var(--cyan)); color:var(--act-primary-fg); border-bottom-right-radius:4px; }
.chatmsg-meta { font-size:10px; color:var(--text-3); margin-top:4px; padding-left:4px; }

/* ---- CABEÇALHO DE PÁGINA (hero + section head + back link) ---- */
.page-hero { background:var(--hero-grad); border-radius:var(--r-card); padding:1.5rem 1.75rem; color:#fff; }
.page-hero.row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.page-hero .eb { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--turquoise); }
.page-hero h3, .page-hero .ph-title { font-family:'Sora'; font-size:1.4rem; font-weight:700; color:#fff; margin-top:.3rem; }
.page-hero p, .page-hero .ph-sub { font-size:.86rem; color:#9FC1D4; margin-top:.3rem; }
.page-hero .ph-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.section-head .h { font-family:'Sora'; font-size:1.15rem; font-weight:600; color:var(--text-1); }
.section-head .s { font-size:.82rem; color:var(--text-3); margin-top:.2rem; }
.back-link { display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; color:var(--text-3); font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; }
.back-link:hover { color:var(--accent); }

/* ---- KPI / CARTÕES DE MÉTRICA ---- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1.1rem 1.25rem; }
.kpi .l { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); }
.kpi .v { font-family:'Sora'; font-size:1.7rem; font-weight:800; color:var(--text-1); margin-top:.4rem; }
.kpi .d { font-size:.74rem; font-weight:700; margin-top:.3rem; }
.kpi .d.up { color:#16A34A; } .kpi .d.down { color:#DC2626; }

/* ---- CAMPOS DE FORMULÁRIO ---- */
.form-field { margin-bottom:1rem; }
.form-field > label { display:flex; gap:.25rem; font-size:.78rem; font-weight:600; color:var(--text-2); margin-bottom:.4rem; }
.form-field .req { color:var(--danger-soft-fg); }
.form-field .field { width:100%; }
.form-field .help { font-size:.72rem; color:var(--text-3); margin-top:.35rem; }
.form-field.has-error .field { border-color:var(--danger-soft-fg); }
.form-field.has-error .field:focus { box-shadow:0 0 0 3px var(--danger-soft-bg); }
.form-field .err { font-size:.72rem; color:var(--danger-soft-fg); margin-top:.35rem; display:none; }
.form-field.has-error .err { display:block; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* ---- TOGGLE / SWITCH ---- */
.switch { position:relative; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { position:relative; width:42px; height:24px; border-radius:99px; background:var(--act-muted-bg); border:1px solid var(--border); transition:var(--t-base); flex-shrink:0; }
.switch .track::after { content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; background:var(--text-3); transition:var(--t-base); }
.switch input:checked + .track { background:var(--accent); border-color:var(--accent); }
.switch input:checked + .track::after { left:21px; background:#fff; }
.switch .lbl { font-size:.86rem; color:var(--text-1); font-weight:500; }

/* ---- TAG PILLS ---- */
.tag { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .35rem .25rem .7rem; border-radius:var(--r-pill); font-size:.74rem; font-weight:600; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-border); }
.tag .rm { width:16px; height:16px; border-radius:50%; border:0; background:transparent; color:inherit; cursor:pointer; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.tag .rm:hover { background:rgba(125,125,125,.22); }
.tag.add { background:transparent; color:var(--text-2); border:1px dashed var(--border-strong); cursor:pointer; padding:.25rem .8rem; }
.tag.add:hover { border-color:var(--accent); color:var(--accent); }
.tag-input-wrap { position:relative; display:inline-block; }
.tag-input { padding:.25rem .7rem; border-radius:var(--r-pill); border:1px solid var(--accent); background:var(--surface); color:var(--text-1); font:inherit; font-size:.74rem; font-weight:600; outline:none; width:150px; }
.tag-suggest { position:absolute; top:calc(100% + 5px); left:0; min-width:170px; background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--sh-lg); padding:5px; z-index:40; display:none; }
.tag-suggest.open { display:block; animation:pop .15s ease; }
.tag-suggest .ts { padding:.4rem .55rem; border-radius:7px; font-size:.78rem; color:var(--text-2); cursor:pointer; }
.tag-suggest .ts:hover { background:var(--accent-soft); color:var(--text-1); }
.tag-suggest .ts .new { color:var(--accent); font-weight:700; }

/* ---- STATUS DOT (com pulso) ---- */
.sdot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.sdot.on { background:#16A34A; }
.sdot.run { background:var(--turquoise); animation:pulse 1.3s infinite; }
.sdot.off { background:var(--text-3); }
.sdot.err { background:#DC2626; }
.status-row { display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-2); }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(114,244,208,.55); } 50%{ box-shadow:0 0 0 5px rgba(114,244,208,0); } }

/* ---- EMPTY STATE ---- */
.empty { text-align:center; padding:2.5rem 1rem; }
.empty .ic { font-size:2rem; opacity:.55; }
.empty .t { font-family:'Sora'; font-size:1rem; font-weight:600; color:var(--text-1); margin-top:.6rem; }
.empty .s { font-size:.84rem; color:var(--text-3); margin-top:.3rem; max-width:340px; margin:.3rem auto 0; }

/* ---- LOADING / SKELETON ---- */
.skel { background:linear-gradient(90deg,var(--inset-bg) 25%,var(--accent-soft) 37%,var(--inset-bg) 63%); background-size:400% 100%; border-radius:8px; animation:shimmer 1.4s ease infinite; }
@keyframes shimmer { 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
.spinner-lg { width:34px; height:34px; border:3px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }

/* ---- TOAST ---- */
.toast-stack { position:fixed; bottom:20px; right:20px; z-index:1200; display:flex; flex-direction:column; gap:.6rem; }
.toast { display:flex; align-items:center; gap:.6rem; min-width:240px; padding:.8rem 1rem; border-radius:var(--r-control); background:var(--modal-bg); border:1px solid var(--border-strong); box-shadow:var(--sh-lg); font-size:.84rem; font-weight:600; color:var(--text-1); animation:toastIn .25s ease; }
.toast.ok { border-left:3px solid #16A34A; }
.toast.err { border-left:3px solid #DC2626; }
@keyframes toastIn { from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }

/* ---- BREADCRUMB ---- */
.crumbs { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-3); flex-wrap:wrap; }
.crumbs a { color:var(--text-2); text-decoration:none; cursor:pointer; }
.crumbs a:hover { color:var(--accent); }
.crumbs .sep { opacity:.55; }
.crumbs .cur { color:var(--text-1); font-weight:600; }

/* ---- MENU DE AÇÕES (kebab) ---- */
.menu-wrap { position:relative; display:inline-block; }
.kebab { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); cursor:pointer; font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:var(--t-fast); }
.kebab:hover { border-color:var(--accent); color:var(--accent); }
.menu { position:absolute; top:calc(100% + 6px); right:0; min-width:184px; background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--sh-lg); padding:6px; display:none; z-index:40; }
.menu.open { display:block; animation:pop .15s ease; }
.menu .mi { display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:8px; font-size:.84rem; color:var(--text-2); cursor:pointer; }
.menu .mi:hover { background:var(--accent-soft); color:var(--text-1); }
.menu .mi.danger { color:var(--danger-soft-fg); }
.menu .mi.danger:hover { background:var(--danger-soft-bg); }
.menu .msep { height:1px; background:var(--border); margin:4px 2px; }

/* ---- CALLOUT / AVISO (notice de página) ---- */
.callout { display:flex; gap:.7rem; padding:.9rem 1.1rem; border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); border-left:3px solid var(--accent); }
.callout .ic { font-size:1.1rem; flex-shrink:0; line-height:1.4; }
.callout .ct { font-size:.86rem; color:var(--text-2); line-height:1.55; }
.callout .ct b { color:var(--text-1); }
.callout.warn { border-left-color:#D97706; }
.callout.danger { border-left-color:#DC2626; }
.callout.ok { border-left-color:#16A34A; }

/* ---- LISTA DE METADADOS (chave/valor) ---- */
.kv { display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.25rem; font-size:.86rem; }
.kv dt { color:var(--text-3); font-weight:600; white-space:nowrap; }
.kv dd { color:var(--text-1); }

/* ---- BLOCO DE CÓDIGO (copiar) ---- */
.code-block { position:relative; background:var(--inset-bg); border:1px solid var(--border); border-radius:var(--r-control); padding:.9rem 1rem; overflow:auto; }
.code-block pre { font-family:ui-monospace,monospace; font-size:.8rem; color:var(--text-1); line-height:1.6; white-space:pre; margin:0; }
.code-block .copy { position:absolute; top:.5rem; right:.5rem; padding:.3rem .6rem; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font:inherit; font-size:.72rem; font-weight:600; cursor:pointer; }
.code-block .copy:hover { border-color:var(--accent); color:var(--accent); }

/* ---- ÁRVORE / EXPLORADOR ---- */
.tree { font-size:.86rem; }
.tree-node > .row { display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem; border-radius:7px; cursor:pointer; color:var(--text-2); }
.tree-node > .row:hover { background:var(--accent-soft); color:var(--text-1); }
.tree-node > .row.sel { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.tree-node .caret { width:12px; display:inline-block; transition:transform .15s; color:var(--text-3); font-size:.65rem; }
.tree-node.open > .row .caret { transform:rotate(90deg); }
.tree-children { margin-left:1rem; border-left:1px solid var(--border); padding-left:.4rem; display:none; }
.tree-node.open > .tree-children { display:block; }
.tree-ico { width:15px; height:15px; flex-shrink:0; }

/* ---- LAYOUT MESTRE-DETALHE (2 painéis) ---- */
.master-detail { display:grid; grid-template-columns:280px 1fr; gap:1rem; align-items:start; }
.master-detail .pane { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1rem 1.1rem; }
@media (max-width:760px){ .master-detail{ grid-template-columns:1fr; } }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }

/* ---- STEPPER ---- */
.stepper { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.step { display:flex; align-items:center; gap:.5rem; }
.step .num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:700; background:var(--act-muted-bg); color:var(--text-3); border:1px solid var(--border); flex-shrink:0; }
.step.done .num { background:var(--accent); color:#fff; border-color:var(--accent); }
.step.active .num { background:var(--act-primary-bg); color:var(--act-primary-fg); border-color:var(--act-primary-bg); }
.step .lbl { font-size:.82rem; color:var(--text-3); font-weight:600; }
.step.active .lbl, .step.done .lbl { color:var(--text-1); }
.step-line { width:32px; height:2px; background:var(--border); }
.step-line.done { background:var(--accent); }

/* ---- MINI GRÁFICOS ---- */
.chart-bars { display:flex; align-items:flex-end; gap:.6rem; height:150px; padding-bottom:1.4rem; }
.chart-bars .cb { flex:1; min-width:10px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--accent),var(--cyan)); position:relative; transition:var(--t-base); }
.chart-bars .cb:hover { filter:brightness(1.1); }
.chart-bars .cb span { position:absolute; bottom:-1.4rem; left:0; right:0; text-align:center; font-size:.62rem; color:var(--text-3); }
.donut { width:120px; height:120px; border-radius:50%; position:relative; flex-shrink:0; }
.donut::after { content:""; position:absolute; inset:20px; border-radius:50%; background:var(--surface); }
.donut .ctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.donut .ctr b { font-family:'Sora'; font-size:1.3rem; color:var(--text-1); }
.donut .ctr small { font-size:.66rem; color:var(--text-3); }
.legend { display:flex; flex-direction:column; gap:.45rem; font-size:.8rem; color:var(--text-2); }
.legend .li { display:flex; align-items:center; gap:.5rem; }
.legend .sw { width:12px; height:12px; border-radius:3px; flex-shrink:0; }

/* ---- BARRA DE SALVAR (sticky de formulário) ---- */
.savebar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.9rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); box-shadow:var(--sh-md); }
.savebar .info { font-size:.82rem; color:var(--text-3); }
.savebar .acts { display:flex; gap:.6rem; }

/* ---- TIMELINE ---- */
.timeline { position:relative; padding-left:1.5rem; }
.timeline::before { content:""; position:absolute; left:5px; top:4px; bottom:6px; width:2px; background:var(--border); }
.tl-item { position:relative; padding-bottom:1.1rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-1.5rem; top:2px; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); }
.tl-item .tt { font-size:.86rem; color:var(--text-1); font-weight:600; }
.tl-item .tm { font-size:.72rem; color:var(--text-3); }
.tl-item .td { font-size:.82rem; color:var(--text-2); margin-top:.15rem; }

/* ---- WIZARD ---- */
.wizard-step { display:none; }
.wizard-step.active { display:block; animation:fade .2s ease; }

/* ---- AUTH / LOGIN ---- */
.auth-stage { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-card); padding:2.5rem 1.5rem; display:flex; justify-content:center; }
.auth-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-lg); padding:1.75rem; }
.auth-card .brand { display:flex; align-items:center; gap:.5rem; justify-content:center; margin-bottom:.4rem; }
.auth-card h3 { font-family:'Sora'; font-size:1.2rem; font-weight:700; text-align:center; color:var(--text-1); }
.auth-card .sub { text-align:center; font-size:.82rem; color:var(--text-3); margin-bottom:1.4rem; }
.auth-card .alt { text-align:center; font-size:.8rem; color:var(--text-3); margin-top:1rem; }
.auth-card .alt a { color:var(--accent); font-weight:600; text-decoration:none; }

/* ---- KANBAN / BOARD ---- */
.board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.board-col { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-card); padding:.8rem; }
.board-col .ch { display:flex; align-items:center; justify-content:space-between; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:.7rem; padding:0 .2rem; }
.board-col .ch .cnt { background:var(--accent-soft); color:var(--accent); border-radius:99px; padding:.05rem .5rem; font-size:.7rem; }
.board-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.8rem .9rem; margin-bottom:.6rem; cursor:grab; box-shadow:var(--sh-sm); transition:var(--t-fast); }
.board-card:hover { border-color:var(--accent-border); transform:translateY(-2px); }
.board-card .bt { font-size:.86rem; font-weight:600; color:var(--text-1); }
.board-card .bm { display:flex; align-items:center; justify-content:space-between; margin-top:.7rem; }
.board-add { width:100%; padding:.5rem; border:1px dashed var(--border-strong); border-radius:10px; background:transparent; color:var(--text-3); font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; }
.board-add:hover { border-color:var(--accent); color:var(--accent); }

/* ---- CONVERSAS / INBOX ---- */
.conv-item { display:flex; gap:.6rem; padding:.7rem .6rem; border-radius:10px; cursor:pointer; }
.conv-item:hover { background:var(--accent-soft); }
.conv-item.sel { background:var(--accent-soft); }
.conv-item .meta { flex:1; min-width:0; }
.conv-item .nm { font-size:.84rem; font-weight:600; color:var(--text-1); display:flex; justify-content:space-between; gap:.5rem; }
.conv-item .nm .tm { font-size:.68rem; color:var(--text-3); font-weight:500; flex-shrink:0; }
.conv-item .pv { font-size:.76rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-thread { display:flex; flex-direction:column; gap:.6rem; padding:.3rem 0 1rem; }
.bubble { max-width:80%; padding:.6rem .85rem; border-radius:14px; font-size:.86rem; line-height:1.5; }
.bubble.them { background:var(--surface-2); color:var(--text-1); border:1px solid var(--border); border-bottom-left-radius:4px; }
.bubble.me { background:var(--act-primary-bg); color:var(--act-primary-fg); margin-left:auto; border-bottom-right-radius:4px; }
.thread-input { display:flex; gap:.5rem; align-items:center; border-top:1px solid var(--border); padding-top:.8rem; }

/* ---- ERRO / SEM ACESSO ---- */
.errpage { text-align:center; padding:3rem 1rem; }
.errpage .code { font-family:'Sora'; font-size:3rem; font-weight:800; color:var(--accent); line-height:1; }
.errpage .t { font-family:'Sora'; font-size:1.15rem; font-weight:600; color:var(--text-1); margin-top:.6rem; }
.errpage .s { font-size:.86rem; color:var(--text-3); margin-top:.4rem; max-width:380px; margin-left:auto; margin-right:auto; }

/* ---- CALENDÁRIO / AGENDA ---- */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; }
.cal .dow { text-align:center; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); padding-bottom:.3rem; }
.cal .day { min-height:64px; border:1px solid var(--border); border-radius:10px; padding:.4rem; background:var(--surface); font-size:.74rem; color:var(--text-2); }
.cal .day.muted { background:transparent; border-color:transparent; color:var(--text-3); opacity:.5; }
.cal .day.today { border-color:var(--accent); }
.cal .day .n { font-weight:700; color:var(--text-1); }
.cal .ev { display:block; margin-top:.25rem; font-size:.66rem; font-weight:600; padding:.1rem .35rem; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:filter .12s; }
.cal .ev:hover { filter:brightness(.94); }
.cal .ev.a { background:var(--accent-soft); color:var(--accent); }
.cal .ev.b { background:rgba(34,197,94,.16); color:#16A34A; }
.cal .ev.c { background:rgba(217,119,6,.16); color:#B45309; }

/* ---- GALERIA / UPLOAD ---- */
.dropzone { border:2px dashed var(--border-strong); border-radius:var(--r-card); padding:2rem 1rem; text-align:center; background:var(--inset-bg); transition:var(--t-fast); cursor:pointer; }
.dropzone:hover { border-color:var(--accent); }
.dropzone .ic { font-size:1.8rem; opacity:.6; }
.dropzone .t { font-size:.9rem; font-weight:600; color:var(--text-1); margin-top:.5rem; }
.dropzone .s { font-size:.78rem; color:var(--text-3); margin-top:.2rem; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; }
.gtile { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.gtile .thumb { height:90px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--accent-soft); color:var(--accent); }
.gtile .info { padding:.5rem .6rem; }
.gtile .fn { font-size:.76rem; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gtile .fs { font-size:.68rem; color:var(--text-3); }

/* ---- MODAL: variantes de diálogo (alerta/decisão/perigo) ---- */
.modal.dialog { max-width:400px; }
.modal.dialog .body { text-align:center; align-items:center; gap:.5rem; padding-top:1.6rem; }
.dlg-ic { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:.3rem; }
.dlg-ic.info { background:var(--accent-soft); color:var(--accent); }
.dlg-ic.warn { background:rgba(217,119,6,.16); color:#B45309; }
.dlg-ic.danger { background:var(--danger-soft-bg); color:var(--danger-soft-fg); }
.dlg-ic.ok { background:rgba(34,197,94,.16); color:#16A34A; }
.dlg-title { font-family:'Sora'; font-size:1.05rem; font-weight:700; color:var(--text-1); }
.dlg-msg { font-size:.86rem; color:var(--text-2); line-height:1.55; }
.modal footer.center { justify-content:center; }

/* ---- TOOLTIP (hover) ---- */
.tip { position:relative; cursor:help; border-bottom:1px dashed var(--text-3); }
.tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--text-1); color:var(--bg); font-size:.72rem; font-weight:600; padding:.4rem .6rem; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; box-shadow:var(--sh-md); z-index:60; }
.tip:hover::after { opacity:1; }

/* ---- POPOVER (clique) ---- */
.popover { position:absolute; z-index:1100; min-width:200px; max-width:260px; background:var(--modal-bg); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--sh-lg); padding:.9rem 1rem; display:none; }
.popover.open { display:block; animation:pop .15s ease; }
.popover .pt { font-size:.86rem; font-weight:700; color:var(--text-1); }
.popover .pr { font-size:.78rem; color:var(--text-1); margin-top:.5rem; display:flex; justify-content:space-between; gap:1rem; }
.popover .pr dt { color:var(--text-3); }

/* ---- TIME TRACKER (cronômetro) ---- */
.timer-display { font-family:ui-monospace,monospace; font-size:3.4rem; font-weight:800; letter-spacing:-.03em; text-align:center; color:var(--text-1); transition:color .3s; }
.timer-display.on { color:var(--accent); }
.entry-row { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--border); }
.entry-row:last-child { border-bottom:none; }
.entry-row .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.entry-row .info { flex:1; min-width:0; }
.entry-row .h { font-family:ui-monospace,monospace; font-weight:800; color:var(--text-1); font-size:.9rem; }

/* ---- COMPARATIVO AS-IS / TO-BE ---- */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .compare{ grid-template-columns:1fr; } }
.compare .col { border-radius:var(--r-card); border:1px solid var(--border); padding:1.25rem; background:var(--surface); }
.compare .col.asis { border-color:rgba(220,38,38,.3); }
.compare .col.tobe { border-color:rgba(34,197,94,.35); }
.compare .col h4 { font-size:.9rem; font-weight:700; color:var(--text-1); display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; }
.compare ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.compare li { font-size:.84rem; color:var(--text-2); display:flex; gap:.5rem; }
.compare .asis li::before { content:"✕"; color:#DC2626; font-weight:700; }
.compare .tobe li::before { content:"✓"; color:#16A34A; font-weight:700; }
.ia-divider { display:flex; align-items:center; gap:.6rem; margin:.2rem 0; }
.ia-divider .ln { flex:1; height:2px; background:linear-gradient(to right,var(--border),var(--accent)); }
.ia-divider .ln.r { background:linear-gradient(to right,var(--accent),var(--border)); }
.ia-divider .tag { background:var(--act-primary-bg); color:var(--act-primary-fg); padding:.25rem .8rem; border-radius:99px; font-size:.72rem; font-weight:700; white-space:nowrap; }

/* ---- COMPARATIVO / PLANOS ---- */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.plan { border:1px solid var(--border); border-radius:var(--r-card); padding:1.5rem; background:var(--surface); display:flex; flex-direction:column; }
.plan.feat { border-color:var(--accent); box-shadow:var(--glow-turq); position:relative; }
.plan.feat::before { content:"Recomendado"; position:absolute; top:-.7rem; left:50%; transform:translateX(-50%); background:var(--act-primary-bg); color:var(--act-primary-fg); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.2rem .7rem; border-radius:99px; }
.plan .pn { font-family:'Sora'; font-size:1.05rem; font-weight:700; color:var(--text-1); }
.plan .pp { margin:.6rem 0 1rem; }
.plan .pp b { font-family:'Sora'; font-size:1.8rem; color:var(--text-1); }
.plan .pp span { font-size:.78rem; color:var(--text-3); }
.plan ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; flex:1; }
.plan li { font-size:.82rem; color:var(--text-2); display:flex; gap:.45rem; }
.plan li::before { content:"✓"; color:#16A34A; font-weight:700; }
.plan li.off { color:var(--text-3); }
.plan li.off::before { content:"✕"; color:var(--text-3); }

/* ── FOOTER ── */
.footer { padding:2.5rem clamp(1.5rem,6vw,5rem); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-family:'Sora',sans-serif; font-weight:700; font-size:1.1rem; color:var(--text-1); letter-spacing:.05em; }
.footer-note { font-size:.78rem; color:var(--text-3); }

@media (max-width:880px){
  .layout { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:static; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:1rem 1.25rem; }
  .sidebar-logo { margin-bottom:0; width:100%; }
  .nav-section { display:none; }
  .theme-toggle { top:auto; bottom:14px; }
}