:root { --ink:#000; --text:#3b3f47; --muted:#8a8f99; --line:#e6e7ea; --fio2:#cfd2d8; --soft:#f1f2f4; --blue:#1463ff; --yellow:#ffd60a; --red:#d6245a; --font:"Plus Jakarta Sans", system-ui, sans-serif; }
/* CRM de exemplo da Talhe: usado no site (v4.html) e nas demonstrações personalizadas. */
.mc, .dash { --blue-2: color-mix(in srgb, var(--blue) 80%, #000); }
.mc-ilha .lg { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; margin-right: 7px; flex: none; }
  .mc { font-size: 12px; line-height: 1.4; color: var(--ink); text-align: left; background: #fff; border-radius: 14px; }
  .mc-ilha { display: flex; align-items: center; gap: 4px; margin: 12px 12px 0; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 26px -14px rgba(20, 30, 60, .3); background: #fff; }
  .mc-ilha .bd { width: 9px; height: 9px; border-radius: 3px; background: var(--blue); box-shadow: 0 0 9px color-mix(in srgb, var(--blue) 28%, transparent); margin-right: 7px; flex: none; }
  .mc-ilha b { font-size: 12.5px; font-weight: 700; margin-right: 8px; white-space: nowrap; }
  .mc-ilha .rk { width: 1px; height: 16px; background: var(--line); margin: 0 6px; flex: none; }
  .mc-ilha span { color: var(--muted); font-size: 11.5px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
  .mc-ilha span.nv { margin-left: auto; background: var(--blue); color: #fff; font-weight: 600; }
  .mc-stats { display: flex; gap: 16px; padding: 12px 16px 10px; color: var(--text); font-size: 11.5px; flex-wrap: wrap; }
  .mc-stats b { color: var(--blue); font-weight: 700; margin-right: 4px; }
  .mc-board { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
  .mc-col { background: var(--soft); border-radius: 12px; padding: 10px 8px 4px; min-width: 0; }
  .mc-col h5 { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
  .mc-col h5 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-col h5 em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); background: rgba(20, 30, 60, .06); border-radius: 999px; padding: 1px 7px; }
  .mc-col .sum { color: var(--blue); font-weight: 700; font-size: 11px; margin: 3px 0 8px; min-height: 15px; }
  .mc-card { position: relative; background: #fff; border-radius: 10px; padding: 9px 10px 9px 14px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(20, 30, 60, .08), 0 0 0 1px var(--line); }
  .mc-card .ac { position: absolute; top: 9px; bottom: 9px; left: 4px; width: 3px; border-radius: 9px; opacity: .85; }
  .mc-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; color: var(--muted); margin-bottom: 6px; }
  .mc-meta .st { display: flex; align-items: center; gap: 5px; }
  .mc-meta .dt { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
  .mc-meta .dt.on { background: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
  .mc-meta .vl { color: var(--blue); font-weight: 700; }
  .mc-head { display: flex; align-items: center; gap: 7px; }
  .mc-head > div { min-width: 0; }
  .mc-head .av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
  .mc-head .nm { font-weight: 650; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-head .rl { font-size: 10px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-card .fl { display: inline-block; margin-top: 7px; max-width: 100%; font-size: 9.5px; line-height: 16px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(20, 30, 60, .04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc .av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
  .mc-ilha span.on { color: var(--ink); background: var(--soft); font-weight: 600; }
  .mc-body { padding: 12px; }
  .mc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
  .mc-kpis > div { background: var(--soft); border-radius: 10px; padding: 9px 12px; min-width: 0; }
  .mc-kpis small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-kpis b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .mc-two { display: grid; grid-template-columns: var(--c, 1fr 1fr); gap: 10px; align-items: start; }
  .mc-stack { display: grid; gap: 10px; min-width: 0; }
  .mc-box { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px 6px; min-width: 0; }
  .mc-box h6 { margin: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .mc-row { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
  .mc-box h6 + .mc-row { border-top: 0; }
  .mc-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mc-row .who > div { min-width: 0; }
  .mc-row .nm { font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-row .rl { font-size: 10.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-row > .ch { justify-self: end; }
  .mc-row .hr { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .mc-row .vl { font-size: 12px; font-weight: 700; color: var(--blue); text-align: right; white-space: nowrap; }
  .mc-row .sm { font-size: 10.5px; color: var(--text); }
  .ch { display: inline-block; font-size: 10px; font-weight: 650; line-height: 17px; padding: 0 9px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }
  .ch.gr { background: rgba(20, 137, 74, .12); color: #14894a; }
  .ch.wa { background: rgba(183, 121, 31, .14); color: #98640f; }
  .ch.al { background: rgba(214, 36, 90, .1); color: var(--red); }
  .pg { display: block; height: 6px; border-radius: 4px; background: var(--soft); overflow: hidden; margin-top: 4px; }
  .pg i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
  .pg.full i { background: #14894a; }
  .sp { display: flex; gap: 4px; margin-bottom: 3px; }
  .sp i { flex: none; width: 18px; height: 5px; border-radius: 3px; background: #dfe2e8; }
  .sp i.dn { background: var(--blue); opacity: .45; }
  .sp i.on { background: var(--blue); }
  .th { width: 40px; height: 32px; border-radius: 7px; flex: none; }
  .tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
  .tl div { font-size: 10px; color: var(--text); }
  .tl b { display: block; height: 8px; border-radius: 4px; background: var(--blue); margin-bottom: 4px; }
  .dash { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: 0 40px 80px -50px rgba(20, 30, 60, .4); }
  .dash-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
  .dash-top h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
  .dash-top .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .dash-top .chips span { font-size: 12.5px; font-weight: 600; background: var(--soft); border-radius: 999px; padding: 6px 14px; color: var(--text); }
  .dash-top .chips span.on { background: var(--blue); color: #fff; }
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
  .kpi { background: var(--soft); border-radius: 14px; padding: 16px 18px 15px; }
  .kpi small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .kpi .v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .kpi .d { font-size: 12.5px; font-weight: 600; color: var(--text); margin-top: 2px; }
  .kpi .d.up { color: #14894a; }
  .dgrid { display: grid; gap: 14px; margin-bottom: 14px; }
  .dgrid.g1 { grid-template-columns: 1fr 1.1fr; }
  .dgrid.g2 { grid-template-columns: 1.15fr 1fr; margin-bottom: 0; }
  .pnl { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 22px; min-width: 0; }
  .pnl h4 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
  .pnl .sb { margin: 2px 0 18px; font-size: 12.5px; color: var(--muted); }
  .frow { margin-bottom: 4px; }
  .frow .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-bottom: 5px; }
  .frow .top b { font-weight: 650; }
  .frow .top span { font-variant-numeric: tabular-nums; font-weight: 700; }
  .track { background: var(--soft); border-radius: 6px; height: 14px; overflow: hidden; }
  .bar { height: 100%; width: var(--w); background: var(--blue); border-radius: 0 6px 6px 0; transition: width 1.1s cubic-bezier(.2, .7, .2, 1) .15s; }
  .bar.dk { background: var(--blue-2); }
  .bar.lt { background: color-mix(in srgb, var(--blue) 30%, #fff); }
  .fconv { font-size: 11.5px; color: var(--muted); margin: 5px 0 11px 2px; }
  .fconv b { color: var(--blue); }
  .warnbox { display: flex; gap: 10px; align-items: flex-start; background: rgba(214, 36, 90, .07); border-radius: 10px; padding: 11px 13px; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink); }
  .warnbox svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--red); }
  .lc { position: relative; }
  .lc svg { width: 100%; height: auto; display: block; overflow: visible; }
  .lc .ln { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .7, .2, 1); }
  .lc .ar { fill: url(#gA); transition: opacity 1s .9s; }
  .lc .gl { stroke: var(--line); stroke-width: 1; }
  .lc text { font: 500 11px var(--font); fill: var(--muted); }
  .lc text.lb { fill: var(--ink); font-weight: 700; font-size: 12px; }
  .lc .cx { stroke: var(--fio2, #cfd2d8); stroke-width: 1; opacity: 0; }
  .lc .dt { fill: #fff; stroke: var(--blue); stroke-width: 2.5; opacity: 0; }
  .lc .dt.end { opacity: 1; }
  .tip { position: absolute; top: 0; transform: translate(-50%, -110%); background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 3; }
  .tip small { display: block; font-weight: 500; color: #b8bdc7; font-size: 11px; }
  .srow { display: grid; grid-template-columns: 30px 1fr 86px 46px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
  .srow:first-of-type { border-top: 0; }
  .srow .av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
  .srow .nm { font-size: 14px; font-weight: 650; line-height: 1.25; display: flex; justify-content: space-between; gap: 8px; }
  .srow .nm small { font-weight: 500; color: var(--muted); font-size: 12px; }
  .srow .track { margin-top: 6px; height: 8px; }
  .srow .val { font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
  .srow .pc { font-size: 12px; font-weight: 700; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); border-radius: 999px; padding: 2px 0; text-align: center; }
  .legend { display: flex; gap: 16px; font-size: 12px; color: var(--text); margin: -8px 0 14px; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .orow { margin-bottom: 14px; }
  .orow .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-bottom: 5px; }
  .orow .top b { font-weight: 650; }
  .orow .top span { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
  .orow .top span em { font-style: normal; font-weight: 700; color: var(--ink); }
  .orow .track { height: 12px; background: transparent; }
  .orow .bar.lt { position: relative; border-radius: 0 6px 6px 0; }
  .orow .bar.lt .bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w2); background: var(--blue); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anim .dash:not(.in) .bar { width: 0; }
  .anim .dash:not(.in) .lc .ln { stroke-dashoffset: 1; }
  .anim .dash:not(.in) .lc .ar { opacity: 0; }
  .mc-card { transition: translate .25s, box-shadow .25s; }
  .mc-card:hover { translate: 0 -2px; box-shadow: 0 10px 22px -10px rgba(20, 30, 60, .3), 0 0 0 1px var(--fio2, #cfd2d8); }
@media (max-width: 1100px) {
  .dgrid.g1, .dgrid.g2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .dash { padding: 14px; border-radius: 16px; }
  .pnl { padding: 16px 16px 18px; }
  .kpi .v { font-size: 24px; }
  .srow { grid-template-columns: 30px 1fr 74px; }
  .srow .pc { display: none; }
  .mc-kpis { grid-template-columns: 1fr 1fr; }
  .mc-two { grid-template-columns: 1fr; }
  .mc-row { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .mc-row .who { flex: 1 1 150px; }
  .mc-row .vl { text-align: left; }
  .mc-ilha span:not(.nv), .mc-ilha .rk { display: none; }
  .mc-ilha b { overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
  .mc-ilha { min-width: 0; }
}