/* =====================================================================
   Módulo Comercial — CSS idêntico ao protótipo aprovado (Artifact).
   Autocontido de propósito: NÃO carrega gestao/styles.css, pra não ter
   nenhum conflito de cascata com o design aprovado neste módulo.
   ===================================================================== */
:root{
  --paper:#f6f7fb;
  --canvas:#f6f7fb;
  --sidebar:#ffffff;
  --ink:#323338;
  --ink-soft:#676879;
  --ink-faint:#9699a6;
  --accent:#0073ea;
  --accent-2:#0060b9;
  --line:#e6e9ef;
  --line-strong:#d0d4e4;
  --card-bg:#ffffff;
  --hover:rgba(0,0,0,0.045);
  --shadow-sm:0 1px 2px rgba(38,42,74,0.06);
  --shadow-md:0 6px 20px -8px rgba(38,42,74,0.18);
  --shadow-lg:0 20px 48px -16px rgba(38,42,74,0.28);

  --good:#00c875; --warn:#fdab3d; --critical:#e2445c;

  --ch-eventos:#ff158a; --ch-cafeb2b:#9cd326; --ch-cafevarejo:#0086c0; --ch-ativacao:#784bd1;

  --st-contato:#579bfc; --st-qualificacao:#fdab3d; --st-proposta:#ff642e; --st-negociacao:#a25ddc; --st-ganho:#00c875; --st-perdido:#e2445c;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#14151f; --canvas:#181a2b; --sidebar:#181a2b;
    --ink:#eceef5; --ink-soft:#9699a6; --ink-faint:#686b7d;
    --accent:#3f8cfd; --accent-2:#6aa8ff;
    --line:rgba(255,255,255,0.09); --line-strong:rgba(255,255,255,0.16);
    --card-bg:#20223a;
    --hover:rgba(255,255,255,0.07);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
    --shadow-md:0 6px 22px -8px rgba(0,0,0,0.5);
    --shadow-lg:0 24px 56px -16px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper:#14151f; --canvas:#181a2b; --sidebar:#181a2b;
  --ink:#eceef5; --ink-soft:#9699a6; --ink-faint:#686b7d;
  --accent:#3f8cfd; --accent-2:#6aa8ff;
  --line:rgba(255,255,255,0.09); --line-strong:rgba(255,255,255,0.16);
  --card-bg:#20223a;
  --hover:rgba(255,255,255,0.07);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 6px 22px -8px rgba(0,0,0,0.5);
  --shadow-lg:0 24px 56px -16px rgba(0,0,0,0.6);
}
:root[data-theme="light"]{
  --paper:#f6f7fb; --canvas:#f6f7fb; --sidebar:#ffffff;
  --ink:#323338; --ink-soft:#676879; --ink-faint:#9699a6;
  --accent:#0073ea; --accent-2:#0060b9;
  --line:#e6e9ef; --line-strong:#d0d4e4;
  --card-bg:#ffffff;
  --hover:rgba(0,0,0,0.045);
  --shadow-sm:0 1px 2px rgba(38,42,74,0.06);
  --shadow-md:0 6px 20px -8px rgba(38,42,74,0.18);
  --shadow-lg:0 20px 48px -16px rgba(38,42,74,0.28);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.45;
}
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.app{ display:flex; height:100vh; overflow:hidden; }

/* ============ SIDEBAR ============ */
.sidebar{
  width:230px; flex:none; background:var(--sidebar); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px;
}
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
.brand-tag{ font-size:12.5px; font-weight:650; color:var(--ink-soft); letter-spacing:-0.01em; }

.navgroup{ display:flex; flex-direction:column; gap:2px; margin-bottom:18px; }
.navlabel{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); padding:10px 10px 6px; }
.navitem{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:var(--ink-soft); text-decoration:none; font-size:13.5px; font-weight:560;
  border:none; background:none; cursor:pointer; text-align:left; width:100%;
  transition:background .15s ease, color .15s ease;
}
.navitem svg{ width:17px; height:17px; flex:none; opacity:0.8; }
.navitem:hover{ background:var(--hover); color:var(--ink); }
.navitem.active{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); font-weight:650; }
.navitem.active svg{ opacity:1; color:var(--accent); }
.navitem .count{ margin-left:auto; font-size:11px; font-family:var(--font-mono); opacity:0.7; }
.navitem.disabled{ opacity:0.4; cursor:default; }

.sidebar-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.who{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; }
.who-av{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; }
.who-name{ font-size:12.5px; font-weight:650; }
.who-role{ font-size:11px; color:var(--ink-faint); }

/* ============ MAIN ============ */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--canvas); }
.topbar{
  display:flex; align-items:center; gap:14px; padding:16px 26px; border-bottom:1px solid var(--line);
  flex:none;
}
.topbar h1{ font-size:19px; margin:0; font-weight:700; letter-spacing:-0.01em; }
.topbar .sub{ font-size:12.5px; color:var(--ink-faint); margin-top:1px; }
.searchbox{
  display:flex; align-items:center; gap:7px; background:var(--card-bg); border:1px solid var(--line);
  border-radius:9px; padding:7px 11px; width:230px; margin-left:auto;
}
.searchbox svg{ width:15px; height:15px; color:var(--ink-faint); flex:none; }
.searchbox input{ border:none; outline:none; background:none; font-size:13px; color:var(--ink); width:100%; font-family:inherit; }
.searchbox input::placeholder{ color:var(--ink-faint); }

.select-origem{
  border:1px solid var(--line); background:var(--card-bg); color:var(--ink); border-radius:9px;
  padding:8px 11px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer;
}
.select-origem:invalid{ color:var(--ink-faint); }

.viewswitch{ display:flex; background:var(--hover); border-radius:9px; padding:2px; gap:2px; }
.viewswitch button{
  border:none; background:none; padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.viewswitch button svg{ width:14px; height:14px; }
.viewswitch button.active{ background:var(--card-bg); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.14); }

.btn{
  display:inline-flex; align-items:center; gap:7px; border:none; border-radius:9px; padding:9px 15px;
  font-size:13px; font-weight:650; cursor:pointer; white-space:nowrap; transition:filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn svg{ width:15px; height:15px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:active{ filter:brightness(0.95); }
.btn-tinted{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); }
.btn-tinted:hover{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
.btn-secondary{ background:var(--hover); color:var(--ink); }
.btn-secondary:hover{ background:var(--line-strong); }
.btn-ghost{ background:none; color:var(--ink-soft); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--hover); }

.canvas{ flex:1; min-height:0; overflow-y:auto; padding:20px 26px 40px; }

/* ============ KPI STRIP ============ */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.kpi{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); }
.kpi .l{ font-size:11.5px; color:var(--ink-faint); font-weight:600; display:flex; align-items:center; gap:6px; }
.kpi .l svg{ width:13px; height:13px; }
.kpi .n{ font-family:var(--font-mono); font-size:23px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi .d{ font-size:11px; margin-top:3px; font-weight:650; }
.kpi .d.up{ color:var(--good); } .kpi .d.down{ color:var(--critical); }

/* ============ FILTER CHIPS ============ */
.chips{ display:flex; gap:7px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:6px 12px;
  border-radius:20px; border:1px solid var(--line); background:var(--card-bg); color:var(--ink-soft);
  cursor:pointer; transition:all .15s ease;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; }
.chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ============ BOARD ============ */
.board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.col{ flex:0 0 254px; }
.col-head{
  display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:10px 10px 0 0;
  color:#fff; font-size:12.5px; font-weight:700;
}
.col-head .cnt{ background:rgba(255,255,255,0.25); border-radius:20px; padding:1px 7px; font-size:10.5px; }
.col-sum{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); background:var(--card-bg);
  border:1px solid var(--line); border-top:none; padding:6px 12px;
}
.col-drop{
  min-height:60px; background:transparent; border-radius:0 0 10px 10px; padding:8px; border:1px dashed transparent;
  transition:background .15s, border-color .15s;
}
.col-drop.over{ background:var(--hover); border-color:var(--line-strong); }
.col.perdido .col-drop{ opacity:0.7; }

.card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  margin-bottom:9px; cursor:grab; box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .14s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.card.dragging{ opacity:0.4; cursor:grabbing; }
.card .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:6px; }
.card .nm{ font-size:13px; font-weight:650; line-height:1.3; }
.av{ width:21px; height:21px; border-radius:50%; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.card .tag{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:#fff; border-radius:5px; padding:2.5px 7px; margin-top:7px; }
.card .val{ font-family:var(--font-mono); font-size:12.5px; font-weight:650; margin-top:7px; }
.card .risk{
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:650; color:var(--critical);
  margin-top:7px; background:color-mix(in srgb, var(--critical) 12%, transparent); padding:3px 7px; border-radius:5px;
}
.card .risk svg{ width:11px; height:11px; }
.card .risk.warn{ color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); }

/* ============ LIST VIEW ============ */
table.list{ width:100%; border-collapse:collapse; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.list th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); padding:11px 14px; border-bottom:1px solid var(--line); }
table.list td{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
table.list tr:last-child td{ border-bottom:none; }
table.list tr.row{ cursor:pointer; transition:background .12s; }
table.list tr.row:hover{ background:var(--hover); }
table.list td.val{ font-family:var(--font-mono); font-weight:650; }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#fff; padding:3px 9px; border-radius:20px; }
.cli-cell{ display:flex; align-items:center; gap:9px; }

/* ============ CLIENTES GRID ============ */
.import-summary{
  display:flex; align-items:center; gap:10px; padding:11px 15px; margin-bottom:14px;
  background:color-mix(in srgb, var(--good) 12%, transparent); border:1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius:10px; font-size:12.5px; color:var(--ink);
}
.import-summary svg{ width:16px; height:16px; color:var(--good); flex:none; }
.import-summary.warn{ background:color-mix(in srgb, var(--warn) 14%, transparent); border-color:color-mix(in srgb, var(--warn) 34%, transparent); }
.import-summary.warn svg{ color:var(--warn); }
.cli-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.cli-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:15px;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .14s, box-shadow .14s;
}
.cli-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.cli-card .head{ display:flex; align-items:center; gap:10px; }
.cli-card .av{ width:36px; height:36px; font-size:13px; border-radius:10px; }
.cli-card .nm{ font-size:14.5px; font-weight:700; }
.cli-card .tipo{ font-size:11px; color:var(--ink-faint); }
.cli-card .stats{ display:flex; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.cli-card .stats div{ font-size:11px; color:var(--ink-faint); }
.cli-card .stats b{ display:block; font-family:var(--font-mono); font-size:13.5px; color:var(--ink); font-weight:700; margin-top:2px; }
.status-tag{ font-size:10px; font-weight:700; padding:2.5px 8px; border-radius:20px; margin-top:9px; display:inline-block; }
.status-ativo{ background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }
.status-prospect{ background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.status-inativo{ background:var(--hover); color:var(--ink-faint); }

/* ============ DASHBOARD ============ */
.dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:1100px){ .dgrid{ grid-template-columns:1fr; } }
.panel{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); }
.panel h3{ font-size:13.5px; margin:0 0 3px; font-weight:700; }
.panel .ps{ font-size:11.5px; color:var(--ink-faint); margin-bottom:16px; }

.barrow{ display:grid; grid-template-columns:118px 1fr 78px; align-items:center; gap:10px; margin-bottom:12px; }
.barrow .lbl{ font-size:12px; font-weight:600; }
.barrow .track{ height:9px; background:var(--hover); border-radius:20px; overflow:hidden; }
.barrow .fill{ height:100%; border-radius:20px; }
.barrow .amt{ font-family:var(--font-mono); font-size:11.5px; text-align:right; color:var(--ink-soft); }

.funnelrow{ display:grid; grid-template-columns:130px 1fr 90px; align-items:center; gap:10px; margin-bottom:10px; }
.funnelrow .lbl{ font-size:12px; font-weight:600; }
.funnelrow .track{ height:22px; background:var(--hover); border-radius:6px; overflow:hidden; }
.funnelrow .fill{ height:100%; border-radius:6px; display:flex; align-items:center; padding-left:9px; font-size:10.5px; color:#fff; font-weight:700; }
.funnelrow .amt{ font-family:var(--font-mono); font-size:11px; text-align:right; color:var(--ink-soft); }

.lead{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.lead:last-child{ border-bottom:none; }
.lead .av{ width:26px; height:26px; font-size:10px; border-radius:50%; }
.lead .nm{ font-size:12.5px; font-weight:650; flex:1; }
.lead .n{ font-size:11px; color:var(--ink-faint); font-family:var(--font-mono); }
.lead .bar{ width:70px; height:5px; background:var(--hover); border-radius:20px; overflow:hidden; }
.lead .bar i{ display:block; height:100%; background:var(--accent); border-radius:20px; }

.activity{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.activity:last-child{ border-bottom:none; }
.activity .dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
.activity b{ font-weight:650; }
.activity .t{ color:var(--ink-faint); font-size:10.5px; margin-left:auto; white-space:nowrap; }

/* ============ CAMPANHAS ============ */
.camp-spend{ margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.camp-spend .row{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint); }
.camp-spend .row b{ font-family:var(--font-mono); color:var(--ink); font-weight:700; }
.camp-spend .track{ height:6px; background:var(--hover); border-radius:20px; overflow:hidden; margin-top:5px; }
.camp-spend .fill{ height:100%; border-radius:20px; background:var(--accent); }
.camp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }
.camp-stats div{ font-size:10.5px; color:var(--ink-faint); }
.camp-stats b{ display:block; font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:700; margin-top:2px; }

/* ============ METAS & FORECAST ============ */
.meta-hero{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding:6px 4px; }
.meta-hero .big .n{ font-family:var(--font-mono); font-size:34px; font-weight:700; letter-spacing:-0.01em; }
.meta-hero .big .l{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.meta-bullet{ flex:1; min-width:240px; }
.meta-bullet .track{ height:14px; background:var(--hover); border-radius:8px; position:relative; }
.meta-bullet .fill-prev, .meta-bullet .fill-real{ position:absolute; left:0; top:0; height:100%; border-radius:8px; }
.meta-bullet .fill-prev{ background:color-mix(in srgb, var(--accent) 32%, transparent); }
.meta-bullet .fill-real{ background:var(--accent); }
.meta-bullet .marker{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:2px; }
.meta-bullet .labels{ display:flex; justify-content:space-between; margin-top:9px; font-size:11.5px; color:var(--ink-faint); }
.meta-bullet .labels b{ color:var(--ink); font-family:var(--font-mono); }

.metarow{ display:grid; grid-template-columns:126px 1fr 150px; align-items:center; gap:10px; margin-bottom:15px; }
.metarow:last-child{ margin-bottom:0; }
.metarow .lbl{ font-size:12px; font-weight:600; }
.metarow .track{ height:10px; background:var(--hover); border-radius:20px; position:relative; }
.metarow .fill-prev, .metarow .fill-real{ position:absolute; left:0; top:0; height:100%; border-radius:20px; }
.metarow .marker{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-faint); border-radius:2px; }
.metarow .nums{ font-size:11.5px; color:var(--ink-soft); text-align:right; font-family:var(--font-mono); }
.metarow .nums b{ color:var(--ink); }

/* ============ AUTOMAÇÕES ============ */
.toggle{
  position:relative; width:38px; height:22px; border-radius:20px; background:var(--hover);
  border:none; cursor:pointer; flex:none; transition:background .15s ease;
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform .15s ease;
}
.toggle.on{ background:var(--good); }
.toggle.on::after{ transform:translateX(16px); }

.auto-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.auto-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow-sm); }
.auto-head{ display:flex; align-items:flex-start; gap:12px; }
.auto-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
}
.auto-icon svg{ width:17px; height:17px; }
.auto-info{ flex:1; min-width:0; }
.auto-nm{ font-size:13.5px; font-weight:700; }
.auto-desc{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.auto-desc b{ color:var(--ink-soft); font-weight:650; }
.auto-preview{
  margin-top:11px; padding:9px 12px; border-radius:8px; background:var(--canvas); border:1px solid var(--line);
  font-size:12px; color:var(--ink-soft); font-style:italic;
}
.auto-off .auto-nm, .auto-off .auto-preview{ opacity:0.5; }

.auto-form{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); }
.auto-form h3{ font-size:13.5px; margin:0 0 14px; }
.auto-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.auto-form select, .auto-form input[type=text]{
  width:100%; border:1px solid var(--line); background:var(--canvas); color:var(--ink); border-radius:8px;
  padding:8px 10px; font-size:12.5px; font-family:inherit;
}
.auto-form label{ font-size:11px; color:var(--ink-faint); display:block; margin-bottom:4px; }

/* ============ TEXTOS ============ */
.texto-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); }
.texto-nome{
  width:100%; border:none; background:none; color:var(--ink); font-size:13.5px; font-weight:700; font-family:inherit;
  padding:2px 0; margin-bottom:8px;
}
.texto-nome:focus{ outline:none; border-bottom:1px solid var(--accent); }
.texto-corpo{
  width:100%; border:1px solid var(--line); background:var(--canvas); color:var(--ink-soft); border-radius:8px;
  padding:9px 11px; font-size:12.5px; font-family:inherit; resize:vertical;
}
.texto-uso{ font-size:10.5px; color:var(--ink-faint); margin-top:8px; }

.so-tl-link{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:650; color:var(--accent); text-decoration:none; margin-top:3px; }
.so-tl-link:hover{ text-decoration:underline; }

/* ============ SLIDEOVER ============ */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.32); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;
}
.backdrop.open{ opacity:1; pointer-events:auto; }
.slideover{
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:var(--card-bg);
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  z-index:61; display:flex; flex-direction:column;
}
.slideover.open{ transform:translateX(0); }
.so-head{ padding:20px 22px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.so-head h2{ font-size:17px; margin:0 0 5px; }
.so-close{ border:none; background:var(--canvas); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.so-close svg{ width:15px; height:15px; color:var(--ink-soft); }
.so-body{ flex:1; overflow-y:auto; padding:18px 22px 30px; }
.so-section{ margin-bottom:22px; }
.so-section h4{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin:0 0 10px; }
.so-quick{ display:flex; gap:8px; }
.so-quick button, .so-quick a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px; border-radius:10px;
  border:1px solid var(--line); background:var(--canvas); cursor:pointer; font-size:10.5px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; box-sizing:border-box;
}
.so-quick button svg, .so-quick a svg{ width:17px; height:17px; color:var(--accent); }
.so-quick button:hover, .so-quick a:hover{ background:var(--hover); }
.so-field{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.so-field span:first-child{ color:var(--ink-faint); }
.so-field span:last-child{ font-weight:650; font-family:var(--font-mono); }
.so-timeline{ position:relative; padding-left:16px; }
.so-timeline::before{ content:""; position:absolute; left:4px; top:4px; bottom:4px; width:1px; background:var(--line-strong); }
.so-tl-item{ position:relative; padding-bottom:16px; font-size:12px; }
.so-tl-item::before{ content:""; position:absolute; left:-16px; top:3px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.so-tl-item .t{ color:var(--ink-faint); font-size:10.5px; }
textarea.note{ width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-family:inherit; font-size:12.5px; resize:vertical; min-height:60px; background:var(--canvas); color:var(--ink); }

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:22px; right:22px; background:var(--ink); color:var(--canvas); padding:11px 18px;
  border-radius:10px; font-size:12.5px; font-weight:600; box-shadow:var(--shadow-lg); z-index:80;
  transform:translateY(12px); opacity:0; transition:transform .22s ease, opacity .22s ease; display:flex; align-items:center; gap:8px;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:15px; height:15px; color:var(--good); }

.view{ display:none; } .view.active{ display:flex; flex-direction:column; min-height:0; flex:1; }
.hidden{ display:none !important; }

/* ============ auth loading gate (específico do módulo real) ============ */
body{ visibility:hidden; }
body.auth-ready{ visibility:visible; }
#cria-auth-loading{
  position:fixed; inset:0; background:#fff; display:flex; align-items:center; justify-content:center;
  color:#6e6e73; font-size:13px; font-family:var(--font); z-index:99999; visibility:visible !important;
}