/* Central do Axxis Retail. Paleta Axxis Group: preto, heritage, signature, ivory. */
:root {
  --bg: #F4EFE6; --sup: #FBF8F2; --sup2: #EFE8DB; --linha: #DDD3C2; --txt: #17161A; --txt2: #57524A; --txt3: #6B655B;
  --ouro: #A9822F; --ouro-s: #D4A437; --heritage: #B89968; --bordo: #5A2733;
  --ok: #2F6B45; --ok-bg: #E2EFE5; --info: #2A5576; --info-bg: #E1EAF2; --alerta: #8A5A00; --alerta-bg: #F7EBCF;
  --ruim: #9B2C2C; --ruim-bg: #F6E0DD; --neutro: #5E5A53; --neutro-bg: #E9E3D8;
  --serif: "Fraunces", Georgia, serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 10px; --sombra: 0 1px 2px rgba(40, 30, 15, .06), 0 8px 24px -8px rgba(60, 42, 18, .12);
  /* acabamento dos cards: luz de topo, sombra de hover, acento critico (bordeaux) e curva de movimento */
  --sup-hi: color-mix(in srgb, var(--sup) 55%, #fff);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, .75);
  --sombra-h: 0 1px 2px rgba(40, 30, 15, .07), 0 14px 32px -10px rgba(60, 42, 18, .20);
  --critico: #5A2733;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C; --sup: #141416; --sup2: #1B1B1E; --linha: #2A2A2E; --txt: #F4EFE6; --txt2: #CDC7BD; --txt3: #8A857D;
    --ouro: #D4A437; --ouro-s: #D4A437; --heritage: #B89968;
    --ok: #8FD1A4; --ok-bg: #16281D; --info: #9DC3E6; --info-bg: #15222E; --alerta: #E9C46A; --alerta-bg: #2A2213;
    --ruim: #F0A39B; --ruim-bg: #2E1716; --neutro: #BDB6AA; --neutro-bg: #222225;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --sup-hi: color-mix(in srgb, var(--sup) 94%, #fff);
    --brilho: inset 0 1px 0 rgba(255, 255, 255, .045);
    --sombra-h: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 40px -8px rgba(0, 0, 0, .55);
    --critico: #D98A95;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; }
.muted { color: var(--txt3); font-weight: 400; }
.ic { width: 16px; height: 16px; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro-s); outline-offset: 2px; }

/* ---------- login ---------- */
body.login { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.login-box { width: 100%; max-width: 440px; background: var(--sup); border: 1px solid var(--linha); border-top: 3px solid var(--ouro-s); border-radius: 14px; padding: 36px 28px; box-shadow: var(--sombra); }
.eyebrow { margin: 0 0 14px; font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--heritage); }
.login-box h1 { font-size: 2.1rem; line-height: 1.08; font-weight: 300; }
.login-box h1 em { color: var(--ouro); font-style: italic; }
.lead { color: var(--txt2); margin: 12px 0 24px; }
.login-form { display: grid; gap: 16px; }
.login-form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.erro { margin: 0; color: var(--ruim); background: var(--ruim-bg); padding: 10px 12px; border-radius: 8px; font-size: .9rem; }

/* ---------- campos e botoes ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 11px; background: var(--bg); border: 1px solid var(--linha); border-radius: 8px;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--ouro-s); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro-s) 25%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--linha);
  background: var(--sup); cursor: pointer; font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--heritage); }
.btn.primario { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.btn.primario:hover { background: var(--ouro); border-color: var(--ouro); color: #fff; }
.btn.fantasma { background: transparent; }
.btn.perigo { color: var(--ruim); background: transparent; border-color: color-mix(in srgb, var(--ruim) 40%, transparent); }
.btn.perigo:hover { background: var(--ruim-bg); }
.btn.icone { min-height: 34px; width: 34px; padding: 0; background: transparent; }
.btn:disabled { opacity: .55; cursor: wait; }

/* ---------- topo e abas ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px clamp(16px, 3vw, 32px); background: var(--bg); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--serif); }
.marca-a { font-weight: 600; letter-spacing: .3em; font-size: .9rem; }
.marca-b { font-weight: 600; letter-spacing: .3em; font-size: .9rem; color: var(--ouro); }
.marca-c { margin-left: 10px; font-family: var(--sans); font-size: .78rem; color: var(--txt3); letter-spacing: .04em; }
.topo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sync { font-size: .75rem; color: var(--txt3); }
.eu { font-size: .85rem; color: var(--txt2); margin-right: 4px; }
.abas { display: flex; gap: 2px; overflow-x: auto; padding: 0 clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--linha); background: var(--sup); scrollbar-width: thin; }
.aba { flex: none; padding: 12px 14px; text-decoration: none; color: var(--txt2); font-weight: 600; font-size: .88rem; border-bottom: 2px solid transparent; }
.aba:hover { color: var(--txt); }
.aba.on { color: var(--txt); border-bottom-color: var(--ouro-s); }

/* ---------- estrutura ---------- */
.app { padding: 24px clamp(16px, 3vw, 32px) 80px; max-width: 1320px; margin: 0 auto; }
.carregando, .vazio { color: var(--txt3); padding: 12px 0; margin: 0; }
.vista { display: grid; gap: 18px; }
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cab h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 300; }
.cab-s { margin: 4px 0 0; color: var(--txt2); max-width: 70ch; }
.cab-a { display: flex; gap: 8px; flex-wrap: wrap; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.grade2.estreita { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); min-width: 0; }
.cartao-t { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cartao h2 { font-size: 1.2rem; }
.lnk { font-size: .85rem; color: var(--ouro); font-weight: 600; text-decoration: none; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio); background: var(--alerta-bg); color: var(--alerta); font-size: .9rem; }
.aviso .ic { margin-top: 2px; }
.meta-item { margin: 0; font-size: .78rem; color: var(--txt3); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.kpi { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 2px; min-width: 0; }
.kpi-r { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); }
.kpi-v { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-s { font-size: .8rem; color: var(--txt2); }
.kpi.neg .kpi-v, .neg { color: var(--ruim); }
.kpi.pos .kpi-v, .pos { color: var(--ok); }
.meta { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 8px; }
.meta-t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--txt2); }
.meta-t strong { color: var(--txt); font-variant-numeric: tabular-nums; }
.barra { display: block; height: 8px; border-radius: 99px; background: var(--sup2); overflow: hidden; min-width: 60px; }
.barra-f { display: block; height: 100%; width: 0; background: var(--txt2); border-radius: 99px; transition: width .4s; }
.barra-f.ouro { background: var(--ouro-s); }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.badge.ok { color: var(--ok); background: var(--ok-bg); }
.badge.info { color: var(--info); background: var(--info-bg); }
.badge.alerta { color: var(--alerta); background: var(--alerta-bg); }
.badge.ruim { color: var(--ruim); background: var(--ruim-bg); }
.badge.neutro { color: var(--neutro); background: var(--neutro-bg); }

/* ---------- listas do painel ---------- */
.atencao, .mini, .cats, .log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.atencao a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.atencao a:hover { background: var(--sup2); }
.atencao .ic { margin-top: 3px; }
.atencao .sev0 .ic { color: var(--ruim); } .atencao .sev1 .ic { color: var(--alerta); } .atencao .sev2 .ic { color: var(--info); }
.atencao span, .mini-t { display: grid; gap: 1px; min-width: 0; }
.atencao small, .mini small { color: var(--txt3); font-size: .8rem; }
.mini li > a, .mini li { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; }
.mini > li { padding: 9px 10px; border-radius: 8px; }
.mini > li:hover { background: var(--sup2); }
.mini li > a { width: 100%; }
.mini-p { display: flex; align-items: center; gap: 8px; flex: none; width: 140px; }
.mini-p .barra { flex: 1; }
.cats li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.cats li > span:last-child { display: flex; gap: 8px; align-items: center; }
.funil { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.funil-i { display: grid; place-items: center; gap: 2px; padding: 12px 6px; border-radius: 8px; background: var(--sup2); text-align: center; }
.funil-i strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.funil-i span { font-size: .78rem; color: var(--txt2); }
.funil-i.zero strong, .funil-i.zero span { color: var(--txt3); }

/* ---------- tabela ---------- */
.ferr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ferr .busca { flex: 1 1 220px; width: auto; }
.ferr select { width: auto; flex: 0 1 220px; }
.ferr .btn.primario { margin-left: auto; }
.tab-wrap { overflow-x: auto; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); }
.tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tab th { text-align: left; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--txt3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.th-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.th-btn.on { color: var(--txt); }
.tab td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tab tr:last-child td { border-bottom: 0; }
.linha { cursor: pointer; }
.linha:hover td { background: var(--sup2); }
.pilha { display: grid; gap: 3px; justify-items: start; }
.prog { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 120px; }
.prog .barra { flex: 1; }
@media (max-width: 760px) {
  .tab thead { display: none; }
  .tab, .tab tbody, .tab tr, .tab td { display: block; width: 100%; }
  .tab tr { padding: 10px 4px; border-bottom: 1px solid var(--linha); }
  .tab td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: 40% 1fr; gap: 10px; }
  .tab td::before { content: attr(data-l); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt3); }
  .tab td.vazio { display: block; }
  .tab td.vazio::before { content: none; }
  .ferr .btn.primario { margin-left: 0; width: 100%; }
  .ferr select { flex: 1 1 140px; }
}

/* ---------- quadro de melhorias ---------- */
.seg { display: inline-flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.seg-b { border: 0; background: transparent; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--txt2); }
.seg-b.on { background: var(--txt); color: var(--bg); }
.quadro { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.coluna { background: var(--sup2); border-radius: var(--raio); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.coluna-t { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.coluna-t h2 { font-size: 1rem; font-family: var(--sans); font-weight: 700; }
.coluna-t span { font-size: .8rem; color: var(--txt3); font-weight: 700; }
.card-m { display: grid; gap: 8px; text-align: left; width: 100%; background: var(--sup); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; cursor: pointer; box-shadow: var(--sombra); }
.card-m:hover { border-color: var(--heritage); }
.card-m strong { font-weight: 600; font-size: .9rem; line-height: 1.35; }
.card-m-top, .card-m-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-m small { color: var(--txt3); font-size: .76rem; }
@media (max-width: 760px) { .quadro { grid-template-columns: 1fr; overflow: visible; } }

/* ---------- checklist ---------- */
.ck-topo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sel-cli { width: auto; flex: 1 1 260px; max-width: 460px; }
.ck-prog { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; }
.ck-prog .barra { flex: 1; height: 10px; }
.fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.fase { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.fase.completa { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.fase-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fase-t h2 { font-size: 1.1rem; }
.fase-n { font-size: .82rem; font-weight: 700; color: var(--txt3); font-variant-numeric: tabular-nums; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.passos label { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; cursor: pointer; }
.passos label:hover { background: var(--sup2); }
.passos input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ouro); flex: none; }
.passo-t { display: grid; gap: 4px; font-size: .92rem; }
.passo-t small { color: var(--txt3); font-size: .76rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.passo-t .nota { color: var(--txt2); font-style: italic; }
.passos li.feito .passo-t > :first-child, .passos li.feito label > .passo-t { color: var(--txt2); }
.passos.editar li { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.add-passo { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.add-passo input { flex: 1 1 200px; }
.add-passo input.curto { flex: 0 1 140px; }

/* ---------- custos e contrato ---------- */
.premissas { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.premissas label { display: grid; gap: 4px; font-size: .82rem; color: var(--txt2); font-weight: 600; }
input.curto { width: 140px; }
.cond { display: grid; gap: 8px; margin-bottom: 10px; }
.cond-l { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 34px; gap: 8px; align-items: start; }
@media (max-width: 640px) { .cond-l { grid-template-columns: 1fr 34px; } .cond-l textarea { grid-column: 1 / -1; grid-row: 2; } }
.texto-contrato { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .86rem; min-height: 360px; }
.hist { border-top: 1px solid var(--linha); padding: 8px 0; }
.hist summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.hist pre { white-space: pre-wrap; font-size: .82rem; background: var(--sup2); padding: 12px; border-radius: 8px; max-height: 360px; overflow: auto; }

/* ---------- historico ---------- */
.log li { display: grid; grid-template-columns: 150px 110px 1fr; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--linha); font-size: .9rem; }
.log time { color: var(--txt3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .log li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- modal ---------- */
.modal { border: 0; padding: 0; border-radius: 14px; width: min(760px, calc(100vw - 24px)); max-height: calc(100svh - 24px); background: var(--sup); color: var(--txt); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.modal::backdrop { background: rgba(11, 11, 12, .55); backdrop-filter: blur(2px); }
.modal-c { padding: 20px; display: grid; gap: 14px; }
.modal-t { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-t h2 { font-size: 1.4rem; text-transform: none; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.campo { display: grid; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--txt2); align-content: start; min-width: 0; }
.campo small { font-weight: 400; color: var(--txt3); }
.campo.largo { grid-column: 1 / -1; }
.campo.chk, .chk { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.campo.chk input, .chk input { width: 18px; height: 18px; accent-color: var(--ouro); }
fieldset.campo { border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px 12px; margin: 0; }
fieldset.campo legend { padding: 0 6px; }
.sub-lista { display: grid; gap: 8px; margin-bottom: 8px; }
.sub-l { display: grid; grid-template-columns: 1fr 120px auto 34px; gap: 8px; align-items: center; }
.sub-l .chk { font-size: .8rem; font-weight: 500; }
.form-a { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--linha); }
.form-a-d { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 640px) {
  .form { grid-template-columns: 1fr; }
  .sub-l { grid-template-columns: 1fr 34px; }
  .sub-l > :nth-child(2), .sub-l > :nth-child(3) { grid-column: 1 / 2; }
}

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--txt); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--ruim); color: #fff; }

@media (max-width: 640px) {
  .marca-c { display: none; }
  .sync { display: none; }
  .topo-acoes .btn { min-height: 34px; padding: 0 10px; }
}

/* ---------- impressao ---------- */
@media print {
  :root { --bg: #fff; --sup: #fff; --sup2: #f3f3f3; --txt: #000; --txt2: #222; --txt3: #555; --linha: #ccc; }
  .topo, .abas, .ferr, .cab-a, .btn, .toast { display: none !important; }
  .app { padding: 0; max-width: none; }
  .cartao, .kpi, .fase, .tab-wrap { box-shadow: none; break-inside: avoid; }
  .tab-wrap { overflow: visible; }
  .quadro { grid-template-columns: repeat(5, 1fr); overflow: visible; }
}
.tab td:first-child { min-width: 190px; font-weight: 600; }
@media (max-width: 760px) { .tab td:first-child { min-width: 0; } }
.form-sair { display: inline; margin: 0; }

/* ---------- topo e abas fixos ao rolar ---------- */
.fixo { position: sticky; top: 0; z-index: 30; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.modal-c pre.credenciais { white-space: pre-wrap; background: var(--sup2); border: 1px dashed var(--heritage); border-radius: 8px; padding: 14px; font-size: .9rem; margin: 0; }
.form-sair-login { margin-top: 14px; text-align: center; }
.form-a-d.esq { margin-left: 0; }
body.papel-leitura .edita { display: none !important; }
.btn.eu { font-weight: 600; }

/* ---------- sistema ---------- */
.monitores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.mon { background: var(--sup); border: 1px solid var(--linha); border-left: 4px solid var(--ok); border-radius: var(--raio); padding: 16px; display: grid; gap: 12px; box-shadow: var(--sombra); }
.mon.m-falha { border-left-color: var(--ruim); }
.mon-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mon-t h2 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; }
.mon-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mon-n div { display: grid; gap: 1px; }
.mon-n small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt3); font-weight: 700; }
.mon-n strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mon-pe { margin: 0; font-size: .78rem; color: var(--txt3); }
.linha-tempo { display: grid; grid-template-columns: repeat(48, 1fr); gap: 2px; height: 22px; }
.linha-tempo span { border-radius: 2px; background: var(--sup2); }
.linha-tempo .ok { background: color-mix(in srgb, var(--ok) 78%, var(--sup)); }
.linha-tempo .falha { background: var(--ruim); }
.pontos { display: inline-flex; align-items: center; gap: 4px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--sup2); display: inline-block; }
.ponto.ok { background: var(--ok); } .ponto.falha { background: var(--ruim); } .ponto.vz { background: var(--info); }
.tg { display: grid; gap: 10px; }
.tg p { margin: 0; }
.tg-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tg-l select { flex: 1 1 240px; width: auto; }
b.online::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: middle; }
@media (max-width: 640px) { .mon-n { grid-template-columns: repeat(2, 1fr); } }
@media print { .fixo { position: static; box-shadow: none; } }

/* =====================================================================
   Acabamento dos cards (Heritage Warm)
   Assinatura: fio ouro curto no topo de cada bloco. Profundidade por
   luz de topo + sombra quente. Cor so onde ha estado: verde no ar,
   ouro em destaque, bordeaux na prioridade critica, vermelho em falha.
   ===================================================================== */

/* ---------- base comum: luz de topo e sombra quente ---------- */
.kpi, .cartao, .fase, .meta, .mon {
  position: relative;
  background: linear-gradient(180deg, var(--sup-hi) 0%, var(--sup) 64px);
  box-shadow: var(--brilho), var(--sombra);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.kpi::before, .cartao::before, .fase::before, .meta::before {
  content: ""; position: absolute; top: -1px; left: 18px; width: 32px; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--ouro-s);
  transform-origin: left center; transition: transform .3s var(--ease);
}
.cartao:hover, .kpi:hover, .fase:hover { border-color: color-mix(in srgb, var(--heritage) 55%, var(--linha)); }
.cartao:hover::before, .kpi:hover::before { transform: scaleX(1.5); }

/* ---------- KPIs: numero manda, rotulo sussurra ---------- */
.kpi { padding: 16px 18px 15px; gap: 0; }
.kpi::before { left: 18px; width: 28px; }
.kpi-r { font-size: .72rem; letter-spacing: .12em; color: var(--txt3); }
.kpi-v {
  margin: 6px 0 3px; font-size: clamp(1.65rem, 1.25rem + .9vw, 2.05rem); line-height: 1.08;
  letter-spacing: -.015em; font-optical-sizing: auto; color: var(--txt);
}
.kpi-s { font-size: .8rem; color: var(--txt2); }
.kpi.pos::before { background: var(--ok); }
.kpi.neg::before { background: var(--ruim); }
.kpi.neg { background: linear-gradient(180deg, color-mix(in srgb, var(--ruim-bg) 60%, var(--sup)) 0%, var(--sup) 72px); border-color: color-mix(in srgb, var(--ruim) 22%, var(--linha)); }
.kpi.pos { background: linear-gradient(180deg, color-mix(in srgb, var(--ok-bg) 55%, var(--sup)) 0%, var(--sup) 72px); }

/* ---------- cartao ---------- */
.cartao::before { left: 18px; }
.cartao h2 { letter-spacing: -.01em; }

/* atencao agora: trilho de severidade aparece no hover */
.atencao a { transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.atencao .sev0 a:hover { box-shadow: inset 2px 0 0 var(--ruim); }
.atencao .sev1 a:hover { box-shadow: inset 2px 0 0 var(--alerta); }
.atencao .sev2 a:hover { box-shadow: inset 2px 0 0 var(--info); }

/* ---------- meta de MRR ---------- */
.meta { padding: 16px 18px; }
.barra { box-shadow: inset 0 1px 1px rgba(0, 0, 0, .07); }
.barra-f.ouro { background: linear-gradient(90deg, var(--heritage), var(--ouro-s)); }

/* ---------- funil ---------- */
.funil-i {
  background: linear-gradient(180deg, var(--sup2) 0%, color-mix(in srgb, var(--sup2) 55%, var(--sup)) 100%);
  border: 1px solid color-mix(in srgb, var(--linha) 70%, transparent);
}
.funil-i:not(.zero) { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ouro-s) 80%, transparent); }
.funil-i strong { font-size: 1.65rem; line-height: 1.1; font-variant-numeric: tabular-nums; font-optical-sizing: auto; }

/* ---------- tabelas ---------- */
.tab-wrap { box-shadow: var(--brilho), var(--sombra); }
.tab th { background: color-mix(in srgb, var(--sup2) 45%, var(--sup)); }
.linha td { transition: background-color .15s var(--ease); }
.linha:hover td:first-child { box-shadow: inset 2px 0 0 var(--ouro-s); }

/* ---------- badges: contorno fino da propria cor ---------- */
.badge { letter-spacing: .02em; line-height: 1.5; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent); }

/* ---------- quadro de melhorias ---------- */
.coluna { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--linha) 60%, transparent); }
.coluna-t span {
  min-width: 26px; padding: 1px 8px; border-radius: 99px; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--sup); border: 1px solid var(--linha); color: var(--txt2);
}
.card-m {
  --p-cor: transparent;
  position: relative;
  background: linear-gradient(180deg, var(--sup-hi) 0%, var(--sup) 70%);
  box-shadow: inset 3px 0 0 var(--p-cor), var(--brilho), var(--sombra);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card-m:hover { transform: translateY(-2px); box-shadow: inset 3px 0 0 var(--p-cor), var(--brilho), var(--sombra-h); }
.card-m:active { transform: translateY(0); transition-duration: .08s; }
/* trilho lateral pela prioridade (P0 bordeaux, P1 ouro, P2 azul, P3 neutro) */
.card-m.p0 { --p-cor: var(--critico); border-color: color-mix(in srgb, var(--critico) 28%, var(--linha)); }
.card-m.p1 { --p-cor: var(--ouro-s); }
.card-m.p2 { --p-cor: color-mix(in srgb, var(--info) 70%, transparent); }
.card-m.p3 { --p-cor: color-mix(in srgb, var(--neutro) 35%, transparent); }
.badge.prio.p0 { background: var(--critico); color: var(--sup); box-shadow: none; }
.card-m-top > .badge:first-child { min-width: 32px; justify-content: center; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
/* P0 em selo cheio: legivel de relance */
.card-m-top > .badge.ruim:first-child { background: var(--critico); color: var(--sup); box-shadow: none; }
/* atrasada: tinta vermelha leve + data marcada em texto (cor nao e o unico sinal) */
.card-m .atraso { color: var(--ruim); font-weight: 700; }
.card-m.atrasada {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ruim-bg) 65%, var(--sup)) 0%, var(--sup) 80%);
  border-color: color-mix(in srgb, var(--ruim) 35%, var(--linha));
}

/* ---------- passo a passo ---------- */
.fase::before { left: 16px; background: color-mix(in srgb, var(--heritage) 70%, transparent); }
.fase.completa::before { background: var(--ok); width: 48px; }
.fase.completa { background: linear-gradient(180deg, color-mix(in srgb, var(--ok-bg) 55%, var(--sup)) 0%, var(--sup) 72px); }
.fase.completa .fase-n { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); }
.fase.completa .fase-n::before {
  content: ""; width: 9px; height: 5px; margin-top: -3px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}

/* ---------- monitores: sinal de vivo ---------- */
.mon { background: linear-gradient(120deg, color-mix(in srgb, var(--ok-bg) 50%, var(--sup)) 0%, var(--sup) 42%); }
.mon.m-falha {
  background: linear-gradient(120deg, color-mix(in srgb, var(--ruim-bg) 80%, var(--sup)) 0%, var(--sup) 55%);
  border-color: color-mix(in srgb, var(--ruim) 30%, var(--linha)); border-left-color: var(--ruim);
}
.mon-n strong { font-size: 1.25rem; font-optical-sizing: auto; }
.mon-t .badge::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.mon.m-ok .mon-t .badge.ok::before, b.online::before { animation: vivo 2.6s var(--ease) infinite; }
@keyframes vivo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card-m:hover, .card-m:active { transform: none; }
}

/* ---------- impressao: papel branco, sem sombra, sem fundo escuro ---------- */
@media print {
  :root, :root:not([data-theme="light"]) {
    --bg: #fff; --sup: #fff; --sup2: #f3f3f3; --sup-hi: #fff; --txt: #000; --txt2: #222; --txt3: #555; --linha: #ccc;
    --ok: #2F6B45; --ok-bg: #fff; --info: #2A5576; --info-bg: #fff; --alerta: #8A5A00; --alerta-bg: #fff;
    --ruim: #9B2C2C; --ruim-bg: #fff; --neutro: #5E5A53; --neutro-bg: #fff; --critico: #5A2733;
    --sombra: 0 0 #0000; --sombra-h: 0 0 #0000; --brilho: 0 0 #0000;
    color-scheme: light;
  }
  .kpi, .cartao, .fase, .meta, .mon, .card-m, .tab-wrap, .funil-i { background: #fff; }
  .card-m { transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- series dos graficos (paleta validada: luz e escuro) ---------- */
:root { --s1: #A9822F; --s2: #2D62A8; --s3: #7B55B0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #B88A2A; --s2: #5B93D6; --s3: #9C7BD1; } }
.graf-caixa { position: relative; }
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf-grade { stroke: var(--linha); stroke-width: 1; }
.graf-zero { stroke: var(--txt3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.graf-eixo { fill: var(--txt3); font: 600 11px var(--sans); }
.graf-linha { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.graf-linha.s1 { stroke: var(--s1); } .graf-linha.s2 { stroke: var(--s2); } .graf-linha.s3 { stroke: var(--s3); }
.graf-rot { font: 700 12px var(--sans); fill: var(--txt2); }
.graf-ponto { stroke: var(--sup); stroke-width: 2; }
.graf-ponto.s1 { fill: var(--s1); } .graf-ponto.s2 { fill: var(--s2); } .graf-ponto.s3 { fill: var(--s3); }
.graf-cruz { stroke: var(--txt3); stroke-width: 1; opacity: 0; }
.graf-cruz.on { opacity: .6; }
.graf-marca { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 3 3; }
.graf-marca-t { fill: var(--ok); font: 700 11px var(--sans); }
.graf-area { fill: transparent; cursor: crosshair; }
.graf-dica { position: absolute; top: 8px; left: 0; min-width: 190px; display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--sup); border: 1px solid var(--linha);
  box-shadow: var(--sombra); font-size: .82rem; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.graf-dica.on { opacity: 1; }
.graf-dica small { color: var(--txt3); }
.graf-dica-l { display: flex; align-items: center; gap: 6px; color: var(--txt2); }
.graf-dica-l strong { color: var(--txt); margin-left: auto; font-variant-numeric: tabular-nums; }
.graf-chip { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.graf-chip.s1 { background: var(--s1); } .graf-chip.s2 { background: var(--s2); } .graf-chip.s3 { background: var(--s3); }
.graf-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--txt2); font-weight: 600; margin-bottom: 6px; }
.graf-legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- projecao ---------- */
.premissas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 14px; }
.sub-t { font-family: var(--sans); font-size: .9rem; font-weight: 700; margin: 18px 0 8px; color: var(--txt2); }
.degraus { display: grid; gap: 8px; }
.degrau { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.degrau input[type=text] { flex: 1 1 220px; width: auto; }
.degrau input.curto { width: 100px; }
.degrau small { color: var(--txt3); }
.compo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.compo li { display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(90px, auto); gap: 12px; align-items: center; font-size: .9rem; }
.compo b { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-proj summary { cursor: pointer; font-weight: 700; }
.tabela-proj .tab-wrap { margin-top: 12px; }
td.neg { color: var(--ruim); } td.pos { color: var(--ok); }
a.kpi-link { text-decoration: none; display: grid; }
a.kpi-link .kpi { height: 100%; }
.kpi.destaque .kpi-v { color: var(--ouro); }

/* ---------- lojas proprias ---------- */
.badge.propria { color: #5A2733; background: color-mix(in srgb, var(--ouro-s) 28%, var(--sup)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ouro-s) 55%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.propria { color: var(--ouro-s); background: color-mix(in srgb, var(--ouro-s) 14%, var(--sup)); } }
.lojas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.loja { display: grid; gap: 6px; padding: 14px; border-radius: 10px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--ouro-s) 35%, var(--linha));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ouro-s) 8%, var(--sup)), var(--sup) 70%); }
.loja:hover { border-color: var(--ouro-s); }
.loja-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.loja small { color: var(--txt3); }
.loja-s { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .compo li { grid-template-columns: 1fr auto; } .compo li .barra { grid-column: 1 / -1; grid-row: 2; } }
@media print { .graf-dica, .graf-area { display: none; } }
/* numeros dos KPIs numa linha so */
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.kpi-v { white-space: nowrap; font-size: clamp(1.35rem, 1.85vw, 1.9rem); }