/* Meu Editor · Admin → Margem (public/margem.js). Tokens do estúdio (dashboard.css): escuro + lima; coral = custo. */
.mg-root{--mg-coral:#ff8f7a;--mg-red:#ff6b5e;--mg-amber:#ffc95c;--mg-violet:#b69cff;--mg-sky:#7cc8ff;position:relative;display:grid;gap:18px}
.mg-root [hidden]{display:none!important}
.mg-muted{color:var(--s-muted);font-size:14px}

/* ---------- Filtros ---------- */
.mg-filters{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.mg-filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.mg-field{display:grid;gap:4px;font-size:12px;color:var(--s-muted)}
.mg-field input{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--s-line2);background:var(--s-raised);color:var(--s-text);font:inherit;font-size:14px;min-width:0}
.mg-fx input{width:110px}
.mg-filter-row .btn{height:38px}

/* ---------- Topo: saúde + KPIs ---------- */
.mg-hero{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:18px;align-items:stretch}
.mg-hero-health{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:26px 22px;border-radius:var(--s-r-lg);border:1px solid var(--s-line);background:radial-gradient(120% 90% at 50% 0,rgba(200,245,58,.10),rgba(200,245,58,0) 60%),var(--s-surface);text-align:center}
.mg-health{position:relative;width:200px;height:200px}
.mg-ring{width:100%;height:100%;overflow:visible}
.mg-ring-track{fill:none;stroke:var(--s-high);stroke-width:14}
.mg-ring-val{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)}
.mg-in .mg-ring-val{stroke-dashoffset:var(--off)}
.mg-ring-tick{stroke:var(--s-line2);stroke-width:2}
.mg-health .mg-ring-a,.mg-health .mg-ring-b{stop-color:var(--s-lime)}
.mg-health.lime .mg-ring-b{stop-color:#8fdc2e}
.mg-health.amber .mg-ring-a{stop-color:var(--mg-amber)}.mg-health.amber .mg-ring-b{stop-color:#f2a541}
.mg-health.red .mg-ring-a{stop-color:var(--mg-red)}.mg-health.red .mg-ring-b{stop-color:var(--mg-coral)}
.mg-health.muted .mg-ring-a,.mg-health.muted .mg-ring-b{stop-color:var(--s-line2)}
.mg-health.lime .mg-ring{filter:drop-shadow(0 0 18px rgba(200,245,58,.28))}
.mg-health.red .mg-ring{filter:drop-shadow(0 0 18px rgba(255,107,94,.3))}
.mg-health-center{position:absolute;inset:0;display:grid;place-content:center;gap:2px}
.mg-health-center strong{font-size:40px;font-weight:700;letter-spacing:-.03em;color:var(--s-text);line-height:1}
.mg-health-center span{font-size:14px;color:var(--s-muted)}
.mg-health-text{display:grid;gap:8px;justify-items:center}
.mg-health-text p{margin:0;color:var(--s-text2);font-size:15px;line-height:1.45;max-width:30ch}
.mg-state{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:16px;font-weight:650;border:1px solid}
.mg-state:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.mg-state.saudavel{color:var(--s-lime);border-color:var(--s-lime-line);background:var(--s-lime-soft)}
.mg-state.atencao{color:var(--mg-amber);border-color:rgba(255,201,92,.4);background:rgba(255,201,92,.08)}
.mg-state.prejuizo{color:var(--mg-red);border-color:rgba(255,107,94,.45);background:rgba(255,107,94,.09)}
.mg-state.vazio{color:var(--s-muted);border-color:var(--s-line2)}

.mg-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mg-kpi{position:relative;display:grid;align-content:start;gap:6px;padding:16px 16px 12px;border-radius:var(--s-r);border:1px solid var(--s-line);background:var(--s-surface);overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease,border-color .2s}
.mg-in .mg-kpi{opacity:1;transform:none}
.mg-kpi:nth-child(2){transition-delay:.04s}.mg-kpi:nth-child(3){transition-delay:.08s}.mg-kpi:nth-child(4){transition-delay:.12s}.mg-kpi:nth-child(5){transition-delay:.16s}.mg-kpi:nth-child(6){transition-delay:.2s}.mg-kpi:nth-child(7){transition-delay:.24s}.mg-kpi:nth-child(8){transition-delay:.28s}.mg-kpi:nth-child(9){transition-delay:.32s}
.mg-kpi:hover{border-color:var(--s-line2)}
.mg-kpi.accent{border-color:var(--s-lime-line);background:linear-gradient(160deg,rgba(200,245,58,.09),rgba(200,245,58,0) 55%),var(--s-surface)}
.mg-kpi.bad{border-color:rgba(255,107,94,.45);background:linear-gradient(160deg,rgba(255,107,94,.1),rgba(255,107,94,0) 55%),var(--s-surface)}
.mg-kpi.warn{border-color:rgba(255,201,92,.35)}
.mg-kpi-label{font-size:14px;color:var(--s-text2);font-weight:550}
.mg-kpi-value{font-size:28px;font-weight:700;letter-spacing:-.025em;color:var(--s-text);line-height:1.1;font-variant-numeric:tabular-nums}
.mg-kpi-foot{font-size:13px;color:var(--s-muted);line-height:1.35}
.mg-delta{display:inline-flex;align-items:baseline;gap:5px;font-size:13px;font-weight:600}
.mg-delta b{font-size:14px}
.mg-delta small{font-weight:400;color:var(--s-muted)}
.mg-delta.good{color:var(--s-lime)}.mg-delta.bad{color:var(--mg-red)}.mg-delta.flat{color:var(--s-muted);font-weight:500}
.mg-spark{width:100%;height:34px;display:block;margin:2px 0}
.mg-spark-line{fill:none;stroke:var(--s-lime);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mg-spark-fill{fill:var(--s-lime);opacity:.1}
.mg-spark-flat{stroke:var(--s-line2);stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.mg-spark.coral .mg-spark-line{stroke:var(--mg-coral)}.mg-spark.coral .mg-spark-fill{fill:var(--mg-coral)}
.mg-spark.red .mg-spark-line{stroke:var(--mg-red)}.mg-spark.red .mg-spark-fill{fill:var(--mg-red)}
.mg-spark.sky .mg-spark-line{stroke:var(--mg-sky)}.mg-spark.sky .mg-spark-fill{fill:var(--mg-sky)}
.mg-spark.violet .mg-spark-line{stroke:var(--mg-violet)}.mg-spark.violet .mg-spark-fill{fill:var(--mg-violet)}

/* ---------- Painéis ---------- */
.mg-panel{padding:20px;border-radius:var(--s-r-lg);border:1px solid var(--s-line);background:var(--s-surface);opacity:0;transform:translateY(10px);transition:opacity .6s ease .15s,transform .6s ease .15s;min-width:0}
.mg-in .mg-panel{opacity:1;transform:none}
.mg-panel>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.mg-panel h3{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em;color:var(--s-text)}
.mg-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mg-note{margin:14px 0 0;font-size:14px;color:var(--s-muted);line-height:1.45}

.mg-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--s-text2)}
.mg-legend li{display:flex;align-items:center;gap:8px}
.mg-legend li b{margin-left:auto;color:var(--s-text);font-weight:600;font-variant-numeric:tabular-nums}
.mg-legend li em{font-style:normal;color:var(--s-muted);min-width:42px;text-align:right}
.mg-legend.inline{display:flex;flex-wrap:wrap;gap:14px}
.mg-legend.cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:16px}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex-shrink:0;background:var(--s-line2)}
.dot.lime{background:var(--s-lime)}.dot.lime2{background:#a6dd2a}.dot.coral{background:var(--mg-coral)}.dot.red{background:var(--mg-red)}.dot.violet{background:var(--mg-violet)}.dot.sky{background:var(--mg-sky)}.dot.amber{background:var(--mg-amber)}.dot.muted{background:#6d717a}.dot.line{background:var(--s-line2)}
.dot.hatch{background:repeating-linear-gradient(45deg,rgba(200,245,58,.6) 0 2px,transparent 2px 5px);outline:1px solid var(--s-lime-line)}

/* ---------- Área receita × custo ---------- */
.mg-area{position:relative;padding-left:72px;padding-bottom:26px}
.mg-area-svg{display:block;width:100%;height:280px;overflow:visible}
.mg-area-scale{position:absolute;left:0;top:0;bottom:26px;width:64px;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;color:var(--s-muted);text-align:right;padding:28px 0 0}
.mg-area-scale span:first-child{margin-top:-6px}
.mg-area-axis{position:absolute;left:72px;right:0;bottom:0;height:20px;font-size:12px;color:var(--s-muted)}
.mg-area-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.mg-area-axis span:first-child{transform:none}.mg-area-axis span:last-child{transform:translateX(-100%)}
.mg-grid{stroke:var(--s-line);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.mg-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.mg-line.lime{stroke:var(--s-lime);filter:drop-shadow(0 0 6px rgba(200,245,58,.45))}
.mg-line.coral{stroke:var(--mg-coral)}
.mg-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1) .2s}
.mg-in .mg-draw{stroke-dashoffset:0}
.mg-draw-fill{opacity:0;transition:opacity 1s ease .5s}
.mg-in .mg-draw-fill{opacity:1}
.mg-cursor{stroke:var(--s-text2);stroke-width:1;stroke-dasharray:3 4;opacity:0}
.mg-cursor.on{opacity:.6}
.mg-hit{fill:transparent;cursor:crosshair}

/* ---------- Donuts ---------- */
.mg-donuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mg-donut{margin:0;display:grid;gap:12px;justify-items:center}
.mg-donut-wrap{position:relative;width:150px;height:150px}
.mg-donut svg{width:100%;height:100%}
.mg-donut-track{fill:none;stroke:var(--s-high);stroke-width:16}
.mg-donut-arc{fill:none;stroke-width:16;stroke:var(--s-lime);transition:stroke-width .2s;cursor:pointer}
.mg-donut-arc:hover{stroke-width:20}
.mg-donut-arc.violet{stroke:var(--mg-violet)}.mg-donut-arc.red{stroke:var(--mg-red)}.mg-donut-arc.coral{stroke:var(--mg-coral)}
.mg-donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.mg-donut-center strong{font-size:18px;font-weight:700;color:var(--s-text);letter-spacing:-.02em}
.mg-donut-center span{font-size:12px;color:var(--s-muted)}
.mg-donut figcaption{font-size:15px;font-weight:600;color:var(--s-text)}
.mg-donut .mg-legend{width:100%}

/* ---------- Margem por duração ---------- */
.mg-bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mg-bandcol{display:grid;justify-items:center;gap:6px;text-align:center;outline:none;border-radius:12px;padding:6px 2px;transition:background .2s}
.mg-bandcol:hover,.mg-bandcol:focus-visible{background:var(--s-raised)}
.mg-bandval{font-size:18px;font-weight:700;color:var(--s-lime);font-variant-numeric:tabular-nums}
.mg-bandval.neg{color:var(--mg-red)}
.mg-bandtrack{display:grid;grid-template-rows:110px 2px 70px;width:100%;max-width:64px}
.mg-bandpos,.mg-bandneg{position:relative}
.mg-bandpos i,.mg-bandneg i{position:absolute;left:0;right:0;height:0;border-radius:8px;transition:height 1s cubic-bezier(.2,.8,.2,1) .3s}
.mg-in .mg-bandpos i,.mg-in .mg-bandneg i{height:var(--h)}
.mg-bandpos i{bottom:0;background:linear-gradient(180deg,var(--s-lime),rgba(200,245,58,.35));border-bottom-left-radius:2px;border-bottom-right-radius:2px}
.mg-bandneg i{top:0;background:linear-gradient(0deg,var(--mg-red),rgba(255,107,94,.35));border-top-left-radius:2px;border-top-right-radius:2px}
.mg-bandzero{background:var(--s-line2)}
.mg-bandcol strong{font-size:14px;color:var(--s-text);font-weight:600}
.mg-bandcol small{font-size:12px;color:var(--s-muted)}

/* ---------- Composição do custo ---------- */
.mg-stack{display:flex;height:22px;border-radius:999px;overflow:hidden;background:var(--s-high);gap:2px}
.mg-stack i{width:0;background:var(--s-lime);transition:width 1s cubic-bezier(.2,.8,.2,1) .3s;cursor:pointer}
.mg-in .mg-stack i{width:var(--w)}
.mg-stack i.violet{background:var(--mg-violet)}.mg-stack i.sky{background:var(--mg-sky)}.mg-stack i.amber{background:var(--mg-amber)}.mg-stack i.muted{background:#6d717a}.mg-stack i.line{background:var(--s-line2)}

/* ---------- Rankings ---------- */
.mg-rank ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mg-rank a{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px;border-radius:12px;border:1px solid transparent;color:inherit;text-decoration:none;transition:background .2s,border-color .2s}
.mg-rank a:hover{background:var(--s-raised);border-color:var(--s-line)}
.mg-thumb{position:relative;width:48px;height:48px;border-radius:10px;overflow:hidden;background:var(--s-high);display:grid;place-items:center;font-weight:700;color:var(--s-muted);font-size:18px}
.mg-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-rank-main{min-width:0;display:grid;gap:2px}
.mg-rank-main strong{font-size:15px;color:var(--s-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-rank-main small{font-size:13px;color:var(--s-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-prem{font-style:normal;color:var(--mg-violet)}
.mg-rank-nums{display:grid;gap:2px;font-size:13px;color:var(--s-muted);text-align:right}
.mg-rank-nums b{color:var(--s-text2);font-weight:600}
.mg-rank-margin{display:grid;text-align:right;min-width:92px}
.mg-rank-margin b{font-size:17px;font-variant-numeric:tabular-nums}
.mg-rank-margin small{font-size:12px;color:var(--s-muted)}
.mg-rank-margin.pos b{color:var(--s-lime)}.mg-rank-margin.neg b{color:var(--mg-red)}
.mg-rank.worst>header h3:before,.mg-rank.best>header h3:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;vertical-align:middle}
.mg-rank.worst>header h3:before{background:var(--mg-red);box-shadow:0 0 10px var(--mg-red)}
.mg-rank.best>header h3:before{background:var(--s-lime);box-shadow:0 0 10px var(--s-lime)}

/* ---------- Tabela ---------- */
.mg-table-wrap{overflow-x:auto}
.mg-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.mg-table th{text-align:right;font-weight:550;color:var(--s-muted);font-size:13px;padding:8px 10px;border-bottom:1px solid var(--s-line)}
.mg-table td{text-align:right;padding:10px;border-bottom:1px solid var(--s-line);color:var(--s-text2)}
.mg-table th:first-child,.mg-table td:first-child{text-align:left;color:var(--s-text)}
.mg-table td b{color:var(--s-lime);font-weight:650}
.mg-table tr.neg td b{color:var(--mg-red)}

.mg-method{padding:14px 18px;border-radius:var(--s-r);border:1px dashed var(--s-line2);color:var(--s-text2);font-size:14px;line-height:1.5}
.mg-method summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--s-text)}
.mg-method summary .icon{width:16px;height:16px}
.mg-method p{margin:10px 0 0}

/* ---------- Dica flutuante ---------- */
.mg-tip{position:absolute;left:0;top:0;z-index:30;pointer-events:none;display:grid;gap:3px;min-width:170px;max-width:260px;padding:10px 12px;border-radius:12px;background:rgba(23,25,29,.96);border:1px solid var(--s-line2);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);font-size:13px;color:var(--s-text2);backdrop-filter:blur(8px)}
.mg-tip b{color:var(--s-text);font-size:14px;margin-bottom:2px}
.mg-tip span{display:flex;align-items:center;gap:6px}
.mg-tip .muted{color:var(--s-muted)}
.mg-tip .dot{width:8px;height:8px}

/* ---------- Vazio ---------- */
.mg-empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:48px 20px;border-radius:var(--s-r-lg);border:1px solid var(--s-line);background:radial-gradient(80% 70% at 50% 0,rgba(200,245,58,.08),rgba(200,245,58,0) 70%),var(--s-surface)}
.mg-empty svg{width:220px;height:120px}
.mg-empty-line{fill:none;stroke:var(--s-lime);stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:mg-draw 1.6s ease forwards}
.mg-empty-line.coral{stroke:var(--mg-coral);animation-delay:.3s;opacity:.7}
.mg-empty-dot{fill:var(--s-lime);filter:drop-shadow(0 0 8px var(--s-lime))}
.mg-empty h2{margin:0;font-size:22px;color:var(--s-text)}
.mg-empty p{margin:0;max-width:46ch;color:var(--s-muted);font-size:15px;line-height:1.5}
@keyframes mg-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){.mg-kpi,.mg-panel,.mg-draw,.mg-draw-fill,.mg-ring-val,.mg-bandpos i,.mg-bandneg i,.mg-stack i{transition:none!important}.mg-empty-line{animation:none;stroke-dashoffset:0}}

/* ---------- Responsivo ---------- */
@media (max-width:1180px){.mg-hero{grid-template-columns:1fr}.mg-hero-health{flex-direction:row;justify-content:flex-start;text-align:left}.mg-health-text{justify-items:start}}
@media (max-width:980px){.mg-grid2{grid-template-columns:1fr}.mg-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .mg-root{gap:14px}
  .mg-hero-health{flex-direction:column;text-align:center;padding:22px 16px}.mg-health-text{justify-items:center}
  .mg-health{width:176px;height:176px}.mg-health-center strong{font-size:34px}
  .mg-kpis{gap:10px}.mg-kpi{padding:14px 12px 10px}.mg-kpi-value{font-size:22px}.mg-kpi-label{font-size:13px}
  .mg-panel{padding:16px}
  .mg-area{padding-left:0;padding-bottom:24px}.mg-area-scale{display:none}.mg-area-axis{left:0}.mg-area-svg{height:200px}
  .mg-donuts{grid-template-columns:1fr 1fr;gap:10px}.mg-donut-wrap{width:120px;height:120px}.mg-donut-center strong{font-size:15px}
  .mg-donut .mg-legend{font-size:13px}.mg-donut .mg-legend li{flex-wrap:wrap}
  .mg-bands{gap:6px}.mg-bandtrack{grid-template-rows:90px 2px 56px}.mg-bandval{font-size:15px}.mg-bandcol strong{font-size:12px}.mg-bandcol small{font-size:11px}
  .mg-legend.cols{grid-template-columns:1fr}
  .mg-rank a{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}.mg-rank-nums{display:none}.mg-thumb{width:44px;height:44px}
  .mg-filters{align-items:stretch}.mg-filters .adm-seg{overflow-x:auto;max-width:100%}.mg-filter-row{width:100%}.mg-filter-row .btn{margin-left:auto}
}
/* Nada estoura a largura da tela (itens de grade com largura mínima zero). */
.mg-root{grid-template-columns:minmax(0,1fr)}
.mg-root>*,.mg-hero>*,.mg-grid2>*{min-width:0}
@media (max-width:1180px){.mg-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.mg-grid2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.mg-table{font-size:13px}.mg-table th,.mg-table td{padding:8px 6px}.mg-filters>.adm-seg{width:100%}.mg-fx{flex:1}.mg-fx input{width:100%}}