/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */

:root {
    --background:#f3f6f4;
    --surface:#fff;
    --surface-soft:#f8faf8;

    --text-primary:#1f2a24;
    --text-secondary:#66736b;
    --text-light:#8c9890;

    --primary:#2d7a4b;
    --primary-dark:#205d38;
    --primary-soft:#e9f5ed;

    --accent:#d8a21b;
    --border:#dfe7e1;

    --shadow-small:0 4px 14px rgba(31,42,36,.07);
    --shadow-medium:0 10px 30px rgba(31,42,36,.10);

    --radius-medium:16px;
    --radius-large:22px;
}

*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--background);
    color:var(--text-primary);
}

.main-header{
    padding:34px 24px;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-dark),var(--primary));
    box-shadow:var(--shadow-medium);
}

.header-content{
    max-width:1240px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.project-name{
    margin:0;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:rgba(255,255,255,.8);
}

.main-header h1{
    margin:6px 0;
    font-size:42px;
}

.header-subtitle{
    margin:0;
    color:rgba(255,255,255,.85);
}

.connection-box{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.15);
}

.connection-indicator{
    width:11px;
    height:11px;
    border-radius:50%;
    background:#aaa;
}

.connection-indicator.online{background:#4dd16f}
.connection-indicator.offline{background:#e35d5d}

.dashboard{
    max-width:1240px;
    margin:auto;
    padding:32px 24px 50px;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:28px;
}

.chart-card .cards-grid{
    grid-template-columns:repeat(3,1fr);
    margin-top:24px;
}

.data-card{
    min-height:165px;
    background:#fff;
    border-radius:16px;
    border:1px solid var(--border);
    padding:22px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-small);
}

.data-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--primary);
}

.total-card{
    background:linear-gradient(145deg,var(--primary-dark),var(--primary));
    color:#fff;
}

.total-card::before{
    background:var(--accent);
}

.card-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:28px;
    gap:12px;
}

.card-label{
    font-size:15px;
    font-weight:700;
}

.card-unit{
    font-size:12px;
    color:var(--text-light);
    text-align:right;
}

.total-card .card-unit,
.total-card .card-label{
    color:rgba(255,255,255,.85);
}

.card-value{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:48px;
    font-weight:700;
}

.card-value .unit{
    font-size:18px;
    color:var(--text-secondary);
}

.total-card .unit{
    color:#fff;
}

.chart-card{
    margin-top:30px;
    padding:26px;
    background:#fff;
    border-radius:22px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-small);
}

.chart-header,
.weather-chart-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:20px;
}

.weather-chart-header{
    margin-top:30px;
    padding-top:25px;
    border-top:1px solid var(--border);
}

.chart-header h2,
.weather-chart-header h3{
    margin:0 0 6px;
}

.chart-header p,
.weather-chart-header p{
    margin:0;
    color:var(--text-secondary);
}

#estadoHistorico,
#estadoAgzoom,
#estadoHistoricoAgzoom{
    padding:8px 12px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.chart-container{
    height:440px;
    position:relative;
}

.weather-chart-container{
    height:420px;
}

.chart-card>p:last-child{
    margin-top:18px;
    font-size:13px;
    color:var(--text-secondary);
}

.dashboard-footer{
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
    font-size:13px;
    color:var(--text-secondary);
}

@media(max-width:1050px){

.cards-grid{
grid-template-columns:repeat(2,1fr);
}

.chart-card .cards-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.header-content{
flex-direction:column;
align-items:flex-start;
}

.cards-grid,
.chart-card .cards-grid{
grid-template-columns:1fr;
}

.chart-header,
.weather-chart-header{
flex-direction:column;
}

.chart-container{
height:340px;
}

.weather-chart-container{
height:320px;
}

.main-header h1{
font-size:30px;
}

.card-value{
font-size:38px;
}

}