:root{
  --bg:#0e1a21; --panel:#0f2430; --panel-2:#133040;
  --muted:#8fb3c2; --text:#e9f3f7; --brand:#2fd2c6;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,#0b1620 0%, var(--bg) 100%);
  color:var(--text)
}

/* Util */
.hidden{display:none !important}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;position:sticky;top:0;z-index:5;
  background:rgba(10,25,32,.65);backdrop-filter:blur(10px);
  border-bottom:1px solid #163648}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(135deg,#102a36,#1c4a5e);box-shadow:var(--shadow);font-size:22px}
.title h1{margin:0;font-size:18px}
.title p{margin:2px 0 0;color:var(--muted);font-size:12px}

/* Painel + formulário */
.filters-panel{width:100%;padding:0 24px 8px}
.filters-toggle{cursor:pointer;user-select:none;font-weight:700;padding:10px 14px;
  border:1px solid #163648;border-radius:10px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  color:var(--text);display:inline-flex;align-items:center;gap:8px}
.filters-panel[open] .filters-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:8px;padding:12px;
  border:1px solid #163648;border-top:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.form-grid{display:grid;gap:10px;grid-template-columns:repeat(4, minmax(180px,1fr));width:100%}
.form-grid label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.form-grid input[type="date"],
.form-grid input[type="number"],
.form-grid input[type="text"],
.form-grid select,
.form-grid input[type="file"]{
  background:#0f2a37;color:var(--text);border:1px solid #1e556d;border-radius:10px;padding:10px 12px;outline:none
}
.upper{ text-transform: uppercase; }

.form-actions{grid-column:1 / -1;display:flex;gap:10px;justify-content:flex-end}
.btn{background:var(--brand);color:#062a30;font-weight:800;border:none;border-radius:10px;padding:12px 18px;cursor:pointer;box-shadow:0 6px 18px rgba(47,210,198,.3)}
.btn-apply{min-width:140px}
/* pequeno para tabela (usado no botão Editar) */
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}

/* Popover filtro */
.filter-panel{position:fixed;right:20px;top:90px;width:320px;max-height:70vh;overflow:auto;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #143847;border-radius:12px;box-shadow:var(--shadow);z-index:10}
.filter-panel.hidden{display:none}
.filter-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #163648}
.filter-close{background:transparent;border:none;color:#e9f3f7;font-size:16px;cursor:pointer}
.filter-body{padding:12px 14px;display:grid;gap:10px}
.lanc-list{display:grid;gap:8px;max-height:220px;overflow:auto;padding:4px}
.lanc-item{background:#0f2a37;border:1px solid #1e556d;border-radius:10px;color:#e9f3f7;padding:8px 10px;text-align:left;cursor:pointer}
.lanc-item.active{outline:2px solid var(--brand)}
.filter-actions{display:flex;gap:8px;justify-content:flex-end}

/* Layout */
.container{padding:24px;max-width:1280px;margin:0 auto}
.row{display:grid;gap:16px;margin-bottom:16px}
.row-3{grid-template-columns:320px 1fr 320px}
.row-2{grid-template-columns:1fr 1fr}

/* Cards */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #143847;
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;min-height:100px}
.card-title{font-weight:800;margin-bottom:10px;color:#d8f2f6}

/* KPIs */
.kpis-col{display:flex;flex-direction:column;gap:12px}
.kpi-item{background:#102a36;border:1px solid #143847;border-radius:12px;padding:14px}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{font-size:26px;font-weight:800;margin-top:6px;color:#c9f4f0}

/* Charts */
.chart-holder{position:relative;width:100%}
.chart-holder.sm{height:220px}
.chart-holder.md{height:260px}

/* Top 5 */
.top5-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.top5-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px;border:1px solid #143847;border-radius:12px;background:#102a36}
.badge-rank{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--brand);color:#0b2c33}
.top5-metrics{display:flex;gap:12px;color:#bfe6ea;font-size:12px}

/* Tabela */
.table-wrapper{overflow:auto;border-radius:12px;border:1px solid #143847}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
.table th,.table td{
  padding:10px 12px;border-bottom:1px solid #17485b;
  border-right:1px solid #17485b;
}
.table th:last-child,.table td:last-child{ border-right:none; }
.table tr:hover td{background:#112e3d}

/* THEAD escondido (usamos cabeçalho interno por semana) */
#txTable thead{display:none !important; visibility:hidden !important; height:0 !important}

/* Cabeçalho interno por semana */
.tr-section-head th{
  background:#0f2a37;color:#b0d4dc;font-weight:800;
  border-bottom:1px solid #17485b;
  border-right:1px solid #17485b;
}
.tr-section-head th:last-child{border-right:none}
.tr-section-head th:first-child{border-top-left-radius:10px}
.tr-section-head th:last-child{border-top-right-radius:10px}

/* Rodapé */
.footer{text-align:center;color:#8fb3c2;padding:24px;border-top:1px solid #163648;margin-top:24px}

/* Responsivo */
@media (max-width: 1120px){ .row-3{grid-template-columns:280px 1fr 280px} }
@media (max-width: 960px){
  .row-3{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2, minmax(160px,1fr))}
  .chart-holder.md{height:240px}
}
@media (max-width: 600px){
  .container{padding:16px}
  .form-grid{grid-template-columns:1fr}
  .chart-holder.sm{height:200px}
  .chart-holder.md{height:200px}
  .top5-list li{padding:8px}
  .table{min-width:520px}
}

/* Legenda donut (se ainda usar) */
.legend-inline{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}
.legend-inline .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#8fb3c2;margin-right:6px}
/* Chip opcional */
.legend-chip{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;border:1px solid #143847;border-radius:10px;
  background:#102a36;font-size:12px;color:#cfe8ed
}

/* Resumo */
.funnel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.funnel-cards .funnel-item{background:#102a36;border:1px solid #143847;border-radius:12px;padding:12px;text-align:center}
.funnel-item .lbl{color:#a5c9d1;font-size:12px}
.funnel-item .val{font-size:22px;font-weight:800;color:#c9f4f0;margin-top:6px}

/* Login */
.login-body{margin:0;min-height:100vh;background:linear-gradient(180deg,#0b1620 0%, #0e1a21 100%);
  display:grid;place-items:center;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#e9f3f7}
.login-card{width:100%;max-width:380px;background:linear-gradient(180deg,#0f2430,#133040);
  border:1px solid #143847;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:24px;text-align:center}
.login-logo{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin:0 auto 10px;background:linear-gradient(135deg,#102a36,#1c4a5e);font-size:26px}
.login-sub{color:#8fb3c2;margin-top:0}
.login-error{background:#3a0f14;border:1px solid #7a1d2a;color:#ffd2d6;border-radius:10px;padding:8px 10px;margin:10px 0;text-align:center}
.login-form{display:grid;gap:10px;margin-top:10px;text-align:left}
.login-form label{font-size:12px;color:#8fb3c2;display:flex;flex-direction:column;gap:6px}
.login-form input{background:#0f2a37;color:#e9f3f7;border:1px solid #1e556d;border-radius:10px;padding:10px 12px;outline:none}
.login-hint{color:#8fb3c2;font-size:12px;margin-top:12px}

/* Filtros da planilha */
.table-filters label{font-size:12px;color:#8fb3c2}
.table-filters input[type="month"]{background:#0f2a37;color:#e9f3f7;border:1px solid #1e556d;border-radius:10px;padding:8px 10px;outline:none}

/* Toast */
.toast{
  position:fixed; right:20px; bottom:20px; z-index:50;
  background:var(--brand); color:#062a30; font-weight:800;
  padding:10px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(47,210,198,.35);
  border:1px solid rgba(0,0,0,.15);
}

/* ===== Ranking por média dos suportes ===== */
.rank-wrap{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  align-items:end;
  justify-items:center;
  gap:24px;
  margin-bottom:12px;
  padding-top:110px; /* mantém a folga p/ não cortar os avatares */
}

/* posições e deslocamentos */
.rank-2{ grid-column:1; transform: translatey(-96px); }
.rank-1{ grid-column:2; transform: translatey(-100px); z-index:1; padding: 65px;} /* <-- alterado */
.rank-3{ grid-column:3; transform: translatey(-80px); }


/* card do ranking */
.rank-card{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.rank-avatar{
  width:108px; height:108px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:#0f2a37; color:#e9f3f7; font-weight:800; font-size:30px;
  border:6px solid #3a5566; box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.rank-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.rank-name{ font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#dbeaf0; }
.rank-name .rank-medal{ margin-right:6px }
.rank-pill{
  min-width:190px;
  color:#0d1b26; font-weight:900; font-size:26px; text-align:center;
  padding:14px 16px; border-radius:20px; border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  background:linear-gradient(180deg,#ffe083,#f3be31); /* default (ouro) */
}

/* variações por colocação */
.rank-1 .rank-avatar{ border-color:#F6C340; }
.rank-2 .rank-avatar{ border-color:#C0C9D7; }
.rank-3 .rank-avatar{ border-color:#CD9157; }
.rank-1 .rank-pill{ background:linear-gradient(180deg,#ffe083,#f3be31); }
.rank-2 .rank-pill{ background:linear-gradient(180deg,#e6ebf2,#c0c9d7); }
.rank-3 .rank-pill{ background:linear-gradient(180deg,#f0c7a2,#cd9157); }

/* Lista dos totais do mês (duas colunas) */
.support-totals{
  margin-top:14px;
  display:grid; grid-template-columns: 1fr 1fr; gap:8px 28px;
}
.st-item{ display:flex; align-items:center; gap:10px; color:#cfe1e8; font-weight:700; }
.st-dot{ width:10px; height:10px; background:#9fb7c4; border-radius:50%; display:inline-block; }
.st-name{ letter-spacing:.3px; }
.st-sep{ opacity:.7; }

/* Responsivo do ranking e da lista */
@media (max-width: 960px){
  .rank-wrap{ grid-template-columns: 1fr; gap:18px; padding-top:0; }
  .rank-1, .rank-2, .rank-3{ grid-column:auto; transform:none; }
  .support-totals{ grid-template-columns: 1fr; }
}