/* Estilos generales */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    color: #333;
}
#dashboard-container {
    padding: 24px;
    max-width: 1600px;
    margin: auto;
}
/* Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.dashboard-header h1 { margin: 0; font-size: 2em; }
.dashboard-header p { margin: 0; color: #666; }
#pdf-button {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
#pdf-button:hover { background-color: #0b5ed7; }

/* Grilla de KPIs */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}
.kpi-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.kpi-card.alert { border-left: 5px solid #dc3545; }
.kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.kpi-title { font-size: 1rem; color: #666; }
.kpi-card.alert .kpi-value { color: #dc3545; }

/* Grilla principal */
.main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    height: 60vh;
}
.map-container, .tabs-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#map { width: 100%; height: 100%; border-radius: 4px; }

/* Pestañas */
.tab-buttons { border-bottom: 1px solid #dee2e6; margin-bottom: 16px; }
.tab-link {
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 1rem;
    color: #6c757d;
    border-bottom: 3px solid transparent;
}
.tab-link.active { color: #0d6efd; border-bottom-color: #0d6efd; font-weight: bold; }
.tab-content { display: none; }
.tab-content.active { display: block; }
canvas { max-height: 200px; margin-bottom: 20px; }

/* Tabla de Obras */
#obras-table { width: 100%; font-size: 0.9em; }
.progress-bar {
    width: 100%;
    background-color: #e9ecef;
    border-radius: .25rem;
    height: 10px;
}
.progress-bar-inner {
    height: 100%;
    background-color: #fd7e14;
    border-radius: .25rem;
}