* {
    box-sizing: border-box;
}

:root {
    --bg: #031321;
    --bg2: #061c2d;
    --panel: #082338;
    --panel2: #0a2941;
    --border: rgba(52, 156, 225, .18);
    --blue: #28a9ff;
    --blue2: #1476c7;
    --green: #21d68a;
    --orange: #ffb347;
    --text: #eef7ff;
    --muted: #7892a7;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at 80% 0%, rgba(20, 128, 220, .10), transparent 30%),
        linear-gradient(135deg, #020f1b, #061b2c 55%, #020e18);
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
}

body {
    min-height: 100vh;
}

.app {
    display: flex;
    min-height: 100vh;
}


/* SIDEBAR */

.sidebar {
    width: 235px;
    min-width: 235px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background:
        linear-gradient(180deg, #06294c 0%, #041d35 48%, #021322 100%);

    border-right: 1px solid rgba(56, 153, 220, .20);

    box-shadow:
        15px 0 45px rgba(0, 0, 0, .18);
}

.brand {
    min-height: 135px;
    padding: 22px 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-bottom: 1px solid rgba(80, 170, 235, .12);
}

.brand img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 8px;
}

.brand-name {
    text-align: center;
}

.brand-name strong {
    display: block;
    font-size: 15px;
    letter-spacing: .3px;
}

.brand-name span {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: 2.8px;
    color: #55baff;
}

.navigation {
    padding: 20px 12px;
}

.navigation a {
    display: flex;
    align-items: center;
    gap: 13px;

    height: 47px;
    padding: 0 16px;
    margin-bottom: 6px;

    color: #8da8bb;
    text-decoration: none;

    border-left: 3px solid transparent;
    border-radius: 8px;

    font-size: 13px;

    transition: .2s ease;
}

.navigation a:hover {
    background: rgba(30, 137, 214, .10);
    color: white;
}

.navigation a.active {
    color: white;
    background:
        linear-gradient(90deg,
        rgba(19, 135, 230, .28),
        rgba(19, 91, 160, .10));

    border-left-color: var(--blue);

    box-shadow:
        inset 0 0 25px rgba(21, 139, 229, .06);
}

.sidebar-footer {
    margin-top: auto;
    padding: 20px;

    color: #6f899c;

    border-top: 1px solid rgba(80, 170, 235, .10);
}

.sidebar-footer strong {
    display: block;
    margin-top: 7px;
    color: #aac0d0;
    font-size: 11px;
}

.online-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}


/* MAIN */

.main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.eyebrow {
    color: #31a9ff;
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 700;
}

h1 {
    margin: 7px 0 5px;
    font-size: 28px;
    letter-spacing: -.8px;
}

.header p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.header-right {
    text-align: right;
}

.server-online {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #b6c9d8;
}

.clock {
    margin-top: 7px;
    color: #6f8da5;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}


/* COMMON */

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.green {
    background: var(--green);
    box-shadow: 0 0 9px rgba(33, 214, 138, .8);
}

.gray {
    background: #607487;
}

.panel,
.kpi {
    background:
        linear-gradient(145deg,
        rgba(9, 38, 61, .97),
        rgba(4, 24, 40, .97));

    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.panel {
    padding: 20px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.panel-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.panel-subtitle {
    margin-top: 5px;
    color: #668399;
    font-size: 10px;
}

.badge {
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.badge.live {
    color: #38d995;
    background: rgba(33, 214, 138, .08);
    border: 1px solid rgba(33, 214, 138, .15);
}


/* KPI */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.kpi {
    min-height: 118px;
    padding: 17px;
}

.kpi-label {
    color: #6f8da4;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.kpi-value {
    margin-top: 9px;
    color: #f4f9ff;
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
}

.kpi-desc {
    margin-top: 10px;
    color: #668298;
    font-size: 9px;
}

.kpi-desc b {
    color: #35aaff;
    margin-left: 4px;
}

.kpi.sales .kpi-value {
    color: #40e69c;
}

.kpi.vpn .kpi-value {
    color: #45b6ff;
}


/* TABLES */

.main-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    padding: 11px 10px;
    text-align: left;
    color: #58758c;
    background: rgba(7, 46, 73, .38);
    font-size: 8px;
    letter-spacing: 1.2px;
}

td {
    padding: 13px 10px;
    border-top: 1px solid rgba(70, 150, 205, .08);
    color: #9bb0bf;
    font-size: 11px;
}

tr:hover td {
    background: rgba(30, 145, 225, .035);
}

td strong {
    color: #edf5fb;
}

.status-pill {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
}

.status-ready {
    color: #2de197;
    background: rgba(33, 214, 138, .08);
}

.status-incall {
    color: #39adff;
    background: rgba(39, 157, 239, .10);
}

.status-paused {
    color: #ffbd55;
    background: rgba(255, 189, 85, .09);
}

.loading,
.empty-state {
    padding: 25px;
    text-align: center;
    color: #617c91;
    font-size: 10px;
}


/* LIVE CALLS */

.live-calls {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.call-item {
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(4, 24, 40, .7);
    border: 1px solid rgba(51, 143, 203, .10);
    border-radius: 8px;
}

.call-main strong {
    display: block;
    font-size: 11px;
}

.call-main small {
    display: block;
    margin-top: 4px;
    color: #68849a;
    font-size: 9px;
}

.call-state {
    color: #38b5ff;
    font-size: 8px;
    font-weight: 800;
}


/* ANALYTICS */

.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.5fr;
    gap: 16px;
    margin-bottom: 16px;
}

.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 11px 10px;

    border-bottom: 1px solid rgba(60, 140, 200, .08);
}

.metric-row span {
    color: #6f8ba0;
    font-size: 9px;
    letter-spacing: 1px;
}

.metric-row strong {
    color: #eaf4fb;
    font-size: 12px;
}

.campaign-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-item {
    padding: 9px 11px;
    border-radius: 7px;
    background: rgba(5, 28, 46, .65);
}

.campaign-top {
    display: flex;
    justify-content: space-between;
}

.campaign-name {
    color: #dcebf5;
    font-size: 10px;
    font-weight: 700;
}

.campaign-value {
    color: #3eafff;
    font-size: 9px;
}

.campaign-meta {
    margin-top: 5px;
    color: #617c91;
    font-size: 8px;
}


/* HOURLY */

.hourly-chart {
    min-height: 120px;

    display: flex;
    align-items: flex-end;
    gap: 7px;

    padding: 10px 3px 0;
}

.hour-bar {
    flex: 1;
    min-width: 8px;
    position: relative;

    background:
        linear-gradient(180deg,
        #2daeff,
        #0a5790);

    border-radius: 4px 4px 0 0;
    opacity: .88;
}

.hour-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;

    color: #557187;
    font-size: 7px;
}

.hour-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -13px;

    color: #83a6bd;
    font-size: 7px;
}


/* INFRA */

.infra-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.infrastructure {
    min-height: 200px;
}

.infra-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 17px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.infra-icon {
    color: #35adff;
    font-size: 16px;
}

.service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 0;

    border-bottom: 1px solid rgba(70, 150, 205, .07);

    color: #7892a6;
    font-size: 9px;
}

.service-status {
    color: #ffb84f;
    font-size: 8px;
    font-weight: 800;
}

.service-status.online {
    color: #2bda91;
}

.vpn-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;

    margin-bottom: 12px;
}

.vpn-summary strong {
    color: #43b3ff;
    font-size: 27px;
}

.vpn-summary span {
    color: #678398;
    font-size: 9px;
}

.vpn-mini-list {
    max-height: 105px;
    overflow-y: auto;
}

.vpn-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 7px 0;

    border-bottom: 1px solid rgba(70, 150, 205, .06);
}

.vpn-mini-name {
    color: #c8d9e5;
    font-size: 9px;
}

.vpn-mini-ip {
    color: #55748b;
    font-size: 8px;
}

.vpn-online {
    color: #2bda91;
    font-size: 7px;
    font-weight: 800;
}

.vpn-offline {
    color: #667d8e;
    font-size: 7px;
    font-weight: 800;
}


/* DNS */

.dns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dns-grid div {
    padding: 10px 7px;
    text-align: center;
    background: rgba(4, 24, 40, .55);
    border-radius: 7px;
}

.dns-grid span {
    display: block;
    color: #5d798f;
    font-size: 7px;
    letter-spacing: 1px;
}

.dns-grid strong {
    display: block;
    margin-top: 5px;
    color: #e7f4fb;
    font-size: 14px;
}

.protected {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 14px 0;

    color: #32d992;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* SERVER */

.resource {
    margin-bottom: 12px;
}

.resource-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.resource-head span {
    color: #6e899e;
    font-size: 8px;
    letter-spacing: 1px;
}

.resource-head strong {
    color: #d8e9f4;
    font-size: 9px;
}

.progress {
    height: 5px;
    overflow: hidden;
    background: #061827;
    border-radius: 10px;
}

.progress div {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0c6eaf, #35b3ff);
    transition: width .4s ease;
}

.uptime {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: #607b91;
    font-size: 8px;
}

.uptime strong {
    color: #b8cfde;
}


/* FOOTER */

footer {
    display: flex;
    justify-content: space-between;

    margin-top: 16px;
    padding: 13px 5px;

    color: #506b80;
    font-size: 8px;
    letter-spacing: .4px;
}


/* RESPONSIVE */

@media (max-width: 1400px) {

    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .infra-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {

    .sidebar {
        width: 190px;
        min-width: 190px;
    }

    .main-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .header {
        gap: 20px;
    }
}

@media (max-width: 700px) {

    .app {
        display: block;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        min-height: auto;
    }

    .navigation {
        display: flex;
        overflow-x: auto;
    }

    .navigation a {
        min-width: 120px;
    }

    .main {
        padding: 18px;
    }

    .kpi-grid,
    .infra-grid {
        grid-template-columns: 1fr;
    }

    .header {
        flex-direction: column;
    }

    .header-right {
        text-align: left;
    }

    .server-online {
        justify-content: flex-start;
    }

    footer {
        flex-direction: column;
        gap: 6px;
    }
}

/* =========================================================
   CARELIFEINSURANCE COMMAND CENTER - PREMIUM POLISH
   ========================================================= */

/* Logo */

.brand {
    min-height: 150px;
}

.brand img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    margin-bottom: 7px;
    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.35));
}

.brand-name strong {
    font-size: 14px;
    letter-spacing: .2px;
}


/* KPI premium */

.kpi-grid {
    gap: 14px;
}

.kpi {
    min-height: 128px;
    padding: 19px;
    position: relative;
    overflow: hidden;
}

.kpi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(42,169,255,.55),
        transparent
    );
    opacity: .55;
}

.kpi-value {
    font-size: 32px;
    margin-top: 12px;
}

.kpi.sales .kpi-value {
    text-shadow: 0 0 18px rgba(33,214,138,.12);
}

.kpi.vpn .kpi-value {
    text-shadow: 0 0 18px rgba(69,182,255,.12);
}


/* Panels */

.panel {
    box-shadow:
        0 18px 45px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.panel-title {
    font-size: 11px;
}


/* Agent table */

.agent-online-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 6px;
    background: #21d68a;
    box-shadow: 0 0 8px rgba(33,214,138,.7);
}


/* Live calls */

.live-calls {
    min-height: 150px;
}

.call-item {
    transition: .2s ease;
}

.call-item:hover {
    border-color: rgba(44,174,255,.28);
    transform: translateY(-1px);
}

.call-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2caeff;
    box-shadow: 0 0 12px rgba(44,174,255,.8);
    animation: pulseCall 1.6s infinite;
}

@keyframes pulseCall {
    0%, 100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Analytics */

.analytics-grid {
    grid-template-columns: .9fr 1.1fr 1.7fr;
}

.hourly-panel {
    min-width: 0;
}

.hourly-chart {
    height: 155px;
    min-height: 155px;
    align-items: flex-end;
    padding-top: 25px;
    padding-bottom: 25px;
    gap: 3px;
}

.hour-bar {
    min-width: 5px;
    opacity: .75;
    transition:
        height .4s ease,
        opacity .2s ease,
        filter .2s ease;
}

.hour-bar:hover {
    opacity: 1;
    filter: brightness(1.25);
}

.hour-bar.zero {
    opacity: .20;
    height: 4px !important;
}

.hour-label {
    font-size: 7px;
    bottom: -18px;
}

.hour-value {
    font-size: 7px;
}


/* Campaigns */

.campaign-item {
    transition: .2s ease;
}

.campaign-item:hover {
    background: rgba(14,62,95,.45);
    transform: translateX(2px);
}


/* VPN */

.vpn-mini {
    gap: 10px;
}

.vpn-traffic {
    margin-top: 3px;
    color: #4e6b80;
    font-size: 7px;
}

.vpn-online {
    white-space: nowrap;
}


/* DNS */

.dns-grid {
    margin-bottom: 10px;
}

.dns-protection {
    margin-top: 10px;
}

.dns-protection-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    color: #668399;
    font-size: 8px;
}

.dns-protection-head strong {
    color: #2edb94;
}

.dns-progress {
    height: 5px;
    background: #061827;
    border-radius: 10px;
    overflow: hidden;
}

.dns-progress div {
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        #0b8b64,
        #28df98
    );
    border-radius: inherit;
    transition: width .4s ease;
}


/* Infrastructure status */

.service-status {
    transition: color .2s ease;
}

.service-status.offline {
    color: #ff6471;
}

.service-status.online {
    color: #2bda91;
}


/* Server health */

.resource {
    position: relative;
}

.progress div {
    background: linear-gradient(
        90deg,
        #0c6eaf,
        #35b3ff
    );
}

.progress.warning div {
    background: linear-gradient(
        90deg,
        #a96813,
        #ffbd55
    );
}

.progress.danger div {
    background: linear-gradient(
        90deg,
        #a92837,
        #ff5d6b
    );
}


/* Footer */

footer {
    border-top: 1px solid rgba(70,150,205,.06);
}


/* Better large-screen proportions */

@media (min-width: 1600px) {

    .main {
        padding-left: 38px;
        padding-right: 38px;
    }

    h1 {
        font-size: 30px;
    }

    .kpi-value {
        font-size: 34px;
    }
}

/* =========================================================
   CARELIFEINSURANCE - FINAL VISUAL POLISH
   ========================================================= */

/* LOGO */

.brand {
    min-height: 155px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.brand img {
    width: 90px;
    height: 90px;
    margin-bottom: 5px;
}


/* KPI PRINCIPALES */

.kpi {
    min-height: 135px;
    padding: 21px;
}

.kpi-label {
    font-size: 9px;
    letter-spacing: 1.8px;
}

.kpi-value {
    font-size: 38px;
    line-height: 1;
    margin-top: 13px;
}

.kpi-desc {
    margin-top: 12px;
    font-size: 9px;
}


/* HACER MÁS IMPORTANTE EL ÁREA PRINCIPAL */

.main-grid {
    gap: 18px;
}

.main-grid .large-panel {
    min-height: 250px;
}

.main-grid > .panel:not(.large-panel) {
    min-height: 250px;
}


/* TABLA DE AGENTES */

.main-grid table th {
    padding-top: 12px;
    padding-bottom: 12px;
}

.main-grid table td {
    padding-top: 15px;
    padding-bottom: 15px;
}


/* GRÁFICA DE 24 HORAS */

.hourly-panel {
    min-height: 250px;
}

.hourly-chart {
    height: 185px;
    min-height: 185px;
    padding-top: 30px;
    padding-bottom: 30px;
    gap: 4px;
}

.hour-bar {
    min-width: 7px;
}

.hour-value {
    font-size: 8px;
    font-weight: 700;
}

.hour-label {
    font-size: 8px;
}


/* RENDIMIENTO */

.metrics-list {
    margin-top: 5px;
}

.metric-row {
    padding: 13px 11px;
}

.metric-row span {
    font-size: 9px;
}

.metric-row strong {
    font-size: 13px;
}


/* CAMPAÑAS */

.campaign-item {
    padding: 11px 12px;
}

.campaign-name {
    font-size: 11px;
}

.campaign-value {
    font-size: 9px;
}

.campaign-meta {
    font-size: 8px;
}


/* INFRAESTRUCTURA */

.infrastructure {
    min-height: 215px;
}

.infra-title {
    font-size: 10px;
    margin-bottom: 19px;
}


/* VPN */

.vpn-summary strong {
    font-size: 31px;
}


/* ADGUARD */

.dns-grid strong {
    font-size: 16px;
}


/* SERVER */

.resource-head strong {
    font-size: 10px;
}

.progress {
    height: 6px;
}


/* HEADER */

h1 {
    font-size: 30px;
}

.header p {
    font-size: 11px;
}


/* PANTALLAS GRANDES */

@media (min-width: 1600px) {

    .main {
        padding-left: 28px;
        padding-right: 28px;
    }

    .kpi-value {
        font-size: 40px;
    }

    .hourly-chart {
        height: 195px;
        min-height: 195px;
    }
}

/* =========================================================
   LIVE CALL ACTIVITY
   ========================================================= */

.live-activity-panel {
    min-height: 250px;
}

.live-call-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 13px;
}

.live-call-kpi {
    padding: 8px 10px;
    background: rgba(3, 20, 34, .65);
    border: 1px solid rgba(50, 145, 205, .08);
    border-radius: 7px;
}

.live-call-kpi span {
    display: block;
    color: #5e7b90;
    font-size: 7px;
    letter-spacing: 1px;
}

.live-call-kpi strong {
    display: block;
    margin-top: 3px;
    color: #edf7ff;
    font-size: 18px;
}

.live-call-kpi:first-child strong {
    color: #36b2ff;
}

.live-call-kpi:nth-child(2) strong {
    color: #2dd993;
}

.live-call-kpi:nth-child(3) strong {
    color: #ffbd55;
}


/* REAL-TIME ACTIVITY GRAPH */

.activity-chart {
    position: relative;
    height: 65px;
    margin-bottom: 12px;

    overflow: hidden;

    border-top: 1px solid rgba(48, 144, 204, .07);
    border-bottom: 1px solid rgba(48, 144, 204, .07);

    background:
        linear-gradient(
            180deg,
            rgba(20, 120, 190, .045),
            transparent
        );
}

.activity-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    border-top: 1px dashed rgba(75, 145, 185, .10);
}

.activity-bars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 100%;

    display: flex;
    align-items: flex-end;
    gap: 3px;

    padding: 7px 3px;
}

.activity-bar {
    flex: 1;
    min-width: 2px;

    height: 3px;

    background:
        linear-gradient(
            180deg,
            #35b5ff,
            #0b5c91
        );

    border-radius: 3px 3px 0 0;

    opacity: .75;

    transition:
        height .4s ease,
        opacity .2s ease;
}

.activity-bar.current {
    opacity: 1;

    box-shadow:
        0 0 9px rgba(53,181,255,.45);
}


/* ACTIVE CALL ITEMS */

.live-calls {
    max-height: 72px;
    overflow-y: auto;
}

.call-item {
    padding: 8px 10px;
}

.call-main {
    min-width: 0;
}

.call-main strong {
    font-size: 9px;
}

.call-main small {
    font-size: 8px;
}

.call-state {
    display: flex;
    align-items: center;
    gap: 5px;

    font-size: 7px;
}


/* CALL PULSE */

.call-pulse {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #2caeff;

    box-shadow:
        0 0 10px rgba(44,174,255,.85);

    animation: pulseCall 1.4s infinite;
}

@keyframes pulseCall {

    0%,
    100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


/* LARGE SCREENS */

@media (min-width: 1600px) {

    .live-activity-panel {
        min-height: 265px;
    }

    .activity-chart {
        height: 75px;
    }
}

/* =========================================================
   CARELIFEINSURANCE - LIVE CALLS / AGENT TABLE
   ========================================================= */

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    white-space: nowrap;
}

table td {
    white-space: nowrap;
}

.customer-phone {
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-weight: 700;
    letter-spacing: .5px;
    color: #d9f3ff;
}

/* LIVE CALLS */

.live-calls {
    width: 100%;
}

.call-item {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr auto;
    align-items: center;
    gap: 20px;

    padding: 15px 16px;
    margin-bottom: 8px;

    background: rgba(8, 37, 58, .72);
    border: 1px solid rgba(52, 156, 225, .13);
    border-radius: 9px;

    transition: .2s ease;
}

.call-item:hover {
    background: rgba(12, 53, 79, .82);
    border-color: rgba(40, 169, 255, .28);
}

.call-agent {
    min-width: 0;
}

.call-agent strong {
    display: block;
    color: #eef7ff;
    font-size: 13px;
}

.call-phone {
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .7px;
    color: #8fddff;
}

.call-campaign {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    color: #91aabd;
}

.call-state {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #21d68a;

    white-space: nowrap;
}

.call-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #21d68a;
    box-shadow: 0 0 10px rgba(33, 214, 138, .9);
    animation: callPulse 1.4s infinite;
}

@keyframes callPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.75);
    }
}

.empty-state {
    padding: 28px 15px;
    text-align: center;
    color: #607b90;
    font-size: 12px;
}

/* Responsive */

@media (max-width: 1000px) {

    .call-item {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .call-state {
        justify-content: flex-start;
    }
}


/* CALLS HISTORY */

.calls-history-panel {
    margin-bottom: 16px;
}

.calls-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.calls-filter {
    border: 1px solid rgba(51, 143, 203, .18);
    background: rgba(4, 24, 40, .65);
    color: #6f8da3;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    cursor: pointer;
    transition: .2s ease;
}

.calls-filter:hover {
    color: #b9e5ff;
    border-color: rgba(51, 143, 203, .40);
}

.calls-filter.active {
    color: #ffffff;
    border-color: rgba(51, 173, 255, .65);
    background: rgba(30, 119, 170, .22);
}

.calls-history-wrap {
    width: 100%;
    overflow-x: auto;
}

.calls-history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.calls-history-table th {
    text-align: left;
    padding: 9px 10px;
    color: #58778d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .6px;
    border-bottom: 1px solid rgba(51, 143, 203, .12);
}

.calls-history-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(51, 143, 203, .07);
    font-size: 10px;
    color: #b4c9d7;
}

.calls-history-table tbody tr:hover {
    background: rgba(30, 119, 170, .06);
}

.call-time {
    color: #718ea1;
    font-variant-numeric: tabular-nums;
}

.call-duration {
    color: #a9c5d6;
    font-variant-numeric: tabular-nums;
}

.campaign-pill {
    font-size: 8px;
    font-weight: 800;
    color: #77c9f5;
    letter-spacing: .3px;
}

.call-term {
    color: #718b9c;
    font-size: 8px;
}

.call-result {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .2px;
}

.call-result-contact {
    color: #52d99b;
    background: rgba(45, 225, 151, .08);
}

.call-result-sale {
    color: #ffe08a;
    background: rgba(255, 224, 138, .10);
}

.call-result-drop {
    color: #ff7676;
    background: rgba(255, 80, 80, .09);
}

.call-result-na {
    color: #718ca0;
    background: rgba(113, 140, 160, .08);
}

.call-result-dnc {
    color: #d48cff;
    background: rgba(180, 100, 255, .09);
}

.call-result-default {
    color: #75bde7;
    background: rgba(70, 160, 220, .08);
}

@media (max-width: 800px) {

    .calls-history-table {
        min-width: 700px;
    }

    .calls-filters {
        gap: 5px;
    }

    .calls-filter {
        padding: 6px 9px;
    }

}


/* =========================================================
   WIREGUARD SIDEBAR DROPDOWN
   ========================================================= */

.nav-dropdown {
    width: 100%;
}

.nav-dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
}

.nav-dropdown-toggle > span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-chevron {
    font-size: 11px;
    opacity: .65;
    transition: transform .2s ease;
}

.nav-dropdown.open .nav-chevron {
    transform: rotate(90deg);
}

.nav-dropdown-panel {
    display: none;
    margin: 4px 8px 8px 8px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255,255,255,.05);
}

.nav-dropdown.open .nav-dropdown-panel {
    display: block;
}

.wg-nav-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.wg-nav-summary > div {
    text-align: center;
    padding: 6px 2px;
    border-radius: 6px;
    background: rgba(255,255,255,.035);
}

.wg-nav-summary strong {
    display: block;
    font-size: 13px;
    line-height: 16px;
    color: #fff;
}

.wg-nav-summary span {
    display: block;
    margin-top: 1px;
    font-size: 7px;
    letter-spacing: .4px;
    opacity: .55;
}

.wg-nav-list {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 2px;
}

.wg-nav-list::-webkit-scrollbar {
    width: 3px;
}

.wg-nav-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 5px;
}

.wg-nav-item {
    padding: 7px 5px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.035);
}

.wg-nav-name {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wg-nav-ip {
    font-size: 8px;
    opacity: .48;
    margin-top: 1px;
}

.wg-nav-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 5px;
}

.wg-nav-state {
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .2px;
}

.wg-nav-state.online {
    color: #55e58b;
}

.wg-nav-state.offline {
    color: #9aa7b4;
}

.wg-nav-state.disabled {
    color: #687582;
}

.wg-nav-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 3px;
    background: #66727e;
}

.wg-nav-dot.online {
    background: #55e58b;
}

.wg-nav-dot.active {
    background: #7bbcff;
}

.wg-nav-actions {
    display: flex;
    gap: 3px;
}

.wg-nav-action {
    border: 0;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 7px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.08);
}

.wg-nav-action:hover {
    background: rgba(255,255,255,.16);
}

.wg-nav-action:disabled {
    opacity: .45;
    cursor: wait;
}

.wg-nav-loading,
.wg-nav-error {
    padding: 10px 5px;
    text-align: center;
    font-size: 9px;
    opacity: .55;
}


/* =========================================================
   WIREGUARD SIDEBAR - COMPACT PROFESSIONAL
   ========================================================= */

.nav-dropdown {
    margin-bottom: 6px;
}

.nav-dropdown-toggle {
    position: relative;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    cursor: pointer;
}

.nav-dropdown-toggle > span:first-child {
    display: flex;
    align-items: center;
    gap: 13px;
}

.nav-chevron {
    font-size: 12px;
    color: #628196;
    transition: transform .2s ease, color .2s ease;
}

.nav-dropdown.open .nav-chevron {
    transform: rotate(90deg);
    color: #55baff;
}

.nav-dropdown-panel {
    display: none;
    margin: 3px 4px 8px 8px;
    padding: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(10, 25, 39, .94),
            rgba(7, 18, 29, .96)
        );

    border: 1px solid rgba(75, 160, 220, .12);
    border-radius: 9px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 22px rgba(0,0,0,.18);
}

.nav-dropdown.open .nav-dropdown-panel {
    display: block;
}

.wg-nav-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;

    margin-bottom: 6px;
    padding-bottom: 7px;

    border-bottom: 1px solid rgba(100,170,215,.10);
}

.wg-nav-summary > div {
    text-align: center;
    min-width: 0;
}

.wg-nav-summary strong {
    display: block;
    color: #d9edf9;
    font-size: 13px;
    line-height: 15px;
    font-weight: 700;
}

.wg-nav-summary span {
    display: block;
    margin-top: 1px;

    color: #617f93;
    font-size: 7px;
    line-height: 9px;
    letter-spacing: .8px;
}

.wg-nav-list {
    max-height: 290px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

.wg-nav-list::-webkit-scrollbar {
    width: 4px;
}

.wg-nav-list::-webkit-scrollbar-track {
    background: transparent;
}

.wg-nav-list::-webkit-scrollbar-thumb {
    background: rgba(83, 153, 197, .28);
    border-radius: 10px;
}

.wg-nav-item {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;

    min-height: 38px;
    padding: 6px 5px;

    border-radius: 6px;
    border: 1px solid transparent;

    transition: background .15s ease, border-color .15s ease;
}

.wg-nav-item:hover {
    background: rgba(39, 132, 192, .07);
    border-color: rgba(75, 160, 220, .08);
}

.wg-nav-item + .wg-nav-item {
    margin-top: 2px;
}

.wg-nav-name {
    display: flex;
    align-items: center;
    min-width: 0;

    color: #b9cfdd;
    font-size: 9px;
    line-height: 11px;
    font-weight: 600;
}

.wg-nav-ip {
    margin-top: 2px;

    color: #526f82;
    font-family: monospace;
    font-size: 7px;
    line-height: 9px;
}

.wg-nav-status {
    display: flex;
    align-items: center;
    gap: 3px;

    white-space: nowrap;

    font-size: 7px;
    line-height: 9px;
    color: #668295;
}

.wg-nav-state {
    margin-left: 10px;
}

.wg-nav-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;

    border-radius: 50%;
    background: #536b7a;
}

.wg-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.wg-nav-action {
    min-width: 30px;
    height: 20px;
    padding: 0 6px;

    border: 1px solid rgba(91,164,211,.16);
    border-radius: 5px;

    background: rgba(255,255,255,.025);
    color: #7e9aaa;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .4px;

    cursor: pointer;
    transition: all .15s ease;
}

.wg-nav-action:hover {
    background: rgba(36, 145, 216, .12);
    border-color: rgba(67, 170, 232, .28);
    color: #d8f1ff;
}

.wg-nav-loading,
.wg-nav-error {
    padding: 12px 5px;

    text-align: center;

    color: #617c8e;
    font-size: 8px;
}



/* =========================================================
   CARELIFE COMMAND CENTER
   SIDEBAR PREMIUM / LARGE
   ========================================================= */

.sidebar {
    width: 320px;
    min-width: 320px;

    background:
        linear-gradient(
            180deg,
            #062f56 0%,
            #052746 45%,
            #031a2f 100%
        );

    border-right:
        1px solid rgba(55, 170, 240, .28);

    box-shadow:
        18px 0 55px rgba(0, 0, 0, .30);
}


/* =========================
   BRAND
   ========================= */

.brand {
    min-height: 285px;

    padding:
        30px
        20px
        25px;

    justify-content: center;

    border-bottom:
        1px solid rgba(80, 180, 245, .18);
}

.brand img {
    width: 125px;
    height: 125px;

    margin-bottom: 14px;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.42))
        drop-shadow(0 0 10px rgba(20,150,255,.16));
}

.brand-name {
    text-align: center;
    width: 100%;
}

.brand-name strong {
    display: block;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: .2px;

    color: #ffffff;

    white-space: nowrap;
}

.brand-name span {
    display: block;

    margin-top: 7px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 4px;

    color: #38bfff;
}


/* =========================
   NAVIGATION
   ========================= */

.navigation {
    padding:
        28px
        16px;
}

.navigation a {
    height: 60px;

    padding:
        0
        20px;

    margin-bottom: 10px;

    gap: 17px;

    border-left:
        4px solid transparent;

    border-radius: 11px;

    color: #a8bfd1;

    font-size: 17px;
    font-weight: 500;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* ICONOS */

.navigation a > span:first-child {
    font-size: 22px;
}

.navigation a:not(.nav-dropdown-toggle) {
    letter-spacing: .1px;
}


/* HOVER */

.navigation a:hover {
    color: #ffffff;

    background:
        rgba(20, 137, 220, .14);

    border-left-color:
        rgba(35, 175, 255, .45);

    box-shadow:
        inset 0 0 22px rgba(20, 145, 235, .05);

    transform:
        translateX(2px);
}


/* DASHBOARD ACTIVO */

.navigation a.active {
    min-height: 62px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(16, 143, 238, .48),
            rgba(12, 91, 163, .22)
        );

    border-left:
        4px solid #13c8ff;

    box-shadow:
        0 0 18px rgba(12, 151, 240, .16),
        inset 0 0 28px rgba(20, 151, 240, .10);
}


/* =========================
   WIREGUARD MENU
   ========================= */

.nav-dropdown {
    width: 100%;
}

.nav-dropdown-toggle {
    width: 100%;

    box-sizing: border-box;
}

.nav-dropdown-toggle > span:first-child {
    display: flex;
    align-items: center;

    gap: 17px;

    font-size: 17px;
}

.nav-chevron {
    margin-left: auto;

    font-size: 20px;

    color: #7fa9c3;

    transition:
        transform .2s ease,
        color .2s ease;
}

.nav-dropdown.open .nav-chevron {
    color: #36c5ff;
}


/* =========================
   SIDEBAR FOOTER
   ========================= */

.sidebar-footer {
    padding:
        24px
        25px
        28px;

    border-top:
        1px solid rgba(80, 180, 245, .16);

    color: #8ca8bb;
}

.sidebar-footer .online-line {
    font-size: 12px;

    gap: 10px;
}

.sidebar-footer strong {
    margin-top: 8px;

    color: #d4e6f2;

    font-size: 14px;

    letter-spacing: .3px;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1200px) {

    .sidebar {
        width: 275px;
        min-width: 275px;
    }

    .brand {
        min-height: 245px;
    }

    .brand img {
        width: 105px;
        height: 105px;
    }

    .brand-name strong {
        font-size: 18px;
    }

    .navigation a {
        font-size: 15px;
    }

}


@media (max-width: 850px) {

    .sidebar {
        width: 220px;
        min-width: 220px;
    }

    .brand {
        min-height: 190px;
        padding: 20px 12px;
    }

    .brand img {
        width: 85px;
        height: 85px;
    }

    .brand-name strong {
        font-size: 15px;
    }

    .brand-name span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .navigation {
        padding: 18px 10px;
    }

    .navigation a {
        height: 50px;
        padding: 0 13px;
        font-size: 14px;
    }

}



/* =========================================================
   DASHBOARD DENSITY
   Vista general equivalente a ~75% de zoom
   ========================================================= */

body {
    zoom: 0.75;
    width: 133.333333%;
}


/* Mantener la altura completa */
html,
body {
    min-height: 133.333333vh;
}


/* Evitar que el contenido se sienta demasiado comprimido */
.main {
    min-height: 133.333333vh;
}




/* =========================================================
   CARELIFEINSURANCE MONITORING CENTER
   HEADER FINAL
   ========================================================= */

.header {
    align-items: center;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.header-logo {
    width: 68px;
    height: 68px;
    object-fit: contain;

    flex-shrink: 0;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.35));
}

.header-brand-text {
    min-width: 0;
}

.header-brand-text h1 {
    margin: 2px 0 4px;

    white-space: nowrap;
}

.header-divider {
    margin: 0 10px;

    color: #168ec9;

    font-weight: 300;
}

.header-section-title {
    color: #13c5ff;

    font-size: .72em;

    letter-spacing: 5px;

    font-weight: 700;
}

.header-brand-text p {
    margin-top: 4px;
}


/* =========================================================
   SIDEBAR — MÁS COMPACTO
   ========================================================= */

.sidebar {
    width: 300px;
    min-width: 300px;
}

.brand {
    min-height: 215px;

    padding:
        22px
        18px
        20px;
}

.brand img {
    width: 88px;
    height: 88px;

    margin-bottom: 9px;
}

.brand-name strong {
    font-size: 17px;
}

.brand-name span {
    font-size: 10px;
    letter-spacing: 3.2px;
}


/* MENU */

.navigation {
    padding:
        22px
        14px;
}

.navigation a {
    height: 55px;

    margin-bottom: 7px;

    padding:
        0
        18px;

    gap: 15px;

    font-size: 16px;
}

.navigation a > span:first-child {
    font-size: 20px;
}


/* DASHBOARD ACTIVO */

.navigation a.active {
    min-height: 58px;

    border-left-width: 4px;
}


/* =========================================================
   EVITAR EL DESBORDAMIENTO DEL ZOOM ANTERIOR
   ========================================================= */

body {
    zoom: 1;
    width: auto;
}

html,
body,
.main {
    min-height: 100vh;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .sidebar {
        width: 250px;
        min-width: 250px;
    }

    .header-logo {
        width: 55px;
        height: 55px;
    }

    .header-brand-text h1 {
        font-size: 26px;
    }

    .header-section-title {
        letter-spacing: 3px;
    }

}

@media (max-width: 800px) {

    .sidebar {
        width: 220px;
        min-width: 220px;
    }

    .header-logo {
        display: none;
    }

    .header-brand-text h1 {
        white-space: normal;
        font-size: 23px;
    }

}




/* =========================================================
   WIREGUARD SIDEBAR
   COMPACTO + LEGIBLE
   ========================================================= */

.nav-dropdown-panel {
    margin:
        2px 0 8px;

    padding:
        7px;

    background:
        rgba(1, 16, 30, .55);

    border:
        1px solid rgba(65, 160, 215, .12);

    border-radius:
        9px;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.18);
}


/* RESUMEN */

.wg-nav-summary {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 4px;

    margin-bottom: 7px;
}

.wg-nav-summary > div {
    padding:
        7px 3px;

    text-align: center;

    background:
        rgba(13, 43, 66, .72);

    border-radius: 5px;
}

.wg-nav-summary strong {
    display: block;

    color: #e8f5ff;

    font-size: 12px;

    line-height: 1.1;
}

.wg-nav-summary span {
    display: block;

    margin-top: 3px;

    color: #52748b;

    font-size: 7px;

    letter-spacing: .8px;
}


/* LISTA */

.wg-nav-list {
    display: flex;

    flex-direction: column;

    gap: 5px;

    max-height: 350px;

    overflow-y: auto;

    padding-right: 2px;
}


/* SCROLLBAR */

.wg-nav-list::-webkit-scrollbar {
    width: 4px;
}

.wg-nav-list::-webkit-scrollbar-track {
    background:
        rgba(0,0,0,.15);

    border-radius: 4px;
}

.wg-nav-list::-webkit-scrollbar-thumb {
    background:
        rgba(60, 170, 225, .35);

    border-radius: 4px;
}


/* CADA VPN */

.wg-nav-item {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 49px;

    padding:
        6px 7px 6px 9px;

    background:
        rgba(9, 35, 55, .72);

    border:
        1px solid rgba(65, 150, 205, .08);

    border-radius: 6px;

    box-sizing: border-box;

    transition:
        background .15s ease,
        border-color .15s ease;
}


/* HOVER */

.wg-nav-item:hover {
    background:
        rgba(18, 61, 88, .85);

    border-color:
        rgba(55, 175, 235, .20);
}


/* INFORMACIÓN */

.wg-nav-name {
    display: block;

    max-width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #d9e9f3;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.2;
}

.wg-nav-ip {
    display: block;

    margin-top: 3px;

    color: #557d95;

    font-size: 8px;

    font-family:
        "Consolas",
        "Monaco",
        monospace;

    line-height: 1.1;
}


/* ESTADO */

.wg-nav-status {
    margin-top: 3px;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .4px;

    text-transform: uppercase;
}


/* ONLINE */

.wg-nav-state.online {
    color: #27e89b;

    text-shadow:
        0 0 7px rgba(39,232,155,.35);
}


/* OFFLINE */

.wg-nav-state.offline {
    color: #718b9c;
}


/* DESACTIVADA */

.wg-nav-state.disabled {
    color: #536b7b;
}


/* PUNTO */

.wg-nav-dot {
    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 4px;

    border-radius: 50%;

    background: currentColor;

    vertical-align: middle;
}


/* ACCIONES */

.wg-nav-actions {
    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin-left: 5px;
}

.wg-nav-action {
    min-width: 38px;

    height: 22px;

    padding:
        0 7px;

    border:
        1px solid rgba(80, 165, 210, .24);

    border-radius: 5px;

    background:
        rgba(13, 49, 72, .9);

    color: #8eb2c8;

    font-size: 8px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.wg-nav-action:hover {
    color: #ffffff;

    background:
        rgba(18, 106, 157, .65);

    border-color:
        rgba(45, 181, 240, .45);
}

.wg-nav-action:disabled {
    opacity: .45;

    cursor: wait;
}


/* INDICADOR IZQUIERDO ONLINE */

.wg-nav-item:has(.wg-nav-state.online) {
    border-left:
        2px solid #20df91;
}


/* ACTIVA PERO OFFLINE */

.wg-nav-item:has(.wg-nav-state.offline) {
    border-left:
        2px solid rgba(55, 151, 210, .45);
}


/* DESACTIVADA */

.wg-nav-item:has(.wg-nav-state.disabled) {
    border-left:
        2px solid rgba(80, 105, 120, .20);
}


/* MENSAJES */

.wg-nav-loading,
.wg-nav-error {
    padding:
        14px 8px;

    text-align: center;

    color: #68879b;

    font-size: 9px;
}


/* EN PANTALLAS MÁS PEQUEÑAS */

@media (max-height: 800px) {

    .wg-nav-list {
        max-height: 280px;
    }

    .wg-nav-item {
        min-height: 45px;

        padding:
            5px 6px 5px 8px;
    }

}



/* ============================================================
   AGENTS DASHBOARD
   ============================================================ */

.agents-dashboard-view {
    display: none;
    width: 100%;
    animation: agentsViewIn .25s ease;
}

@keyframes agentsViewIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.agents-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.agents-eyebrow {
    color: #16c8ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 4px;
}

.agents-page-header h2 {
    margin: 0;
    font-size: 27px;
    letter-spacing: .5px;
}

.agents-page-header p {
    margin: 5px 0 0;
    color: #7894a8;
    font-size: 12px;
}

.agents-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid rgba(30,225,153,.35);
    border-radius: 8px;
    background: rgba(15,53,52,.45);
    color: #28e59b;
    font-size: 10px;
    font-weight: 800;
}

.agents-live-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #21e39a;
    box-shadow: 0 0 10px rgba(33,227,154,.7);
}


/* KPI */

.agents-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.agent-kpi {
    min-height: 105px;
    padding: 15px;
    border: 1px solid rgba(27,133,182,.38);
    border-radius: 10px;
    background: linear-gradient(
        145deg,
        rgba(4,39,64,.94),
        rgba(2,24,43,.94)
    );
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.agent-kpi-label {
    color: #7895aa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
}

.agent-kpi-value {
    margin-top: 9px;
    color: #f2f8fc;
    font-size: 31px;
    line-height: 1;
    font-weight: 800;
}

.agent-kpi-status {
    margin-top: 10px;
    color: #7190a4;
    font-size: 8px;
    font-weight: 700;
}

.agent-kpi.ready .agent-kpi-value {
    color: #29e49b;
}

.agent-kpi.paused .agent-kpi-value {
    color: #ffc72d;
}

.agent-kpi.incall .agent-kpi-value {
    color: #ff5968;
}

.agent-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
}

.agent-progress {
    height: 4px;
    flex: 1;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(65,112,139,.35);
}

.agent-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #16b9f3;
    transition: width .4s ease;
}

.agent-kpi-bottom small {
    color: #8fa7b7;
    font-size: 8px;
}


/* MAIN GRID */

.agents-content-grid {
    display: grid;
    grid-template-columns: 290px minmax(430px, 1fr) 290px;
    gap: 12px;
    align-items: start;
}

.agents-list-panel,
.agents-info-panel,
.agents-activity-panel,
.agents-recent-panel,
.agents-stats-panel,
.agents-status-panel,
.agents-campaign-panel {
    border: 1px solid rgba(27,133,182,.38);
    border-radius: 10px;
    background: linear-gradient(
        145deg,
        rgba(3,34,56,.96),
        rgba(2,22,39,.96)
    );
    overflow: hidden;
}

.agents-list-panel {
    min-height: 620px;
}

.agents-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 15px 11px;
    border-bottom: 1px solid rgba(66,120,148,.18);
}

.agents-panel-header strong {
    display: block;
    color: #eef7fb;
    font-size: 12px;
    letter-spacing: .4px;
}

.agents-panel-header span {
    display: block;
    margin-top: 4px;
    color: #708da1;
    font-size: 9px;
}


/* SEARCH */

.agents-search {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px;
    padding: 0 10px;
    height: 34px;
    border: 1px solid rgba(41,124,161,.45);
    border-radius: 7px;
    background: rgba(1,17,30,.72);
}

.agents-search span {
    color: #63a8c5;
    font-size: 18px;
}

.agents-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #dbeaf2;
    font-size: 11px;
}

.agents-search input::placeholder {
    color: #557489;
}


/* AGENT LIST */

.agents-view-list {
    max-height: 545px;
    overflow-y: auto;
    padding: 0 7px 8px;
}

.agents-view-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 49px;
    padding: 7px 8px;
    margin-bottom: 3px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: .18s ease;
}

.agents-view-item:hover {
    background: rgba(18,101,143,.18);
    border-color: rgba(34,158,209,.28);
}

.agents-view-item.selected {
    background: linear-gradient(
        90deg,
        rgba(8,116,178,.42),
        rgba(7,71,111,.2)
    );
    border-color: rgba(20,173,236,.48);
}

.agent-list-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.agent-list-dot.ready {
    background: #21df98;
    box-shadow: 0 0 7px rgba(33,223,152,.55);
}

.agent-list-dot.paused {
    background: #ffc52c;
}

.agent-list-dot.incall {
    background: #ff5364;
    box-shadow: 0 0 7px rgba(255,83,100,.5);
}

.agent-list-dot.offline {
    background: #667f8e;
}

.agent-list-main {
    min-width: 0;
    flex: 1;
}

.agent-list-name {
    overflow: hidden;
    color: #e4f0f5;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-list-meta {
    margin-top: 3px;
    color: #708b9d;
    font-family: Consolas, monospace;
    font-size: 8px;
}

.agent-list-status {
    flex: 0 0 auto;
    font-size: 8px;
    font-weight: 800;
}

.agent-list-status.ready {
    color: #26e39b;
}

.agent-list-status.paused {
    color: #ffc52c;
}

.agent-list-status.incall {
    color: #ff5968;
}

.agent-list-status.offline {
    color: #738b99;
}


/* CENTER */

.agents-center-column,
.agents-right-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.selected-agent-content {
    display: grid;
    grid-template-columns: 70px 1fr 155px;
    gap: 15px;
    align-items: center;
    padding: 17px;
}

.selected-agent-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(145deg,#164a70,#0a2d49);
    border: 1px solid rgba(55,177,229,.35);
    color: #bde9fb;
    font-size: 21px;
    font-weight: 800;
}

.selected-agent-data h3 {
    margin: 0 0 8px;
    color: #f0f7fb;
    font-size: 17px;
}

.selected-agent-data div {
    margin-top: 4px;
    color: #7794a7;
    font-size: 9px;
}

.selected-agent-data strong {
    color: #c7dce6;
    font-weight: 700;
}

.selected-agent-state {
    padding: 11px 13px;
    border-left: 2px solid #16c8ff;
    border-radius: 5px;
    background: rgba(2,22,39,.62);
}

.selected-agent-state span,
.selected-agent-state small {
    display: block;
    color: #708b9d;
    font-size: 8px;
}

.selected-agent-state strong {
    display: block;
    margin: 6px 0 11px;
    color: #2be39d;
    font-size: 16px;
}

.selected-agent-state b {
    display: block;
    margin-top: 4px;
    color: #edf7fb;
    font-size: 18px;
}

.selected-agent-badge {
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(21,183,117,.15);
    color: #2be39d !important;
    font-size: 8px !important;
    font-weight: 800;
}


/* ACTIVITY */

.agent-activity-empty {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6e899a;
}

.agent-activity-icon {
    margin-bottom: 8px;
    color: #16bff7;
    font-size: 28px;
}

.agent-activity-empty strong {
    color: #a9c1cd;
    font-size: 11px;
}

.agent-activity-empty span {
    margin-top: 5px;
    font-size: 9px;
}


/* RECENT CALLS */

.agents-recent-table-wrap {
    overflow-x: auto;
}

.agents-recent-table {
    width: 100%;
    border-collapse: collapse;
}

.agents-recent-table th {
    padding: 8px 10px;
    color: #65869a;
    font-size: 8px;
    text-align: left;
    letter-spacing: .5px;
}

.agents-recent-table td {
    padding: 8px 10px;
    border-top: 1px solid rgba(64,112,136,.13);
    color: #b8ccd6;
    font-size: 9px;
}

.agents-recent-table td:nth-child(4) {
    color: #20d99a;
    font-weight: 700;
}


/* RIGHT */

.agent-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(65,112,137,.13);
}

.agent-stat-row:last-child {
    border-bottom: 0;
}

.agent-stat-row span {
    color: #7894a5;
    font-size: 9px;
}

.agent-stat-row strong {
    max-width: 125px;
    overflow: hidden;
    color: #dcebf2;
    font-size: 9px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* STATUS */

.agent-status-distribution {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
}

.status-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background:
        conic-gradient(
            #20df98 0deg,
            #20df98 120deg,
            #ffc52c 120deg,
            #ffc52c 180deg,
            #ff5364 180deg,
            #ff5364 240deg,
            #35566b 240deg,
            #35566b 360deg
        );
}

.status-ring::before {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #062238;
}

.status-ring > div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.status-ring strong {
    display: block;
    color: #edf7fb;
    font-size: 23px;
}

.status-ring span {
    color: #7895a6;
    font-size: 8px;
}

.status-legend {
    flex: 1;
}

.status-legend div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    color: #91a9b6;
    font-size: 8px;
}

.status-legend strong {
    margin-left: auto;
    color: #dceaf0;
}

.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.legend-dot.ready {
    background: #20df98;
}

.legend-dot.paused {
    background: #ffc52c;
}

.legend-dot.incall {
    background: #ff5364;
}


/* CAMPAIGNS */

.agents-campaign-list {
    padding: 8px 14px 13px;
}

.agent-campaign-row {
    display: grid;
    grid-template-columns: 80px 1fr 25px;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.agent-campaign-name {
    overflow: hidden;
    color: #b9d0db;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-campaign-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(58,100,121,.3);
}

.agent-campaign-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #18bff4;
}

.agent-campaign-count {
    color: #bcd4df;
    font-size: 8px;
    text-align: right;
}


/* LOADING */

.agents-loading {
    padding: 25px 10px;
    color: #668495;
    font-size: 9px;
    text-align: center;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .agents-kpis {
        grid-template-columns: repeat(3,1fr);
    }

    .agents-content-grid {
        grid-template-columns: 250px minmax(350px,1fr);
    }

    .agents-right-column {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

}


@media (max-width: 850px) {

    .agents-kpis {
        grid-template-columns: repeat(2,1fr);
    }

    .agents-content-grid {
        grid-template-columns: 1fr;
    }

    .agents-right-column {
        display: flex;
    }

    .selected-agent-content {
        grid-template-columns: 60px 1fr;
    }

    .selected-agent-state {
        grid-column: 1 / -1;
    }

}


/* ============================================================
   AGENTS VIEW - VISIBILITY CONTROL
   ============================================================ */

body.agents-view-active .main-grid {
    display: none !important;
}

body.agents-view-active #agents-dashboard-view {
    display: block !important;
}

body:not(.agents-view-active) #agents-dashboard-view {
    display: none !important;
}


/* ===== DASHBOARD ZOOM 60% ===== */
html {
    zoom: 0.70;
}

/* ===== DASHBOARD ZOOM 60% ===== */
html {
    zoom: 0.60;
}

/* =========================================================
   VISTA AGENTES
   Ocultar completamente los widgets del Dashboard
   cuando la pestaña AGENTES está activa.
   Los módulos siguen existiendo en Dashboard.
   ========================================================= */

body.agents-view-active .main-grid {
    display: none !important;
}

/* Mantener visible únicamente el contenido propio de Agentes */
body.agents-view-active #agents-dashboard-view {
    display: block !important;
    width: 100%;
}


/* =========================================================
   ACTIVIDAD DEL AGENTE - REAL TIME
   ========================================================= */

.agent-activity-live {
    width: 100%;
}

.activity-live-grid {
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1.1fr);
    min-height: 250px;
}

.activity-current {
    padding: 18px 22px;
    border-right: 1px solid rgba(0, 190, 255, 0.25);
}

.activity-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    min-height: 28px;
}

.activity-row span {
    font-size: 9px;
    letter-spacing: 1.2px;
    color: #6f9bb8;
}

.activity-row strong {
    font-size: 12px;
    color: #e8f7ff;
    text-align: right;
}

#activity-status {
    color: #00d9ff;
}

#activity-reason {
    color: #ffbf24;
}

.activity-divider {
    height: 1px;
    background: rgba(0, 170, 230, 0.16);
    margin: 10px 0;
}

.activity-events {
    padding: 18px 22px;
    min-width: 0;
}

.activity-events-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #d9f5ff;
    margin-bottom: 10px;
}

.activity-event {
    display: grid;
    grid-template-columns: 10px 70px 1fr;
    gap: 9px;
    align-items: center;
    min-height: 27px;
    padding: 3px 8px;
    border-radius: 4px;
}

.activity-event:nth-child(odd) {
    background: rgba(0, 100, 150, 0.10);
}

.activity-event-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d9ff;
}

.activity-event-time {
    color: #759bb2;
    font-size: 10px;
}

.activity-event-text {
    color: #dceef7;
    font-size: 10px;
}

.activity-empty {
    color: #64859a;
    font-size: 10px;
    padding: 15px 0;
}

@media (max-width: 900px) {
    .activity-live-grid {
        grid-template-columns: 1fr;
    }

    .activity-current {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 190, 255, 0.25);
    }
}