/* ============================================================
   BE RICH — DESIGN SYSTEM UNIFICADO
   ============================================================ */

/* TOKENS */
:root{
  --gold:#C9A84C;--gold2:#E8C96A;--gold-dim:rgba(201,168,76,0.12);
  --dark:#0A0A0A;--card:#111111;--card2:#161616;
  --border:rgba(201,168,76,0.10);--border2:rgba(201,168,76,0.22);
  --text:#F0EDE6;--muted:#A09A92;--muted2:#4a4a48;
  --green:#4CAF50;--red:#E05A5A;--blue:#5A9BE0;
  --purple:#9B72CF;--orange:#E07A2F;--teal:#5AE0C9;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--dark);color:var(--text);font-family:"DM Sans",sans-serif;font-size:14px;min-height:100vh;overflow-x:hidden;}

/* BG GLOW */
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 40% at 15% 10%,rgba(201,168,76,0.05) 0%,transparent 60%),
             radial-gradient(ellipse 40% 30% at 85% 85%,rgba(201,168,76,0.03) 0%,transparent 60%);}

/* APP SHELL */
#appContent{display:none;flex-direction:column;min-height:100vh;position:relative;z-index:1;}
#appContent.visible{display:flex;}

/* NO SESSION OVERLAY */
#noSessionOverlay{display:none;position:fixed;inset:0;background:#0A0A0A;z-index:9999;align-items:center;justify-content:center;font-family:"DM Sans",sans-serif;}

/* LOADING OVERLAY */
#loadingOverlay{position:fixed;inset:0;background:rgba(10,10,10,0.97);z-index:9998;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .5s;}
#loadingOverlay.hidden{opacity:0;pointer-events:none;}
.spinner{width:38px;height:38px;border:2px solid rgba(201,168,76,0.15);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;}
.load-brand{font-family:"Playfair Display",serif;font-size:28px;font-weight:900;color:var(--gold);margin-bottom:8px;}
.load-text{font-family:"DM Mono",monospace;font-size:11px;color:var(--muted);letter-spacing:1px;}
.load-progress{font-family:"Playfair Display",serif;font-size:16px;color:var(--gold);}
.load-bar{width:280px;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;margin-top:4px;}
.load-bar-fill{height:100%;background:linear-gradient(to right,var(--gold),var(--gold2));width:0%;transition:width .3s;}

/* ERROR OVERLAY */
#errorOverlay{display:none;position:fixed;inset:0;background:rgba(10,10,10,0.97);z-index:9997;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
#errorOverlay.visible{display:flex;}
.err-title{font-family:"Playfair Display",serif;font-size:22px;color:var(--red);}
.err-msg{font-family:"DM Mono",monospace;font-size:11px;color:var(--muted);max-width:420px;text-align:center;line-height:1.7;}
.btn-retry{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:transparent;border:1px solid var(--border2);padding:10px 24px;border-radius:2px;cursor:pointer;transition:all .2s;margin-top:8px;}
.btn-retry:hover{background:rgba(201,168,76,0.08);}

/* TOPBAR */
.topbar{padding:14px 28px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);background:rgba(10,10,10,0.95);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;}
.tl{display:flex;align-items:center;gap:20px;}
.tr{display:flex;align-items:center;gap:16px;}
.back-btn{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:2px;color:var(--muted);
  text-decoration:none;border:1px solid var(--border);padding:5px 12px;border-radius:2px;transition:all .2s;}
.back-btn:hover{color:var(--gold);border-color:var(--border2);}
.brand-name{font-family:"Playfair Display",serif;font-size:20px;font-weight:900;color:var(--gold);}
.brand-sub{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;margin-top:2px;}

/* USER BADGE */
.user-badge{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 10px;
  border:1px solid var(--border);border-radius:2px;transition:all .2s;}
.user-badge:hover{border-color:var(--border2);}
.user-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;}
.user-name{font-size:11px;font-weight:600;}
.user-logout{font-family:"DM Mono",monospace;font-size:8px;color:var(--muted);}

/* FILTER SELECT */
.filter-select{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:1px;background:#161616;color:var(--gold);
  border:1px solid var(--border2);padding:6px 10px;border-radius:2px;outline:none;cursor:pointer;}

/* CACHE BADGE + REFRESH */
.cache-badge{display:flex;align-items:center;gap:6px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:1px;color:var(--muted);padding:4px 10px;border:1px solid var(--border);border-radius:2px;background:rgba(255,255,255,0.02);}
.cache-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.cache-dot.live{background:var(--green);box-shadow:0 0 4px rgba(76,175,80,0.5);}
.cache-dot.cached{background:var(--gold);box-shadow:0 0 4px rgba(201,168,76,0.4);}
.btn-refresh{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:1px;color:var(--muted);background:transparent;border:1px solid var(--border);padding:4px 10px;border-radius:2px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.btn-refresh:hover{color:var(--gold);border-color:var(--border2);background:rgba(201,168,76,0.05);}
.btn-refresh:disabled{opacity:0.4;cursor:not-allowed;}

/* MAIN */
main{flex:1;padding:28px;display:flex;flex-direction:column;gap:28px;max-width:1600px;margin:0 auto;width:100%;}

/* TABS */
.tabs-bar{display:flex;align-items:stretch;border-bottom:1px solid var(--border);
  background:rgba(10,10,10,0.8);backdrop-filter:blur(8px);position:sticky;top:53px;z-index:99;overflow-x:auto;}
.tab{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);padding:14px 22px;cursor:pointer;border-bottom:2px solid transparent;
  transition:all .2s;white-space:nowrap;user-select:none;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);}

/* PANELS */
.panel{display:none;padding:28px;flex-direction:column;gap:28px;max-width:1600px;margin:0 auto;width:100%;}
.panel.active{display:flex;}

/* SECTION LABEL */
.sec-label{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.sec-label::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--border2),transparent);}

/* KPI GRID */
.krow{display:grid;gap:1px;background:var(--border);}
.krow-3{grid-template-columns:repeat(3,1fr);}
.krow-4{grid-template-columns:repeat(4,1fr);}
.krow-5{grid-template-columns:repeat(5,1fr);}
.krow-6{grid-template-columns:repeat(6,1fr);}

/* KPI CARD */
.kpi{background:var(--card);padding:20px;position:relative;overflow:hidden;transition:background .2s;}
.kpi:hover{background:var(--card2);}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold-dim),transparent);}
.kpi.hl::before{background:linear-gradient(90deg,var(--gold),var(--gold2),transparent);}
.kpi-lbl{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.kpi-val{font-family:"Playfair Display",serif;font-size:24px;font-weight:700;letter-spacing:-0.5px;line-height:1;}
.kpi-val.gold{color:var(--gold);}
.kpi-val.green{color:var(--green);}
.kpi-val.red{color:var(--red);}
.kpi-val.blue{color:var(--blue);}
.kpi-val.purple{color:var(--purple);}
.kpi-val.orange{color:var(--orange);}
.kpi-val.teal{color:var(--teal);}
.kpi-sub{font-family:"DM Mono",monospace;font-size:9px;color:var(--muted);margin-top:5px;}

/* LAYOUT GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:1px;background:var(--border);}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:1px;background:var(--border);}

/* CARD */
.card{background:var(--card);padding:22px;transition:background .2s;}
.card:hover{background:var(--card2);}
.card-title{font-family:"Playfair Display",serif;font-size:14px;font-weight:600;margin-bottom:3px;}
.card-sub{font-family:"DM Mono",monospace;font-size:8px;color:var(--muted);letter-spacing:1px;margin-bottom:16px;}

/* HORIZONTAL BAR */
.hb-list{display:flex;flex-direction:column;gap:9px;}
.hb-row{display:flex;flex-direction:column;gap:3px;}
.hb-meta{display:flex;justify-content:space-between;}
.hb-name{font-family:"DM Mono",monospace;font-size:9px;color:var(--muted);}
.hb-val{font-family:"DM Mono",monospace;font-size:9px;color:var(--text);}
.hb-track{height:3px;background:rgba(255,255,255,0.05);border-radius:2px;}
.hb-fill{height:100%;border-radius:2px;transition:width 1s ease;}
.fill-gold{background:linear-gradient(90deg,var(--gold),var(--gold2));}
.fill-green{background:linear-gradient(90deg,var(--green),#80E884);}
.fill-red{background:linear-gradient(90deg,var(--red),#F08080);}
.fill-blue{background:linear-gradient(90deg,var(--blue),#7AB8F5);}
.fill-purple{background:linear-gradient(90deg,var(--purple),#BF9CF5);}
.fill-orange{background:linear-gradient(90deg,var(--orange),#F0A060);}
.fill-teal{background:linear-gradient(90deg,var(--teal),#80F0D8);}

/* FUNNEL */
.funnel{display:flex;flex-direction:column;gap:8px;}
.fn-row{display:flex;align-items:center;gap:10px;}
.fn-lbl{font-family:"DM Mono",monospace;font-size:9px;color:var(--muted);width:110px;text-align:right;}
.fn-wrap{flex:1;height:26px;background:rgba(255,255,255,0.04);border-radius:1px;overflow:hidden;}
.fn-bar{height:100%;display:flex;align-items:center;padding:0 10px;transition:width 1s ease;}
.fn-bar span{font-family:"DM Mono",monospace;font-size:9px;color:#000;font-weight:600;}
.fn-n{font-family:"Playfair Display",serif;font-size:13px;color:var(--text);width:60px;text-align:right;}

/* INSIGHTS */
.ins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);}
.ins{background:var(--card);padding:18px;border-left:2px solid transparent;transition:background .2s;}
.ins:hover{background:var(--card2);}
.ins-icon{font-size:18px;margin-bottom:8px;}
.ins-title{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.ins-text{font-size:11px;line-height:1.6;}
.hl{color:var(--gold);font-weight:600;}

/* STATUS PILLS */
.pill{display:inline-block;padding:2px 7px;border-radius:10px;font-size:8px;font-family:"DM Mono",monospace;}
.pill-hi{background:rgba(76,175,80,0.15);color:var(--green);}
.pill-md{background:rgba(201,168,76,0.15);color:var(--gold);}
.pill-lo{background:rgba(224,90,90,0.15);color:var(--red);}

/* ALERT BOX */
.alert-box{background:rgba(224,90,90,0.08);border:1px solid rgba(224,90,90,0.2);
  border-radius:2px;padding:16px 20px;display:flex;align-items:flex-start;gap:12px;}
.alert-icon{font-size:20px;flex-shrink:0;}
.alert-text{font-size:12px;line-height:1.7;}
.alert-hl{color:var(--red);font-weight:600;}

/* ERROR BOX */
.error-box{background:rgba(224,90,90,0.08);border:1px solid rgba(224,90,90,0.2);border-radius:3px;
  padding:40px;text-align:center;margin:40px auto;max-width:500px;}
.error-icon{font-size:36px;margin-bottom:12px;}
.error-title{font-family:"Playfair Display",serif;font-size:20px;color:var(--red);margin-bottom:8px;}
.error-msg{font-family:"DM Mono",monospace;font-size:10px;color:var(--muted);line-height:1.8;}

/* DELTA BADGE */
.delta{display:inline-flex;align-items:center;gap:3px;font-family:"DM Mono",monospace;font-size:9px;padding:2px 6px;border-radius:2px;}
.delta.up{background:rgba(76,175,80,0.12);color:var(--green);}
.delta.down{background:rgba(224,90,90,0.12);color:var(--red);}

/* FILTER BUTTONS */
.filter-btn{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:1px;padding:5px 12px;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  cursor:pointer;border-radius:2px;transition:all .2s;}
.filter-btn:hover,.filter-btn.active{color:var(--gold);border-color:var(--gold);background:var(--gold-dim);}
.search-box{font-family:"DM Mono",monospace;font-size:9px;padding:5px 12px;
  background:var(--card2);border:1px solid var(--border);color:var(--text);
  border-radius:2px;outline:none;width:200px;transition:border .2s;}
.search-box:focus{border-color:var(--border2);}

/* FOOTER */
footer{padding:16px 28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;margin-top:auto;}
.ft-brand{font-family:"Playfair Display",serif;font-size:12px;color:var(--muted);}
.ft-info{font-family:"DM Mono",monospace;font-size:8px;color:var(--muted2);letter-spacing:1px;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

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

@media(max-width:1100px){
  .krow-5,.krow-6{grid-template-columns:repeat(3,1fr);}
  .g3{grid-template-columns:1fr 1fr;}
  .ins-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
  main{padding:16px;}
  .panel{padding:16px;}
  .topbar{padding:14px 16px;flex-wrap:wrap;gap:10px;}
  .krow-3,.krow-4,.krow-5,.krow-6{grid-template-columns:repeat(2,1fr);}
  .g2,.g21,.g12,.g3{grid-template-columns:1fr;}
  .ins-grid{grid-template-columns:1fr;}
  .tab{padding:12px 14px;}
  footer{padding:12px 16px;flex-direction:column;gap:4px;text-align:center;}
}

@media(max-width:480px){
  .krow-3,.krow-4,.krow-5,.krow-6{grid-template-columns:1fr;}
  .kpi-val{font-size:20px;}
  .brand-name{font-size:17px;}
  .fn-lbl{width:70px;font-size:8px;}
}