@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05070B;--bg-card:#0A0C12;--bg-card2:#0D0F18;--bg-deep:#080A10;
  --white:#FFFFFF;--gray:#BFC7D5;--gray-dim:#6B7280;--gray-off:#4B5563;
  --cyan:#00C8FF;--yellow:#FFE600;--gold:#FFC400;--green:#34D399;--red:#F87171;
  --border-y:rgba(255,230,0,0.12);--border-c:rgba(0,200,255,0.18);--border-w:rgba(255,255,255,0.07);
  --glow-y:rgba(255,230,0,0.06);--glow-c:rgba(0,200,255,0.06);
  --radius:8px;--radius-lg:12px;
  --font:'Space Grotesk',system-ui,sans-serif;--trans:0.15s ease;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--gray);font-family:var(--font);font-size:14px;line-height:1.6;min-height:100vh}
a{color:var(--cyan);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--yellow)}
img{max-width:100%;display:block}
input,textarea,select,button{font-family:var(--font)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-y);border-radius:3px}

.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;background:var(--bg-card);border-bottom:2px solid var(--yellow);backdrop-filter:blur(10px)}
.topbar-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--white)}
.topbar-brand em{color:var(--yellow);font-style:normal}
.brand-icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--yellow),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--bg-card);flex-shrink:0}
.brand-img{width:30px;height:30px;object-fit:contain;border-radius:8px}
.user-pill{display:flex;align-items:center;gap:7px;background:var(--bg-deep);border:1px solid var(--border-y);border-radius:20px;padding:4px 12px 4px 6px}
.user-avatar{width:24px;height:24px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--bg-card)}
.user-name{font-size:11px;color:var(--gray)}
.plan-tag{background:var(--yellow);color:var(--bg-card);font-size:8px;font-weight:700;padding:1px 6px;border-radius:8px}

.panel-layout{display:flex;min-height:calc(100vh - 52px)}
.sidebar{width:185px;flex-shrink:0;background:var(--bg-deep);border-right:1px solid var(--border-y);padding:8px 0;display:flex;flex-direction:column;overflow-y:auto;position:sticky;top:52px;height:calc(100vh - 52px)}
.sb-section{font-size:8px;font-weight:700;color:rgba(255,230,0,0.4);text-transform:uppercase;letter-spacing:.1em;padding:12px 14px 4px}
.sidebar a{display:flex;align-items:center;gap:7px;padding:7px 14px;color:var(--gray-dim);font-size:11px;font-weight:500;border-left:3px solid transparent;cursor:pointer;transition:all var(--trans)}
.sidebar a:hover{color:var(--white);background:rgba(255,255,255,0.02)}
.sidebar a.active{color:var(--yellow);background:var(--glow-y);border-left-color:var(--yellow);font-weight:600}
.sidebar a.sub{padding-left:28px;font-size:10px;color:var(--gray-off)}
.sidebar a.sub:hover{color:var(--cyan);background:var(--glow-c)}
.sidebar a.sub.active{color:var(--cyan);background:var(--glow-c);border-left-color:var(--cyan)}
.sidebar a.danger{color:var(--red)}
.sidebar a.danger:hover{background:rgba(248,113,113,0.05)}
.sb-sep{height:1px;background:var(--border-y);margin:6px 12px}
.sb-plan{margin:10px 10px 6px;background:var(--glow-y);border:1px solid var(--border-y);border-radius:var(--radius);padding:9px 11px}
.sb-plan-label{font-size:8px;color:rgba(255,230,0,0.4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.sb-plan-name{font-size:11px;font-weight:700;color:var(--yellow)}
.sb-plan-renew{font-size:8px;color:var(--gray-dim);margin-top:1px}

.panel-content{flex:1;padding:22px;background:var(--bg);overflow-x:hidden}
.page-header{margin-bottom:16px}
.page-header h1{font-size:17px;font-weight:700;color:var(--white);margin-bottom:3px}
.page-header p{font-size:11px;color:var(--gray-dim);max-width:600px;line-height:1.5}

.status-bar{display:flex;align-items:center;gap:7px;background:rgba(0,200,255,0.05);border:1px solid rgba(0,200,255,0.18);border-radius:var(--radius);padding:6px 12px;font-size:10px;color:var(--cyan);margin-bottom:14px;font-weight:500}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.metric-card{border-radius:var(--radius);padding:12px 13px}
.metric-card.y{background:#0E0C00;border:1px solid rgba(255,230,0,0.28)}
.metric-card.c{background:#00060E;border:1px solid rgba(0,200,255,0.22)}
.metric-card.w{background:var(--bg-card2);border:1px solid var(--border-w)}
.metric-card.g{background:#001A08;border:1px solid rgba(52,211,153,0.2)}
.metric-label{font-size:8.5px;color:var(--gray-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.metric-value{font-size:22px;font-weight:700;line-height:1}
.metric-value.y{color:var(--yellow)}.metric-value.c{color:var(--cyan)}.metric-value.w{color:var(--white)}.metric-value.g{color:var(--green)}
.metric-sub{font-size:8px;color:var(--gray-dim);margin-top:3px}

.info-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.info-cards.cols3{grid-template-columns:repeat(3,1fr)}
.info-card{background:var(--bg-card2);border:1px solid var(--border-w);border-radius:var(--radius);padding:9px 12px}
.info-label{font-size:8px;color:var(--gray-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.info-value{font-size:12px;font-weight:700;color:var(--white)}
.info-value.cyan{color:var(--cyan)}.info-value.yellow{color:var(--yellow)}.info-value.green{color:var(--green)}

.section-title{font-size:11px;font-weight:700;color:var(--white);border-bottom:1px solid var(--border-y);padding-bottom:6px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.acc-y{color:var(--yellow)}.acc-c{color:var(--cyan)}
.title-action{margin-left:auto}

.chart-block{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.chart-label{font-size:8px;color:rgba(255,230,0,0.4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.chart-bar{flex:1;border-radius:2px 2px 0 0;min-width:6px}
.chart-xlabels{display:flex;gap:6px;margin-top:5px}
.chart-xlabels span{flex:1;font-size:8px;color:var(--gray-dim);text-align:center}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.table-wrap{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
thead tr{background:rgba(255,230,0,0.03);border-bottom:1px solid var(--border-y)}
thead th{padding:8px 11px;text-align:left;color:rgba(255,230,0,0.4);font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;white-space:nowrap}
tbody tr{border-bottom:1px solid rgba(255,255,255,0.03);transition:background var(--trans)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,0.015)}
tbody td{padding:9px 11px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
td.td-white{color:var(--white);font-weight:500}
td.td-mono{font-family:monospace;font-size:10px;color:var(--gray-dim)}
td.td-yellow{color:var(--yellow);font-weight:700}
td.td-red{color:var(--red);font-weight:700}
td.td-green{color:var(--green);font-weight:500}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:8.5px;font-weight:600}
.badge::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-active{background:rgba(0,200,255,0.1);color:var(--cyan);border:1px solid rgba(0,200,255,0.2)}
.badge-paused{background:rgba(107,114,128,0.1);color:var(--gray-dim);border:1px solid rgba(107,114,128,0.15)}
.badge-ok{background:rgba(52,211,153,0.1);color:var(--green);border:1px solid rgba(52,211,153,0.18)}
.badge-warn{background:rgba(255,230,0,0.1);color:var(--yellow);border:1px solid rgba(255,230,0,0.2)}
.badge-danger{background:rgba(248,113,113,0.1);color:var(--red);border:1px solid rgba(248,113,113,0.2)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--radius);font-size:11px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all var(--trans);text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--yellow);color:var(--bg-card)}
.btn-primary:hover{background:var(--gold);color:var(--bg-card)}
.btn-cyan{background:var(--cyan);color:var(--bg-card)}
.btn-outline{background:transparent;color:var(--gray);border-color:var(--border-w)}
.btn-outline:hover{color:var(--white);border-color:rgba(255,255,255,0.2)}
.btn-outline-y{background:transparent;color:var(--yellow);border-color:var(--border-y)}
.btn-outline-y:hover{background:var(--glow-y)}
.btn-outline-c{background:transparent;color:var(--cyan);border-color:var(--border-c)}
.btn-outline-c:hover{background:var(--glow-c);color:var(--white)}
.btn-danger{background:transparent;color:var(--red);border-color:rgba(248,113,113,0.22)}
.btn-danger:hover{background:rgba(248,113,113,0.07)}
.btn-sm{padding:4px 10px;font-size:9px}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}

.content-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:14px;margin-bottom:10px}
.content-card.cy{border:1px solid var(--border-c)}
.content-card.ye{border:1px solid var(--border-y)}
.content-card.wh{border:1px solid var(--border-w)}
.card-label{font-size:8.5px;color:var(--gray-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;display:flex;align-items:center;justify-content:space-between}
.card-text{color:var(--gray);font-size:10px;line-height:1.6;font-style:italic;background:rgba(255,255,255,0.02);border:1px solid var(--border-w);border-radius:5px;padding:7px 9px;margin:5px 0 7px}

.kw-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.kw-tag{padding:2px 8px;background:rgba(255,230,0,0.07);border:1px solid var(--border-y);border-radius:4px;font-size:9px;color:var(--yellow);font-family:monospace}

.var-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.var-chip{padding:2px 7px;background:rgba(0,200,255,0.06);border:1px solid var(--border-c);border-radius:4px;font-size:8.5px;color:var(--cyan);font-family:monospace;cursor:pointer;transition:all var(--trans)}
.var-chip:hover{background:rgba(0,200,255,0.12)}

.form-group{margin-bottom:12px}
.form-label{display:block;font-size:10px;font-weight:600;color:var(--white);margin-bottom:5px}
.form-hint{font-size:9px;color:var(--gray-dim);margin-top:4px}
textarea.form-ctrl,input.form-ctrl,select.form-ctrl{width:100%;background:var(--bg-deep);border:1px solid var(--border-w);border-radius:var(--radius);padding:8px 10px;color:var(--white);font-size:10px;outline:none;transition:border-color var(--trans);font-family:var(--font);line-height:1.55}
textarea.form-ctrl:focus,input.form-ctrl:focus,select.form-ctrl:focus{border-color:var(--cyan)}
textarea.form-ctrl{min-height:60px;resize:vertical}
textarea.form-ctrl:disabled,input.form-ctrl:disabled{color:var(--gray-off);cursor:not-allowed;border-color:rgba(255,255,255,0.04)}
select.form-ctrl{color:var(--yellow)}

.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.toggle-label{font-size:9px;color:var(--gray-dim)}
.toggle-label.on{color:var(--cyan)}
.toggle{width:28px;height:15px;background:rgba(107,114,128,0.25);border-radius:8px;position:relative;cursor:pointer;flex-shrink:0;transition:background var(--trans)}
.toggle.on{background:var(--cyan)}
.toggle::after{content:'';position:absolute;width:11px;height:11px;background:var(--white);border-radius:50%;top:2px;left:2px;transition:left var(--trans)}
.toggle.on::after{left:15px}

.schedule-block{background:var(--bg-deep);border:1px solid var(--border-w);border-radius:var(--radius);padding:8px 10px;margin-top:7px}
.schedule-row{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:9px;color:var(--gray)}
.schedule-day{width:55px;font-weight:600;color:var(--white);font-size:9px}
.schedule-sep{color:var(--gray-dim);font-size:8px}
input.time-input{background:var(--bg-card2);border:1px solid var(--border-y);border-radius:4px;padding:2px 6px;color:var(--yellow);font-size:9px;width:44px;text-align:center;outline:none}

.sub-tabs{display:flex;border-bottom:1px solid var(--border-w);margin-bottom:12px}
.sub-tab{padding:6px 12px;font-size:10px;font-weight:600;color:var(--gray-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all var(--trans)}
.sub-tab.active{color:var(--yellow);border-bottom-color:var(--yellow)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;margin-bottom:14px}
.pub-card{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all var(--trans)}
.pub-card:hover{border-color:rgba(255,230,0,0.3);transform:translateY(-2px)}
.pub-thumb{height:80px;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:28px;position:relative}
.pub-thumb img{width:100%;height:100%;object-fit:cover}
.pub-status{position:absolute;top:5px;right:5px}
.pub-info{padding:9px 10px}
.pub-name{font-size:10px;font-weight:600;color:var(--white);margin-bottom:3px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pub-id{font-size:8.5px;color:var(--gray-dim);font-family:monospace;margin-bottom:3px}
.pub-price{font-size:12px;font-weight:700;color:var(--yellow);margin-bottom:3px}
.pub-msg-ok{font-size:8px;color:var(--green)}
.pub-msg-no{font-size:8px;color:var(--gray-off)}

.paginator{display:flex;align-items:center;justify-content:space-between}
.paginator-info{font-size:10px;color:var(--gray-dim)}
.paginator-btns{display:flex;gap:4px}
.pag-btn{background:var(--bg-card);border:1px solid var(--border-w);border-radius:5px;padding:4px 9px;font-size:10px;color:var(--gray);cursor:pointer;font-family:var(--font);transition:all var(--trans)}
.pag-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.pag-btn.active{background:var(--yellow);color:var(--bg-card);border-color:transparent;font-weight:700}

.search-bar{display:flex;gap:8px;margin-bottom:14px;align-items:center}
.search-wrap{flex:1;position:relative}
.search-wrap input{width:100%;background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius);padding:8px 12px 8px 34px;color:var(--white);font-size:11px;outline:none;transition:border-color var(--trans);font-family:var(--font)}
.search-wrap input:focus{border-color:var(--yellow)}
.search-wrap input::placeholder{color:var(--gray-dim)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--gray-dim);font-size:14px;pointer-events:none}
select.filter-sel{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius);color:var(--gray);font-size:10px;padding:7px 10px;outline:none;font-family:var(--font)}

.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.72);align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal-box{background:var(--bg-card2);border:1px solid var(--border-y);border-radius:var(--radius-lg);width:540px;max-width:100%;overflow:hidden}
.modal-header{background:var(--bg-card);border-bottom:1px solid var(--border-y);padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.modal-header h2{font-size:13px;font-weight:700;color:var(--white)}
.modal-close{color:var(--gray-dim);cursor:pointer;font-size:18px;font-weight:700;line-height:1;padding:0 4px}
.modal-close:hover{color:var(--white)}
.modal-body{padding:16px}
.modal-footer{border-top:1px solid var(--border-w);padding:12px 16px;display:flex;justify-content:flex-end;gap:8px}
.prod-preview{display:flex;gap:11px;background:var(--bg-deep);border:1px solid var(--border-w);border-radius:var(--radius);padding:11px;margin-bottom:14px;align-items:center}
.prod-preview-img{width:46px;height:46px;background:var(--bg-card2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.prod-preview-name{font-size:11px;font-weight:600;color:var(--white);margin-bottom:2px}
.prod-preview-id{font-size:9px;color:var(--gray-dim);font-family:monospace}
.prod-preview-price{font-size:12px;font-weight:700;color:var(--yellow);margin-top:3px}
.msg-field{background:var(--bg-card);border-radius:var(--radius);padding:12px;margin-bottom:10px}
.msg-field.cy{border:1px solid var(--border-c)}
.msg-field.ye{border:1px solid var(--border-y)}
.msg-field.locked{opacity:.72}
.msg-field-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.msg-field-title{font-size:10px;font-weight:700;color:var(--white)}
.msg-field-sub{font-size:8.5px;color:var(--gray-dim);margin-top:2px;line-height:1.4}
.msg-field-controls{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.check-row{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--gray);cursor:pointer;white-space:nowrap}
.check-row input[type="checkbox"]{accent-color:var(--yellow);width:12px;height:12px}
.lock-notice{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--cyan);background:var(--glow-c);border:1px solid var(--border-c);border-radius:5px;padding:5px 8px;margin-top:6px}

.plan-card{background:rgba(255,230,0,0.04);border:1px solid var(--border-y);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.plan-name{font-size:15px;font-weight:700;color:var(--yellow)}
.plan-sub{font-size:9px;color:var(--gray-dim);margin-top:2px}
.plan-price .amount{font-size:18px;font-weight:700;color:var(--white)}
.plan-price .period{font-size:9px;color:var(--gray-dim);text-align:right}

.total-box{background:var(--bg-card);border:1px solid rgba(52,211,153,0.15);border-radius:var(--radius);padding:11px;margin-bottom:12px}
.total-row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.total-row:last-child{border-bottom:none;margin-top:2px}
.total-label{color:var(--gray-dim)}
.total-value{color:var(--white);font-weight:500}
.total-row.highlight .total-label{color:var(--green);font-weight:600}
.total-row.highlight .total-value{color:var(--green);font-weight:600}

.dig-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:12px}
.dig-card.cy{border:1px solid var(--border-c)}
.dig-card.ye{border:1px solid var(--border-y)}
.dig-card.wh{border:1px solid var(--border-w)}
.dig-title{font-size:10px;font-weight:700;color:var(--white);margin-bottom:3px}
.dig-desc{font-size:9px;color:var(--gray-dim);line-height:1.5;margin-bottom:7px}

.empty-state{text-align:center;padding:2.5rem 1rem}
.empty-icon{font-size:2.5rem;opacity:.2;margin-bottom:9px}
.empty-state h3{font-size:12px;font-weight:600;color:var(--white);margin-bottom:4px}
.empty-state p{font-size:10px;color:var(--gray-dim)}

.alert{padding:9px 12px;border-radius:var(--radius);font-size:10px;margin-bottom:10px;border-left:3px solid}
.alert-info{background:var(--glow-c);border-color:var(--cyan);color:var(--cyan)}
.alert-warn{background:var(--glow-y);border-color:var(--yellow);color:var(--yellow)}

.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:9px}
.perm-item{background:var(--bg-deep);border:1px solid var(--border-w);border-radius:5px;padding:6px 8px;font-size:9px;color:var(--gray)}

.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.landing-wrap{min-height:100vh}
.hero{padding:5rem 0 4rem;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;background:var(--glow-c);border:1px solid var(--border-c);border-radius:20px;font-size:10px;font-weight:600;color:var(--cyan);margin-bottom:14px}
.hero-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite}
.hero h1{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:14px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero-sub{font-size:1rem;color:var(--gray);line-height:1.7;margin-bottom:2rem;max-width:460px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{display:flex;align-items:center;justify-content:center}
.hero-img-wrap{width:300px;height:300px;position:relative}
.hero-img-wrap img{width:100%;height:100%;object-fit:contain;animation:float 4s ease-in-out infinite}
.hero-fallback{width:260px;height:260px;border-radius:50%;border:2px solid var(--border-c);background:var(--glow-c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:float 4s ease-in-out infinite}
.hero-fallback-icon{font-size:4rem}
.hero-fallback-label{font-size:1.3rem;font-weight:700;color:var(--cyan)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.landing-section{padding:4rem 0;border-top:1px solid var(--border-y)}
.section-eyebrow{font-size:9px;font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.section-heading{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;color:var(--white);margin-bottom:8px}
.section-sub{color:var(--gray);max-width:500px;margin-bottom:2.5rem}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.step-card{background:var(--bg-card);border:1px solid var(--border-c);border-radius:var(--radius-lg);padding:16px;transition:all var(--trans)}
.step-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.step-num{width:36px;height:36px;border-radius:9px;background:var(--glow-c);border:1px solid var(--border-c);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--cyan);margin-bottom:10px}
.step-card h3{font-size:11px;font-weight:600;color:var(--white);margin-bottom:5px}
.step-card p{font-size:10px;color:var(--gray-dim)}
.benefits-grid,.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.benefit-item{display:flex;gap:10px;background:var(--bg-card);border:1px solid var(--border-y);border-radius:var(--radius);padding:12px;transition:all var(--trans)}
.benefit-item:hover{border-color:var(--yellow)}
.benefit-icon{width:34px;height:34px;background:rgba(255,230,0,0.08);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.benefit-item h4{font-size:10px;font-weight:600;color:var(--white);margin-bottom:2px}
.benefit-item p{font-size:9px;color:var(--gray-dim)}
.security-item{display:flex;gap:10px;align-items:center;background:var(--glow-c);border:1px solid var(--border-c);border-radius:var(--radius);padding:10px}
.security-check{width:26px;height:26px;border-radius:50%;background:rgba(0,200,255,0.1);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:11px;flex-shrink:0}
.security-item span{font-size:10px;color:var(--gray)}
.cta-section{padding:4rem 0;border-top:1px solid var(--border-y);text-align:center}
.cta-section h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;color:var(--white);margin-bottom:10px}
.cta-section p{color:var(--gray);margin-bottom:2rem}
.cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
footer{padding:1.5rem 0;border-top:1px solid var(--border-y);text-align:center;font-size:9px;color:var(--gray-dim)}

.success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.success-card{background:var(--bg-card);border:1px solid rgba(52,211,153,0.3);border-radius:var(--radius-lg);padding:3rem 2.5rem;text-align:center;max-width:420px;width:100%}
.success-icon{font-size:3rem;margin-bottom:12px}
.success-card h2{font-size:16px;font-weight:700;color:var(--white);margin-bottom:6px}
.success-nickname{font-size:13px;color:var(--cyan);font-weight:600;margin-bottom:14px}
.success-card p{font-size:11px;color:var(--gray);margin-bottom:1.5rem}

.error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center}
.error-code{font-size:6rem;font-weight:700;color:var(--yellow);line-height:1;margin-bottom:12px}
.error-page h2{font-size:16px;color:var(--white);margin-bottom:6px}
.error-page p{font-size:11px;color:var(--gray);margin-bottom:2rem}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:2rem}
  .hero-sub{max-width:100%}
  .hero-actions{justify-content:center}
  .hero-visual{order:-1}
  .hero-img-wrap{width:200px;height:200px}
  .panel-layout{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;height:auto;overflow-x:auto;position:static;border-right:none;border-bottom:1px solid var(--border-y)}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .pub-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(max-width:600px){
  .metrics-grid{grid-template-columns:1fr 1fr}
  .info-cards{grid-template-columns:1fr 1fr}
  .charts-grid{grid-template-columns:1fr}
}

/* ===== Megaboti forms fix ===== */
.panel-card {
  background: rgba(10, 14, 22, 0.88);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 16px;
  padding: 22px;
  max-width: 760px;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.05);
}

.form-label {
  display: block;
  color: #e8eef8;
  font-size: 13px;
  font-weight: 800;
  margin: 14px 0 8px;
}

.form-input,
.form-textarea {
  width: 100%;
  max-width: 680px;
  background: #060a12;
  color: #ffffff;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.form-textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.45;
}

.form-input:focus,
.form-textarea:focus {
  border-color: #ffe600;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.12);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #dbe7f5;
  font-weight: 700;
  margin-top: 12px;
}

.check-row input {
  width: 17px;
  height: 17px;
  accent-color: #ffe600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: #ffe600;
  color: #05070d;
  border: 1px solid #ffe600;
}

.btn-outline-c {
  background: transparent;
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.45);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-outline-c:hover {
  background: rgba(0, 229, 255, 0.08);
}


/* ===== Megaboti layout tipo MercadoBot ===== */
:root {
  --mb-bg: #05070d;
  --mb-panel: #090d16;
  --mb-sidebar: #111a28;
  --mb-sidebar-2: #0d1421;
  --mb-cyan: #00e5ff;
  --mb-yellow: #ffe600;
  --mb-white: #f7fbff;
  --mb-muted: #8d9aaa;
  --mb-border: rgba(0, 229, 255, .16);
}

body {
  background: var(--mb-bg);
}

.mb-topbar {
  height: 72px;
  background: #070a11;
  border-bottom: 2px solid var(--mb-yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.mb-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mb-sidebar-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0,229,255,.28);
  background: rgba(0,229,255,.06);
  color: var(--mb-cyan);
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
}

.mb-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--mb-white);
  font-size: 20px;
  font-weight: 900;
}

.mb-brand em {
  color: var(--mb-yellow);
  font-style: normal;
}

.mb-brand-icon,
.mb-brand-img {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.mb-brand-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mb-cyan), var(--mb-yellow));
  color: #061018;
  font-weight: 1000;
}

.mb-user-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,230,0,.28);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--mb-white);
  background: rgba(255,230,0,.04);
}

.mb-user-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--mb-yellow);
  color: #05070d;
  font-weight: 1000;
  font-size: 12px;
}

.mb-user-name {
  font-size: 13px;
  color: var(--mb-white);
}

.mb-plan-tag {
  background: var(--mb-yellow);
  color: #05070d;
  font-size: 10px;
  font-weight: 1000;
  padding: 3px 7px;
  border-radius: 999px;
}

.mb-shell {
  display: flex;
  min-height: calc(100vh - 72px);
}

.mb-sidebar {
  width: 260px;
  background: linear-gradient(180deg, var(--mb-sidebar), var(--mb-sidebar-2));
  border-right: 1px solid var(--mb-border);
  padding: 18px 10px 24px;
  overflow-y: auto;
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  transition: width .18s ease;
}

.mb-content {
  flex: 1;
  min-width: 0;
  padding: 28px;
  transition: padding .18s ease;
}

.mb-menu-section {
  color: rgba(255,230,0,.65);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: 10px;
  margin: 18px 10px 8px;
}

.mb-menu-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  color: #aeb8c6;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  margin: 2px 0;
  border: 1px solid transparent;
  transition: all .14s ease;
}

.mb-menu-item:hover {
  background: rgba(0,229,255,.06);
  color: var(--mb-white);
  border-color: rgba(0,229,255,.12);
}

.mb-menu-item.active {
  background: rgba(0,229,255,.10);
  color: var(--mb-white);
  border-left: 4px solid var(--mb-yellow);
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.10);
}

.mb-menu-item.sub {
  min-height: 34px;
  padding-left: 22px;
  font-size: 12px;
  color: #7f8ca0;
}

.mb-menu-item.sub.active {
  color: var(--mb-cyan);
  border-left-color: var(--mb-cyan);
}

.mb-ico {
  width: 22px;
  min-width: 22px;
  text-align: center;
  font-size: 16px;
}

.mb-label {
  white-space: normal;
  line-height: 1.25;
}

/* Collapsed */
body.mb-collapsed .mb-sidebar {
  width: 72px;
  padding-left: 8px;
  padding-right: 8px;
}

body.mb-collapsed .mb-label,
body.mb-collapsed .mb-menu-section {
  display: none;
}

body.mb-collapsed .mb-menu-item {
  justify-content: center;
  padding: 10px 0;
}

body.mb-collapsed .mb-menu-item.sub {
  display: none;
}

body.mb-collapsed .mb-brand-text {
  display: none;
}

body.mb-collapsed .mb-content {
  padding-left: 34px;
}

/* Hover expand en desktop */
@media (min-width: 901px) {
  body.mb-collapsed .mb-sidebar:hover {
    width: 260px;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-label,
  body.mb-collapsed .mb-sidebar:hover .mb-menu-section {
    display: inline;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-menu-section {
    display: block;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-menu-item {
    justify-content: flex-start;
    padding: 9px 12px;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-menu-item.sub {
    display: flex;
    padding-left: 22px;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .mb-sidebar {
    width: 72px;
  }

  .mb-label,
  .mb-menu-section {
    display: none;
  }

  .mb-menu-item {
    justify-content: center;
    padding: 10px 0;
  }

  .mb-menu-item.sub {
    display: none;
  }

  .mb-content {
    padding: 18px;
  }

  .mb-user-name {
    display: none;
  }
}


/* ===== Megaboti sidebar accordion + clean icons ===== */

.mb-parent {
  width: 100%;
  border: 1px solid transparent;
  font-family: inherit;
  text-align: left;
}

.mb-arrow {
  margin-left: auto;
  color: var(--mb-muted);
  transition: transform .16s ease;
  font-size: 18px;
}

.mb-subgroup.open {
  display: block;
}

.mb-subgroup {
  display: none;
  margin: 2px 0 8px;
  padding-left: 4px;
}

.mb-subgroup.open + .mb-arrow,
.mb-parent.active .mb-arrow {
  transform: rotate(90deg);
}

.mb-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 999px;
  background: rgba(0,229,255,.45);
  display: inline-block;
}

.mb-ico {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 8px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.06);
  display: grid;
  place-items: center;
  color: var(--mb-cyan);
  font-size: 0;
}

.mb-menu-item.active .mb-ico {
  border-color: rgba(255,230,0,.55);
  background: rgba(255,230,0,.12);
  color: var(--mb-yellow);
}

.mb-ico::before {
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: -.02em;
}

.ico-dashboard::before { content: "D"; }
.ico-news::before { content: "N"; }
.ico-stock::before { content: "S"; }
.ico-bot::before { content: "BOT"; font-size: 8px; }
.ico-question::before { content: "?"; font-size: 13px; }
.ico-send::before { content: "↗"; font-size: 13px; }
.ico-sales::before { content: "$"; font-size: 13px; }
.ico-items::before { content: "P"; }
.ico-users::before { content: "U"; }
.ico-card::before { content: "C"; }
.ico-bell::before { content: "!"; font-size: 13px; }
.ico-config::before { content: "⚙"; font-size: 12px; }

body.mb-collapsed .mb-subgroup {
  display: none !important;
}

body.mb-collapsed .mb-arrow {
  display: none;
}

@media (min-width: 901px) {
  body.mb-collapsed .mb-sidebar:hover .mb-subgroup.open {
    display: block !important;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-arrow {
    display: inline;
  }
}


/* =========================================================
   MEGABOTI LIGHT THEME - estilo MercadoBot
   Blanco + celeste eléctrico + detalles amarillo ML
   ========================================================= */

:root {
  --mb-bg: #f4f7fc;
  --mb-page: #f4f7fc;
  --mb-white: #ffffff;
  --mb-text: #2f3b4f;
  --mb-muted: #7b8798;
  --mb-sidebar: #223044;
  --mb-sidebar-dark: #1b283a;
  --mb-cyan: #00cfff;
  --mb-cyan-dark: #00a9d6;
  --mb-yellow: #ffe600;
  --mb-border: #e4eaf3;
  --mb-card-shadow: 0 10px 28px rgba(32, 45, 66, .08);
}

/* Base general */
html, body {
  background: var(--mb-page) !important;
  color: var(--mb-text) !important;
}

body {
  overflow-x: hidden;
}

/* Topbar blanca */
.mb-topbar {
  height: 76px !important;
  background: #ffffff !important;
  color: var(--mb-text) !important;
  border-bottom: 1px solid #e7edf5 !important;
  box-shadow: 0 2px 8px rgba(20, 35, 55, .04) !important;
}

.mb-sidebar-toggle {
  background: #ffffff !important;
  border: 1px solid #d8e4ef !important;
  color: var(--mb-cyan-dark) !important;
  box-shadow: 0 4px 12px rgba(0, 207, 255, .12);
}

.mb-brand {
  color: var(--mb-text) !important;
}

.mb-brand em {
  color: var(--mb-yellow) !important;
}

.mb-brand-icon {
  background: linear-gradient(135deg, var(--mb-cyan), var(--mb-yellow)) !important;
  color: #102033 !important;
}

.mb-user-pill {
  background: #ffffff !important;
  border: 1px solid #dfe8f3 !important;
  color: var(--mb-text) !important;
  box-shadow: 0 6px 18px rgba(30, 45, 65, .08);
}

.mb-user-name {
  color: var(--mb-text) !important;
}

.mb-user-avatar,
.mb-plan-tag {
  background: var(--mb-yellow) !important;
  color: #102033 !important;
}

/* Layout */
.mb-shell {
  background: var(--mb-page) !important;
}

/* Sidebar estilo MercadoBot */
.mb-sidebar {
  width: 250px !important;
  background: var(--mb-sidebar) !important;
  border-right: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: 8px 0 22px rgba(20, 35, 55, .08);
  z-index: 40;
}

/* Colapsada por defecto: queda angosta */
body.mb-collapsed .mb-sidebar {
  width: 64px !important;
}

/* Al pasar mouse se abre hacia la derecha */
@media (min-width: 901px) {
  body.mb-collapsed .mb-sidebar:hover {
    width: 250px !important;
    position: sticky;
    left: 0;
    z-index: 80;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-label,
  body.mb-collapsed .mb-sidebar:hover .mb-menu-section,
  body.mb-collapsed .mb-sidebar:hover .mb-arrow {
    display: inline-flex !important;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-menu-section {
    display: block !important;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-menu-item {
    justify-content: flex-start !important;
    padding: 11px 14px !important;
  }

  body.mb-collapsed .mb-sidebar:hover .mb-subgroup.open {
    display: block !important;
  }
}

/* Cuando está colapsada, solo iconos */
body.mb-collapsed .mb-label,
body.mb-collapsed .mb-menu-section,
body.mb-collapsed .mb-arrow {
  display: none !important;
}

body.mb-collapsed .mb-menu-item {
  justify-content: center !important;
  padding: 11px 0 !important;
}

body.mb-collapsed .mb-subgroup {
  display: none !important;
}

/* Contenido blanco, con más espacio */
.mb-content {
  background: var(--mb-page) !important;
  color: var(--mb-text) !important;
  padding: 34px 42px !important;
  box-sizing: border-box !important;
}

body.mb-collapsed .mb-content {
  padding-left: 38px !important;
}

@media (max-width: 900px) {
  .mb-content {
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  body.mb-collapsed .mb-content {
    padding-left: 12px !important;
  }
}

/* Menú */
.mb-menu-section {
  color: #95a6ba !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  margin-top: 20px !important;
}

.mb-menu-item {
  color: #c5d0dd !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 2px 0 !important;
  min-height: 44px !important;
  font-weight: 700 !important;
}

.mb-menu-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

.mb-menu-item.active {
  background: rgba(0, 207, 255, .18) !important;
  color: #ffffff !important;
  border-left: 4px solid var(--mb-cyan) !important;
  box-shadow: none !important;
}

.mb-menu-item.sub {
  color: #9fb0c3 !important;
  font-size: 13px !important;
  padding-left: 38px !important;
}

.mb-menu-item.sub.active {
  color: #ffffff !important;
  background: rgba(0, 207, 255, .12) !important;
  border-left: 4px solid var(--mb-yellow) !important;
}

.mb-parent {
  cursor: pointer;
}

.mb-arrow {
  color: #95a6ba !important;
}

/* Iconos limpios */
.mb-ico {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 7px !important;
  background: rgba(0, 207, 255, .10) !important;
  border: 1px solid rgba(0, 207, 255, .35) !important;
  color: var(--mb-cyan) !important;
}

.mb-menu-item.active .mb-ico {
  background: var(--mb-cyan) !important;
  color: #102033 !important;
  border-color: var(--mb-cyan) !important;
}

.mb-dot {
  background: var(--mb-cyan) !important;
}

/* Contenido: títulos y tarjetas blancas */
.page-header h1,
.mb-content h1,
.mb-content h2,
.mb-content h3 {
  color: var(--mb-text) !important;
}

.page-header p,
.mb-content p {
  color: var(--mb-muted) !important;
}

.panel-card,
.table-wrap,
.total-box,
.info-card,
.card,
.metric-card,
.stat-card {
  background: #ffffff !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border) !important;
  box-shadow: var(--mb-card-shadow) !important;
}

/* Métricas del dashboard */
.kpi-card,
.stat-box {
  background: #ffffff !important;
  border: 1px solid var(--mb-border) !important;
  box-shadow: var(--mb-card-shadow) !important;
}

/* Formularios */
.form-input,
.form-textarea,
select,
input,
textarea {
  background: #ffffff !important;
  color: var(--mb-text) !important;
  border: 1px solid #dbe5f0 !important;
}

.form-input:focus,
.form-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--mb-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,207,255,.15) !important;
}

.form-label {
  color: var(--mb-text) !important;
}

/* Botones */
.btn-primary {
  background: var(--mb-cyan) !important;
  color: #ffffff !important;
  border-color: var(--mb-cyan) !important;
}

.btn-primary:hover {
  background: var(--mb-cyan-dark) !important;
}

.btn-outline-c {
  color: var(--mb-cyan-dark) !important;
  border-color: var(--mb-cyan) !important;
  background: #ffffff !important;
}

.btn-outline-c:hover {
  background: rgba(0,207,255,.08) !important;
}

/* Amarillo solo como detalle MercadoLibre */
.badge-active,
.mb-plan-tag,
.alert-info {
  background: var(--mb-yellow) !important;
  color: #102033 !important;
}

.badge,
.alert {
  border-radius: 999px;
}

/* Tablas claras */
table {
  color: var(--mb-text) !important;
}

th {
  color: #66758a !important;
  background: #f7f9fc !important;
}

td {
  color: var(--mb-text) !important;
  border-color: #edf1f6 !important;
}

.td-white,
.td-yellow,
.td-mono {
  color: var(--mb-text) !important;
}

/* Estados vacíos */
.empty-state {
  color: var(--mb-muted) !important;
}

.empty-state h3 {
  color: var(--mb-text) !important;
}

/* Scrollbar más prolijo */
.mb-sidebar::-webkit-scrollbar {
  width: 6px;
}

.mb-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}


/* ===== Iconos SVG estilo MercadoBot / Megaboti ===== */

.mb-ico {
  background: transparent !important;
  border: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 0 !important;
  color: #9fb0c3 !important;
}

.mb-menu-item:hover .mb-ico,
.mb-menu-item.active .mb-ico {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}

.mb-ico::before {
  content: "" !important;
  width: 20px;
  height: 20px;
  display: block;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Panel */
.ico-dashboard::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13h6v7H4v-7zm10-9h6v16h-6V4zM4 4h6v7H4V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13h6v7H4v-7zm10-9h6v16h-6V4zM4 4h6v7H4V4z'/%3E%3C/svg%3E");
}

/* Novedades */
.ico-news::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4V5zm3 3v2h10V8H7zm0 4v2h10v-2H7zm0 4h7v-2H7v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4V5zm3 3v2h10V8H7zm0 4v2h10v-2H7zm0 4h7v-2H7v2z'/%3E%3C/svg%3E");
}

/* Stock */
.ico-stock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l9 4v12l-9 4-9-4V6l9-4zm0 2.2L5.5 7 12 9.8 18.5 7 12 4.2zM5 8.8v7.9l6 2.7v-7.9L5 8.8zm14 0l-6 2.7v7.9l6-2.7V8.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l9 4v12l-9 4-9-4V6l9-4zm0 2.2L5.5 7 12 9.8 18.5 7 12 4.2zM5 8.8v7.9l6 2.7v-7.9L5 8.8zm14 0l-6 2.7v7.9l6-2.7V8.8z'/%3E%3C/svg%3E");
}

/* Bot */
.ico-bot::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3h3a4 4 0 014 4v7a4 4 0 01-4 4H8a4 4 0 01-4-4V9a4 4 0 014-4h3V2zm-3 5a2 2 0 00-2 2v7a2 2 0 002 2h8a2 2 0 002-2V9a2 2 0 00-2-2H8zm1.5 4.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3h3a4 4 0 014 4v7a4 4 0 01-4 4H8a4 4 0 01-4-4V9a4 4 0 014-4h3V2zm-3 5a2 2 0 00-2 2v7a2 2 0 002 2h8a2 2 0 002-2V9a2 2 0 00-2-2H8zm1.5 4.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z'/%3E%3C/svg%3E");
}

/* Preguntas */
.ico-question::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 17a1.2 1.2 0 110-2.4A1.2 1.2 0 0112 19zm1-5.3v1.1h-2v-2.4h1c1.4 0 2.5-1 2.5-2.3S13.4 7.8 12 7.8s-2.5 1-2.5 2.3h-2c0-2.4 2-4.3 4.5-4.3s4.5 1.9 4.5 4.3c0 2-1.5 3.4-3.5 3.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 17a1.2 1.2 0 110-2.4A1.2 1.2 0 0112 19zm1-5.3v1.1h-2v-2.4h1c1.4 0 2.5-1 2.5-2.3S13.4 7.8 12 7.8s-2.5 1-2.5 2.3h-2c0-2.4 2-4.3 4.5-4.3s4.5 1.9 4.5 4.3c0 2-1.5 3.4-3.5 3.6z'/%3E%3C/svg%3E");
}

/* Mensajería */
.ico-send::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 20l18-8L3 4v6l12 2-12 2v6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 20l18-8L3 4v6l12 2-12 2v6z'/%3E%3C/svg%3E");
}

/* Ventas */
.ico-sales::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h14l-2 9H8.3L9 16h10v2H7.4L4.8 6H3V4h4zm2.3 7h8.1l1.1-5H8.2l1.1 5zM9 22a2 2 0 110-4 2 2 0 010 4zm8 0a2 2 0 110-4 2 2 0 010 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h14l-2 9H8.3L9 16h10v2H7.4L4.8 6H3V4h4zm2.3 7h8.1l1.1-5H8.2l1.1 5zM9 22a2 2 0 110-4 2 2 0 010 4zm8 0a2 2 0 110-4 2 2 0 010 4z'/%3E%3C/svg%3E");
}

/* Publicaciones */
.ico-items::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v4H4V4zm0 6h16v10H4V10zm2 2v6h12v-6H6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v4H4V4zm0 6h16v10H4V10zm2 2v6h12v-6H6z'/%3E%3C/svg%3E");
}

/* Operadores */
.ico-users::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 110-8 4 4 0 010 8zm0 2c-3.3 0-6 2-6 4.5V20h12v-2.5C15 15 12.3 13 9 13zm8.5-1a3.5 3.5 0 100-7 3.5 3.5 0 000 7zm0 2c-.7 0-1.4.1-2 .3 1 .8 1.5 1.9 1.5 3.2V20h5v-2.2c0-2.1-2-3.8-4.5-3.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 110-8 4 4 0 010 8zm0 2c-3.3 0-6 2-6 4.5V20h12v-2.5C15 15 12.3 13 9 13zm8.5-1a3.5 3.5 0 100-7 3.5 3.5 0 000 7zm0 2c-.7 0-1.4.1-2 .3 1 .8 1.5 1.9 1.5 3.2V20h5v-2.2c0-2.1-2-3.8-4.5-3.8z'/%3E%3C/svg%3E");
}

/* Suscripción */
.ico-card::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5zm2 4h14V7H5v2zm0 3v5h14v-5H5zm2 2h5v2H7v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5zm2 4h14V7H5v2zm0 3v5h14v-5H5zm2 2h5v2H7v-2z'/%3E%3C/svg%3E");
}

/* Notificaciones */
.ico-bell::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.5 2.5 0 002.4-2h-4.8a2.5 2.5 0 002.4 2zM19 17l-2-2V9a5 5 0 00-4-4.9V2h-2v2.1A5 5 0 007 9v6l-2 2v1h14v-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.5 2.5 0 002.4-2h-4.8a2.5 2.5 0 002.4 2zM19 17l-2-2V9a5 5 0 00-4-4.9V2h-2v2.1A5 5 0 007 9v6l-2 2v1h14v-1z'/%3E%3C/svg%3E");
}

/* Configuración */
.ico-config::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2.1-1.6-2-3.5-2.5 1a8 8 0 00-2.6-1.5L14 2h-4l-.4 2.9A8 8 0 007 6.4l-2.5-1-2 3.5 2.1 1.6c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2.1 1.6 2 3.5 2.5-1a8 8 0 002.6 1.5L10 22h4l.4-2.9A8 8 0 0017 17.6l2.5 1 2-3.5-2.1-1.6zM12 15.5A3.5 3.5 0 1112 8a3.5 3.5 0 010 7.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2.1-1.6-2-3.5-2.5 1a8 8 0 00-2.6-1.5L14 2h-4l-.4 2.9A8 8 0 007 6.4l-2.5-1-2 3.5 2.1 1.6c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2.1 1.6 2 3.5 2.5-1a8 8 0 002.6 1.5L10 22h4l.4-2.9A8 8 0 0017 17.6l2.5 1 2-3.5-2.1-1.6zM12 15.5A3.5 3.5 0 1112 8a3.5 3.5 0 010 7.5z'/%3E%3C/svg%3E");
}


/* ===== Dashboard status pill amarillo Megaboti ===== */
.alert,
.alert-info {
  background: rgba(255, 230, 0, .16) !important;
  border: 1px solid rgba(255, 230, 0, .55) !important;
  box-shadow: 0 8px 22px rgba(255, 230, 0, .10) !important;
  color: #2f3b4f !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  margin: 0 0 18px 0 !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

.alert-info::before {
  content: "●";
  color: #ffe600;
  margin-right: 8px;
  text-shadow: 0 0 8px rgba(255,230,0,.65);
}


/* ===== FIX REAL: estado sistema amarillo Megaboti ===== */
.mb-content > .alert,
.mb-content > .alert-info,
main.mb-content .alert,
main.mb-content .alert-info {
  background: rgba(255, 230, 0, 0.22) !important;
  border: 1px solid rgba(255, 230, 0, 0.85) !important;
  color: #2f3b4f !important;
  box-shadow: 0 8px 18px rgba(255, 230, 0, 0.14) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  margin: 18px 0 !important;
  font-weight: 800 !important;
  display: block !important;
  width: 100% !important;
}

.mb-content > .alert-info::before,
main.mb-content .alert-info::before {
  content: "●" !important;
  color: #ffe600 !important;
  margin-right: 8px !important;
  text-shadow: 0 0 8px rgba(255,230,0,.75) !important;
}


/* ===== Estado sistema dashboard amarillo real ===== */
.status-yellow,
.panel-status.status-yellow,
.system-status.status-yellow,
.status-line.status-yellow {
  background: rgba(255, 230, 0, 0.24) !important;
  border: 1px solid rgba(255, 230, 0, 0.90) !important;
  color: #2f3b4f !important;
  box-shadow: 0 8px 18px rgba(255, 230, 0, 0.16) !important;
}

.status-yellow,
.status-yellow * {
  color: #2f3b4f !important;
}

.status-yellow::before {
  color: #ffe600 !important;
}


/* ===== PANEL ADMIN: barra "Sistema operativo" AMARILLA ===== */
.mb-content .status-bar,
main.mb-content .status-bar,
.status-bar {
  background: rgba(255, 230, 0, 0.28) !important;
  border: 1px solid rgba(255, 230, 0, 0.95) !important;
  color: #2f3b4f !important;
  box-shadow: 0 8px 18px rgba(255, 230, 0, 0.16) !important;
}

.mb-content .status-bar .status-dot,
main.mb-content .status-bar .status-dot,
.status-bar .status-dot {
  background: #ffe600 !important;
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.85) !important;
}


/* Solo el puntito de la barra de estado en azul */
.status-bar .status-dot,
.mb-content .status-bar .status-dot,
main.mb-content .status-bar .status-dot {
  background: #00cfff !important;
  box-shadow: 0 0 10px rgba(0, 207, 255, 0.85) !important;
}


/* ===== Logo Megaboti: fondo azul Boti ===== */
.mb-brand-icon,
.brand-icon,
.logo-icon,
.topbar-logo,
.topbar-brand-icon {
  background: linear-gradient(135deg, #00cfff 0%, #1f7bff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 160, 255, 0.35) !important;
  box-shadow: 0 6px 18px rgba(0, 170, 255, 0.18) !important;
}

/* por si la M está dentro */
.mb-brand-icon *,
.brand-icon *,
.logo-icon *,
.topbar-logo *,
.topbar-brand-icon * {
  color: #ffffff !important;
}


/* ===== Logo real azul Boti ===== */
.mb-brand-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #00d8ff 0%, #007bff 100%) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  border: 1px solid rgba(0, 180, 255, 0.55) !important;
  box-shadow: 0 8px 22px rgba(0, 170, 255, 0.28) !important;
}


/* ===== TOPBAR azul Boti ===== */
.mb-topbar {
  background: linear-gradient(135deg, #00cfff 0%, #007bff 100%) !important;
  border-bottom: 3px solid #ffe600 !important;
  box-shadow: 0 8px 22px rgba(0, 123, 255, 0.22) !important;
}

.mb-sidebar-toggle {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
}

.mb-brand {
  color: #ffffff !important;
}

.mb-brand em {
  color: #ffe600 !important;
}

.mb-brand-icon {
  background: #ffffff !important;
  color: #007bff !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

.mb-user-pill {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
}


/* Línea inferior topbar: azul Boti oscuro */
.mb-topbar {
  border-bottom: 3px solid #005BFF !important;
}


/* Línea inferior topbar igual a la barra lateral */
.mb-topbar {
  border-bottom: 3px solid #223044 !important;
}


/* TOPBAR prueba: celeste Boti + amarillo ML */
.mb-topbar {
  background: linear-gradient(135deg, #00cfff 0%, #00a8ff 62%, #ffe600 100%) !important;
  border-bottom: 3px solid #223044 !important;
  box-shadow: 0 8px 22px rgba(0, 123, 255, 0.20) !important;
}

.mb-sidebar-toggle {
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
}

.mb-brand-icon {
  background: #ffffff !important;
  color: #007bff !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
}

.mb-user-pill {
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(34,48,68,0.12) !important;
}


/* TOPBAR definitivo: celeste Boti sólido + línea oscura */
.mb-topbar {
  background: #00cfff !important;
  border-bottom: 3px solid #223044 !important;
  box-shadow: 0 8px 22px rgba(0, 123, 255, 0.18) !important;
}

.mb-sidebar-toggle {
  background: rgba(255,255,255,0.24) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  color: #ffffff !important;
}

.mb-brand {
  color: #ffffff !important;
}

.mb-brand em {
  color: #ffffff !important;
}

.mb-brand-icon {
  background: #ffffff !important;
  color: #007bff !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
}

.mb-user-pill {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(34,48,68,0.12) !important;
}


/* TOPBAR completa amarilla MercadoLibre / Megaboti */
.mb-topbar {
  background: #ffe600 !important;
  border-bottom: 3px solid #223044 !important;
  box-shadow: 0 8px 22px rgba(255, 230, 0, 0.22) !important;
}

.mb-sidebar-toggle {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(34,48,68,0.22) !important;
  color: #223044 !important;
}

.mb-brand {
  color: #223044 !important;
}

.mb-brand em {
  color: #223044 !important;
}

.mb-brand-icon {
  background: #223044 !important;
  color: #ffe600 !important;
  border: 1px solid rgba(34,48,68,0.35) !important;
  box-shadow: none !important;
}

.mb-user-pill {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(34,48,68,0.18) !important;
  color: #223044 !important;
}

.mb-user-name {
  color: #223044 !important;
}


/* Botón hamburguesa del color de la barra lateral */
.mb-sidebar-toggle {
  background: #223044 !important;
  border: 1px solid #223044 !important;
  box-shadow: none !important;
}

.mb-sidebar-toggle i,
.mb-sidebar-toggle svg,
.mb-sidebar-toggle span {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.mb-sidebar-toggle:hover {
  background: #223044 !important;
  border-color: #223044 !important;
}


/* Botón hamburguesa: fondo sidebar + borde e ícono blanco */
.mb-sidebar-toggle {
  background: #223044 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(34, 48, 68, 0.18) !important;
}

.mb-sidebar-toggle:hover {
  background: #1b283a !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}


/* Botón hamburguesa: fondo sidebar + borde e ícono blanco */
.mb-sidebar-toggle {
  background: #223044 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(34, 48, 68, 0.18) !important;
}

.mb-sidebar-toggle:hover {
  background: #1b283a !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}


/* FIX FINAL hamburguesa: sin borde, solo líneas blancas */
button.mb-sidebar-toggle,
.mb-sidebar-toggle,
.mb-topbar .mb-sidebar-toggle {
  background: #223044 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}

button.mb-sidebar-toggle:hover,
.mb-sidebar-toggle:hover,
.mb-topbar .mb-sidebar-toggle:hover,
button.mb-sidebar-toggle:focus,
.mb-sidebar-toggle:focus,
.mb-topbar .mb-sidebar-toggle:focus {
  background: #223044 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}


/* Títulos de secciones en panel admin */
.mb-content .section-title,
.mb-content .card-title,
.mb-content h2,
.mb-content h3 {
  color: #2f3b4f !important;
}

/* Por si "Eventos recientes" usa otro contenedor */
.mb-content [class*="event"] h2,
.mb-content [class*="event"] h3,
.mb-content [class*="recent"] h2,
.mb-content [class*="recent"] h3 {
  color: #2f3b4f !important;
}

/* Ícono/rayito queda amarillo */
.mb-content .section-title::first-letter {
  color: #ffe600;
}


/* ===== Estado de cuenta vendedor en panel admin ===== */
.account-status-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 0 0 18px 0 !important;
  background: rgba(255, 230, 0, 0.24) !important;
  border: 1px solid rgba(255, 230, 0, 0.90) !important;
  color: #2f3b4f !important;
  box-shadow: 0 8px 18px rgba(255, 230, 0, 0.14) !important;
}

.account-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #2f3b4f !important;
}

.account-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: inline-block;
}

.account-status-bar.is-active .account-status-dot {
  background: #20c997 !important;
  box-shadow: 0 0 10px rgba(32, 201, 151, .75) !important;
}

.account-status-bar.is-paused .account-status-dot {
  background: #ff3b30 !important;
  box-shadow: 0 0 10px rgba(255, 59, 48, .65) !important;
}

.account-status-form {
  margin: 0;
}

.mb-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.mb-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mb-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d0d8e2;
  transition: .18s;
  border-radius: 999px;
}

.mb-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  transition: .18s;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

.mb-switch input:checked + .mb-slider {
  background: #00cfff;
}

.mb-switch input:checked + .mb-slider:before {
  transform: translateX(22px);
}


/* Estado cuenta vendedor: reemplaza "1 cuenta activa" */
.account-status-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: rgba(255, 230, 0, 0.25) !important;
  border: 1px solid rgba(255, 230, 0, 0.85) !important;
  color: #2f3b4f !important;
}

.account-status-left {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #2f3b4f !important;
  font-weight: 700 !important;
}

.account-status-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

.account-status-bar.is-active .account-status-dot {
  background: #20c997 !important;
  box-shadow: 0 0 9px rgba(32, 201, 151, .75) !important;
}

.account-status-bar.is-paused .account-status-dot {
  background: #ff3b30 !important;
  box-shadow: 0 0 9px rgba(255, 59, 48, .65) !important;
}

.account-status-form {
  margin: 0 !important;
}

.mb-switch {
  position: relative !important;
  display: inline-block !important;
  width: 46px !important;
  height: 24px !important;
}

.mb-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.mb-slider {
  position: absolute !important;
  cursor: pointer !important;
  inset: 0 !important;
  background: #c6ced8 !important;
  transition: .18s !important;
  border-radius: 999px !important;
}

.mb-slider:before {
  content: "" !important;
  position: absolute !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  top: 3px !important;
  background: #ffffff !important;
  transition: .18s !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.18) !important;
}

.mb-switch input:checked + .mb-slider {
  background: #00cfff !important;
}

.mb-switch input:checked + .mb-slider:before {
  transform: translateX(22px) !important;
}


/* FIX MOBILE: mostrar textos del menú desplegable */
/* FIX DEFINITIVO MOBILE - mostrar textos del panel lateral */

/* ===== MB MOBILE FINAL ===== */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .mb-topbar {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
    max-width: calc(100% - 72px) !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
  }
  .mb-shell {
    display: block !important;
    min-height: unset !important;
    overflow-x: hidden !important;
  }
  .mb-content {
    display: block !important;
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
    max-width: calc(100% - 72px) !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    flex: unset !important;
  }
  .mb-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .mb-content table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}
/* ===== FIN MB MOBILE FINAL ===== */

/* ===== MOBILE CLIP FINAL ===== */
@media (max-width: 900px) {
  body {
    overflow-x: clip !important;
  }
}
/* ===== FIN MOBILE CLIP FINAL ===== */

/* ===== MB GRID MOBILE FIX ===== */
@media (max-width: 900px) {
  .info-cards,
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .charts-grid,
  .two-col {
    grid-template-columns: 1fr !important;
  }
  .page-header p {
    max-width: 100% !important;
  }
  .status-bar,
  .account-status-bar {
    flex-wrap: wrap !important;
  }
}
/* ===== FIN MB GRID MOBILE FIX ===== */

/* ===== MB GRID MOBILE FIX V2 ===== */
@media (max-width: 900px) {
  .mb-content .info-cards,
  .mb-content .metrics-grid,
  main.mb-content .info-cards,
  main.mb-content .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
  .mb-content .charts-grid,
  .mb-content .two-col,
  main.mb-content .charts-grid,
  main.mb-content .two-col {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .mb-content .boti-activity-card,
  main.mb-content .boti-activity-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mb-content .boti-activity-status,
  main.mb-content .boti-activity-status {
    white-space: normal !important;
    align-self: flex-start !important;
  }
  .mb-content .boti-activity-time,
  main.mb-content .boti-activity-time {
    white-space: normal !important;
  }
}
/* ===== FIN MB GRID MOBILE FIX V2 ===== */

/* ===== SIDEBAR FULL HEIGHT ===== */
@media (min-width: 901px) {
  #mbSidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 999 !important;
  }
  .mb-shell {
    margin-left: 72px !important;
  }
  body.mb-collapsed .mb-shell {
    margin-left: 72px !important;
  }
}
/* ===== FIN SIDEBAR FULL HEIGHT ===== */

/* MEGABOTI CLEAN STICKY FOOTER FIX */
@media (min-width:901px){
  main.mb-content,
  .mb-content{
    min-height:calc(100vh - 76px) !important;
    display:flex !important;
    flex-direction:column !important;
  }

  main.mb-content > .mb-panel-footer,
  .mb-content > .mb-panel-footer{
    margin-top:auto !important;
    flex-shrink:0 !important;
  }
}
/* END MEGABOTI CLEAN STICKY FOOTER FIX */