/* ============================================================
   PANEL METEOROLÓGICO · MATERIAL DARK · MINIMALISTA · MODERNO
   Optimizado para Bootstrap 5 + Chart.js + Dashboard.js
   Iconos: Material Symbols Rounded (Google)
   ============================================================ */

/* ------------------------------
   PALETA PRINCIPAL
   ------------------------------ */
:root {
    --bg-main: #121212;
    --bg-surface: #1e1e1e;
    --bg-surface-hover: #242424;

    --text-primary: #ffffff;
    --text-secondary: #bdbdbd;

    --accent-blue: #90caf9;
    --accent-yellow: #ffeb3b;
    --accent-green: #81c784;
    --accent-orange: #ffb74d;
    --accent-red: #ef5350;
}

/* ------------------------------
   BASE GENERAL
   ------------------------------ */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    font-family: "Inter", "Roboto", sans-serif;
}

/* Iconos Material Symbols */
.material-icon {
    font-family: "Material Symbols Rounded" !important;
    font-weight: 400;
    font-size: 1.6rem;
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
}

/* ------------------------------
   HEADER
   ------------------------------ */
.header-ies {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.header-ies h1 {
    font-size: 1.8rem;
    font-weight: 700;
}

.header-ies h2 {
    font-size: 1rem;
    color: var(--text-secondary);
}

.logo-ies {
    height: 70px;
}

/* Botón fullscreen */
#fullscreen-btn {
    background-color: transparent;
    border: 1px solid #555;
    color: #ddd;
    border-radius: 6px;
    padding: 4px 10px;
    transition: 0.2s;
}

#fullscreen-btn:hover {
    background-color: #333;
}

/* ------------------------------
   TARJETAS PRINCIPALES
   ------------------------------ */
.card {
    background-color: var(--bg-surface) !important;
    border: none !important;
    border-radius: 14px !important;

    box-shadow:
        0 2px 4px rgba(0,0,0,0.35),
        0 6px 12px rgba(0,0,0,0.25);

    padding: 1.2rem !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.45),
        0 10px 20px rgba(0,0,0,0.35);
}

.card h2 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* ------------------------------
   ICONOS METEOROLÓGICOS (Material Symbols)
   ------------------------------ */

#temp-now::before {
    content: "thermostat" !important;
}

#hum-now::before {
    content: "water_drop" !important;
}

#wind-now::before {
    content: "air" !important;
}

#wind-dir-now::before {
    content: "explore" !important;
}

#rain-now::before {
    content: "rainy" !important;
}

#dew-now::before {
    content: "ac_unit" !important;
}

#solar-now::before {
    content: "sunny" !important;
}

#uv-now::before {
    content: "brightness_high" !important;
}

#press-now::before,
#press-abs-now::before {
    content: "speed" !important;
}

#temp-in-now::before {
    content: "thermostat" !important;
}

#hum-in-now::before {
    content: "water_drop" !important;
}

/* Aplicar estilo a todos los iconos */
#temp-now::before,
#hum-now::before,
#wind-now::before,
#wind-dir-now::before,
#rain-now::before,
#dew-now::before,
#solar-now::before,
#uv-now::before,
#press-now::before,
#press-abs-now::before,
#temp-in-now::before,
#hum-in-now::before {
    font-family: "Material Symbols Rounded" !important;
    font-size: 1.6rem;
    margin-right: 6px;
    vertical-align: middle;
    display: inline-block;
}

/* Flecha del viento */
#wind-arrow {
    color: var(--accent-blue);
    font-size: 2rem;
}

/* ------------------------------
   SECCIONES Y TÍTULOS
   ------------------------------ */
.section-title {
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ------------------------------
   GRÁFICOS
   ------------------------------ */
.chart-box {
    background-color: var(--bg-surface) !important;
    border-radius: 14px;
    padding: 1.2rem;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.35),
        0 6px 12px rgba(0,0,0,0.25);
}

.chart-box h3 {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* ------------------------------
   FOOTER
   ------------------------------ */
footer {
    color: var(--text-secondary);
}

footer a {
    color: var(--accent-blue) !important;
}