@import url("./layout/_variables.css");
@import url("./layout/_layout.css");


/* =========================================================
   LAYOUT / COMPONENTES
   ========================================================= */

@import url("./layout/_sidebar.css");
@import url("./layout/_header.css");


/* =========================================================
   MÓDULOS
   ========================================================= */

@import url("./modulos/temperatura/_temperatura.css");
@import url("./modulos/humedad/_humedad.css");
@import url("./modulos/viento/_viento.css");
@import url("./modulos/precipitacion/_precipitacion.css");
@import url("./modulos/presion/_presion.css");
@import url("./modulos/radiacion/_radiacion.css");

/* =========================================================
   GRILLA DE MÓDULOS

   12 columnas:
   full  = 12
   half  = 6
   third = 4
   ========================================================= */

.gt-dashboard-modulos {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 18px;

    margin-top: 10px;
}


.gt-dashboard-modulo {
    min-width: 0;
}


.gt-dashboard-modulo--full {
    grid-column: span 12;
}


.gt-dashboard-modulo--half {
    grid-column: span 6;
}


.gt-dashboard-modulo--third {
    grid-column: span 4;
}

/* =========================================================
   RESPONSIVE · GRILLA GENERAL
   ========================================================= */

@media (max-width: 1100px) {
    .gt-dashboard-modulo--third {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .gt-dashboard-modulos {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 10px;
    }

    .gt-dashboard-modulo--full,
    .gt-dashboard-modulo--half,
    .gt-dashboard-modulo--third {
        grid-column: 1;
    }
}