/* === Vendas por Cenario — El Misti ===
   Tokens iguais aos dos outros paineis (sales, cs, paridade): o Dani circula
   entre eles e cor que muda de significado de tela pra tela custa confianca. */
:root {
  --misti-green: #1B5E20;
  --misti-green-light: #2E7D32;
  --misti-green-bg: #E8F5E9;
  --misti-dark: #0D2818;
  --bg: #f5f7f5;
  --card-bg: #fff;
  --text: #1a2e1a;
  --muted: #5f7060;
  --border: #d5e0d5;
  --green: #2E7D32;
  --red: #C62828;
  --blue: #1565C0;
  --orange: #F9A825;
  --shadow: 0 1px 3px rgba(0,40,0,0.08);
  --r: 8px;
  --mono: 'SF Mono', ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     background:var(--bg);color:var(--text);line-height:1.35;font-size:13px}

.header{background:var(--misti-dark);color:#fff;padding:8px 16px;display:flex;align-items:center;gap:12px}
.header-logo-img{height:28px;width:auto}
.header-title{flex:1;text-align:center;font-size:14px;font-weight:600;letter-spacing:.5px}
.header-update{font-size:9px;opacity:.6;text-align:right;min-width:150px}
.header-update.is-stale{opacity:1;font-weight:700;color:#FFD54F}

.tabs-bar{display:flex;background:var(--card-bg);border-bottom:2px solid var(--misti-green);padding:0 12px;overflow-x:auto}
.tab-btn{padding:8px 16px;border:none;background:none;font-size:12px;font-weight:600;
         color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab-btn.active{color:var(--misti-green);border-bottom-color:var(--misti-green)}

.filters-bar{background:var(--card-bg);border-bottom:1px solid var(--border);padding:7px 12px;
             display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters-bar select,.filters-bar .date-input{padding:4px 6px;border:1px solid var(--border);
             border-radius:4px;font-size:11px;background:#fff;cursor:pointer}
.filter-label{font-size:10px;color:var(--muted);font-weight:600;margin-left:6px}
.btn{padding:5px 14px;border:none;border-radius:4px;background:var(--misti-green);color:#fff;
     font-size:11px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--misti-green-light)}

main{padding:12px}
.carregando{padding:40px;text-align:center;color:var(--muted)}
.erro{padding:16px;background:#FFEBEE;border-left:3px solid var(--red);border-radius:var(--r);color:var(--red)}

/* KPIs do topo */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--card-bg);border-radius:var(--r);padding:10px 12px;box-shadow:var(--shadow)}
.kpi .rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.kpi .val{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--misti-green);margin-top:2px}
.kpi .sub{font-size:10px;color:var(--muted);margin-top:1px}
/* O ADR e o motivo deste painel existir: ganha destaque proprio. */
.kpi.destaque{border-left:3px solid var(--misti-green)}

.card{background:var(--card-bg);border-radius:var(--r);box-shadow:var(--shadow);
      padding:12px;margin-bottom:14px;overflow-x:auto}
.card h2{font-size:13px;color:var(--misti-green);margin-bottom:2px}
.card .desc{font-size:11px;color:var(--muted);margin-bottom:9px}

table{width:100%;border-collapse:collapse;font-size:11.5px}
th{background:var(--misti-green-bg);color:var(--misti-green);font-size:9.5px;text-transform:uppercase;
   letter-spacing:.05em;padding:5px 7px;text-align:left;position:sticky;top:0;white-space:nowrap}
td{padding:5px 7px;border-bottom:1px solid #eef2ee;white-space:nowrap}
td.num,th.num{text-align:right;font-family:var(--mono)}
tr:hover td{background:#fafcfa}
tr.total td{font-weight:700;background:var(--misti-green-bg);border-top:2px solid var(--misti-green)}
.vazio{color:var(--muted);font-style:italic}

/* diferenca site x OTA */
.dif-pos{color:var(--green);font-weight:700}   /* site mais caro = bom */
.dif-neg{color:var(--red);font-weight:700}     /* site mais barato que a OTA */
.dif-zero{color:var(--muted)}

.placar{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.placar div{padding:6px 12px;border-radius:var(--r);font-size:11px;font-weight:600}
.placar .bom{background:#E8F5E9;color:var(--green)}
.placar .ruim{background:#FFEBEE;color:var(--red)}
.placar .neutro{background:#f0f2f0;color:var(--muted)}

.rodape{padding:12px 16px;font-size:10.5px;color:var(--muted);line-height:1.5;
        border-top:1px solid var(--border);background:var(--card-bg)}
.rodape b{color:var(--text)}
.rodape .aviso{color:var(--orange);font-weight:600}