```css
* {
    box-sizing: border-box;
}

body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f3f5f7;

    color: #20242a;
}


/* =====================================================
   HEADER
===================================================== */

header {

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        25px
        40px;

    background: #ffffff;

    border-bottom:
        1px solid #e5e7eb;
}


header h1 {

    margin: 0;

    font-size: 28px;
}


header p {

    margin:
        5px
        0
        0;

    color: #777;
}


.estado {

    padding:
        9px
        15px;

    border-radius: 20px;

    font-size: 14px;

    font-weight: bold;

    background: #eee;
}


.estado.online {

    background: #dff6e8;

    color: #177245;
}


.estado.offline {

    background: #fde3e3;

    color: #a11;
}


/* =====================================================
   CONTENIDO
===================================================== */

main {

    max-width: 1200px;

    margin: auto;

    padding: 30px 20px;
}


.card {

    background: white;

    border-radius: 14px;

    padding: 25px;

    margin-bottom: 20px;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,0.05);
}


.cards {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 20px;
}


.cards .card {

    margin-bottom: 0;
}


.label {

    display: block;

    color: #777;

    font-size: 14px;

    margin-bottom: 12px;
}


.valor {

    font-size: 32px;

    font-weight: bold;
}


.temperatura {

    font-size: 50px;

    font-weight: bold;
}


.temperatura small,
.valor small {

    font-size: 16px;

    font-weight: normal;

    color: #777;
}


/* =====================================================
   DISPOSITIVO
===================================================== */

.dispositivo {

    display: flex;

    justify-content: space-between;

    gap: 30px;
}


/* =====================================================
   PWM
===================================================== */

h2 {

    margin-top: 0;

    margin-bottom: 25px;

    font-size: 20px;
}


.pwm {

    margin-bottom: 25px;
}


.pwm:last-child {

    margin-bottom: 0;
}


.pwm-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;
}


.progress {

    height: 18px;

    width: 100%;

    background: #e9ecef;

    border-radius: 10px;

    overflow: hidden;
}


.progress-bar {

    width: 0%;

    height: 100%;

    background: #3b82f6;

    transition:
        width
        0.3s;
}


/* =====================================================
   CHART
===================================================== */

.chart-container {

    width: 100%;

    overflow-x: auto;
}


canvas {

    max-width: 100%;
}


/* =====================================================
   TABLA
===================================================== */

.table-title {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.table-title h2 {

    margin: 0;
}


button {

    border: none;

    background: #20242a;

    color: white;

    padding:
        10px
        18px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;
}


button:hover {

    background: #363c45;
}


.table-container {

    margin-top: 20px;

    overflow-x: auto;
}


table {

    width: 100%;

    border-collapse: collapse;
}


th,
td {

    padding:
        12px
        10px;

    border-bottom:
        1px solid #eee;

    text-align: left;

    font-size: 14px;
}


th {

    color: #555;

    font-weight: bold;
}


tbody tr:hover {

    background: #f7f8fa;
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    text-align: center;

    padding: 25px;

    color: #888;

    font-size: 13px;
}


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

@media (
    max-width: 700px
) {

    header {

        padding: 20px;

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }


    .cards {

        grid-template-columns: 1fr;
    }


    .dispositivo {

        flex-direction: column;
    }

}
```