:root{
 --bg:#073f4b;--panel:#0b5260;--panel2:#083f4b;--line:#2c7180;
 --text:#ffffff;--muted:#b8d0d5;--accent:#50aebb;--accent2:#78c4cc;
 --cyan:#55bdc8;--green:#7cc7c1;--blue:#50aebb;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
body{background:linear-gradient(135deg,#063a46 0%,#07515e 55%,#083f4b 100%) fixed}
.login-body{display:grid;place-items:center;padding:30px}
.login-shell{width:min(980px,100%);display:grid;grid-template-columns:1.08fr .92fr;border:1px solid #2c7180;overflow:hidden;background:#083f4b;box-shadow:0 28px 90px #000}
.login-brand{padding:72px 58px;background:linear-gradient(145deg,#073f4b,#0a5966);position:relative}
.login-brand:after{content:"";position:absolute;left:58px;bottom:48px;width:90px;height:4px;background:var(--accent)}
.acrl-logo{display:block;object-fit:contain;object-position:left center}
.login-logo{width:260px;max-width:90%;height:118px;margin-bottom:34px}
.acrl-kicker,.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:800}
.login-brand h1,.topbar h1{font-size:42px;margin:10px 0;font-weight:800;letter-spacing:-.04em}
.login-brand h1 span,.topbar h1 span{color:var(--accent)}
.login-brand p,.login-card p{color:var(--muted);line-height:1.6}
.login-card{padding:58px 46px;background:#f3f6f6}
.login-card h2{font-size:28px;margin-top:0}.login-card label{display:block;color:#173a40;margin:18px 0 7px;font-size:13px}
.login-card input,.filters input{width:100%;background:#ffffff;border:1px solid #8ab4bb;color:#173a40;border-radius:3px;padding:13px;outline:none}
.login-card input:focus,.filters input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
button,.logout{border:1px solid var(--accent);border-radius:2px;background:var(--accent);color:#090909;padding:13px 18px;font-weight:800;cursor:pointer;text-decoration:none;transition:.2s}
button:hover,.logout:hover{background:#ffd04a;border-color:#ffd04a}
.login-card button{width:100%;margin-top:24px;text-transform:uppercase;letter-spacing:.08em}
.alert{background:#7a2930;border:1px solid #b94a54;padding:11px;color:#ffdce3}
.topbar{min-height:105px;display:flex;align-items:center;justify-content:space-between;padding:14px 30px;border-bottom:1px solid #d1dfe1;background:#f4f7f7f2;backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.brand-row{display:flex;align-items:center;gap:22px}.dashboard-logo{width:165px;height:72px}.brand-divider{width:1px;height:52px;background:#35383d}
.topbar h1{font-size:25px;margin:3px 0}.top-info{display:flex;align-items:center;gap:28px}.top-info div{display:flex;flex-direction:column}.top-info small{color:var(--muted);margin-bottom:4px}
.dashboard{padding:24px;max-width:1900px;margin:auto}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.metric,.panel{background:linear-gradient(180deg,#0b5664,#084752);border:1px solid #2d7180;border-radius:4px}
.metric{padding:20px;border-top:2px solid #4a9eaa}.metric:first-child{border-top-color:var(--accent)}
.metric span,.metric small{color:var(--muted)}.metric strong{display:block;font-size:30px;margin:9px 0}
.soc-track{height:5px;background:#073b46;overflow:hidden}.soc-track div{height:100%;background:var(--accent);width:0;transition:.4s}
.panel{padding:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.panel h2{font-size:19px;margin:4px 0}
.filters{display:flex;gap:9px}.filters input{min-width:160px}
.chart-wrap{height:470px;background:#073b46;border:1px solid #2c7180;padding:10px}
.legend-note{display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:12px}
.lower-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;margin-top:14px}
.battery-area{display:flex;align-items:center;justify-content:center;gap:35px;min-height:220px}
.battery{width:85px;height:150px;border:4px solid #666b72;border-radius:5px;position:relative;padding:6px;display:flex;align-items:flex-end}
.battery:before{content:"";position:absolute;top:-14px;left:25px;width:28px;height:9px;background:#666b72;border-radius:2px 2px 0 0}
.battery div{width:100%;height:0;background:linear-gradient(#78c4cc,#50aebb);border-radius:2px;transition:.4s}.big-soc{font-size:45px;font-weight:800}
.flow{display:flex;align-items:center;justify-content:center;min-height:220px}.flow-node{text-align:center;min-width:100px}.flow-node span{font-size:42px;display:block}.flow-node b,.flow-node em{display:block;margin-top:7px}.flow-node em{font-style:normal;color:var(--accent)}
.flow-line{height:2px;flex:1;max-width:180px;background:#2b7180;position:relative;overflow:hidden}.flow-line i{position:absolute;width:50px;height:100%;background:var(--accent);animation:flow 1.5s linear infinite}
@keyframes flow{from{left:-50px}to{left:100%}}
.datepicker-box{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.datepicker-box>label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:800}
.date-controls{display:flex;gap:7px;align-items:center}
.date-controls input[type="date"]{width:165px;min-width:165px;color-scheme:dark}
.date-nav,.date-secondary{padding:11px 14px;background:#0a5360;border:1px solid #69aeb8;color:#fff}
.date-nav{font-size:20px;line-height:18px}.date-nav:hover,.date-secondary:hover{background:#0d6674;border-color:var(--accent2)}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-brand{display:none}.summary-grid{grid-template-columns:repeat(2,1fr)}.lower-grid{grid-template-columns:1fr}.top-info{gap:10px}.chart-wrap{height:390px}.dashboard-logo{width:120px}}
@media(max-width:700px){.date-controls{flex-wrap:wrap}.datepicker-box{width:100%}.brand-divider{display:none}}
@media(max-width:560px){.summary-grid{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:12px}.brand-row{gap:10px}.dashboard-logo{width:95px;height:50px}.top-info{flex-wrap:wrap;justify-content:flex-end}.panel-head{align-items:flex-start;flex-direction:column}.filters{width:100%}.filters input{min-width:0}.flow-node{min-width:72px}.dashboard{padding:12px}}

.chart-wrap{position:relative}
.chart-no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a8adb4;font-size:15px;letter-spacing:.02em;text-align:center;padding:30px}
.chart-no-data[hidden]{display:none!important}

/* ACRL corporate palette V1.6 — synchronized to supplied website reference */
.topbar{color:#173a40}
.topbar h1{color:#173a40}
.topbar h1 span{color:#50aebb}
.top-info small{color:#60787d}
.top-info strong{color:#173a40}
.logout{background:transparent;color:#0b4a56;border-color:#0b4a56}
.logout:hover{background:#0b4a56;color:#fff;border-color:#0b4a56}
.dashboard-body{background:linear-gradient(145deg,#073f4b 0%,#0a5966 55%,#073e49 100%) fixed}
.metric,.panel{box-shadow:0 8px 22px rgba(0,25,31,.16)}
.metric:first-child{border-top-color:#78c4cc}
.chart-panel .eyebrow,.panel .eyebrow{color:#78c4cc}
.date-controls input[type="date"]{background:#f4f7f7;color:#173a40;border-color:#8ab4bb;color-scheme:light}
.date-controls #btnActualizar{background:#50aebb;border-color:#50aebb;color:#083943}
.date-controls #btnActualizar:hover{background:#78c4cc;border-color:#78c4cc}
.login-card{color:#173a40}
.login-card h2{color:#173a40}
.login-card p{color:#60787d}
.login-card label{color:#173a40}
.login-card button{background:#50aebb;border-color:#50aebb;color:#083943}
.login-card button:hover{background:#78c4cc;border-color:#78c4cc}
.login-brand:after{background:#50aebb}
.acrl-kicker,.eyebrow{color:#50aebb}
.login-brand h1 span{color:#78c4cc}

/* V1.6.1 — ACRL logo top-left */
.topbar{padding-left:42px}
.brand-row{display:flex;align-items:center;gap:24px}
.dashboard-logo{
    width:155px;
    height:58px;
    max-width:155px;
    object-fit:contain;
    object-position:left center;
    flex:0 0 auto;
}
.brand-divider{height:58px;background:#7f9296}
@media(max-width:700px){
    .topbar{padding-left:18px}
    .dashboard-logo{width:120px;max-width:120px;height:48px}
}

.flow-status{display:flex;gap:10px;align-items:center;font-size:12px}.flow-status span{border:1px solid #78c4cc;padding:5px 8px;border-radius:3px}.energy-flow{position:relative;display:grid;grid-template-columns:150px 1fr 150px 1fr 150px;align-items:center;min-height:280px;padding:35px 8% 75px}.energy-flow .flow-node{text-align:center;z-index:3}.energy-flow .flow-node span{font-size:48px;display:block}.energy-flow .flow-node b{font-size:20px;display:block}.energy-flow .flow-node em{font-size:19px;color:#9ff4f6;font-style:normal;display:block;margin-top:10px}.energy-flow .flow-node small{display:block;margin-top:5px}.flow-line{position:relative;height:4px;background:#3d8d98;overflow:hidden}.flow-line i,.flow-cfe-site i{display:none;position:absolute;width:90px;height:100%;background:linear-gradient(90deg,transparent,#b6ffff,transparent)}.flow-line.reverse i,.flow-cfe-site.reverse i{display:block;animation:rev 1.1s linear infinite}.flow-line.forward i,.flow-cfe-site.forward i{display:block;animation:fwd 1.1s linear infinite}@keyframes rev{from{left:100%}to{left:-90px}}@keyframes fwd{from{left:-90px}to{left:100%}}.flow-cfe-site{position:absolute;left:14%;right:14%;bottom:30px;height:4px;background:#3d8d98;overflow:hidden}.flow-cfe-site:before,.flow-cfe-site:after{content:"";position:absolute;bottom:0;width:4px;height:42px;background:#3d8d98}.flow-cfe-site:before{left:0}.flow-cfe-site:after{right:0}

/* V1.8 - Logo ACRL Group exacto proporcionado */
.dashboard-logo{width:190px!important;max-width:190px!important;height:62px!important;object-fit:contain!important;object-position:left center!important}
.login-logo{width:320px!important;max-width:95%!important;height:auto!important;object-fit:contain!important;object-position:left center!important}
@media(max-width:700px){.dashboard-logo{width:145px!important;max-width:145px!important;height:50px!important}}


/* V1.9 — logo de empresa tomado de usuarios.logo */
.customer-logo-slot{
    flex:1 1 auto;
    min-width:120px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px 28px;
}
.customer-logo{
    display:block;
    max-width:260px;
    max-height:66px;
    width:auto;
    height:auto;
    object-fit:contain;
}
.topbar .brand-row{flex:0 0 auto}
.topbar .top-info{flex:0 0 auto}

@media(max-width:900px){
    .customer-logo-slot{padding:4px 12px;min-width:80px}
    .customer-logo{max-width:180px;max-height:54px}
}
@media(max-width:700px){
    .customer-logo-slot{order:3;width:100%;height:55px}
    .customer-logo{max-width:180px;max-height:48px}
    .topbar{flex-wrap:wrap}
}


/* ============================================================
   V1.9.1 — Logos ACRL y empresa con el mismo tamaño
   ============================================================ */
.topbar .dashboard-logo,
.topbar .customer-logo{
    width:260px !important;
    height:76px !important;
    max-width:260px !important;
    max-height:76px !important;
    object-fit:contain !important;
    display:block;
}

.topbar .dashboard-logo{
    object-position:left center !important;
}

.topbar .customer-logo{
    object-position:center center !important;
}

.topbar .customer-logo-slot{
    flex:0 0 260px !important;
    width:260px !important;
    min-width:260px !important;
    height:76px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Conserva el bloque EMS/BESS y distribuye correctamente el encabezado */
.topbar .brand-row{
    flex:0 0 auto !important;
}

.topbar .top-info{
    flex:0 0 auto !important;
}

@media(max-width:1100px){
    .topbar .dashboard-logo,
    .topbar .customer-logo{
        width:210px !important;
        max-width:210px !important;
        height:64px !important;
        max-height:64px !important;
    }
    .topbar .customer-logo-slot{
        flex-basis:210px !important;
        width:210px !important;
        min-width:210px !important;
        height:64px !important;
    }
}

@media(max-width:800px){
    .topbar{
        flex-wrap:wrap;
    }
    .topbar .dashboard-logo,
    .topbar .customer-logo{
        width:180px !important;
        max-width:180px !important;
        height:55px !important;
        max-height:55px !important;
    }
    .topbar .customer-logo-slot{
        flex:1 1 100% !important;
        width:100% !important;
        min-width:0 !important;
        height:60px !important;
        order:3;
    }
}

/* ============================================================
   V1.10 — Análisis mensual de Demanda Punta GDMTH
   ============================================================ */
.demand-analysis-panel{margin-top:14px}
.demand-head{align-items:flex-end}
.demand-month-picker{display:flex;flex-direction:column;gap:6px}
.demand-month-picker label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:800}
.demand-month-picker input{background:#f4f7f7;color:#173a40;border:1px solid #8ab4bb;border-radius:3px;padding:11px 13px;color-scheme:light}
.demand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.demand-card{padding:18px;background:#073f4b;border:1px solid #2c7180;border-top:3px solid #50aebb;border-radius:4px}
.demand-card.highlight{border-top-color:#9ff4f6;background:#0a5966}
.demand-card span{display:block;color:#b8d0d5;font-size:12px;min-height:32px}
.demand-card strong{display:block;color:#fff;font-size:27px;margin:7px 0}
.demand-card small{color:#9ebdc2}
.demand-message{padding:14px;margin-bottom:12px;border:1px solid #5f99a2;background:#083f4b;color:#d8edf0}
.savings-box{display:grid;grid-template-columns:1fr 2fr;gap:18px;margin-top:14px;padding:18px;background:#062f38;border:1px solid #2c7180}
.savings-total span,.savings-total small{display:block;color:#b8d0d5}.savings-total strong{display:block;font-size:32px;color:#9ff4f6;margin:7px 0}.savings-total small{line-height:1.45}
.savings-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.savings-breakdown div{padding:11px;background:#084752;border:1px solid #276b77}.savings-breakdown span{display:block;color:#a9c8cd;font-size:11px}.savings-breakdown b{display:block;color:#fff;margin-top:5px}
.demand-method{margin-top:12px;color:#a9c8cd;font-size:11px;line-height:1.5}
@media(max-width:1000px){.demand-grid{grid-template-columns:repeat(2,1fr)}.savings-box{grid-template-columns:1fr}.savings-breakdown{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.demand-grid,.savings-breakdown{grid-template-columns:1fr}.demand-head{align-items:flex-start}.demand-month-picker{width:100%}.demand-month-picker input{width:100%}}

/* Logo empresa: tamaño solicitado */
.topbar .customer-logo-slot{height:100px !important}
.topbar .customer-logo{width:220px !important;height:100px !important;max-width:220px !important;max-height:100px !important;object-fit:contain !important;object-position:center center !important}