/* ============================================================
   Base + sistema de temas (claro / oscuro) via variables CSS.
   El tema se aplica con  <html data-theme="light|dark">.
   ============================================================ */
:root,
:root[data-theme="dark"] {
    --bg-color: #0b0f19;
    --bg-grad-1: rgba(59, 130, 246, 0.15);
    --bg-grad-2: rgba(239, 68, 68, 0.10);
    --panel-bg: rgba(20, 26, 40, 0.6);
    --panel-border: rgba(255, 255, 255, 0.08);
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
    --input-bg: rgba(0, 0, 0, 0.25);
    --hover-bg: rgba(255, 255, 255, 0.05);
    --soft-bg: rgba(255, 255, 255, 0.04);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --chart-grid: rgba(255, 255, 255, 0.07);
    --chart-tick: #94a3b8;
    --chart-label: #cbd5e1;
    --legend-bg: rgba(15, 23, 42, 0.92);
    --popup-bg: #1e293b;
    --blur: blur(12px);
}

:root[data-theme="light"] {
    --bg-color: #eef2f7;
    --bg-grad-1: rgba(59, 130, 246, 0.10);
    --bg-grad-2: rgba(239, 68, 68, 0.06);
    --panel-bg: rgba(255, 255, 255, 0.88);
    --panel-border: rgba(15, 23, 42, 0.12);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --danger: #dc2626;
    --warning: #d97706;
    --success: #059669;
    --input-bg: rgba(15, 23, 42, 0.04);
    --hover-bg: rgba(15, 23, 42, 0.05);
    --soft-bg: rgba(15, 23, 42, 0.035);
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    --chart-grid: rgba(15, 23, 42, 0.08);
    --chart-tick: #64748b;
    --chart-label: #334155;
    --legend-bg: rgba(255, 255, 255, 0.95);
    --popup-bg: #ffffff;
    --blur: blur(8px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    min-height: 100vh;
    background-image:
        radial-gradient(at 0% 0%, var(--bg-grad-1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, var(--bg-grad-2) 0px, transparent 50%);
    background-attachment: fixed;
    transition: background-color 0.3s, color 0.3s;
}

.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

/* --- theme toggle button --- */
.theme-toggle {
    background: var(--soft-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--hover-bg); transform: translateY(-1px); }

/* --- LOGIN STYLES --- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
}

.login-container .theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.logo-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Marca institucional. Sustituye a los emoji y a las iniciales «SR» que hacían de logo:
   una plataforma oficial que se presenta con un emoji de microscopio no se lee como
   oficial. El PNG va sin fondo, así que funciona igual en tema claro y oscuro. */
.logo-marca {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 1rem;
    object-fit: contain;
    /* El escudo es azul y verde oscuros: sobre el fondo oscuro se hunde y solo se
       distingue la cruz. Un soporte claro lo despega sin repintar el logo, y en tema
       claro no hace falta porque el contraste ya existe. */
    border-radius: 18px;
    padding: 7px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}
:root[data-theme="light"] .logo-marca {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.logo-marca-sm {
    width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto;
    border-radius: 9px; padding: 3px; background: rgba(255, 255, 255, .92);
}
:root[data-theme="light"] .logo-marca-sm { background: transparent; padding: 0; }

.login-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.input-group {
    text-align: left;
    margin-bottom: 1.25rem;
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.input-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: var(--input-bg);
    color: var(--text-main);
    outline: none;
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-color: var(--accent);
}

.btn-primary {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

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

.error-msg {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* --- DASHBOARD STYLES --- */
.dashboard-body {
    display: flex;
}

.sidebar {
    width: 260px;
    height: 100vh;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-right: 1px solid var(--panel-border);
    border-top: none;
    border-bottom: none;
    border-left: none;
    position: fixed;
    z-index: 1000;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.sidebar-header .logo-icon {
    font-size: 2rem;
    margin-bottom: 0;
}

.nav-links {
    list-style: none;
    flex: 1;
}

.nav-links li {
    margin-bottom: 0.5rem;
}

.nav-links a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
}

.nav-links li.active a, .nav-links a:hover {
    background: rgba(59, 130, 246, 0.12);
    color: var(--text-main);
}

.user-info {
    padding-top: 1.5rem;
    border-top: 1px solid var(--panel-border);
}

.user-info p {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.role-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.btn-logout {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
}

.btn-logout:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    margin-left: 260px;
    padding: 2.5rem 3rem;
    min-width: 0;
}

.top-header {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.top-header p {
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Botón hamburguesa: oculto en escritorio, y en móvil un hijo más de la barra superior
   (no un elemento flotante). Flotando quedaba por debajo de la barra fija y era
   inalcanzable con el dedo. */
.menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: var(--soft-bg);
    color: var(--text-main);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.menu-toggle:hover { background: var(--hover-bg); }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
/* La clase la pone el JS al abrir el menú. Se intentó con un selector de hermano posterior
   desde el menú, pero no casa nunca: el fondo está ANTES del menú en el documento, así que
   el fondo oscurecido no aparecía jamás. */
.sidebar-backdrop.visible { display: block; }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.kpi-card { padding: 1.5rem; }

.kpi-card h4 {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.kpi-value { font-size: 2.5rem; font-weight: 800; }

.warning { color: var(--warning); }
.danger { color: var(--danger); }
.success { color: var(--success); }
.highlight { color: var(--accent); }

.charts-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.chart-card { padding: 1.5rem; }
.chart-card h3 { margin-bottom: 1.5rem; font-size: 1.1rem; }
.map-container { padding: 1.5rem; margin-bottom: 2rem; }
.map-container h3 { margin-bottom: 1.5rem; font-size: 1.1rem; }

.upload-result {
    margin-top: 1rem;
    font-size: 0.9rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    display: none;
}

/* ============================================================
   RESPONSIVE — sidebar colapsable + ajustes generales
   ============================================================ */
@media (max-width: 980px) {
    .menu-toggle { display: inline-flex; }
    .sidebar {
        /* En una pantalla de 360 px un menú de 260 px deja el contenido invisible detrás:
           se acota a una fracción del ancho para que se siga viendo dónde estabas. */
        width: min(260px, 84vw);
        transform: translateX(-100%);
        box-shadow: var(--shadow);
    }
    .sidebar.open { transform: translateX(0); }
    .main-content {
        margin-left: 0;
        /* Sin el botón flotante ya no hace falta reservar 4.5rem arriba: el hueco de la
           barra fija lo pone `.dashboard-body { padding-top }`. */
        padding: 1.25rem 1.25rem 2rem;
    }
}

@media (max-width: 560px) {
    .main-content { padding: 1rem .85rem 1.5rem; }
    .top-header h1 { font-size: 1.35rem; }
    .login-container { padding: 2.25rem 1.25rem; }
    .kpi-value { font-size: 1.9rem; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
}

/* Ningún ancho debe empujar la página de lado: en un celular el desplazamiento
   horizontal del documento entero hace que la barra fija se salga de sitio. Lo que sea
   más ancho que la pantalla se desplaza DENTRO de su panel (ver .d-table-wrap), no
   arrastrando el documento. No se recorta el contenido aquí: los modales cuelgan de
   <main> y un overflow en el ancestro puede comérselos. */
html, body { max-width: 100%; }