/* Estilos basados en Norma Gráfica del Gobierno de Chile */
/* Para probar: agregar <link rel="stylesheet" href="css/styles-gobierno.css"> después de styles.css en index.html */

:root {
    /* Paleta Oficial Gobierno de Chile */
    --primary-color: #003399;  /* Azul Institucional */
    --secondary-color: #EE3524; /* Rojo Institucional */
    --background: #FFFFFF;
    --card-background: #F2F2F2;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #DDDDDD;
    --success-color: #10b981;
    --danger-color: #EE3524; /* Usar rojo institucional */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Tipografía oficial */
body {
    font-family: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header con azul institucional */
header {
    background: linear-gradient(135deg, #003399, #0047b3);
}

/* Botones principales con azul institucional */
.btn-filter {
    border-color: #003399;
}

.btn-filter:hover {
    border-color: #003399;
    background-color: rgba(0, 51, 153, 0.05);
}

.btn-filter.active {
    background-color: #003399;
    border-color: #003399;
}

/* Valores con azul institucional */
.stat-card .value {
    color: #003399;
}

/* Links con rojo institucional */
.view-chart-link {
    color: #003399;
    border-color: #003399;
}

.view-chart-link:hover {
    background: #003399;
    color: white;
    border-color: #003399;
}

/* Toggle switch con colores institucionales */
.slider {
    background-color: #003399;
}

.toggle-switch input:checked + .slider {
    background-color: #EE3524;
}

/* Botón scroll to top con azul institucional */
.scroll-to-top {
    background-color: #003399;
}

.scroll-to-top:hover {
    background-color: #00297a;
}

/* Sidebar con fondo gris oficial */
.sidebar {
    background-color: #F2F2F2;
}

/* Acentos rojos para cambios negativos */
.stat-card .change.negative {
    color: #EE3524;
}

/* Color neutral para sin cambios */
.stat-card .change.neutral {
    color: #666666;
}

/* Cards con fondo gris oficial */
.stat-card {
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 0.75rem;
}

.stat-card h3 {
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
}

.stat-card .value {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.stat-card .change {
    font-size: 0.75rem;
}

.stat-card .view-chart-link {
    margin-top: 0.4rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.chart-container {
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
}

/* Títulos en negrita */
h1, h2, h3 {
    font-weight: 700;
}

/* Grid más compacto con tarjetas más angostas */
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

/* Header de valores actuales con estilo institucional */
.current-values-header {
    background: linear-gradient(135deg, #003399, #0047b3);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 51, 153, 0.15);
}

.current-values-header h2 {
    color: white;
    margin: 0;
    font-size: 1.75rem;
}

.current-values-header .current-date {
    color: rgba(255, 255, 255, 0.9);
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
}