@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
:root{font-family:'Inter',Arial,Helvetica,sans-serif;color:#e8eef5;background:#111820}
body{margin:0;background:#111820;color:#e8eef5}
.topbar{min-height:80px;background:#0d131a;border-bottom:1px solid #2e4052;padding:10px 18px;display:flex;justify-content:space-between;align-items:center}
.brand{color:#ff8a00;letter-spacing:2px;text-transform:uppercase;font-weight:800;font-size:15px}
.page-title{font-size:28px;font-weight:800;margin-top:3px}
.content{padding:14px;max-width:1500px;margin:0 auto}
.back-button,.download-button{background:#263543;color:#e8eef5;text-decoration:none;padding:11px 18px;border-radius:10px;font-weight:800;transition:.2s ease;white-space:nowrap}
.back-button:hover,.download-button:hover{background:#34485c}
.machine-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.machine-card{position:relative;display:block;min-height:135px;background:#182330;border:1px solid #34485c;border-radius:14px;padding:18px;color:inherit;text-decoration:none;transition:.2s ease}
.machine-card:hover{border-color:#ff8a00;transform:translateY(-1px)}
.machine-card.meter-linked{box-shadow:inset 4px 0 0 #ff8a00}
.machine-code{color:#ff8a00;font-size:22px;font-weight:800;margin-bottom:8px}
.machine-name{font-size:21px;font-weight:700}
.meter-state{position:absolute;left:18px;bottom:15px;color:#8fa2b5;font-size:11px;font-weight:800;letter-spacing:.08em}
.meter-linked .meter-state{color:#ffb35a}
.panel{background:#182330;border:1px solid #34485c;border-radius:14px;padding:16px 18px}
.panel-title{color:#ff8a00;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.panel-subtitle{color:#9fb0c0;font-size:13px;margin-top:4px}
.primary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.metric-panel{min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.metric-value{font-size:clamp(38px,5vw,64px);font-weight:800;line-height:1;text-align:center;margin:18px 0 4px}
.metric-unit{font-size:.36em;margin-left:7px;color:#c7d5e3}
.table-panel{margin-bottom:12px}
.table-scroll{overflow-x:auto}
.measure-table{width:100%;border-collapse:collapse;font-size:17px;margin-top:10px}
.measure-table th,.measure-table td{padding:11px 12px;border-bottom:1px solid #34485c;text-align:center}
.measure-table th{color:#ff8a00}
.measure-table th:first-child,.measure-table td:first-child{text-align:left;font-weight:700}
.measure-table tbody tr:last-child td{border-bottom:0}
.consumption-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.consumption-card{min-height:115px}
.consumption-value{font-size:30px;font-weight:800;text-align:center;margin-top:22px}
.consumption-value small{font-size:16px;color:#c7d5e3}
.chart-panel{margin-bottom:12px}
.panel-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
#power-chart{display:block;width:100%;height:270px}
.chart-empty{text-align:center;color:#9fb0c0;padding:90px 0;display:none}
.empty-panel{font-size:20px;color:#c7d5e3}
@media(max-width:1100px){.machine-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.consumption-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.topbar{min-height:76px;gap:12px}.page-title{font-size:21px}.content{padding:10px}.machine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.primary-grid{grid-template-columns:1fr}.consumption-grid{grid-template-columns:1fr 1fr}.metric-panel{min-height:125px}.metric-value{font-size:46px}.panel-heading-row{align-items:flex-start;flex-direction:column}.download-button{width:100%;text-align:center}.measure-table{min-width:560px}.machine-name{font-size:17px}.machine-card{min-height:125px}}
@media(max-width:460px){.machine-grid{grid-template-columns:1fr}.consumption-grid{grid-template-columns:1fr}.machine-topbar{align-items:flex-start}.back-button{padding:9px 12px}.page-title{font-size:18px}}
/* LOGIN */

.login-panel {
    width: 100%;
    max-width: 420px;
    margin: 70px auto 0;
    padding: 32px;
    background: #182330;
    border: 1px solid #34485c;
    border-radius: 14px;
    box-sizing: border-box;
}

.login-panel h1 {
    margin: 0 0 6px;
    color: #e8eef5;
    font-size: 24px;
}

.login-company {
    margin-bottom: 28px;
    color: #ff8a00;
    font-size: 16px;
    font-weight: bold;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-form label {
    color: #e8eef5;
    font-size: 14px;
}

.login-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #34485c;
    border-radius: 8px;
    background: #111820;
    color: #e8eef5;
    font-size: 16px;
    outline: none;
}

.login-form input:focus {
    border-color: #ff8a00;
}

.login-form button {
    margin-top: 8px;
    padding: 13px;
    border: 0;
    border-radius: 8px;
    background: #ff8a00;
    color: #111820;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.login-error {
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid #b94a48;
    border-radius: 8px;
    color: #ffb4b4;
    background: #2a181b;
}
.company-name {
    margin-top: 4px;
    color: #ff8a00;
    font-size: 14px;
    font-weight: 600;
}
/* DASHBOARD NUEVO */

.energy-topbar {
    min-height: 88px;
    background: #0b121a;
    border-bottom: 1px solid #263746;
    padding: 14px 24px;
}

.energy-header {
    width: 100%;
}

.energy-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.energy-brand .brand {
    font-size: 18px;
    letter-spacing: 2px;
}

.brand-divider {
    width: 1px;
    height: 18px;
    background: #405264;
}

.header-company {
    color: #e8eef5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.energy-title {
    margin-top: 7px;
    color: #a9b7c5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
}

/* TARJETAS */

.energy-topbar + .content {
    padding-top: 22px;
}

.machine-card {
    min-height: 112px;
    padding: 20px;
    background: #121d28;
    border: 1px solid #2b3d4d;
    border-radius: 10px;
    box-shadow: none;
}

.machine-card:hover {
    background: #162431;
    border-color: #ff8a00;
    transform: translateY(-2px);
}

.machine-card.meter-linked {
    box-shadow: none;
    border-color: #3b5367;
}

.machine-card-title {
    color: #f2f6fa;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.machine-card-title::first-letter {
    color: #ff8a00;
}

.machine-card .meter-state {
    display: flex;
    align-items: center;
    gap: 7px;
    left: 20px;
    bottom: 18px;
    color: #718395;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
}

.machine-card.meter-linked .meter-state {
    color: #aebdca;
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #586978;
}

.status-dot.active {
    background: #ff8a00;
    box-shadow: 0 0 8px rgba(255, 138, 0, .45);
}

.status-dot.inactive {
    background: #536372;
}

@media(max-width:760px) {
    .energy-topbar {
        padding: 13px 16px;
    }

    .energy-brand {
        gap: 10px;
    }

    .energy-brand .brand {
        font-size: 16px;
    }

    .header-company {
        font-size: 12px;
    }

    .machine-card-title {
        font-size: 18px;
    }
}