/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables de tema */
:root {
    --transition-fast: 0.18s;
}

/* Tema oscuro: valores actuales guardados como "dark" */
.theme-dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --muted-border: #334155;
    --primary: #38bdf8;
    --primary-600: #0ea5e9;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --danger: #dc2626;
    /* paleta para gráficas (CSS vars accesibles por CSS/JS si se desea) */
    --chart-0: #636efa;
    --chart-1: #ef553b;
    --chart-2: #00cc96;
    --chart-3: #ab63fa;
    --chart-4: #19d3f3;
    --chart-5: #e763fa;
    --chart-6: #fecb52;
    --chart-7: #ffa15a;
    --chart-8: #ff6692;
    --brand: #0ea5e9;     /* azul claro */
    --accent: #38bdf8;    /* azul más brillante */
}

/* Tema claro: nuevo tema */
.theme-light {
    --bg: #f8fafc;
    --surface: #ffffff;
    --muted-border: #e6eef6;
    --primary: #0ea5e9;
    --primary-600: #0284c7;
    --text: #0f172a;
    --muted: #475569;
    --danger: #dc2626;
    --chart-0: #1f77b4;
    --chart-1: #ff7f0e;
    --chart-2: #2ca02c;
    --chart-3: #d62728;
    --chart-4: #9467bd;
    --chart-5: #8c564b;
    --chart-6: #e377c2;
    --chart-7: #7f7f7f;
    --chart-8: #bcbd22;
    --brand: #0284c7;     /* azul más profundo */
    --accent: #0ea5e9;    /* azul claro */
}

/* Aplicación de variables */
body {
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

/* Navbar */
.navbar {
    background-color: var(--surface);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--muted-border);
}

.navbar a {
    color: var(--text);
    text-decoration: none;
    margin-left: 1rem;
    font-weight: 500;
}

.navbar a:hover {
    color: var(--primary);
}

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--muted-border);
    color: var(--text);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.theme-toggle-btn:hover {
    background-color: var(--primary);
    color: var(--bg);
    border-color: var(--primary-600);
}

/* Contenedor principal */
.main-container {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Tarjetas de métricas */
.card {
    background-color: var(--surface);
    border: 1px solid var(--muted-border);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.03);
}

.card h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.card p {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Botones */
.button {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    color: var(--bg);
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    background-size: 200% 100%;
    background-position: left;
    transition: background-position 0.4s ease;

}

.button:hover {
    background: linear-gradient(90deg, var(--accent), var(--brand));
    background-position: right;
}

/* Tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--muted-border);
}

th {
    background-color: var(--surface);
    color: var(--primary);
}

td {
    background-color: var(--bg);
}

/* Encabezados */
h1, h2 {
    margin-bottom: 1rem;
    color: var(--primary);
}

/* Contenedor del formulario de login */
.form-container {
    background-color: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    max-width: 400px;
    margin: 4rem auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.03);
    text-align: center;
}

.form-container h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.form-container input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--muted-border);
    border-radius: 8px;
    background-color: var(--bg);
    color: var(--text);
    font-size: 1rem;
}

.form-container input::placeholder {
    color: var(--muted);
}

.btn {
    background-color: var(--primary);
    color: var(--bg);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease;
}

.btn:hover {
    background-color: var(--primary-600);
}

/* Mensaje de error */
.alert-error {
    background-color: var(--danger);
    color: white;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: bold;
}

.filtro-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}


.form-filtros {
    background-color: var(--surface);
    padding: 1.5rem 1rem 1rem; /* Reducido el padding inferior */
    border-radius: 12px;
    align-self: flex-start; /* Alinea el panel de filtros al inicio */
}

.filtro-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna para el panel lateral */
    gap: 1rem;
}

.filtro-grid label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: bold;
    color: var(--primary);
}

.filtro-grid select {
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--muted-border);
}

.filtro-grid select[multiple] {
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--muted-border);
    padding: 0.5rem;
    border-radius: 8px;    
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
.filtro-grid select[multiple]:hover {
    background-color: var(--bg);
    color: var(--text);
}
.filtro-grid select[multiple] option {
    background-color: var(--bg);
    color: var(--text);
    padding: 0.5rem;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
/* Opciones seleccionadas dentro del select múltiple */
.filtro-grid select[multiple] option:checked {
    background-color: var(--primary);
    color: var(--text);
    padding: 0.5rem;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;  
}
.filtro-grid select[multiple] option:hover {
    background-color: var(--muted-border);
    color: var(--text);
}

.grafica-container {
    background-color: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.03);
    /* Añadido para que el contenedor pueda actuar como un flex parent para la gráfica */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Necesario para que flex funcione correctamente en algunos navegadores */
}

/* Forzar a elementos gráficos a escalar al contenedor */
.grafica-container > * {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.grafica-container canvas,
.grafica-container svg,
.grafica-container iframe,
.grafica-container .plotly-graph-div {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
    height: calc(100vh - 100px); /* ajuste seguro si hay header/footer; modifícalo si es necesario */
    padding: 10px;
    box-sizing: border-box;
}

.dashboard-container .form-filtros {
    flex: 0 0 280px; /* Ancho fijo para el panel de filtros */
}

.dashboard-container .grafica-container {
    flex: 1; /* La gráfica ocupa el espacio restante */
}
.grafica-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--muted-border);
    border-radius: 10px;
    /* Cambiado para que ocupe el 100% del espacio vertical y horizontal disponible */
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

/* Estilos para la página de menú */
.content-wrapper {
    text-align: center;
    margin-top: 2rem;
}

.menu-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Estilos para el formulario de subida */
.upload-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}