*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
:root{
  --bg:#1d1d1d; --bg2:#252525; --bg3:#2d2d2d; --bg4:#383838;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.14);
  --white:#FFFFFF; --warm:#EFEFEF; --gray:#BFBFBF; --dark:#222222;
  --text:#EFEFEF; --text2:#BFBFBF; --text3:#606060;
  --green:#7dd6a0; --yellow:#f0c050; --red:#e86060;
  --barlow:"Barlow Condensed",sans-serif;
  --sans:"Instrument Sans",sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --script:"Shadows Into Light",cursive;
  --sw:268px; --r:6px;
}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:13px;line-height:1.6;}
::-webkit-scrollbar{width:3px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}
#app{display:flex;height:100vh;overflow:hidden;}

/* LOGIN */
#login-view{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--bg);position:relative;overflow:hidden;}
#login-view::before{content:"PORTAIL CLIENT";position:absolute;font-family:var(--barlow);font-weight:800;font-size:130px;text-transform:uppercase;letter-spacing:-4px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.04);white-space:nowrap;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;width:200%;text-align:center;}
.login-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:48px 40px;width:100%;max-width:400px;position:relative;z-index:1;box-shadow:0 40px 80px rgba(0,0,0,.6);}
.login-logo{display:flex;justify-content:center;margin-bottom:28px;}
.login-logo img{height:26px;object-fit:contain;mix-blend-mode:screen;}
.login-title{font-family:var(--barlow);font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;line-height:1;margin-bottom:8px;}
.login-sub{color:var(--text2);font-size:12px;margin-bottom:26px;line-height:1.6;}
.form-label{display:block;font-family:var(--barlow);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:5px;}
.form-input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:11px 14px;font-family:var(--sans);font-size:13px;color:var(--text);outline:none;transition:border-color .2s;}
.form-input:focus{border-color:var(--warm);}
.form-input::placeholder{color:var(--text3);}
.form-group{margin-bottom:14px;}
select.form-input{appearance:none;cursor:pointer;}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:var(--r);background:var(--white);color:var(--dark);border:none;font-family:var(--barlow);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:background .15s;}
.btn-primary:hover{background:var(--warm);}
.btn-secondary{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;border-radius:var(--r);background:transparent;color:var(--gray);border:1.5px solid var(--border2);font-family:var(--barlow);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:all .15s;margin-top:10px;}
.btn-secondary:hover{background:var(--bg3);border-color:var(--gray);color:var(--white);}
.login-success{display:none;text-align:center;}
.login-success-icon{font-size:36px;margin-bottom:12px;}
.login-success-title{font-family:var(--barlow);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.login-success-text{color:var(--text2);font-size:12px;line-height:1.6;margin-bottom:18px;}
.login-footer{text-align:center;margin-top:18px;color:var(--text3);font-size:11px;}
.login-footer a{color:var(--gray);text-decoration:none;}

/* PORTAL */
#portal-view{display:none;width:100%;height:100%;flex-direction:row;}
#portal-view.active{display:flex;}

/* SIDEBAR */
.sidebar{width:var(--sw);min-width:var(--sw);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;z-index:10;transition:transform .3s ease;}
.sidebar-logo{padding:22px 20px 18px;border-bottom:1px solid var(--border);}
.sidebar-logo img{height:20px;object-fit:contain;mix-blend-mode:screen;}
.sidebar-client{padding:16px 20px;border-bottom:1px solid var(--border);}
.client-name{font-family:var(--barlow);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--white);line-height:1;margin-bottom:3px;}
.client-sector{font-family:var(--barlow);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);display:flex;align-items:center;gap:5px;}
.client-sector::before{content:"";width:4px;height:4px;background:var(--white);border-radius:50%;opacity:.3;}
.sidebar-nav{padding:12px 8px;flex:1;}
.nav-label{font-family:var(--barlow);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:0 10px;margin-bottom:3px;margin-top:12px;}
.nav-label:first-child{margin-top:0;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:pointer;transition:background .12s;font-family:var(--barlow);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text2);text-decoration:none;margin-bottom:1px;border:1px solid transparent;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--bg4);color:var(--white);border-color:var(--border2);}
.nav-item-special{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);}
.nav-item-special:hover{background:rgba(255,255,255,.07);}
.nav-icon{width:14px;height:14px;opacity:.5;flex-shrink:0;}
.nav-item.active .nav-icon{opacity:1;}
.sidebar-footer{padding:12px 8px;border-top:1px solid var(--border);}
.btn-logout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;background:transparent;border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);font-family:var(--barlow);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all .15s;}
.btn-logout:hover{background:rgba(232,96,96,.08);color:var(--red);border-color:rgba(232,96,96,.25);}

/* MAIN */
.main{flex:1;overflow-y:auto;overflow-x:hidden;height:100vh;}
.main-header{display:flex;align-items:center;gap:12px;padding:16px 28px;border-bottom:1px solid var(--border);background:rgba(29,29,29,.96);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px);}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px;background:none;border:none;}
.hamburger span{display:block;width:17px;height:1.5px;background:var(--text2);border-radius:1px;}
.page-title{font-family:var(--barlow);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--white);flex:1;}
.header-tag{border:1px solid var(--border2);border-radius:3px;color:var(--text3);padding:3px 10px;font-family:var(--barlow);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.content{padding:28px;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;}}
.section{display:none;}
.section.active{display:block;}

/* WELCOME */
.welcome-banner{border:1px solid var(--border);border-radius:var(--r);padding:28px;margin-bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;position:relative;overflow:hidden;background:var(--bg2);}
.welcome-banner::after{content:"SM";position:absolute;right:-16px;bottom:-28px;font-family:var(--barlow);font-size:170px;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);line-height:1;pointer-events:none;letter-spacing:-6px;}
.welcome-eyebrow{font-family:var(--barlow);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.welcome-title{font-family:var(--barlow);font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--white);line-height:1;}
.welcome-date{font-size:12px;color:var(--text2);margin-top:5px;}
.health-wrap{text-align:right;position:relative;z-index:1;}
.health-num{font-family:var(--barlow);font-size:52px;font-weight:800;color:var(--white);line-height:1;letter-spacing:-2px;}
.health-label{font-family:var(--barlow);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}
.health-bar{width:100px;height:2px;background:var(--bg4);border-radius:1px;overflow:hidden;margin:7px 0 0 auto;}
.health-fill{height:100%;background:var(--white);border-radius:1px;}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:20px;}
.kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:17px;position:relative;overflow:hidden;transition:border-color .15s;}
.kpi-card:hover{border-color:var(--border2);}
.kpi-top{position:absolute;top:0;left:0;right:0;height:1px;background:var(--white);opacity:0;transition:opacity .2s;}
.kpi-card:hover .kpi-top{opacity:.15;}
.kpi-label{font-family:var(--barlow);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:9px;}
.kpi-value{font-family:var(--mono);font-size:25px;font-weight:500;color:var(--white);letter-spacing:-.02em;margin-bottom:5px;}
.kpi-change{font-size:11px;font-weight:500;}
.up{color:var(--green);} .down{color:var(--red);} .flat{color:var(--text3);}
.spark{display:flex;align-items:flex-end;gap:2px;height:16px;margin-top:7px;}
.spark span{flex:1;min-width:3px;border-radius:1px 1px 0 0;background:var(--white);opacity:.15;}
.spark span:last-child{opacity:.55;}

/* CARD */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:14px;}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border);}
.card-title{font-family:var(--barlow);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--white);display:flex;align-items:center;gap:8px;}
.card-icon{font-size:13px;opacity:.5;}
.card-body{padding:18px;}

/* BTN SM */
.btn-sm{padding:5px 13px;border-radius:var(--r);font-family:var(--barlow);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;transition:all .12s;}
.btn-sm-white{background:var(--white);color:var(--dark);border:1px solid var(--white);}
.btn-sm-white:hover{background:var(--warm);}
.btn-sm-outline{background:transparent;color:var(--gray);border:1px solid var(--border2);}
.btn-sm-outline:hover{background:var(--bg3);color:var(--white);border-color:var(--gray);}

/* TABLE */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;padding:9px 13px;font-family:var(--barlow);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);background:var(--bg3);border-bottom:1px solid var(--border);}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--bg3);}
tbody td{padding:10px 13px;font-size:12px;color:var(--text);vertical-align:middle;}
.td-m{font-family:var(--mono);font-size:12px;}
.td-dim{color:var(--text3);}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;font-family:var(--barlow);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.b-green{background:rgba(125,214,160,.1);color:var(--green);border:1px solid rgba(125,214,160,.2);}
.b-yellow{background:rgba(240,192,80,.1);color:var(--yellow);border:1px solid rgba(240,192,80,.2);}
.b-red{background:rgba(232,96,96,.08);color:var(--red);border:1px solid rgba(232,96,96,.2);}
.b-gray{background:var(--bg4);color:var(--text3);border:1px solid var(--border);}
.b-white{background:rgba(255,255,255,.07);color:var(--gray);border:1px solid var(--border2);}

/* POS */
.pos{display:inline-flex;align-items:center;justify-content:center;width:24px;height:19px;border-radius:3px;font-family:var(--mono);font-size:10px;}
.p-a{background:rgba(125,214,160,.12);color:var(--green);}
.p-b{background:rgba(255,255,255,.07);color:var(--warm);}
.p-c{background:rgba(240,192,80,.1);color:var(--yellow);}
.p-d{background:var(--bg4);color:var(--text3);}

/* GRID */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* TEAM */
.team-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:7px;transition:border-color .15s;}
.team-item:last-child{margin-bottom:0;}
.team-item:hover{border-color:var(--border2);}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--barlow);font-size:13px;font-weight:800;color:var(--white);flex-shrink:0;}
.team-name-s{font-family:var(--script);font-size:17px;color:var(--white);line-height:1;margin-bottom:1px;}
.team-role{font-family:var(--barlow);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:3px;}
.team-email{font-size:10px;color:var(--text3);}

/* TIMELINE */
.timeline{position:relative;padding-left:18px;}
.timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--border);}
.tl-item{position:relative;padding-bottom:16px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:-15px;top:5px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--bg2);}
.d-w{background:var(--white);} .d-g{background:var(--green);} .d-y{background:var(--yellow);}
.tl-time{font-size:10px;color:var(--text3);font-family:var(--mono);margin-bottom:2px;}
.tl-text{font-size:12px;color:var(--text);font-weight:500;margin-bottom:1px;}
.tl-meta{font-size:11px;color:var(--text2);}

/* CHART */
.chart-box{background:var(--bg3);border-radius:var(--r);padding:14px;}
.chart-legend{display:flex;gap:14px;margin-bottom:10px;}
.leg-i{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);}
.leg-dot{width:6px;height:6px;border-radius:50%;}

/* BAR */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.bar-lbl{font-size:11px;color:var(--text2);width:150px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1;height:5px;background:var(--bg4);border-radius:2px;overflow:hidden;}
.bar-fill{height:100%;border-radius:2px;}
.bar-val{font-family:var(--mono);font-size:11px;color:var(--text2);width:48px;text-align:right;flex-shrink:0;}

/* ADS TABS */
.ads-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:14px;}
.ads-tab{padding:8px 15px;font-family:var(--barlow);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .12s;}
.ads-tab.active{color:var(--white);border-bottom-color:var(--white);}
.ads-pane{display:none;}
.ads-pane.active{display:block;}

/* BILLING */
.bill-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px;}
.bill-stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:17px;}
.bill-label{font-family:var(--barlow);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.bill-val{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--white);}
.bill-val.g{color:var(--green);} .bill-val.r{color:var(--red);}

/* REPORTS */
.report-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);}
.report-item:last-child{border-bottom:none;}
.report-icon-box{width:36px;height:36px;border-radius:var(--r);background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.report-info{flex:1;}
.report-name{font-family:var(--barlow);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;}
.report-meta{font-size:11px;color:var(--text3);}
.report-actions{display:flex;gap:5px;}
.report-detail{display:none;animation:fadeIn .2s ease;}
.report-detail.visible{display:block;}
.report-back{display:flex;align-items:center;gap:6px;font-family:var(--barlow);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);cursor:pointer;margin-bottom:16px;transition:color .12s;}
.report-back:hover{color:var(--white);}
.rd-header{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:16px;display:flex;align-items:flex-start;justify-content:space-between;}
.rd-eyebrow{font-family:var(--barlow);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:4px;}
.rd-title{font-family:var(--barlow);font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--white);margin-bottom:3px;}
.rd-meta{font-size:11px;color:var(--text2);}

/* DOCS */
.drive-cta{display:flex;align-items:center;gap:13px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:15px 18px;margin-bottom:16px;cursor:pointer;transition:border-color .15s;}
.drive-cta:hover{border-color:var(--border2);}
.drive-title{font-family:var(--barlow);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;}
.drive-sub{font-size:11px;color:var(--text3);}
.doc-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r);background:var(--bg3);margin-bottom:5px;border:1px solid var(--border);transition:border-color .12s;}
.doc-item:hover{border-color:var(--border2);}
.doc-icon{font-size:17px;width:26px;text-align:center;}
.doc-name{flex:1;font-size:12px;font-weight:500;}
.doc-date{font-size:10px;color:var(--text3);font-family:var(--mono);}
.doc-size{font-size:10px;color:var(--text3);font-family:var(--mono);margin-right:5px;}
.upload-zone{border:1.5px dashed var(--border2);border-radius:var(--r);padding:34px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:16px;}
.upload-zone:hover{border-color:var(--gray);background:rgba(255,255,255,.02);}
.upload-icon{font-size:26px;margin-bottom:9px;opacity:.35;}
.upload-text{font-family:var(--barlow);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.upload-sub{font-size:11px;color:var(--text3);}

/* GESTION */
.gestion-monday-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:var(--white);color:var(--dark);border:none;border-radius:var(--r);font-family:var(--barlow);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;text-decoration:none;transition:background .15s;}
.gestion-monday-btn:hover{background:var(--warm);}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.modal-bg.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:28px;width:100%;max-width:420px;animation:modalIn .2s ease;}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(6px);}to{opacity:1;transform:none;}}
.modal-title{font-family:var(--barlow);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.modal-sub{font-size:12px;color:var(--text2);margin-bottom:18px;}
.modal-actions{display:flex;gap:8px;margin-top:14px;}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--white);border-radius:var(--r);padding:10px 15px;font-family:var(--barlow);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dark);z-index:300;box-shadow:0 8px 30px rgba(0,0,0,.5);transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.toast.show{transform:translateY(0);opacity:1;}

/* SEC HEADER */
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sec-title{font-family:var(--barlow);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--white);}
.sec-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.divider{height:1px;background:var(--border);margin:18px 0;}
.evo-up{color:var(--green);}
.evo-down{color:var(--red);}

/* SIDEBAR OVERLAY */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9;backdrop-filter:blur(4px);}

/* RESPONSIVE */
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);z-index:100;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay.open{display:block;}
  .hamburger{display:flex;}
  .main-header{padding:13px 16px;}
  .content{padding:16px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .row-2,.bill-summary{grid-template-columns:1fr;}
  .welcome-banner{flex-direction:column;gap:16px;}
  .rd-header{flex-direction:column;gap:12px;}
}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr;}}