/* Giant Steps Capital — CRM · Tema Claro (conforme guia de identidade 2026) */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --az: #003250; --az2: #00243a; --az3: #00172a;
  --ceu: #35A3DC; --ceu2: #71B5E4; --co: #E6656A; --tq: #22BEC6;
  --vd: #77C58C; --la: #E98A69; --be: #8C7AA5; --am: #F4D036; --azm: #2E7595;
  --off: #F5F7FA; --bd: #E8ECF1; --g: #7A8A9A; --tx: #1A2A3A;
  --paper: #FFFFFF; --paper2: #F5F7FA; --paper3: #EDF3F8;
  --bg-canvas: linear-gradient(180deg, #F5F7FA, #EDF3F8);
  --bg-tint: linear-gradient(180deg, #EDF3F8, #E3EDF6);
  --div-light: linear-gradient(90deg, transparent, rgba(0,50,80,.12), transparent);
  --f: 'Raleway', Arial, Helvetica, sans-serif;
  --fp: 'Poppins', Arial, Helvetica, sans-serif;
  --sh1: 0 2px 8px rgba(0,50,80,.06); --sh2: 0 8px 24px rgba(0,50,80,.10); --sh3: 0 8px 32px rgba(0,50,80,.15);
  --r: 6px; --rl: 10px; --rll: 12px;
  --sidebar: 232px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--f); color: var(--tx); background: var(--bg-canvas); background-attachment: fixed; font-size: 14px; line-height: 1.5; }
a { color: var(--azm); text-decoration: none; transition: all .25s ease; }
a:hover { color: var(--az); }

/* ---------- layout */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); background: linear-gradient(160deg, #00172a, #003250); color: #fff; padding: 24px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.sidebar .brand { padding: 4px 6px 22px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; }
.sidebar .brand small { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; opacity: .45; margin-top: 10px; font-weight: 600; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); color: rgba(255,255,255,.72); font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a.active { background: linear-gradient(135deg, rgba(53,163,220,.25), rgba(34,190,198,.15)); color: #fff; border-left: 3px solid var(--ceu); }
.sidebar nav a svg { width: 16px; height: 16px; opacity: .8; }
.sidebar .foot { margin-top: auto; font-size: 10px; opacity: .35; padding: 12px 6px 0; line-height: 1.6; }
.sidebar form.search { margin: 4px 0 18px; }
.sidebar form.search input { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: var(--r); padding: 9px 12px; font-family: var(--f); font-size: 13px; }
.sidebar form.search input::placeholder { color: rgba(255,255,255,.4); }

.main { flex: 1; min-width: 0; padding: 36px 48px 72px; max-width: 1400px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--azm); font-weight: 700; margin-bottom: 6px; }
h1 { font-family: var(--f); font-weight: 900; font-size: 30px; color: var(--az); margin: 0; letter-spacing: -.5px; line-height: 1.15; }
h2 { font-weight: 800; font-size: 18px; color: var(--az); margin: 0 0 12px; }
h3 { font-weight: 700; font-size: 14px; color: var(--az); margin: 0 0 8px; }
.sub { color: var(--g); font-size: 13px; margin-top: 4px; }
.divider { height: 1px; background: var(--div-light); margin: 28px 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- cards / grid */
.card { background: var(--paper); border: 1px solid var(--bd); border-radius: var(--rl); box-shadow: var(--sh1); padding: 20px 22px; transition: all .25s ease; }
.card.hl { background: linear-gradient(135deg, rgba(53,163,220,.08), rgba(34,190,198,.04)); border-color: rgba(53,163,220,.35); }
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.g-main { grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 1100px) { .g3, .g4, .g-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .shell { flex-direction: column; } .sidebar { position: static; height: auto; width: auto; } .main { padding: 20px 16px; } .g2, .g3, .g4, .g-main { grid-template-columns: 1fr; } }

/* ---------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { background: var(--paper); border: 1px solid var(--bd); border-radius: var(--rl); box-shadow: var(--sh1); padding: 16px 18px; transition: all .25s ease; }
.kpi:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.kpi .n { font-weight: 900; font-size: 30px; color: var(--az); letter-spacing: -1px; line-height: 1; }
.kpi .n small { font-size: 14px; font-weight: 700; color: var(--azm); margin-left: 2px; }
.kpi .l { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--g); font-weight: 600; margin-top: 8px; }
.kpi.warn .n { color: var(--co); } .kpi.ok .n { color: var(--vd); }

/* ---------- tables */
table { width: 100%; border-collapse: collapse; font-family: var(--fp); font-size: 13px; }
th { text-align: left; font-family: var(--f); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--g); font-weight: 700; padding: 10px 12px; border-bottom: 2px solid var(--bd); background: var(--paper); }
td { padding: 10px 12px; border-bottom: 1px solid var(--bd); vertical-align: top; }
tr:hover td { background: var(--paper2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
th a { color: var(--g); }
th a:hover { color: var(--az); }
th.sorted a { color: var(--az); }
th .arrow { font-size: 9px; color: var(--ceu); }
td .muted { color: var(--g); font-size: 12px; }
.pos { color: var(--vd); font-weight: 600; } .neg { color: var(--co); font-weight: 600; }
.table-wrap { background: var(--paper); border: 1px solid var(--bd); border-radius: var(--rl); box-shadow: var(--sh1); overflow: hidden; }
.table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: 20px; }
.table-wrap table th:last-child, .table-wrap table td:last-child { padding-right: 20px; }
.empty { padding: 28px; text-align: center; color: var(--g); font-size: 13px; }

/* ---------- badges */
.badge { display: inline-block; border-radius: 40px; padding: 3px 10px; font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; font-family: var(--f); }
.b-info { color: var(--azm); border-color: rgba(53,163,220,.5); background: rgba(53,163,220,.08); }
.b-ok { color: #3f8a55; border-color: rgba(119,197,140,.6); background: rgba(119,197,140,.12); }
.b-warn { color: #9a7a10; border-color: rgba(244,208,54,.7); background: rgba(244,208,54,.15); }
.b-err { color: #c94a4f; border-color: rgba(230,101,106,.6); background: rgba(230,101,106,.1); }
.b-neutral { color: var(--g); border-color: var(--bd); background: var(--paper2); }
.b-tq { color: #14868c; border-color: rgba(34,190,198,.6); background: rgba(34,190,198,.1); }
.b-be { color: #6b5a86; border-color: rgba(140,122,165,.6); background: rgba(140,122,165,.12); }

/* ---------- buttons / forms */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r); padding: 9px 16px; font-family: var(--f); font-weight: 700; font-size: 13px; border: 1px solid transparent; cursor: pointer; transition: all .25s ease; line-height: 1.2; }
.btn-primary { background: linear-gradient(135deg, var(--ceu), var(--tq)); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53,163,220,.3); color: #fff; }
.btn-secondary { background: var(--paper); color: var(--az); border-color: var(--bd); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--sh1); border-color: var(--ceu); }
.btn-danger { background: linear-gradient(135deg, #EB8986, #c94a4f); color: #fff; }
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(230,101,106,.3); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-ghost { background: transparent; color: var(--azm); border-color: transparent; padding: 5px 8px; }
.btn-ghost:hover { background: var(--paper3); }

form.inline { display: inline; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--g); font-weight: 700; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--bd); border-radius: var(--r); padding: 9px 12px; font-family: var(--fp); font-size: 13px; color: var(--tx); background: var(--paper); transition: all .25s ease; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ceu); box-shadow: 0 0 0 3px rgba(53,163,220,.15); }
.field textarea { min-height: 90px; resize: vertical; }
.field .hint { font-size: 11px; color: var(--g); margin-top: 4px; }
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.filters .field { min-width: 160px; }
.filters .field input, .filters .field select { padding: 7px 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { border-radius: 40px; padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--bd); background: var(--paper); color: var(--azm); }
.chip.active { background: var(--az); color: #fff; border-color: var(--az); }
.chip:hover { border-color: var(--ceu); }

/* autocomplete */
.ac { position: relative; }
.ac ul { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: var(--paper); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sh3); list-style: none; margin: 4px 0 0; padding: 4px 0; max-height: 240px; overflow: auto; display: none; }
.ac ul li { padding: 8px 12px; cursor: pointer; font-family: var(--fp); font-size: 13px; }
.ac ul li:hover { background: var(--paper3); }
.ac .picked { font-size: 12px; color: var(--azm); margin-top: 4px; }

/* ---------- kanban */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.col { background: var(--bg-tint); border: 1px solid var(--bd); border-radius: var(--rl); padding: 12px; min-height: 240px; }
.col h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--az); }
.col h3 span { font-size: 11px; color: var(--g); font-weight: 600; letter-spacing: 0; }
.col .sum { font-size: 11px; color: var(--azm); font-weight: 700; margin: -4px 0 10px; }
.dcard { display: block; background: var(--paper); border: 1px solid var(--bd); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--sh1); color: var(--tx); transition: all .25s ease; }
.dcard:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--ceu); color: var(--tx); }
.dcard[draggable] { cursor: grab; }
.dcard.dragging { opacity: .45; transform: none; }
.dcard.saving { opacity: .6; pointer-events: none; }
.col.over { border-color: var(--ceu); border-style: dashed; background: var(--paper); }
.dcard .t { font-weight: 700; font-size: 13px; color: var(--az); }
.dcard .o { font-size: 12px; color: var(--g); font-family: var(--fp); }
.dcard .v { font-size: 13px; font-weight: 700; color: var(--azm); margin-top: 6px; font-variant-numeric: tabular-nums; }
.dcard .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; color: var(--g); }

/* ---------- timeline / lists */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bd); align-items: start; }
.tl li:last-child { border-bottom: 0; }
.tl .d { font-family: var(--fp); font-size: 12px; color: var(--g); font-variant-numeric: tabular-nums; }
.tl .d.late { color: var(--co); font-weight: 600; }
.tl .s { font-weight: 600; color: var(--az); font-size: 13px; }
.tl .n { font-family: var(--fp); font-size: 12px; color: var(--tx); margin-top: 3px; white-space: pre-wrap; }
.tl .w { font-size: 12px; color: var(--g); }
.tl.done .s { color: var(--tx); font-weight: 500; }
.note { background: var(--bg-tint); border-left: 3px solid var(--ceu); border-radius: var(--r); padding: 10px 14px; margin-bottom: 8px; font-family: var(--fp); font-size: 13px; white-space: pre-wrap; }
.note .m { font-size: 11px; color: var(--g); margin-bottom: 4px; font-family: var(--f); display: flex; gap: 8px; align-items: center; }
.note .note-del { margin-left: auto; }
.note .note-del button { background: none; border: 0; color: var(--g); font-family: var(--f); font-size: 11px; cursor: pointer; padding: 0 4px; opacity: 0; transition: all .25s ease; }
.note:hover .note-del button { opacity: 1; }
.note .note-del button:hover { color: var(--co); }

.dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-family: var(--fp); font-size: 13px; }
.dl dt { color: var(--g); font-family: var(--f); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding-top: 3px; }
.dl dd { margin: 0; }
.stage-steps { display: flex; gap: 4px; margin: 10px 0 16px; flex-wrap: wrap; }
.stage-steps button { border: 1px solid var(--bd); background: var(--paper); color: var(--g); font-family: var(--f); font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 40px; cursor: pointer; transition: all .25s ease; }
.stage-steps button.cur { background: var(--az); color: #fff; border-color: var(--az); }
.stage-steps button.past { color: var(--azm); border-color: rgba(53,163,220,.5); }
.stage-steps button:hover { border-color: var(--ceu); }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; font-size: 12px; color: var(--g); }
.funnel-row { display: grid; grid-template-columns: 170px 1fr 60px 120px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.funnel-row .bar { height: 10px; border-radius: 40px; background: linear-gradient(90deg, var(--ceu), var(--tq)); }
.funnel-row .st { font-weight: 600; color: var(--az); font-size: 12px; }
.funnel-row .num { text-align: right; font-family: var(--fp); font-variant-numeric: tabular-nums; }
.seg-row { display: grid; grid-template-columns: 1fr 60px; font-family: var(--fp); font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--bd); }
.seg-row:last-child { border-bottom: 0; }
.seg-row .num { text-align: right; color: var(--az); font-weight: 600; }
.disclaimer { font-size: 9px; font-style: italic; color: var(--g); opacity: .8; margin-top: 24px; }
.btn-ghost.active { background: var(--paper3); color: var(--az); font-weight: 700; }
.ac ul li.ac-new { color: var(--azm); font-weight: 600; border-top: 1px solid var(--bd); }

td.nowrap { white-space: nowrap; }
td.cell-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* seleção de produtos no negócio (chips) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border:1px solid var(--bd);border-radius:40px;background:var(--paper2);font-size:13px;text-transform:none;letter-spacing:0;color:var(--tx)}
.chip .chip-v{font-size:10px;color:var(--g);text-transform:uppercase;letter-spacing:.05em}
.chip .chip-val{width:84px;padding:3px 6px;font-size:12px;border-radius:20px}
.chip .chip-x{border:0;background:transparent;color:var(--g);font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
.chip .chip-x:hover{color:var(--co)}
table.resumo td.sub{padding-left:28px}
table.resumo tr.tot td{font-weight:600;background:var(--paper2)}

/* gráfico de AUC (ficha da organização) */
.auc-chart { position: relative; margin: 4px 0 2px; }
.auc-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.auc-chart .ac-grid { stroke: var(--bd); stroke-width: 1; }
.auc-chart .ac-ax { font-size: 9px; fill: var(--g); font-family: var(--f); }
.auc-chart .ac-area { fill: #71B5E4; fill-opacity: .35; }
.auc-chart .ac-line { fill: none; stroke: #35A3DC; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.auc-chart .ac-dot { fill: #35A3DC; stroke: var(--paper); stroke-width: 1.5; }
.auc-chart .ac-dot.on { r: 5; }
.auc-chart .ac-lab { font-size: 10px; font-weight: 700; fill: var(--tx); font-family: var(--f); }
.auc-chart .ac-cross { stroke: var(--g); stroke-width: 1; stroke-dasharray: 3 3; }
.auc-chart .ac-tip { position: absolute; background: var(--paper); border: 1px solid var(--bd); box-shadow: var(--sh2); border-radius: 6px; padding: 4px 8px; font-size: 11px; pointer-events: none; white-space: nowrap; color: var(--tx); }