:root{
  --bg:#161d31; --card:#283046; --card2:#343d55; --card3:#3b4660; --border:#3b4253; --input-border:#404656;
  --text:#b4b7bd; --head:#d0d2d6; --muted:#676d7d; --primary:#005ae3; --primary-glow:rgba(0,90,227,.7);
  --success:#28c76f; --metric-green:#2c9231; --danger:#ea5455; --warning:#ff9f43;
  --shadow:0 4px 24px 0 rgba(34,41,47,.24);
}
*{box-sizing:border-box}
html{font-size:14px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
svg.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.hide{display:none!important}

/* ── Sidebar ── */
.main-menu{position:fixed;top:0;left:0;bottom:0;width:260px;background:var(--card);box-shadow:0 0 15px 0 rgba(34,41,47,.05);z-index:1030;overflow-y:auto;padding:18px 14px 21px;transition:transform .25s}
.brand{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 3px}
.brand a{display:flex;align-items:center;gap:8px}
.brand .mark{width:44px;height:44px}
.brand .word{font-size:22px;line-height:1;color:#fff;letter-spacing:-.3px;font-weight:300;white-space:nowrap}
.brand .word b{font-weight:700}
.brand .toggle{font-size:22px;color:var(--head);opacity:.85;background:none;border:0;padding:0}
.nav{list-style:none;margin:24px 0 0;padding:0}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 15px;border-radius:4px;color:var(--head);font-size:15.4px;line-height:1.45;white-space:nowrap}
.nav a .i{font-size:18px}
.nav a:hover{background:rgba(255,255,255,.04)}
.nav a.active{background:var(--primary);color:#fff;box-shadow:0 0 10px 1px var(--primary-glow)}
.nav .badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:10px;font-size:11px;padding:0 6px}

/* ── Layout ── */
.app-content{margin-left:260px;padding:18px 28px 40px;min-height:100vh}
.header-card{background:var(--card);border-radius:6px;box-shadow:var(--shadow);height:62px;display:flex;align-items:center;gap:26px;padding:0 21px;margin-bottom:28px;position:sticky;top:18px;z-index:1020}
.header-card h4{margin:0;font-size:19.6px;font-weight:500;color:var(--head);white-space:nowrap;display:flex;align-items:center;gap:14px}
.header-card h4 .i{font-size:20px;color:var(--head)}
.header-card .tools{display:flex;gap:14px;margin-left:-4px}
.header-card .tools .i{font-size:20px;color:var(--head);cursor:pointer}
.header-card .sp{flex:1}
.lang{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--head)}
.flag{width:22px;height:15px;border-radius:2px;background:linear-gradient(#aa151b 25%,#f1bf00 25%,#f1bf00 75%,#aa151b 75%);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.awards{display:flex;flex-direction:column;gap:5px;min-width:225px}
.awards .row{display:flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:13px}
.awards .row .amt{margin-left:auto;color:var(--head);font-weight:600}
.awards .bar{height:6px;border-radius:3px;background:var(--card2);overflow:hidden}
.awards .bar i{display:block;height:100%;width:5.6%;background:var(--primary);border-radius:3px}
.user{display:flex;align-items:center;gap:12px;text-align:right}
.user .n{font-weight:600;color:var(--head);font-size:14px;line-height:1.2;white-space:nowrap}
.user .r{font-size:11px;color:var(--text)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:14px}
.menu-btn{display:none;background:none;border:0;color:var(--head);font-size:24px;padding:0}

.card{background:var(--card);border-radius:6px;box-shadow:var(--shadow);margin-bottom:24px;position:relative}
.card-header{padding:21px 21px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}
.card-header.nb{border-bottom:0}
.card-title{margin:0;font-size:18px;font-weight:500;color:var(--head)}
.card-sub{margin:4px 0 0;font-size:13px;color:var(--text)}
.card-body{padding:21px}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px;border-bottom:1px solid var(--border)}

/* ── Buttons / inputs ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 21px;border-radius:5px;border:1px solid var(--primary);background:var(--primary);color:#fff;font-size:14px;font-weight:500;line-height:1.2;transition:filter .15s}
.btn:hover{filter:brightness(1.12)}
.btn.sm{padding:8px 16px;font-size:13px}
.btn.outline{background:transparent;border-color:var(--head);color:var(--head)}
.btn.outline:hover{background:rgba(255,255,255,.05)}
.btn.ghost{background:transparent;border-color:var(--input-border);color:var(--head)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.w-40{min-width:140px}
.ibtn{width:44px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--card2);border:0;color:var(--head);font-size:18px;transition:background .15s}
.ibtn:hover,.ibtn.on{background:#46506a}
.ibtn:first-child{border-radius:5px 0 0 5px}.ibtn:last-child{border-radius:0 5px 5px 0}
.ibtn.brand-i{width:50px}
.btn-group{display:inline-flex;gap:2px}
.toolbar{display:flex;align-items:center;gap:16px;padding:21px 14px 0}
.toolbar .sp{flex:1}
.toolbar .upd{color:var(--text);font-size:14px}
.pill-ok{display:inline-flex;align-items:center;gap:6px;background:rgba(40,199,111,.14);color:var(--success);font-size:12px;font-weight:600;border-radius:20px;padding:3px 10px}
.notice{margin:21px 14px 0;border-radius:5px;background:rgba(255,159,67,.1);border:1px solid rgba(255,159,67,.2);padding:14px 14px;color:var(--warning);font-size:14px}
.notice .t{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}
.notice .t .i{cursor:pointer;font-size:20px}
.notice a{font-style:italic;text-decoration:underline;display:inline-block;margin-top:10px;cursor:pointer}

.filters{display:flex;gap:20px;flex-wrap:wrap;padding:21px 14px;align-items:flex-end}
.filters .f{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 150px}
.filters label,.lbl{font-size:12px;color:var(--text);display:flex;align-items:center;gap:4px;line-height:1.3;white-space:nowrap}
.filters label .i{font-size:14px}
.field,select.field,input.field,textarea.field{width:100%;height:40px;background:var(--card);border:1px solid var(--input-border);border-radius:4px;color:var(--head);font-family:inherit;font-size:14px;padding:5px 10px;outline:none;transition:border-color .15s}
textarea.field{height:auto;min-height:80px;padding:10px}
.field::placeholder{color:#5d6479}
.field:focus{border-color:var(--primary)}
select.field{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b4b7bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
select.field option{background:var(--card);color:var(--head)}
input[type=date].field{color-scheme:dark}
.more-filters{width:100%;text-align:right;color:var(--head);font-size:14px;cursor:pointer;display:flex;justify-content:flex-end;gap:4px;align-items:center}
.row-fields{display:flex;gap:20px;flex-wrap:wrap;width:100%}

/* ── Tabs ── */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:-1px}
.tab{display:flex;align-items:center;gap:10px;padding:20px 20px;background:#222b45;color:var(--text);font-size:18px;font-weight:500;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;transition:.15s}
.tab .i{font-size:20px}
.tab:hover{color:var(--head)}
.tab.active{background:var(--card);color:var(--primary);border-bottom-color:var(--primary)}
.tabs-flat{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:21px}
.tabs-flat .tab-f{display:flex;align-items:center;gap:8px;padding:14px 26px;background:none;border:0;border-bottom:2px solid transparent;color:var(--head);font-size:15px;font-weight:500;margin-bottom:-1px}
.tabs-flat .tab-f.active{color:var(--primary);border-bottom-color:var(--primary)}
.tabs-flat .tab-f .i{font-size:16px}
.tab-body{background:var(--card);border-radius:0 0 6px 6px;box-shadow:var(--shadow);margin-bottom:24px}

/* ── Tables ── */
.tbl-wrap{overflow:auto;border-radius:0 0 6px 6px;max-height:640px}
table.tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:14px}
.tbl th{position:sticky;top:0;z-index:2;background:var(--card2);color:var(--head);text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.5px;padding:14px 16px;text-align:left;white-space:nowrap;border-right:1px solid rgba(255,255,255,.05);cursor:pointer;user-select:none}
.tbl th.num,.tbl td.num{text-align:right}
.tbl th.ctr,.tbl td.ctr{text-align:center}
.tbl th .i{font-size:13px;margin-left:4px;opacity:.7}
.tbl th .sort{opacity:.9;margin-left:4px}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--border);border-right:1px solid rgba(255,255,255,.05);color:var(--head);vertical-align:middle;background:var(--card)}
.tbl td.name{min-width:200px;text-align:center}
.tbl tbody tr:hover td{background:#2c354e}
.tbl tfoot td{position:sticky;bottom:0;z-index:2;background:var(--card2);font-weight:700;border-bottom:0;font-size:13px;white-space:nowrap}
.tbl .pos{color:var(--success)}.tbl .neg{color:var(--danger)}
.tbl.empty td{text-align:center;color:var(--text)}
.na{color:var(--text)}
.help-link{display:flex;align-items:center;gap:6px;padding:14px 4px;font-size:13px;color:var(--text)}

.switch{position:relative;display:inline-block;width:46px;height:24px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#4a5169;border-radius:24px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#d0d2d6;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--primary)}
.switch input:checked+span:before{transform:translateX(22px)}
.chk{width:16px;height:16px;appearance:none;-webkit-appearance:none;border:1px solid var(--input-border);border-radius:3px;background:transparent;cursor:pointer;display:inline-block;vertical-align:middle}
.chk:checked{background:var(--primary);border-color:var(--primary)}

/* ── Resumen grid ── */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;grid-auto-rows:94px;margin-bottom:20px}
.grid12 .card{margin:0;height:100%}
.kpi{padding:21px 21px 7px;position:relative}
.kpi .t{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;color:var(--head);font-size:14px;font-weight:500;line-height:1.25}
.kpi .t .i{font-size:15px;color:var(--text);opacity:.8;position:absolute;right:21px;top:22px}
.kpi .t span{padding-right:22px}
.kpi h2{margin:10px 0 0;font-size:24px;font-weight:600;color:var(--head);line-height:1.2}
.kpi.g .t,.kpi.g h2{color:var(--metric-green)}
.kpi.r .t,.kpi.r h2{color:var(--danger)}
.kpi.g .t .i,.kpi.r .t .i{color:inherit}
.c-title{display:flex;justify-content:space-between;align-items:flex-start;padding:21px 21px 0;color:var(--head);font-size:18px;font-weight:500;line-height:1.25}
.c-title .i{font-size:16px;color:var(--text);opacity:.8}
.prod-list{padding:14px 21px 10px;display:flex;flex-direction:column;gap:6px}
.prod{display:grid;grid-template-columns:1fr 30px 38px 52px;align-items:center;gap:6px;font-size:14px;color:var(--text)}
.prod .nm{color:var(--text);line-height:1.3}
.prod .ct{text-align:right;color:var(--head)}
.prod .pc{text-align:right;color:var(--head)}
.donut{width:30px;height:30px}
.chart-pad{padding:14px 21px 21px}
.funnel{padding:18px 18px 12px}
.sel-mini{height:36px;width:auto;min-width:90px}

/* ── Modal / overlay ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal.lg{max-width:720px}
.modal h5{margin:0;padding:20px 24px;font-size:18px;font-weight:500;color:var(--head);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal h5 .i{cursor:pointer;font-size:20px}
.modal .mb{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.modal .mf{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px}
.fgrp{display:flex;flex-direction:column;gap:6px}
.fgrp .h{font-size:12px;color:var(--text)}
.pop{position:fixed;z-index:2100;background:var(--card);border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5);padding:20px;max-width:350px;color:var(--head);font-size:16px}
.pop .b{display:flex;justify-content:space-between;margin-top:22px}
.pop .btn.o2{background:transparent;border:1px solid var(--text);color:var(--text)}
.menu-pop{position:absolute;right:0;top:100%;background:var(--card2);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:50;min-width:170px;overflow:hidden}
.menu-pop a{display:block;padding:10px 16px;color:var(--head);font-size:14px;cursor:pointer}
.menu-pop a:hover{background:var(--card3)}
.menu-pop a.dg{color:var(--danger)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card3);color:#fff;padding:12px 20px;border-radius:6px;z-index:3000;box-shadow:var(--shadow);font-size:14px}
code.blk,pre.blk{display:block;background:#1e2640;border:1px solid var(--input-border);border-radius:4px;padding:12px;color:#cfd3e0;font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;margin:0}

/* ── Lists / cards (integraciones, tarifas, etc.) ── */
.conn{display:flex;align-items:center;gap:14px;padding:18px 18px;background:#2f3852;border-radius:6px;margin-bottom:20px;color:var(--head);font-size:18px;font-weight:500;cursor:pointer;transition:filter .15s}
.conn:hover{filter:brightness(1.1)}
.conn .logo{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:18px;flex:none}
.conn .chev{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--card3);display:flex;align-items:center;justify-content:center}
.item-box{border:1px solid var(--input-border);border-radius:6px;padding:14px 16px;margin:14px 0;position:relative;color:var(--text);font-size:13px}
.item-box b{display:block;color:var(--head);margin-bottom:4px;font-size:13px;font-weight:600}
.item-box .dots{position:absolute;right:10px;top:12px;cursor:pointer;color:var(--head);font-size:18px}
.item-box .st{margin-top:2px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.setup-banner{padding:16px 14px;color:var(--head);font-size:14px;margin-bottom:6px}
.setup-banner b{display:block;margin-bottom:12px}
.setup-banner a{text-decoration:underline;margin-left:6px;cursor:pointer}
.row-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0}
.row-line .ttl{color:var(--head);font-size:14px;font-weight:500}
.sect-h{color:var(--head);font-weight:600;margin:20px 0 10px}
.radio-box{display:flex;align-items:center;gap:10px;border:1px solid var(--input-border);border-radius:6px;padding:12px 14px;margin-bottom:10px;color:var(--head);cursor:pointer}
.radio-box.on{border-color:var(--primary);color:var(--primary);background:rgba(0,90,227,.08)}
.radio-box i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;display:inline-block;position:relative}
.radio-box.on i:after{content:"";position:absolute;inset:2px;background:currentColor;border-radius:50%}
.preview{border:1px dashed var(--input-border);border-radius:6px;padding:16px;color:var(--text);font-size:13px;margin-top:8px}

.login-note{font-size:12px;color:var(--muted);padding:6px 4px}

@media(max-width:1199px){
  .grid12{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none!important;grid-auto-rows:minmax(94px,auto)}
  .grid12>*{grid-column:span 3!important;grid-row:auto!important}
  .grid12>.wide{grid-column:span 6!important}
  .grid12>.tall{grid-row:span 3!important}
  .awards{display:none}
}
@media(max-width:991px){
  .main-menu{transform:translateX(-100%)}
  body.menu-open .main-menu{transform:none}
  .app-content{margin-left:0;padding:14px 14px 40px}
  .menu-btn{display:block}
  .header-card{gap:14px;top:14px}
  .header-card h4{font-size:16px}
  .user .n,.user .r,.lang{display:none}
  .tabs{grid-template-columns:repeat(2,1fr);gap:8px}
  .tab{font-size:15px;padding:14px}
  .two-col{grid-template-columns:1fr}
  .grid12>*{grid-column:span 6!important}
}
@media(max-width:991px){
  .header-card .tools,.header-card .pal{display:none}
  .header-card h4{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .page-title{flex-wrap:wrap}
  .page-title>div{flex-wrap:wrap;gap:12px!important}
  .toolbar{flex-wrap:wrap}
  .filters .f{flex:1 1 100%}
}