:root {
    --bg-color: #0f172a;       
    --surface-color: #1e293b;  
    --primary-color: #0ea5e9;  
    --primary-hover: #0284c7;
    --success-color: #10b981;  
    --success-hover: #059669;
    --text-main: #f8fafc;      
    --text-muted: #94a3b8;
    --border-color: #334155;
    --error-color: #ef4444;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); height: 100vh; overflow: hidden; }

.hidden { display: none !important; }
.active { display: flex !important; }

/* === LOGIN === */
#login-view { height: 100vh; justify-content: center; align-items: center; }
.login-card { background: var(--surface-color); padding: 2.5rem; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); width: 100%; max-width: 400px; text-align: center; }
.login-card h1 { margin-bottom: 0.5rem; color: var(--primary-color); }
.login-card p { color: var(--text-muted); margin-bottom: 1.5rem; }
.input-group { margin-bottom: 1rem; }
.input-group input { width: 100%; padding: 0.75rem; background: var(--bg-color); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 6px; font-size: 1rem; transition: border-color 0.2s; }
.input-group input:focus { outline: none; border-color: var(--primary-color); }

/* === APP LAYOUT === */
#app-view { height: 100vh; flex-direction: column; }
.app-header { background: var(--surface-color); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
.app-content { display: flex; flex: 1; overflow: hidden; }

/* === SIDEBAR === */
.sidebar { width: 280px; background: var(--surface-color); border-right: 1px solid var(--border-color); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.menu-btn { width: 100%; padding: 0.75rem 1rem; text-align: left; background: transparent; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 0.95rem; color: var(--text-main); transition: all 0.2s; }
.menu-btn:hover { background: var(--bg-color); border-color: var(--primary-color); }
.menu-btn.active-menu { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.sandbox-btn { margin-top: auto; border-style: dashed; border-color: var(--primary-color); } 

/* === WORKSPACE === */
.workspace { flex: 1; padding: 2rem; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%); overflow-y: auto; }
.workspace-header { width: 100%; max-width: 800px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.action-buttons { display: flex; gap: 0.5rem; }
#graph-canvas { background: var(--surface-color); border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); }

.welcome-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); width: 100%; }

/* === MATRIZ DE ADYACENCIA === */
.matrix-table { width: 100%; border-collapse: collapse; text-align: center; }
.matrix-table th { padding: 0.75rem; color: var(--primary-color); font-weight: bold; }
.matrix-table td { padding: 0.25rem; }
.matrix-input { width: 100%; padding: 0.5rem; background: var(--bg-color); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 4px; transition: border-color 0.2s; }
.matrix-input:focus { outline: none; border-color: var(--primary-color); }
.matrix-input:disabled { background: var(--surface-color); color: var(--text-muted); cursor: not-allowed; border: none; }

/* === BUTTONS === */
.btn { padding: 0.75rem 1.5rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.primary-btn { background: var(--primary-color); color: white; width: 100%; }
.primary-btn:hover { background: var(--primary-hover); }
.success-btn { background: var(--success-color); color: white; }
.success-btn:hover { background: var(--success-hover); }
.success-btn:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; }
.outline-btn { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); }
.outline-btn:hover { background: var(--bg-color); border-color: var(--text-main); }