:root{--bg:#f4f6f8;--card-bg:#fff;--muted:#6b7280;--accent-blue:#0f79b8;--accent-blue-soft:#e6f3fb;--tab-orange:#ef6b2e;--red:#d64545;--table-head:#dff3f6;--panel-border:rgba(15,21,28,.06);--card-shadow:0 6px 18px rgba(9,30,66,.08)}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:#0b1220;-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial}html,body{overflow-x:hidden}.dashboard-top{max-width:1500px;margin:20px auto;padding:8px}.top-row-grid{grid-template-columns:320px 1fr 420px;align-items:stretch;gap:16px;display:grid}.top-row-grid>*{min-width:0}@media (max-width:1200px){.top-row-grid{grid-template-columns:320px 1fr;align-items:start;gap:16px}.summary-panel{order:3;grid-column:1/-1;width:100%;overflow-x:auto}.summary-panel .summary-table,.table-panel .agents-table{table-layout:auto;width:100%;min-width:600px}}.kpi-card{background:var(--card-bg);border:1px solid var(--panel-border);box-shadow:var(--card-shadow);border-radius:14px;align-items:center;gap:12px;padding:18px;display:flex}.kpi-icon{background:var(--accent-blue-soft);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:58px;height:58px;display:flex}.kpi-value{color:var(--accent-blue);font-size:28px;font-weight:700;line-height:1}.kpi-label{color:var(--muted);font-size:13px}.kpi-stack{flex-direction:column;gap:14px;display:flex}.mid-column{grid-template-columns:1fr 1fr;gap:14px;display:grid}.performer-card{background:var(--card-bg);border:1px solid var(--panel-border);box-shadow:var(--card-shadow);border-radius:12px;align-items:center;gap:12px;padding:14px;display:flex}.donut{border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;display:flex;position:relative}.donut-inner{background:#fff;border-radius:50%;justify-content:center;align-items:center;width:54px;height:54px;font-size:14px;font-weight:700;display:flex;position:absolute}.avatar-icon{background:0 0;border:2px solid #4a90e2;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.avatar-user-icon{color:#4a90e2;opacity:.8}.avatar-icon-small{background:0 0;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.areas-card{background:var(--card-bg);border:1px solid var(--panel-border);box-shadow:var(--card-shadow);border-radius:12px;padding:12px 14px}.areas-tabs{align-items:center;gap:0;margin-bottom:10px;display:flex}.tab-inactive{border:1px solid var(--panel-border);color:var(--muted);border:1px solid var(--panel-border);background:0 0}.area-row{align-items:center;gap:12px;margin-bottom:10px;display:flex}.area-desc{color:#172b4d;flex:1;font-size:13px}.area-percent{text-align:right;width:46px;color:var(--muted);font-size:12px}.area-bar-wrap{background:#f1f1f1;border-radius:6px;height:6px;margin-top:6px;overflow:hidden}.area-bar{border-radius:6px;height:6px}.tab-base{cursor:pointer;text-align:center;flex:1;padding:6px 12px;font-size:13px;font-weight:600}.tab-active-improvement{background:var(--tab-orange);color:#fff;border:1px solid var(--tab-orange);border-radius:5px 0 0 5px}.tab-active-excellence{color:#fff;background:#28a745;border:1px solid #28a745;border-radius:0 5px 5px 0}.bar-improvement{background:var(--tab-orange)}.bar-excellence{background:#28a745}.summary-panel{background:var(--card-bg);border:1px solid var(--panel-border);box-shadow:var(--card-shadow);border-radius:12px;padding:12px}.summary-table{border-collapse:collapse;color:#172b4d;width:100%;font-size:13px}.summary-table thead th{background:var(--table-head);text-align:left;padding:10px;font-size:13px;font-weight:600}.summary-table tbody td{border-top:1px solid #f1f4f6;padding:12px 10px}@media (max-width:1024px) and (min-width:981px){.top-row-grid{grid-template-columns:260px 1fr minmax(320px,360px);gap:14px}.summary-panel{max-width:100%;margin-right:8px;overflow-x:auto}.summary-table{table-layout:auto;width:100%}}@media (max-width:980px){.top-row-grid{grid-template-columns:320px 1fr;grid-auto-rows:auto;align-items:start;gap:16px}.kpi-stack{order:1}.mid-column{order:2}.summary-panel{order:3;grid-column:1/-1;width:100%;overflow-x:auto}.top-row-grid>*{min-width:0}.summary-panel .summary-table,.table-panel .agents-table{table-layout:auto;width:100%;min-width:600px}}@media (max-width:768px){.top-row-grid{gap:16px;flex-direction:column!important;display:flex!important}.kpi-stack,.mid-column,.summary-panel{width:100%!important}.mid-column{flex-direction:column;gap:14px;display:flex}.performer-card,.areas-card{width:100%!important}.summary-panel,.table-panel{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:600px){.dashboard-top{max-width:100%;padding:8px}.top-row-grid{grid-template-columns:1fr;gap:12px}.second-row-grid{flex-direction:column;gap:16px;display:flex}.chart-panel,.table-panel,.summary-panel{width:100%!important;max-width:100%!important}.summary-table th,.summary-table td{white-space:normal;word-break:break-word;padding:6px 8px;font-size:12px}}.fade-in-up{animation:.45s both fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.second-row-grid{grid-template-columns:1fr 420px;align-items:start;gap:20px;margin-top:25px;display:grid}.chart-panel{height:360px;box-shadow:none;background:0 0;border:none;flex-direction:column;padding:0;display:flex}.table-panel{background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:12px;flex-direction:column;height:360px;display:flex;overflow-x:auto}.table-panel .table-scroll{flex:1;padding:0;overflow-y:auto}@media (max-width:980px){.second-row-grid{grid-template-columns:1fr}.chart-panel,.table-panel{height:auto}}.teams-row-wrapper{grid-template-columns:auto 1fr;align-items:start;gap:18px;max-width:100%;margin-bottom:20px;display:grid;overflow-x:hidden}.team-card{color:#000;word-break:break-word;border-radius:12px 12px 8px 8px;flex:none;width:auto;max-width:100%;padding:16px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 8px rgba(0,0,0,.15)}.performance-high{background:#d4edda}.performance-medium{background:#ffe0b2}.performance-low{background:#f8d7da}.team-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,.25)}.teams-title{white-space:nowrap;align-self:center;margin:0;font-size:18px;font-weight:700}.teams-row{flex-wrap:wrap;align-items:flex-start;gap:18px;max-width:100%;display:flex;overflow-x:hidden}.teams-row-scroll{scrollbar-width:none;gap:12px;padding-bottom:6px;display:flex;overflow-x:auto}.teams-row-scroll::-webkit-scrollbar{display:none}.team-card{color:#fff;border-radius:8px;flex:none;min-width:200px;max-width:240px;padding:12px;transition:transform .2s}.performance-high{color:#000;background:#d4edda}.performance-medium{color:#000;background:#ffe0b2}.performance-low{color:#000;background:#f8d7da}@media (max-width:1024px){.teams-row-wrapper{grid-template-columns:1fr}.teams-title{margin-bottom:12px}.teams-row{flex-direction:column}.team-card{flex:unset;width:100%;max-width:100%}}.filter-row{flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:24px;display:flex}.filter-item{flex-direction:column;gap:6px;display:flex}.filter-label{color:#333;font-size:13px;font-weight:600}.filter-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;utf8,<svg fill='%23333' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") right 10px center/16px no-repeat;border:1px solid #ccc;border-radius:6px;outline:none;min-width:160px;padding:8px 12px;font-size:14px}.filter-select:focus{border-color:#ef6b2e;box-shadow:0 0 0 2px rgba(239,107,46,.2)}.filter-btn{color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-self:flex-end;align-items:center;height:36px;padding:0 16px;font-size:14px;font-weight:600;transition:background .2s;display:flex;background:#ef6b2e!important}.filter-btn:hover{background:#d95b1f!important}@media (max-width:768px){.filter-row{flex-direction:column;align-items:stretch}.filter-item,.filter-select,.filter-btn{width:100%}}@media only screen and (min-width:760px) and (max-width:820px) and (orientation:portrait){.filter-row{flex-direction:column!important;align-items:stretch!important}.filter-item{width:100%!important}.filter-select,.filter-btn{width:100%!important;max-width:100%!important;display:block!important}}