/* CRM Ton — identidade visual (verde #16A34A, branco #FFFFFF, preto #171717)
   Cores extras só com função: vermelho (erro/cancelamento) e âmbar (pendência).
   Exceções preservadas: cores das contas de Marketplace e das campanhas/conjuntos/anúncios. */
*{box-sizing:border-box}
:root{--g:#16a34a;--gd:#15803d;--gl:#f0fdf4;--bg:#ffffff;--b2:#f5f5f5;--tx:#171717;--mu:#6b6b6b;--bd:#e5e5e5;--bd2:#d4d4d4;--rd:#dc2626;--am:#b45309;--aml:#fffbeb;--rdl:#fef2f2;
 --cg:var(--g);--cr:var(--rd);--cy:var(--am);--co:var(--am);--cb:#525252;--cp:#525252;--cn:#737373;--t:var(--g);--tt:#fff;
 color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

/* Estrutura */
#app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
nav{background:var(--b2);border-right:1px solid var(--bd);padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
nav .br{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:var(--tx);margin:0 4px 12px}
nav .br i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--g);color:#fff;font-style:normal;font-size:13px}
nav>input{margin:0 0 6px;width:100%}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--bd);border-radius:8px;padding:3px;margin-bottom:8px}
.seg button{border:0;background:none;padding:7px 4px;border-radius:6px;font-size:12px;font-weight:600;color:var(--mu)}
.seg button.on{background:var(--g);color:#fff}
.nh{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin:8px 6px 4px}
#navb{display:flex;flex-direction:column;gap:2px}
nav button.ni{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;border:0;background:none;color:var(--tx);padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;width:100%}
nav button.ni:hover{background:#ebebeb}
nav button.ni.on{background:var(--g);color:#fff;font-weight:600}
nav button.ni .cnt{font-size:11px;font-weight:700;background:#e5e5e5;color:var(--tx);border-radius:10px;padding:0 7px;min-width:22px;text-align:center}
nav button.ni.on .cnt{background:rgba(255,255,255,.25);color:#fff}
.nfoot{margin-top:auto;padding-top:10px}
.sm{font-size:12px;color:var(--mu);margin:6px 0}
#prof{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:10px;margin:6px 0;font-size:12px}
#prof button{margin-top:6px;width:100%;text-align:center}
#prof .k{margin:2px 0}
.pbt{display:flex;gap:6px;flex-wrap:wrap}.pbt button{flex:1;margin-top:6px}
main{padding:24px 28px;min-width:0;max-width:1500px}
.mbar{display:none}

/* Tipografia */
h2{margin:0 0 16px;font-size:24px;font-weight:700;color:var(--tx);letter-spacing:-.01em}
h3{margin:22px 0 10px;font-size:16px;font-weight:700;color:var(--tx)}
.k{font-size:12px;color:var(--mu)}
.v{font-size:24px;font-weight:700;color:var(--tx);letter-spacing:-.01em}
.er{color:var(--rd);min-height:1em}
.okm{color:var(--g);font-weight:600}

/* Cartões e indicadores */
.card{border:1px solid var(--bd);border-radius:12px;padding:14px 16px;background:#fff;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.grid .card{margin:0}
.card.c-g .v{color:var(--g)}
.card.c-r{border-left:4px solid var(--rd)}.card.c-r .v{color:var(--rd)}
.card.c-y{border-left:4px solid #f59e0b;background:var(--aml)}

/* Tabelas */
.tw{overflow-x:auto;margin-bottom:16px;border:1px solid var(--bd);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:9px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
th{background:var(--b2);white-space:nowrap;font-size:12px;font-weight:600;color:var(--mu)}
tr:last-child td{border-bottom:0}
tr:hover td{background:#fafafa}
td.dayrow,td[style*="border-left:6px"]{background:var(--b2)!important;border-left:4px solid var(--g)!important;font-weight:700}
td textarea{width:100%;min-width:220px}

/* Controles */
button,select,input,textarea{font:inherit;color:var(--tx);background:#fff;border:1px solid var(--bd2);border-radius:8px;padding:7px 10px}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--g) 40%,transparent);outline-offset:0;border-color:var(--g)}
button{cursor:pointer}
button:hover{border-color:var(--tx)}
button.p{background:var(--g);border-color:var(--g);color:#fff;font-weight:600}
button.p:hover{background:var(--gd);border-color:var(--gd)}
.bn{display:inline-block;border:1px solid var(--bd2);border-radius:8px;padding:5px 10px;color:var(--tx);text-decoration:none;margin:1px;font-size:13px}
.bn:hover{border-color:var(--g);color:var(--gd)}
td button,td .bn,td select.more{margin:1px;padding:4px 9px;font-size:12px}
select.more{color:var(--mu);max-width:150px}
.bt,.fb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;align-items:center}
.tabs button,.chip{border:1px solid var(--bd2);background:#fff;color:var(--tx);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500}
.tabs button.on,.chip.on{background:var(--tx);border-color:var(--tx);color:#fff}
.tabs .lbl{font-size:12px;color:var(--mu);margin-right:2px}
.tg{display:inline-block;background:var(--aml);color:var(--am);border-radius:10px;padding:1px 8px;margin:1px;font-size:12px}

/* Etiquetas de situação: verde = ok, âmbar = pendente, vermelho = problema, cinza = neutro */
.p-g,.c-g{--pc:var(--cg)}.p-b,.c-b{--pc:var(--cb)}.p-y,.c-y{--pc:var(--cy)}.p-o,.c-o{--pc:var(--co)}.p-r,.c-r{--pc:var(--cr)}.p-p,.c-p{--pc:var(--cp)}.p-n,.c-n{--pc:var(--cn)}
.pl{display:inline-block;border:1px solid color-mix(in srgb,var(--pc) 45%,#fff);color:var(--pc);background:color-mix(in srgb,var(--pc) 9%,#fff);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap;margin:1px}
select.pl{padding:3px 6px;cursor:pointer;max-width:190px}

/* Identificação por cores (Marketplace e campanhas): cores preservadas */
.dt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dots{display:flex;gap:12px;flex-wrap:wrap;padding:6px 0}
.dot{position:relative;cursor:pointer;display:inline-flex;flex-direction:row}
.dot input{position:absolute;opacity:0;width:1px;height:1px}
.dot span{display:block;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.dot input:checked+span{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--tx)}
.dot input:focus-visible+span{outline:2px dashed var(--tx);outline-offset:7px}

/* Gráficos */
.bars{display:flex;align-items:flex-end;gap:2px;height:90px;margin-top:8px}
.bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:9px;color:var(--mu)}
.bars i{width:100%;background:var(--g);min-height:1px;border-radius:3px 3px 0 0}
.hb{display:grid;grid-template-columns:minmax(90px,170px) 1fr 40px;gap:8px;align-items:center;margin:4px 0;font-size:12px}
.hb i{display:block;height:10px;background:var(--g);border-radius:4px}

/* Formulários e janelas */
dialog{border:0;border-radius:14px;background:#fff;color:var(--tx);width:min(680px,94vw);max-height:90vh;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(23,23,23,.45)}
dialog h3{margin-top:0;font-size:18px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 12px}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--mu)}label.w{grid-column:1/-1}
label input,label select,label textarea{color:var(--tx);font-weight:400}
.ln{flex-direction:row;align-items:center;gap:8px;margin:4px 0}
.lb{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mu)}.lb.w{grid-column:1/-1}
.sec{font-size:13px;font-weight:700;color:var(--tx);border-bottom:1px solid var(--bd);padding:12px 0 4px}
.ro{font-size:14px;color:var(--tx);padding:6px 0}
.tgl{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;color:var(--gd);font-weight:600;cursor:pointer;padding:4px 0}
details summary{cursor:pointer}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tx);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transition:opacity .2s;pointer-events:none}
#toast.on{opacity:1}

/* Telas de acesso */
#auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--b2)}
.acard{width:min(430px,100%);background:#fff;border:1px solid var(--bd);border-radius:16px;padding:28px 24px;box-shadow:0 12px 36px rgba(0,0,0,.08)}
.acard h1{margin:0;color:var(--tx);font-size:28px}
.acard h1::before{content:"CT";display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--g);color:#fff;font-size:15px;margin-right:10px;vertical-align:middle}
.acard .sub{color:var(--mu);margin:4px 0 18px}
.acard h2.at{font-size:18px;margin:0 0 12px}
.acard form{display:flex;flex-direction:column;gap:12px}
.acard label{font-size:13px}
.acard input{padding:11px 12px;font-size:16px}
.acard button.p{padding:11px;font-size:16px}
.alinks{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px}
.alinks a{color:var(--gd);cursor:pointer;font-size:14px;text-decoration:underline}

/* Celular e tablet: menu lateral recolhível */
@media(max-width:860px){
 #app{grid-template-columns:1fr}
 nav{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:40;transform:translateX(-105%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.2);height:auto}
 body.mnav nav{transform:none}
 body.mnav::after{content:"";position:fixed;inset:0;background:rgba(23,23,23,.4);z-index:30}
 .mbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--bd);margin:-12px -12px 14px;padding:10px 12px}
 .mbar button{padding:7px 12px;font-weight:600}
 .mbar b{font-size:15px}
 main{padding:12px}
 h2{font-size:20px}
 dialog{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border-radius:0;padding:16px}
 .fg{grid-template-columns:1fr}
 .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
 input,select,textarea{font-size:16px}
}
@media print{nav,.bt,.fb,.mbar,.tabs{display:none}#app{display:block}main{padding:0}}